[UX/UI] 모바일 UX

yii·2023년 11월 10일

UX/UI

목록 보기

4/11

터치 스크린 UI는 어떤 특징이 있는가

터치 UI에서 사용자에게 제공해야 할 3가지
1. Trigger 트리거 (버튼, 스크롤 바 - 액션이 시작되는 곳)
2. Action 액션 (다음 화면으로 넘어가거나 컨텐츠에 담기거나)
3. Feedback 피드백 (액션이 진행되거나 완료되었다는 피드백이 담겨 있어야함)

왜 픽셀 밀도를 알아야 할까

같은 브랜드의 같은 기종인데 조금씩 다른 해상도 (Resolution)과 PPI (Pixel Per Inch)

픽셀 밀도란?

물리적으로 1인치 (2.54cm X 2.54cm) 안에 들어가는 픽셀 수
후로 몇 십년 간 72PPI의 픽셀 밀도에서 그래픽을 표현
일반적인 모니터 기준의 웹 디자인에서는 72PPI를 사용

레티나 디스플레이 (Retina Display)

망막(Retina)으로는 픽셀을 구분할 수 없다는 의미로 애플에서 만든 용어
2012년 맥북 프로에도 레티나 디스플레이를 적용, 16인치 맥북 프로의 경우 221PPI를 지원
현재 판매중인 모든 애플의 디바이스는 레티나 디스플레이를 지원
레티나 디스플레이 등장 초기 디자이너들은 모든 그래픽 요소 (Asset)를 일반 디스플레이용과 레티나 디스플레이용으로 제작

해당 문제를 극복

PT(point)단위의 등장

PT 단위로 디자인함으로써 이 문제를 극복

하나의 크기만 디자인하면서 다양한 디스플레이에 빠른 대응이 가능해짐
그래서 아이폰은 PT 단위로 디자인 후 3가지 픽셀 밀도에 대한 그래픽 에셋을 전달

안드로이드는 제조사와 기기가 훨씬 많고, 그만큼 다양한 픽셀 밀도에 대한 대응이 필요
안드로이드는 DP(Density- Independent Pixel)을 사용

다양한 안드로이드폰의 픽셀 밀도

같은 물리적 크기의 스크린 사이즈에서도 픽셀 밀도가 다양
그래서 DP단위로 디자인 후 5가지 픽셀 밀도에 대한 그래픽 에셋을 전달

안드로이드는 4배수까지

이를 위해 벡터 기반으로 디자인을 해야 함 (비트맵X)
벡터로 디자인하면 다양한 사이즈의 비트맵으로 export 가능
벡터 디자인 시 기준은 1배수로 디자인 해야함
1배수로 디자인한다면 2배,3배로 익스포트해도 픽셀 깨짐 현상이 없음

추가적인 고려사항으론
입력방식과 스크린과의 물리적 거리를 고려해야 함

입력 방식에 따른 차이

마우스 커서보다 손가락이 평평하기 때문에 모바일의 터치 스크린에 사용되는 버튼이 더 큼

스크린과 물리적 거리에 따라
사용자가 보게되는 그래픽 에셋의 크기가 다름
때문에 스크린간의 거리를 고려하여 컴포넌트의 크기를 정의하는 것이 필요
스마트폰과 태블릿을 사용할 때 사용자가 보게되는 스크린의 크기가 다르고 픽셀 밀도가 다름
(태블릿이 덜 촘촘) - 밀도를 낮춰도 O

타겟으로 하는 디바이스에 대해