• Jowrney Stacey
  • Jowrney Studio
  • Jowrney Farm
 (Since 2006.01)
Article Info
JOWRNEY
Sharing

 

애플의 아이패드가 아직 국내에 들어오지 않은 시점임에도 불구하고 많은 이들이 아이패드를 구입한 것으로 보입니다.

실제로 출퇴근 길에 아이패드를 들고 무언가를 하는 사람들을 적잖게 볼 수 있습니다.

혹자 아이패드를 아이폰을 크게 확대했을 뿐이라고 평가절하하는 사람도 있지만,

아이패드가 1024 x 768의 화면사이즈로 늘어난 것은 아이폰과는또 다른 의미를 가진다고 볼 수 있습니다.

틈틈히 아이패드에 대한 분석을 하며 우리팀(9Flux)에서도 아이패드 관련 앱과 도서를 출판 할 계획입니다.

 

오늘은 아이패드에가 가장 큰 이슈가 되고 있는 전자출판에 한 예를 살펴보려고 합니다.

소문으로 이미 많이 알려진 WIRED MAGAZINE에 대해서 실제 사용해보고 느낀 것을 적어볼까 합니다.

세계적인 디자인 잡지인 WIRED는 그래픽 디자인은 물론 뉴미디어에 관한 최신정보를 수록하고 있어 많은 사람들에게는

물론 세계유수의 디자이너들에게도 인기가 많습니다.

지난 5월 26일 아이패드용으로 출간된 WIRED MAGAZINE(2010년 6월호) 어플이 발매된지 일주일도 안된 5월 31일 다운로드가 6만건에 이를 정도로 큰 이슈였습니다.

직접 다운로드하고 WIRED MAGAZINE(이후 와이어드)을 이용하면서 UX/UI 측면에서 바라보고 간단히 정리한 내용을 보면 다음과 같습니다.

 

1. 레이어 컨텐츠(Layer Contents)

2. 상하 페이징 컨텐츠(Up-Down Paging Contents)

3. 회전 컨텐츠(Rotate Contents)

 

물론 컨텐츠의 타입별로 나무면 텍스트, 이미지, 영상 등으로 나눌 수도 있지만, 아이폰과 가장 큰 차이가 나는 부분인 화면이 늘어나면서

변화된 부분만을 다루기 위해 레이아웃 측면에서 바라보면서 분류해보았습니다. 지금부터 하나씩 살펴볼까 합니다.

 

wired01.JPG

 

1. 레이어 컨텐츠(Layer Contents)

레이어 컨텐츠는 각 페이지의 텍스트, 이미지, 버튼, 동영상을 레이어에 올려둔 느낌입니다. 이는  전자잡지이기 때문에 가질수 있는 터치 인터렉션을 가질 수 있습니다. 와이어드에서 주로 사용하는 사용자 인터렉션에 대한 내용은 다음과 같습니다.

- 스와이프 컨트롤(Swipe Control)

- 사운드 컨트롤(Sound Control)

- 버튼 컨트롤(Buttons Control)

- 셔플 컨트롤(Shuffle Control)

- 스케일 컨트롤(Scale Control)

- 하이퍼 링크(Hyper Link)

- 동영상링크(Movie Play)

 

특히 각 인터렉션을 인지하기 위해서 사용자가 인지할 수 있는 블랙컬러의 아이콘으로 표시되어 있습니다.

물론 와이어드에서 정의한 내용이기 때문에 다른 잡지의 경우에는 다른 규칙들을 이용하겠지요.

 

1_1. 스와이프 컨트롤(Swipe Control)

 

스와이프 컨트롤은 흔히 좌우 또는 우좌로 세게 밀듯이 움직이는 행위로 아이폰에서는 스와이프 액션을 주면 삭제버튼이 나타나거나 합니다.

와이어드에서는 360VR 컨텐츠라든가 동영상 플레이어에서 플레이 헤드를 잡고 움직이는 것과 같은 효과를 주고 싶은 컨텐츠에 이용하고 있습니다.

wired02.JPG

 

 

1_2. 사운드 컨트롤(Sound Control)

 

사운드 컨트롤은 음성 재생을 의미하는 것으로 Play와 Pause를 토글 형식으로 제공합니다. 재생이 되는 원형 아이콘에는 현재 진행된 프로그래스 바가 파란색으로 표시됩니다.

wired08.JPG   

 

 

1_3. 버튼 컨트롤(Button Control)

 

버튼 컨트롤은 주로 갤러리 같은 형의 여러개의 이미지와 썸네일 또는 번호로 나타내어 사용자가 해당 썸네일, 번호를 터치시 컨텐츠가 변경되어 보여주는 효과를 제공합니다.  

wired03.JPG

 

 

1_4. 셔플 컨트롤(Shuffle Control)

 

셔플 컨트롤은 여러개의 컨텐츠를 포개어 해당 컨트를 터치할 때마다 순차적으로 보여줍니다. 마지막 컨텐츠가 보여진 이후 다시 첫번째 컨텐츠가 보여집니다.

wired04.JPG  

 

 

1_5. 스케일 컨트롤(Scale Control)

 

스케일 컨트롤은 멀티터치를 이용하여 확대, 축소가 가능합니다. 와이어드에서는 일반적으로는 확대, 축소기능이 없다고 인지하고 사용하도록 유도하고 잇습니다.

wired05.JPG  

 

 

 

하이퍼링크의 경우 터치시 사파리 브라우저로 이동하며, 동영상링크의 경우 무비플레이어가 재생됩니다.

 

 

 

 

2. 상하 페이징 컨텐츠(Up-Down Paging Contents)

 

와이어드는 기본적으로 좌우로 페이징을 하게 되어 있습니다.  간혹 768 x 1024보다 세로로 긴 컨텐츠의 경우 상하로 컨트롤 할 수 있는데

와이어드에서는 페이지 디자인에서 상하 페이지가 있음을 인지하던지 터치해서 스크롤이 생기는 것을 봐야 확인할 수가 있습니다.

이는 조금 불편한 느낌이 들었습니다. 좀 더 명확하게 해당 컨텐츠가 더 있음을 보여줄 수 있는 명확한 인터페이스를 제공해주면 어떨까 하는 생각이 들었습니다. 그렇다면 사용자의 의미없는 터치도 줄어들테니까요.

  wired07.JPG

 

 

3. 회전 컨텐츠(Rotate Contents)

 

아이패드의 G(중력)센서를 이용한 컨텐츠로 주로 와이어드에서는 광고에 이용된 것을 볼 수 있습니다.

다음에 다루고자 하는 TIMES에서 언급을 할 내용이지만 TIMES에서는 가로로 볼때와 세로로 볼때 레이아웃이 변경 되는 구조로 된 것과는

다릅니다.

wired06.JPG  

 

출판사에서는 영상과 소리 등의 시청각적 모든 요소를 제약없이 사용가능하니 보다 역동적인 잡지를 만들 수 있습니다.

가장 먼저 이슈가 되었던 "이상한 나라의 앨리스"에서 사용자의 흥미 위주의 인터렉션이었다면 와이어드는 좀 더 규격화 시킨 느낌이 들었습니다. 아직 아이패드가 시장을 얼마나 영향을 줄 수 있을 지 알수는 없으나 분명한 것은 정체되어 있던 출판업계의 신호탄이 되는 것은 분명합니다. 또한 책과 어플의 경계가 모호해지고 마케팅영역의 광고방식에도 다양한 패러다임을 제시할 것으로 예상됩니다.

FIN.

 

 ------------------------

profile.jpg

Jowrney Kim(저니)  |  http://v1.jowrney.com

저니닷컴 운영자 / 9FLUX / 스크립트 디자이너
디자인과 개발을 모두 경험을 토대로 현재 UX와 UI에 대해서 연구중이다.
농업기술과 IT기술의 융화를 고민하며 자전거 세계일주를 계획하고 있다.

- 스크랩하실 때엔 출처를 밝혀주시면 감사하겠습니다.

------------------------

 

 

  • JOWRNEY
  • 이 게시물을...
  • 첨부 8

디자인과 개발 경험을 토대로 현재 UX와 UI에 대해서 연구중입니다. 농업기술과 IT기술의 융화를 고민하며 자전거 세계일주를 계획중입니다.

인쇄
엮인글 발송
목록
Comments 1
2010.06.23 11:12:21 (*.166.119.56)
김현필

이게 뭥미....캬캬캬캬...아이패드 버리삼~~~ 느헤헤헤헤헤

목록 쓰기
번호
제목
글쓴이
18 User eXperience(UX) Living with Complexity - Don Norman 592 file
JOWRNEY
2011-07-20 11115
17 User eXperience(UX) http://meego.com/ 449
JOWRNEY
2011-03-08 11501
16 HTML&CSS http://www.html5rocks.com/mobile/mobifying.html 304
JOWRNEY
2011-03-08 6084
15 HTML&CSS http://onlinefontconverter.com 392
JOWRNEY
2011-03-01 19706
14 User Interface(UI) 저니의 12컬럼 그리드시스템 452 file
JOWRNEY
2011-01-05 11305
13 HTML&CSS 저니의 CSS스타일 정리 -ㅅ- 170
JOWRNEY
2011-01-05 5072
12 HTML&CSS jQuery 빠른 처리를 위한 CSS 셀렉터 사용팁 194
JOWRNEY
2010-11-19 6063
11 User Interface(UI) 팬그램... 149
JOWRNEY
2010-08-19 9137
10 HTML&CSS 내가 생각하는 HTML - HTML5 오픈 컨퍼런스 참가후기 2 186 file
JOWRNEY
2010-07-05 5533
User eXperience(UX) 아이패드 전자출판 WIRED 분석 1 72 file
JOWRNEY
2010-06-22 14631
8 SNS FACEBOOK-페이스북에서 하지말아야할 7가지!! 293
JOWRNEY
2010-05-20 9283
7 Scrap UX디자인의 정의 (쉬운버젼) 35
JOWRNEY
2010-04-19 4999
6 Thinking 아이폰의 제한적인 인터페이스에 대한 고찰 1 31 file
JOWRNEY
2010-04-15 4626
5 Scrap UX(User Experience) 란? UX 디자인 관련 다이어그램 Best 14 216 file
JOWRNEY
2010-02-18 14245
4 Scrap 사용자 행동 방식 - 평균 사용자의 행동 패턴 45 file
JOWRNEY
2010-02-18 5278
3 Scrap UX(사용자 경험) 디자인 - 전문가들이 사용하는 사용자 경험 설계 방법론 107 file
JOWRNEY
2010-02-18 6393
2 Scrap UX(사용자 경험) 디자인- 사용자 조사 방법론의 구분과 종류 file
JOWRNEY
2010-02-18 6021
1 Scrap UX(사용자 경험) 디자인- 주요 조사 방법론의 비교 16
JOWRNEY
2010-02-18 6185
목록 쓰기
< 1 >
Powered by XE, ModsAX and Jowrney studio.
jowrney@jowrney.com
stacey@jowrney.com
아래의 폰트를 설치하면 좀 더 나은 저니닷컴을 만나실 수 있습니다. :-)
나눔고딕 글꼴
저니닷컴은 Chrome, Safari에서 가장 아름답게 보여집니다.