UI 디테일 비교와 지속적 개선
pxd 위승용(uxdragon)은 iPhone4와 iPod Touch(2세대)의 화면을 항목별로 나란히 비교하며, 기능 변화가 아닌 레이블·아이콘·스크롤바 위치·정보 그룹핑 같은 미세한 인터페이스 디테일이 OS 버전을 거듭하며 어떻게 다듬어졌는지를 짚는다. 애플 OS 3.0(아이팟 터치)과 4.0(아이폰4)의 차이로도 볼 수 있는 이 비교는, 새 기능 추가보다 기존 화면의 작은 결함을 계속 손보는 태도 자체를 관찰 대상으로 삼는다.
잠금 화면에서는 요일 표기에 괄호를 추가해 날짜와 요일의 구분을 쉽게 했고, 평평했던 잠금해제 화살표 아이콘에는 그라데이션을 넣어 입체감을 살렸다. 검색 화면에서는 스크롤바 위치를 화면 최우측(어색하게 붕 뜬 위치)에서 리스트 안쪽으로 옮겨 시각적 자연스러움을 개선했다. 메일 리스트 화면은 답글이 오간 스레드를 숫자로 묶어 보여줌으로써 대화 흐름을 한눈에 파악할 수 있게 했다. 음악·앨범 리스트 화면에서는 세 자리 이상 숫자를 대비해 여백을 넓히고, 리스트형이던 앨범 화면을 앨범처럼 보이는 형태로 바꿨다.
동영상 재생 화면에서는 화면 크기에 맞게 인코딩된 영상에는 무의미한 확대/축소 버튼을 제거했는데, 이는 필요할 때만 기능을 노출하고 불필요할 때는 과감히 걷어내는 판단을 보여준다. 알람 설정 화면에서는 설명 문구·레이블·날짜 규칙·폰트 크기 등을 정리해, 이해에 지장이 없다면 부가 설명조차 남기지 않는 절제된 태도를 드러낸다. 글쓴이는 이런 변화들을 일본의 생활철학에서 유래한 가이젠(改善)—완성된 끝이 아니라 생활의 모든 면을 계속 고쳐나간다는 태도—에 빗대며, 좋은 인터페이스에는 "끝"이 없고 끊임없는 수정과 개선만 있을 뿐이라고 정리한다.
같은 연재 중 더 이른 시점(2010-07-20)에 나온 글은 아이폰 Mail 앱과 구글 Mail 앱의 받은 편지함을 비교하며 같은 태도를 보여준다. 이메일 리스트에서 사용자가 가장 먼저 확인하는 정보는 수신 유무이며(수신 유무 > 보낸 사람 > 제목/내용 > 날짜 순), 문제는 이미 읽은 메일이 이 우선순위 판단에 불필요한 부하로 남는다는 점이다. 아이폰 Mail은 화면 좌측 여백—시선이 시작되는 지점—에 구분 기호 하나만 두어 안 읽은 메일을 아래로 훑어 내려가며 자연스럽게 찾도록 유도한 반면, 구글 Mail은 좌측에 (현재 맥락에서 우선순위가 낮은) 개별 선택 체크박스를 배치하고 수신 유무를 리스트 전체의 색상 변화로 표시해, 스크롤 중 잦은 색 대비가 시각적 피로를 키우고 읽은 메일은 dimmed 처리되어 가독성마저 떨어뜨린다고 지적한다. 필자는 "사용자는 작은 차이를 모를 수 있지만 머리 속의 신경과 손 끝은 기억한다"는 말로, 정보 우선순위 하나를 어디에 얼마나 절제된 신호로 배치하느냐가 체감 완성도를 가른다는 결론을 맺는다.
2012년 iOS6로 업데이트된 모바일 앱스토어를 다룬 후속 글은 화면 단위의 세부 비교를 넘어 정보 구조 자체의 변화를 분석한다. 앱스토어 메인 화면은 기존 리스트형 구조에서 iPad·Apple TV와 통일된 가로 스크롤 구조로 바뀌었고, 앱 검색 결과 화면은 한 항목에 더 풍부한 정보를 노출하도록 확장됐다. 앱 상세 화면은 원페이지 구조에서 '세부사항·리뷰·관련콘텐츠' 3개 탭으로 나뉘었으며, 스크린샷 이미지를 화면 최상단으로 옮겨 구매 전 이미지를 먼저 보려는 사용자 니즈—pxd 사내 rapid interview에서도 확인된 요구—를 해소했다. 탭 자체도 항상 고정되지 않고 일정 스크롤 위치에 도달하면 나타나는 유동적 구조로 설계돼, 탭이 공간을 항상 차지하는 문제와 스크롤 시 탭이 사라져 내비게이션이 어려워지는 문제를 동시에 해결했다. 앱 업데이트 화면 역시 앱마다 홈 화면으로 이탈해야 했던 기존 흐름 대신, 한 화면 안에서 아코디언 형태로 여러 앱의 업데이트 내역을 확인·실행할 수 있도록 단순화됐다. 글쓴이는 이런 변화가 UI 관점에서는 장점이 뚜렷하지만 UI 설계에 정답은 없으며, 결국 기획자의 관점과 퍼소나에 따른 트레이드오프 판단이 필요하다고 결론짓는다.
이 세 글은 pxd 블로그에서 오래 이어진 "[UI 디테일]" 연재의 초기 사례들이다. 이후 이 연재는 SNS 앱, 로그인 화면, 약관 동의, 지도 UI, 한글 입력, 모바일 제스처 등 다양한 서비스의 화면을 같은 방식—버전 간·서비스 간 화면을 나란히 놓고 미세한 차이를 짚는 방식—으로 다루며 이어졌다.
핵심 내용
- 요일 표기에 괄호 추가, 잠금해제 아이콘 그라데이션 등 잠금 화면 디테일 개선
- 스크롤바 위치를 화면 우측 끝에서 리스트 안쪽으로 옮겨 시각적 어색함 해소
- 메일 스레드를 숫자로 그룹핑해 정보 구조를 개선한 사례
- 화면 크기에 맞지 않을 때만 필요한 기능(동영상 확대/축소 버튼)은 조건부로 제거해 불필요한 UI 요소를 줄임
- 설명 문구 제거는 "이해에 지장 없는 요소는 굳이 노출하지 않는다"는 절제의 원칙을 보여줌
- 아이폰 Mail은 좌측 여백의 구분 기호 하나로, 구글 Mail은 체크박스+색상 변화로 읽음/안읽음 상태를 표시 — 정보 우선순위에 맞춘 절제된 신호가 시각적 피로를 줄임
- 가이젠(改善): 완성이 아니라 끊임없는 수정과 개선이 지속되는 것이 좋은 인터페이스의 본질이라는 관점
- iOS6 앱스토어: 리스트형 메인 화면 → iPad·Apple TV와 통일된 가로 스크롤 구조로 개편
- 앱 상세 화면을 원페이지에서 3탭 구조로 분리하고 스크린샷을 최상단으로 이동 — 구매 전 이미지를 먼저 보려는 니즈 반영
- 스크롤에 따라 나타나는 유동적 탭 구조로 '공간 점유'와 '내비게이션 소실' 문제를 동시에 해결
- 여러 앱 업데이트를 한 화면 아코디언으로 처리해 반복적인 앱 재진입 흐름을 단순화
- UI 설계에 정답은 없으며 퍼소나에 따른 트레이드오프 판단이 필요하다는 저자의 결론
- pxd 블로그의 "[UI 디테일]" 연재의 초기 사례로, 이후 다양한 서비스의 화면 비교로 이어짐
관련 개념
- Family UI — 같은 "[UI 디테일]" 연재에서 웹·iOS·안드로이드 앱을 비교한 사례
- 모바일 제스처 UI — 같은 연재에서 다룬 모바일 제스처 디테일 비교
- 그룹형 SNS UX 설계 — 같은 저자가 이어간 SNS 앱 UI 디테일 리뷰 시리즈
- 어포던스 — 아이콘의 그라데이션·형태 같은 시각적 단서가 사용자 이해를 돕는 원리
- 스큐어모피즘 — 동시대 iOS 인터페이스가 취한 사실적 시각 표현 방식
- 정보 디자인 원칙 — 정보 우선순위에 따라 시각 신호의 강도를 절제해 배치하는 원칙
- 스마트폰 스피커홀 위치와 통화 사용성 — 소프트웨어 화면이 아닌 하드웨어 폼팩터에서 미세한 디테일을 관찰·비교한 사례
출처
- 작은 차이에서 완성도를 보여주는 아이폰 UI — 2010-07-20, 알 수 없는 사용자
- [UI 디테일] 아이폰4와 아이팟터치 UI 디테일 비교 — 2010-09-20, 위승용 uxdragon
- [UI 디테일] UI관점에서 살펴본 새로운 iOS6 모바일 앱스토어 — 2012-11-28, 위승용 uxdragon