모바일UX, 터치스크린 제스처 조작 종류, 픽셀 밀도에 대한 이해 - 패스트캠퍼스 챌린지 10일차

세션 5. 모바일UX

 

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

터치스크린 제스처 조작 종류

Chart of gestural controls (Image credit: Touch Gesture Reference Guide)

 

터치 UI에서 사용자에게 제공해야 할 3가지 : Trigger(트리거), Action(액션), Feedback (피드백)

 

 

왜 픽셀 밀도를 알아야 할까요?

* 픽셀 밀도 : 물리적으로 1인치(2.54cm X 2.54cm) 안에 들어가는 픽셀(화소)의 수

* 일반적인 모니터 기준의 웹 디자인에서는 72 PPI를 사용

 

* 2010년에 애플이 레티나 디스플레이를 공개.

* 레티나 디스플레이(Retina Display) : 망막(Retina)으로는 픽셀을 구분할 수 없다는 의미로 애플에서 만든 용어

* 현재 판매중인 모든 애플의 디바이스는 레티나 디스플레이를 지원

* 아이폰은 PT 단위로 디자인 후 3가지 픽셀 밀도에 대한 그래픽 에셋을 전달 :

PT 단위로 하나의 사이즈만 디자인해서 다양한 PX 단위의 에셋으로 변환

 

* 안드로이드폰은 아이폰에 비해 제조사와 기기와 훨씬 많고, 그 만큼 다양한 픽셀 밀도에 대한 대응이 필요

* 안드로이드폰은 DP(Density-Independent Pixel)을 사용

PT(Point) = DP(Density-Independent Pixel)
PPI (Pixel Per Inch) = DPI (Dot Per Inch)

* 다양한 안드로이드폰의 픽셀 밀도. 같은 물리적 크기의 스크린 사이즈에서도 픽셀 밀도가 다양함

그래서 안드로이드폰은 DP 단위로 디자인 후 5가지 픽셀 밀도에 대한 그래픽 에셋을 전달

 

* 이를 위해 먼저 벡터 기반으로 디자인을 해야함. 벡터로 디자인하면 다양한 사이즈의 비트맵으로 익스포트 가능

* 벡터 디자인 시 기준은 1배수로 디자인해야 함.

 

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

* 입력 방식에 따른 차이 - 마우스 커서보다 손가락이 더 평평하기 때문에 모바일의 터치 스크린에 사용되는 버튼이 더 큼
* 스크린과의 물리적 거리에 따라 - 사용자가 보게 되는 그래픽 에셋의 크기가 다름. 컴포넌트의 크기를 정의하는 것이 필요
* 스마트폰과 태블릿을 사용할 때 사용자가 보게되는 스크린의 크기도 다르고 픽셀 밀도도 다름
* 타겟으로 하는 디바이스에 대해 각 OS 별 디자인 가이드를 참고하여 이에 맞는 그래픽 에셋 제작 필요

 

 

---

강의 수강화면

 

오늘 강의에서는 본격적인 UI 기본 개념을 배우기 시작했다. 손가락 움직임으로 조작하는 터치스크린 제스처 10가지가 기본이며, 이런 터치 UI에서는 사용자에게 트리거, 액션, 피드백이라는 3가지 기능을 제공해야 한다. 오늘 강의에서는 이 정도만 인식하고 아직 자세한 내용을 배우지는 않았지만, 만약 사용자가 터치 제스처를 할 때 트리거, 액션, 피드백이 제대로 이루어지지 않는다면, 굉장히 움직임이 뻣뻣하고 어색해질 것 같다. 결국 모바일은 직접 눈으로 보여지지 않는 부분(연결된 반응)들까지 고려하여 디자인을 해야 한다.

 

그리고 픽셀 밀도에 대한 개념을 처음으로 배웠는데, 기본개념 이해 단계에서 매우 중요한 내용인 것 같아서 두 번을 반복해서 들었다. 

강사님은 아이폰과 안드로이드 각각이 픽셀 밀도를 표현하는 단위와 기종별 픽셀 밀도의 수치적인 변화를 알려 주셨는데, 모바일 디스플레이의 기술발전 속도가 데스크탑 디스플레이의 기술발전 속도보다 더 앞서왔다는 점을 알 수 있었다. 그리고 디바이스별, OS별로 다양한 픽셀 밀도에 대응해야 하다 보니 불가피하게 UI디자인이 비트맵이 아닌 백터로 작업된다는 것도 처음 알게 되었다.

 

기술발전에 맞춰 빠르게 변화되고 다양한 환경에 적응해야 하는 UX/UI디자인의 미래는 앞으로 또 어떻게 변화될 지 궁금하다.

 

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa