[패스트캠퍼스]K디지털 기초역량훈련 UXUI 강의 3주차-UX/UI 디자인 노하우 : 모바일 UX 디자인 이해하기

찬율·2022년 6월 19일
0

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

제스처를 통해 조작

터치 UI에서 사용자에게 제공해야 할 3가지

⭐️ 트리거 (Trigger) ⭐️ 액션 (Action) ⭐️ 피드백 (Feedback)

왜 픽셀 밀도를 알아야 할까

픽셀 밀도 (Pixel Density)

  • 같은 브랜드의 같은 기종인데도 조금씩 다른 해상도 (Resolution)과 PPI(Pixel per inch)를 가짐
  • 물리적으로 1인치(2.54cm X 2.54cm) 안에 들어가는 픽셀(화소)의 수

최초의 맥에서 1인치 당 72개의 픽셀이 들어감

  • 그 후로 몇 십년 간 72PPI 의 픽셀 밀도에서 그래픽을 표현
  • 그래서 지금도 일반적인 모니터 기준의 웹 디자인에서는 72PPI를 사용

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

  • 레티나 디스플레이(Retina Display): 망막(Retina)으로는 픽셀을 구분할 수 없다는 의미로 애플에서 만든 용어
  • 2012년 맥북 프로에도 레티나 디스플레이를 적용, 현재 16인치 맥북 프로의 경우 2880X1800해상도에 221PPI를 지원

일반 디스플레이 VS 레티나 디스플레이

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

👉 레티나 디스플레이 등장 초기에 디자이너들은 모든 그래픽 요소 (Asset)를 일반 디스플레이용과 레티나 디스플레이용으로 각각 제작

👉 아이폰6 플러스(현재의 맥스) 모델이 출시되면서 디자이너가 만들어야 할 그래픽 에셋의 크기가 하나 더 필요해짐

모든 아이폰 애플리케이션은 3가지 그래픽 에셋을 가지며, 설치된 기종의 해상도에 맞는 크기의 그래픽 에셋을 뿌려줌

⭐️ PT(point) 단위의 등장

  • PT 단위로 디자인함으로써 위의 문제를 극복
  • PT단위를 사용하면 하나의 사이즈만 디자인해서 다양한 PX단위의 에셋으로 변환가능
  • 하나의 크리만 디자인하면서 다양한 디스플레이에 빠른 대응이 가능해짐

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

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

⭐️안드로이드의 DP(Densisty-Independent Pixel)

  • PPI 대신 DPI(Dot per inch)를 사용
  • 같은 물리적 크기의 스크린 사이즈에서도 안드로이드폰은 픽셀 밀도가 다양함

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

이를 위해 먼저 백터 기반으로 디자인을 해야함

  • 백터로 디자인하면 다양한 사이즈의 비트맵으로 익스포트 가능
  • 백터 디자인 시 기준은 1배수로 디자인해야 함. 2배,3배로 익스포트해도 픽셀 깨짐 현상이 없음

추가적인 고려사항

  • 입력 방식과 스크린과의 물리적 거리를 고려해야함
  • 입력방식 : 마우스 커서보다 손가락이 더 평평하기 때문에 모바일 터치 스크린에 사용되는 버튼이 더 큼
  • 스크린과의 물리적 거리 : 사용자가 보게되는 그래픽 에셋의 크기가 다름
    때문에 스크린간의 거리를 고려하여 컴포넌트의 크기를 정의하는 것이 필요

  • 스마트폰과 태블릿을 사용할 때 사용자가 보게되는 스크린의 크기도 다르고 픽셀 밀도도 다름
  • 타겟으로 하는 디바이스에 대해 각 OS별 디자인 가이드를 참고하여 이에 맞는 그래픽 에셋 제작이 필요
profile
UXUI / 📩 thebestchanlee@gmail.com /포트폴리오는 아래에 홈 버튼

0개의 댓글