철수네 소프트웨어 세상 [본점]

소프트웨어와 관련이 있다면 뭐든지 – I no longer work for Microsoft.

뉴욕타임즈의 Times Reader

leave a comment »

Times Reader – 뉴욕타임즈에서 WPF로 만든 뉴스리더

뉴욕타임즈에서 최근 마이크로소프트의 WPF를 기반으로 한 뉴스 리더를 제작하여 베타를 공개했습니다. (소식과 다운로드는 위의 링크를 참조)

Times Reader의 기능 요약을 번역하면 다음과 같습니다:

  1. 읽기 쉬운 포맷을 사용 – 실제 인쇄된 매체와 같은 폰트와 컬럼 구조를 사용합니다.
  2. 오프라인상태로 읽기 – 일분정도면 웹사이트에서 최신 뉴스와 사진들을 싱크할 수 있습니다.
  3. 아무것도 놓칠 필요가 없다 – “What’s Read(읽었던 기사)” 기능을 통해서 얼마나 읽었는가를 빠르게 보여주고 읽지 않은 기사들을 탐색할 수 있습니다.
  4. “News in Pictures(기사속 사진들)”을 탐색 – 오늘의 사진들을 슬라이드쇼로 보고 특정 사진을 클릭하여 관련된 기사를 읽을 수 있습니다.
  5. 자신의 것으로 만들기 – 저장, 인쇄, 이메일보내기 기능을 사용할 수 있습니다. 또한 기사의 글 일부를 하일라이트 시키거나 주석을 달 수 있습니다.
  6. 어디서든 읽을 수 있습니다. – Times Reader는 어떠한 스크린 크기라도 자동으로 정렬을 하여 울트라 모바일 컴퓨팅 디바이스에서부터 10피트 디스플레이 크기까지 어떤 크기에서 읽을 수 있습니다.

위의 리더를 리뷰해보면서 WPF와 WPF/E등 몇가지 이야기를 더 해보도록 하겠습니다. WPF는 Windows Presentation Foundation의 약자로 곧 정식버젼을 발표할 .NET Framework 3.0 플랫폼의 한 부분입니다. WPF의 역할은 기존의 화면을 보여주던 비트맵 방식을 확장하여 벡터기반으로 재정의하고 XAML이라는 객체기반 XML 포맷을 기준으로 재설계한 기존의 방식과는 다른 표현(Presentation) 패러다임입니다. 뉴욕타임즈는 이런 기능들이 가져올 수 있는 장점들을 직접 체험해보고자 Times Reader를 실험적으로 만들게 된 것입니다. 각 항목에 대해서 좀 더 자세히 살펴보도록 하겠습니다.

timesreader1

1. Times Reader를 처음 실행하면 기존에 있던 Zinio 리더등과 비슷한 ebook 리더의 레이아웃을 가진 화면을 보게됩니다. 혹은 CSS로 구성한 웹페이지나 InDesign이나 PageMaker로 인쇄를 위해 만들어놓은 정적인 페이지처럼 보일 수도 있습니다. 하지만, 조금 사용해보면 다르다는 것을 알 수 있습니다. 이들의 특징을 모두 가지고 있으면서 가장 다른 점은 고정된 Layout의 페이지가 아닌 유동적으로 변하는 Layout을 가졌다는 것입니다. 창의 크기를 늘이거나 줄이면 거기에 알맞는 컬럼수와 Layout으로 전체적인 구성이 바뀌게 된다는 것입니다.

이는 WPF의 기능중 하나인 FlowEngine에서 자동적으로 지원하는 기능입니다. 이전의 웹페이지에서는 볼 수 없는 precision으로 문서 전체를 페이지의 크기와 해상도등을 고려해서 적정한 Layout을 계산해주는 기능을 가집니다. PDF와 일부 겹치는 영역이 있어서 어도비에서 우려하고 있는 Vista에서 사용하게 될 페이지 기반 공개 문서 포맷인 XPS도 이 엔진을 기반으로 사용됩니다. (XPS에 관심이 있으시다면 뷰어를 포함한 Essential Pack예제 XPS 파일을 받으셔서 테스트해보세요^^)

2. Times Reader를 처음 띄우면 오프라인 상태로 읽을 수 있도록 그날(혹은 그시각)의 모든 기사와 사진 그리고 광고를 nyt와 싱크하여 로컬에 캐싱을 해 놓습니다. 이 데이타는 네트웍 연결이 끊기더라도 그대로 사용할 수 있는 데이타로 일정 크기가 되면 지워지는 다른 프로그램들과는 성격이 다른 이유로 계속 남게 됩니다. 이를 지우고자 할때는 Times Reader를 종료하고 \Program Files\New York Times\Times Reader\에 설치된  TimesReaderCacheCleaner.exe를 실행하면 됩니다.

timesreader5

캐싱된 데이타를 살짝 살펴보면 이미지이외에는 대부분 표준 xml을 사용하여 저장되며, 광고의 경우에는 OpenType 폰트와 xaml로 이루어져 Times Reader내에서 실행될 수 있는 파일을 포함하여 애니메이션이나 (위의 이미지처럼 – 컬럼비아 대학 광고) 다른 창을 띄워 설명을 보여주기도 합니다. 이 파일은 Office에서 사용되는 OpenXML 표준이나 XPS도 기반으로 한 Open Packaging Convention을 따릅니다. 즉 여러가지 파일이 한 컨테이너안에 해당 표준 형식으로 들어있게 된다는 이야기입니다. 표준이라는 말이 꽤 많이 나오죠?^^

timesreader4

3. 오른쪽 위편에 보시면 Show What’s Read라는 글귀를 보실 수 있고 이를 누르면 현재 섹션에서 지금까지 읽은 페이지들이 아랫쪽에 네모로 나타납니다. 옅은 회색 네모가 읽은 페이지들을 나타내고, 짙은 회색 네모가 읽지 않은 페이지를 나타내며, 이 위에 마우스를 가져가면 페이지의 제목과 이미지가 있다면 썸네일이 나타납니다.

timesreader3

더 나아가서 View all sections를 누르면 현재의 Section이 아니라 모든 섹션에서 읽은 페이지들을 볼 수 있습니다. 물론 지금까지 다운로드된 기사들을 모두 포함한 것이죠. 이를 통해서 기사들을 탐색하실 수도 있습니다.

timesreader6

4. 오른쪽 위에 More를 누르면 News in pictures 섹션을 보실 수 있습니다.

timesreader7

이 페이지에서는 현재 저장된 모든 이미지들을 순차적으로 탐색하거나 슬라이드쇼로 본 뒤에 원하는 이미지를 선택한 경우에 기사를 볼 수 있는 기능입니다.

5. 저장은 .trc파일로 할 수 있으며, 나중에 이 파일을 다시 볼 수 있게 됩니다. trc는 아마도 Times Reader Container의 약자 쯤 될 것 입니다. trc 파일 역시 Open Container Convention을 따르며, 이 안에는 실제 기사가 NYT 내부에서 사용되는 공개 XML 표준인 NITF 3.3으로 들어가 있습니다. 그러니까, 뉴욕타임즈 내에서 기사가 유통되는 포맷을 그대로 저장했다가 이를 처리해서 보여준다는 것이죠. 인쇄기능 역시 WPF 본연의 기능입니다. Presentation(표현)이라는 약어에는 화면 뿐만아니라 모든 Display 디바이스와 여러 종류의 출력물 그리고 저장된 형태까지 모두를 포함하는 의미를 담고 있습니다. 따라서 WPF가 화면에 보이는 것이 큰 코딩 없이 FlowEngine에서 사용한 문서 그대로 출력물과 최대한 동일할 수 있도록 해줍니다.

timesreader8

이외에도 위와같이 형광색으로 하일라이트 시키거나 노트를 붙이는 동적인 일들을 문서 자체에 포함시킬 수 있습니다. 이 주석이나 하일라이트 정보 또한 캐쉬에 xml형태로 저장됩니다.

timesreader2

6. 위의 그림을 보시면 왼쪽 아래에 A 폰트크기가 5단계로 되어있는데 이에 따라 기사는 컬럼과 Layout을 동적으로 바꿔가면서 폰트의 크기를 다르게 바꿔줍니다(브라우저처럼 폰트크기만 바꿔주는것이 아닙니다). 이는 위에서 언급한 Flow엔진에서 동적으로 처리를 하는 것입니다. 어디서든 읽을 수 있다는 기능은 아직은 윈도우가 설치된 어떤 Display에서도 Flow를 통해 읽기 좋게 렌더링이 가능하다는 뜻으로 해석해야합니다.

하지만, 차후에는 다양한 플랫폼과 디바이스를 지원할 수 있다는 뜻을 내포하기도 합니다. NYT의 설명으로는 WPF/E를 사용하여 지원할 수 있는 가능성이 있다는 이야기를 언급합니다.

WPF/E는 WPF가 WPF가 지원되는 곳 즉 윈도우가 설치된 곳에서만 동작하는데 반해, 범용적으로 사용될 수 있는 XAML의 일부분을 떼어내서 이를 지원하여 다양한 플랫폼의 클라이언트를 개발하고자 하는 프로젝트명입니다. WPF/E에서 E는 Everywhere의 약자로 NYT의 글에 따르면 맥, 유닉스, 모바일기기등을 위해 개발되고 있다고 합니다.

WPF가 어도비의 Flash(혹은 Flex등의 그 파생물)의 경쟁대상이라는 이야기들을 흔히 하지만, 굳이 경쟁대상을 따지자면 오히려 WPF/E가 그 경쟁대상이라고 볼 수 있습니다. WPF는 막강하지만 플랫폼에 구속된 Foundation이고 WPF/E는 다양한 플랫폼을 위한 클라이언트를 제공하게 되어 한 코드로 모두 동일한 결과물을 보여줄 수 있는 대상입니다. 아직은 정확한 이야기는 아니지만, SWF에 객체가 많거나 할때 문제시되던 퍼포먼스 문제도 해결할 요량인 것 같습니다.

이 리더가 공개된 이후로 맥유저들이 만들어달라는 요청을 많이 했다고 합니다. 하지만, NYT는 WPF를 사용하여 만든 Times Reader를 맥으로 포팅할 회사는 아닙니다. 대신 대안으로 위의 WPF/E를 기대하고 있다는 대답을 합니다.

結, Times Reader는 여러모로 마이크로소프트의 다음 패러다임인 .NET Framework 3.0에 들어간 새 Foundation중 하나인 WPF에 힘을 실어주는 프로젝트입니다. 공신력있는 뉴욕타임즈(NYT)에서 실험을 했다는 점과 다양한 XML 표준 포맷들이 사용된 점, NYT에서 사용하는 포맷 그대로 적용이 가능했다는 점, 그리고 맥유저로부터의 좋은 피드백이 있었다는 점등등 긍정적인 것 같습니다. 비록 아직 베타지만 도대체 WPF로 어떻게 눈을 즐겁게하는지 궁금하시다면 한번 설치해보심이 어떨까요^^

 p.s. 국내에도 nitf를 사용하는 곳이 있나요? 그렇다면 제휴를 통해 어렵지 않게 리더를 만들 수 있지 않을까하는 생각이 듭니다.^^

Advertisements

Written by charlz

2006년 9월 24일 , 시간: 오전 1:21

Uncategorized에 게시됨

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: