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

2010. 9. 20. 23:47UI 가벼운 이야기
위승용 uxdragon


최근 아이폰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 사내메일의 '[정보디자인] 아이폰 락스크린 요일표시' 라는 글에서 인용 [본문으로]
  • 프로필사진
    이 재용2010.09.21 12:58 신고

    우와 정말 대단합니다. 이런 디테일을 UI관점에서 비교하는 글은 처음 봐요...

  • 프로필사진
    김금룡2010.09.26 12:55

    와우.ㅎ 디테일 이면에 있는 통찰까지!

  • 프로필사진
    無異2010.09.30 10:51 신고

    1.
    음악 리스트 화면(재생 앨범 곡목록)은 100곡이상을 대비한다는 구조적인 요구보다는 그냥 심미적인 결정인것 같네요. 타이틀의 곡정보,별표 레이팅,곡제목이 3컬럼의 그리드에 맞추어 정렬이되니 좀 더 깔끔해 보입니다. 이 화면은 앨범의 곡목록을 보여주는건데 100곡이상인 앨범은 없거든요. cd는 최대 트랙이 99번까지에요.(히든트랙이 99번에 있는 cd를 가지고 있었거든요)
    번호에 점은 번호 공간이 넓어져서 썰렁해보이니까 넣은 것같아요. 원래는 아래의 앨범 선택시 목록 화면처럼 미니멀하게 점이 꼭필요한게 아니면 그냥 막 뺐거든요.

    2.
    동영상 재생화면의 확대축소 아이콘은 정확히 말하면 크기보다는 비율에 관한 기능입니다. 기본은 원래 비율에 맞춰서 보여주는거고(fit to the screen) 확대를 하면 레터박스없이 스크린비율에 맞게 크랍하여 전체화면을 채워줍니다(fill the screen). 스크린비율에 맞게 인코딩된 동영상은 두 모드가 똑같은 화면을 보여주므로 모드 전환이 필요 없으니까 버튼을 생략하나봅니다.

    3.
    locale에 신경을 쓰고 있네요. "시작 & 종료"같은 어색한 표현을 "시작 및 종료"로 바꾸고 "하루종일"같은 잘못된 띄어쓰기도 "하루 종일"로 고쳤습니다. 캡처된 메일 리스트에 보이는 "받은편지함"은 제 폰에서는 "받은 편지함"으로 수정되어 있네요.
    락스크린과는 다르게 캡처된 일정 설정 화면에는 요일에 괄호가 없네요. 괄호를 넣으면 공간이 모자를 것 같으니까 규칙을 유연하게 적용하나봅니다. 더 이상 여유공간이 없어보이는 저 상태에서 날짜가10월 18일로 한자리 더 늘어나면 어떻게 될까 궁금했는데요. 재밌게도 10.10.18 형태로 바뀝니다. i18n이 region format을 공간이 부족한 경우를 위한 간략표시를 추가로 정의하고 있나봅니다. 하지만 저렇게 포맷이 확 바뀌는건 좀 문제가 있는것 같은데요. iOS 4.2를 확인해보니 단지 요일만 생략하는 형태로 다시 수정되었네요.

    4. spotlight의 검색결과창은 검색입력필드의 여백에 맞춰서 살짝 들어와 있습니다. 그러니까 스크롤바의 절대적인 위치는 검색결과창 바깥에 있는게 다른 앱과 일관성이 있었던거죠. 개발자의 입장에서는. 하지만 어떻게 보이냐(느끼는가)의 일관성이 중요하니까 수정했네요.

  • 프로필사진
    passioneyes2010.11.09 13:05

    날카로운 비교글 감사히 잘 읽고갑니다~