태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'아이폰4'에 해당되는 글 2건

  1. 2010.09.20 [UI 디테일] 아이폰4와 아이팟터치 UI 디테일 비교 (8) by 위승용 (uxdragon)
  2. 2010.08.31 기능배치의 원근법 (3) by 전성진
2010.09.20 23:47

[UI 디테일] 아이폰4와 아이팟터치 UI 디테일 비교


최근 아이폰4를 구매하였습니다. 그 전에는 아이팟 터치(2세대)를 사용했었는데, 아이폰4를 몇 일 동안 사용하면서 약간의 차이를 발견할 수 있었습니다. 이 차이는 아이팟 터치 (2세대)와 아이폰4의 차이라기 보다는 애플 OS 3.0과 4.0 의 차이로도 해석이 되겠지요. 기능상의 차이점은 스티브 잡스의 키노트나 다른 블로깅에서 잘 다루고 있습니다만, 저는 기능상의 차이점보다는 잘 알려지지 않은 디테일의 차이점들을 비교해보려고 합니다.

그림1. 잠금 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

메인화면은 이렇게 바뀌었습니다. 아이팟 터치에는 요일에 괄호를 치지 않았지만 아이폰4에는 요일에 괄호를 치고 있습니다.[각주:1] 이는 날짜와 요일의 구분을 용이하게 하는 것으로 생각합니다. 또한 잠금해제 아이콘도 디테일을 살렸습니다. 기존의 평평한 화살표 모양에서 그라데이션이 들어간 형태로 모양이 바뀌었습니다.

그림2. 검색 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

아이팟 터치 검색화면의 크롤바는 어색하게 최우측에 위치했습니다. 반면 아이폰4는 스크롤바의 위치가 리스트 안쪽으로 변경되었습니다.

그림3. 메일 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

메일 리스트 화면에서는 UI 가 약간 바뀌었습니다. 아이팟 터치의 메일 UI는 메일의 흐름을 파악하기 힘들었습니다. 아이폰4의 메일은 답글이 오고갔다면 답글의 히스토리를 관리해서 숫자로 보여줍니다. 리스트를 선택 하면 시작글과 해당 답글들의 목록이 보여집니다. 

그림4. 음악 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

음악 리스트 화면은 어떻게 바뀌었을까요? 다음 화면은 음악 재생시 우측 상단의 앨범 커버를 눌렀을때 나오는 화면입니다. 앨범 리스트 숫자에 점이 붙고 공간이 넓어졌습니다. 공간이 넓어진 이유는 숫자가 100단위 이상으로 생길 때를 대비한 것 같습니다.

그림5. 앨범 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

아티스트에서 앨범을 선택하면 나오는 리스트 화면도 바뀌었습니다. 아이팟 터치에서는 기본적인 리스트 구조를 가지고 있습니다. 반면 아이폰4는 앨범 UI가 좀 더 앨범의 리스트인양 바뀌었습니다.

그림6. 동영상 재생 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

동영상 재생 화면 에서는 우측 확대 축소 버튼이 삭제되었습니다. 확대 축소 버튼은 동영상 크기가 제공하는 화면보다 작을 경우 늘려서 보여주는 버튼입니다. 그러나 인코딩을 화면 사이즈에 딱 맞게 했을때는 이 버튼이 무의미합니다. 그래서 이 버튼을 제거하지 않았나 생각합니다. 화면 사이즈에 맞지 않는 동영상인 경우에도 동영상 확대 축소 버튼을 제공하지 않는지에 대해서는 확인해보지 않았기 때문에 알 수 는 없지만 아마도 제공하고 있지 않을까라고 조심스럽게 추측해봅니다.

그림7. 알람 설정 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

그 외에도 알람 설정 화면을 보시면 레이블의 변경, 날짜 규칙, 날짜 폰트 크기, 설명 문구의 제거 등을 보실 수 있습니다. 애플 인터페이스 가이드라인을 보시면 설명 문구에 대한 가이드라인이 있습니다만, 그것을 굳이 제거 한 이유는 설명 문구가 불필요하기 때문이라고 생각이 됩니다. 적어도 이 화면에서는 '이벤트의 자세한 내용 설정' 이라는 문구가 없어도 이해하는데는 문제가 없으니까요. 이 설정 화면 말고도 이런 방식으로 레이블, 폰트 크기, 규칙 등이 알게 모르게 개선되고 있음을 알 수 있습니다.


정리하며...

다음과 같이 아이폰 4와 아이팟 터치 2세대의 UI 화면 디테일을 비교해 보았습니다. '가이젠(改善)'은 생활의 모든 면을 계속 고쳐나간다는 일본의 생활철학에서 유래한 말입니다. 애플의 철학은 하나의 제품에서 끝나는 것이 아니라, 그것이 제대로 사용될때까지 끊임없이 디테일을 갈고 닦는것일지도 모르겠습니다. 끝은 존재하지 않습니다. 다만 끊임없는 수정과 개선이 존재할뿐입니다. 오늘도 디테일을 갈고 닦을 애플에게 한 수 배웁니다.


[참고##UI 디테일##]


  1. PXD 사내메일의 '[정보디자인] 아이폰 락스크린 요일표시' 라는 글에서 인용 [본문으로]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 8
Ad Test...
2010.08.31 15:50

기능배치의 원근법





르네상스 이래 원근법은 2차원의 평면에서 3차원의 입체를 표현하기 위한 기교로서 널리 활용되었는데, 시각적인 효과면에서 볼 때, 근경-중경-원경에 따른 시각적인 깊이감을 줌으로써 시선의 흐름을 유도하여 작가의 의도대로 '화면을 순차적으로 읽을 수 있게'하는 효과를 가지고 있습니다. 이러한 '효과'는 근,현대회화에서 선형원근법 뿐 아니라 면적, 형태, 컬러, 명도 등의 다양한 요소를 통하여 그 효과를 증대, 발전시키고 있죠. (난해한 근 현대회화를 감상할 때 자연스럽게 시선의 흐름을 느끼면서 감상하는 방법을 연습해보시기 바랍니다!)



이러한 원리는 정보디자인에서도 적용될 수 있는데요, 화면에서의 정보를 효과적으로 전달하기 위하여 즉, 어떤 정보부터 보아야 하는지, 어떤 정보가 중요한 것인지, 어떤 정보가 부차적인 것인지 등에 따라 시각적 요소들을 그룹핑한다거나 순차적으로 읽어나갈 수 있도록 의도적인 조정을 하게 됩니다. 

[Adward Tufte]



작가의 의도에 따라 필요 요소들의 의도적인 부각과 우선순위 부여, 생략과 감춤이라는 기교면에서 볼 때, 
서비스나 어플리케이션에서 주요 기능과 부차적 기능의 중요성에 따라 안배하여 배치하는 UI설계 측면과 상통하는 면이 있습니다.

아이폰을 사용하다보면 숨겨진 기능들을 종종 발견하게 됩니다. 중요한 기능들은 전면에, 직관적인 형태를 띠고 있으면서 부차적인 기능들, 우선순위에서 밀리는 기능들은 누가 알려 주기전엔 도저히 알 수 없을만큼 교묘하게 숨기고 있기도 합니다.

사용하고픈 기능이 숨겨져 있으면 어떤 때는 답답하고 화가 나겠지만 바로 이렇게 우선순위에 따라 드러내는 기능과 감추는 기능의 원근법 적용을 통하여 애플은 직관적인 UX를 달성하고 있습니다. 애플 '광팬'이 많은 이유도 이러한 원근법의 적용이 성공적으로 이루어지고 있기때문이 아닐까요?




[http://taptaptap.com/blog/10-useful-iphone-tips-and-tricks/]



[위와 동일 출처]





애플은 자신의 홈페이지를 통해서 이러한 팁을 교육시키고 있는데요, 단순하게 생각하면 '이러한 설명 없이도 직관적으로 알수 있게 만들어야 하지 않을까?'라고 불평을 할수도 있지만, 퍼소나의 관점에서 본다면 이러한 설명을 기꺼이 찾아서 습득하면서 즐겁게 사용하는 퍼소나를 위한 기능들이라고 볼 수도 있습니다. 또한 이렇게 퍼소나에 따라 '기능들에 대한 인지적 거리'조절을 통하여 중요한 기능들이 더욱 쉬워지고, 복잡한 기능들도 유용성을 잃지 않도록 하고 있습니다.

[http://www.apple.com/iphone/tips/]



실무를 하다보면 드러내는 것보다는 감추는 것이 더 어렵다는 것을 체감하게 됩니다. '이 기능을 좋아할 사용자도 있으니 잘 보이는 곳에 배치해야 한다, 자기에게 필요 없는 기능이면 사용하지 않으면 그만이니 문제 없는 것 아니냐...'이런 논리로 두서없이 기능들이 전면으로 나오면서 무엇부터 사용해야 할지 혼란스러운 UI가 만들어지게 됩니다.

기능배치에서의 원근법은 단순히 따르기만 하는 되는 법칙이 아니고 우선순위에 따라 보여지는 수준을 면밀히 검토하고 결정해야 하는 어려움이 있습니다만 적용의 필요성에 대해 공감하는 것으로도 의미가 있지 않을까 싶습니다.

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 3
Ad Test...