하드웨어의 특징
디스플레이
- 사람의 눈은 300dpi 이상의 해상도를 구분할 수 없다.
- 정확한 컬러 구현을 추구하는 것은 좋지만 불가능함을 알아두자.
- 제조사마다 다양한 기기가 쏟아져나오는 터라, 어느 하나의 비율이 표준이라고 말할 수 있는 근거는 없다.
- 디자이너도 자신이 디자인하는 앱이 얼마든지 다양한 비례에 들어갈 수 있다는 것을 이해하고 있어야 한다.
하드웨어 키
- 모든 태스크는 즉시 중단되거나 종료돼야 할 필요가 있으므로 홈 키는 필수적이었다.
- 하지만 그 의도성을 구분하기 위해 물리적 요소를 넣는 ‘의도적 접근’이 필요하다. (이제는 거의 대부분의 기기가 물리키가 아닌 디스플레이를 터치하는 홈 키로 바뀌고 있다.)
주요 인터랙션과 UI
액션 바
- 액션 바(Action Bar)는 통상적으로 앱 바(App Bar)와 같은 의미로 사용된다.
- 액션 아이템이 많을 경우 액션 오버 플로(Action Overflow)버튼으로 숨어 들어가게 된다.
- 화면의 폭이 늘어나면 액션 오버 플로 안에 있던 액션 아이템들이 바깥으로 나올 수도 있다.
- 액션 바의 형태에 따라 스플릿 액션바, 컨텍스추얼 액션바 등으로 나뉜다.
네비게이션
- 좌측 상단의 업 버튼은 히스토리 백이 아닌 하이어라키 백이다.
- 히스토리 백은 소프트키의 뒤로가기
레이아웃을 구성하는 UI 위젯
안드로이드 UI의 48dp 리듬
- 웬만한 화면 요소들은 48dp라는 기준 길이에 맞추면 큰 무리가 없다.
- 이 크기는 손끝으로 터치스크린을 건드렸을 때 접촉하는 평균적인 크기다. iOS에서는 44pt가 이와 비슷한 개념으로 알려져 있다.
탭
- 안드로이드에서 탭 UI를 톱 레벨의 메뉴용으로 쓰는 경우는 거의 없고 한두 단계 아래로 내려가 표현해야 할 정보가 있을 때 주로 활용한다.
- 스크롤 탭은 4개 이상 항목들을 처리하기에 적절하다. (라고 쓰여 있지만 더 많은 항목이 들어가도 될 것 같다.)
네비게이션 드로어
- 사용자가 발견하거나 접근하기 어렵다는 비판이 많아 다시 탭 위주의 내비게이션으로 돌아가는 추세, 하지만 여전히 못 잃는 이유는 탭 몇 개로 해결될 수 없는 구조를 가진 앱이 이를 대체할 만한 다른 UI가 별로 없다. (어쨌든 지금도 잘 쓰고 있는 추세)
- 콘텐츠 뷰(예, 지도) 안에서는 제스처를 사용할 수 없으므로 충돌이 일어나지 않게 살펴야 한다.
- 드로어에는 액션을 넣으면 안된다. 드로어는 탭과 같이 정보의 분류를 표기하고 해당 정보로 들어가는 링크의 표시가 담당이지 액션이 담당이 아니다.
리스트
- iOS는 리스트 우측에 화살표를 달았지만 안드로이드는 아니다. 깔끔해 보일지는 모르겠지만, 사용성 측면에서는 정말 마이너스다.
(세부 페이지가 있거나 다른 링크로 연결되는 리스트라면 화살표를 다는 게 좋다. 특히나 액션이 있는 리스트, 없는 리스트가 혼재돼 있다면 사용자는 더욱 헷갈린다.)
스크롤링
- 스크롤바는 화면을 내리기 위한 수단이 아니라 현재 내가 어느 위치에 있는지를 보여주는 표식에 불과하다. 스크롤바는 굳이 큼지막하게 자리를 차지할 필요도 없으며, 심지어 항상 보여질 필요조차 없다.
- 화면이 너무 길어지면 손가락을 몇 번이고 쓸어올려도 원하는 곳에 도달하기 어려운 때가 있다. 이때 도움을 줄 수 있는 것이 빠른 스크롤(fastScroll) 기능이다.
텍스트 영역
- 이전 안드로이드 텍스트 영역 UI는 라인 하나에 의존했는데, 새로운 가이드는 사각형의 텍스트 존이 암시되어 있어 훨씬 좋은 어포던스를 가진다.
타이포그래피
- 접근성 향상을 위해 가급적 앱 내 모든 폰트는 sp로 지정해놓는 것이 좋다.
- 각 제조사마다 지정하는 폰트에 따라 기본 폰트가 달라지기 때문에 통제가 불가능한 영역, 딱 하나의 폰트 경험을 전달하고 싶다면 커스텀 폰트를, 이럴 경우 사용자 지정 폰트가 적용되지 않을 수 있다.
대화상자
- 가급적 사용자의 주목이 반드시 필요한 경우에만 사용하는 편이 좋다. ‘정말 삭제하시겠습니까?’와 같은 정도 말이다.
- 안드로이드 4.0부터 버튼 좌측이 부정적인 내용으로 바뀌었다.
- ‘정말 탈퇴하시겠습니까?’라는 질문으로 명시해야 하고, 이에 대한 대답으로는 ‘아니요’ 버튼과 ‘예’ 버튼이 아닌 ‘취소’ 버튼과 ‘탈퇴하기’ 버튼을 둬야 한다.
토스트
- 토스트는 앱에 종속적인 뷰가 아니어서 해당 앱을 벗어나도 있어야 할 시간만큼 있다가 사라진다.
- 사용자의 미심쩍은 마음들을 짧은 한 줄의 메시지로 만들어주는 것이 토스트다. 적시적소에 잘 사용할 것을 권장한다.
상태바와 알림
- 이 알림을 보고 사용자가 행동을 취할 수 있는지, 혹시 지름길을 만든다는 생각으로 어지럽힌건 아닌지, 정말 필요한 정보인지 체크하자.
픽처인픽처와 알림닷
- 픽처인피처(PIP)는 애플의 페이스타임처럼 백그라운드에 다른 앱을 사용하며 화면 모서리의 고정 창에서 동영상이나 영상 통화를 계속 볼 수 있게 해주는 기능이다.
- 알림닷은 새로운 알림이 있을 경우 해당 앱의 오른쪽에 작은 점이 나타난다.
스케일러블 디자인
레이아웃
- 레이아웃의 형태를 해칠 위험이 있는 요소들은 항상 최악의 상황을 고려해 디자인하는 것이 필요하다. (길어지는 숫자, 다국어 지원 등)
- 글자가 잘릴 경우 흘러가게 하는 처리의 이름은 마퀴(marquee)
스케일러블 그래픽
- 나인패치: 늘어나는 영역의 시작점을 픽셀의 변화가 있는 경계에 두지 말 것, 늘어나는 영역을 단일 픽셀로 지정하지 말 것
- Drawble Xml: 코딩으로 만들어낼 수 있는 그래픽, 간단한 조형 요소는 drawble xml 형태로 구현하는 것이 좋음
이미지 스케일 타입
- CENTER: 화면 정중앙에 위치, 사방면 빌 수 있음
- CENTER_CROP: 화면 꽉채워 정비례로 fit, 비는 부분 없음
- CENTER_INSIDE: 짧은 폭에 맞춰 정비례 fit, 위아래 or 양옆 빌 수 있음
- FIT_CENTER: 화면 중앙부터 정비례로 fit, 위아래 빌 수 있음
- FIT_END: 화면 마지막부터 정비례로 fit, 윗단 빌 수 있음
- FIT_START: 화면 시작부터 정비례로 fit, 아랫단 빌 수 있음
- FIT_XY: 비례를 무시하고 화면 fit, 비는 부분 없으나 디자이너가 싫어함
- MATRIX: 원본 크기 그대로 화면 시작단에 위치, 대체로 아랫단이 빌 수 있음
