본문 바로가기
카테고리 없음

터치 스크린 제스처 종류, 1 배수 디자인, 입력 방식과 물리적 거리가 디자인에 끼치는 영향

by daybyday-dev 2024. 4. 6.

터치 스크린 제스처 종류, 1 배수 디자인, 입력 방식과 물리적 거리가 디자인에 끼치는 영향

1. 터치 스크린 제스처 종류

 

터치 스크린 제스처 종류

 

  • Flick(≒ Swipe)
    • Flick는 한 손가락으로 빠르게 선을 긋는 제스처
      ex) 농구공 던지기 게임
    • Swipe는 손가락을 직선 방향으로 움직여 화면 미는 제스처
      ex) 사진을 옆으로 넘기며 볼 때 사용
    • Flick와 Swipe는 각각의 제스처를 추상적으로 범주화한 것으로 대부분의 앱 서비스가 Flick와 Swipe를 구분하지 않고 사용함
      즉, 앱 개발자가 제스처를 시작하는 지점, 거리, 속도를 자의적으로 규정해 명명했을 뿐임
  • Pinch 핀치, Spread 스프레드
    • 두 손가락을 이용해 확대, 축소할 때 사용하는 제스처
    • Pinch는 안쪽으로 모으는 제스처, Spread는 바깥쪽으로 벌리는 제스처
  • Press 프레스
    • 꾹 누르는 제스처
  • Rotate 로테이트
    • 대상을 원하는 방향으로 회전할 때 사용하는 제스처
      ex) 지도 앱에서 내가 원하는 방향으로 회전해서 보고 싶을 때 사용
  • 예시를 통해 터치 스크린 제스처 자세히 알아보기
 

"이 동작이 뭐더라...?" 터치 제스처 알아보기

네이버 지도 앱으로 터치 제스처 공부하기 | 이 동작... 뭐라고 하더라? 꾹 누르기..? 모바일 앱 서비스를 기획하다 보면 스와이프, 탭 등 사용자의 동작을 정의해야 한다. 그런데 막상 기획서를

brunch.co.kr

 

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

 

  • Trigger(트리거)
    • 제스처를 할 수 있는 영역을 표시하거나 알려주어야 함
  • Action(액션)
    • 어떤 제스처를 사용해야 하는지 알려주어야 함
  • Feedback(피드백)
    • 제스처를 통한 액션이 진행되고 있거나 완료되었음을 알려주어야 함
      ex) 화면을 아래로 swipe(아래로 밀기)하면 새로고침 로딩창이 뜨면서 제스처를 통한 액션이 수행되고 있음을 알려줌

 

3. 아이폰 1 배수 디자인: PT

 

레티나 디스플레이 등장 초기에는 각 디스플레이에 맞는 그래픽 요소를 하나씩 만들어야 했음

 

  • 레티나 디스플레이 등장 초기에 디자이너들은 모든 그래픽 요소(asset)를 일반 디스플레이용과 레티나 디스플레이용을 각각 따로 만들어야 했음
  • 아이폰6 플러스(현재의 맥스) 모델이 출시되면서 디자이너가 만들어야 할 그래픽 에셋의 크기가 하나 더 늘어남
  • 모든 아이폰 애플리케이션은 3가지 크기의 그래픽 에셋을 가지며, 설치된 기종의 해상도에 맞는 크기의 그래픽 에셋을 골라 사용함

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

 

하나의 크기만 디자인하면서 다양한 디스플레이에 빠른 대응 가능

 

  • 그래픽 에셋을 여러 개 만들어야 하는 단점을 극복하기 위해 PT(Point) 단위 등장
  • 1PX = 1PT(1X)
    2PX = 1PT(2X)
    3PX = 1PT(3X)
    즉, 1PT로 디자인 작업 이후, 내보내기 옵션에서 1X(1 배수)를 선택하면 1PX로 이미지가 내보내짐(생성되어 저장)
    1PT로 디자인 작업 이후, 내보내기 옵션에서 2X(2 배수)를 선택하면 2PT로 이미지가 내보내짐
    → PT 단위로 하나의 사이즈만 디자인해서 다양한 PX(Pixel) 단위의 에셋으로 변환 가능
  • 하나의 크기만 디자인하면서 다양한 디스플레이에 빠른 대응이 가능해짐
  • PT 단위로 디자인 후, 3가지 픽셀 밀도(1 배수, 2 배수, 3 배수)에 대한 그래픽 에셋을 전달

 

4. 안드로이드폰 1 배수 디자인: DP

 

DP와 DPI

 

  • 안드로이드폰은 DP(Density-Independent Pixel)를 사용
  • PPI(Pixel Per Inch) 대신 DPI(Dot Per Inch)를 사용
  • PT(Point) = DP(Density-Independent Pixel)
    PPI(Pixel Per Inch) = DPI(Dot Per Inch)
    즉, DP는 PT와 동일한 개념이지만 이름만 다를 뿐이고, DPI도 PPI와 동일한 개념이지만 이름만 다를 뿐임

다양한 픽셀 밀도

 

  • 안드로이드폰은 아이폰에 비해 제조사와 기기가 훨씬 많고, 그만큼 다양한 픽셀 밀도에 대한 대응이 필요
  • 같은 물리적 크기의 스크린 사이즈에서도 픽셀 밀도가 다양함
  • 안드로이드폰은 DP 단위로 디자인 후,  5가지 픽셀 밀도에 대한 그래픽 에셋을 전달
안드로이드 OS의 DPI
DPI 명칭 비고
MDPI, Medium density screen (1X) ~160DPI
HDPI, High density screen (1.5X) ~240DPI
XHDPI, Extra-high density screen (2X) ~320DPI
XXHDPI, Extra-extra high density screen (3X) ~480DPI
XXXHDPI, Extra-extra-extra high density screen (4X) ~640DPI

벡터 기반의 1배수 디자인을 해야 export(내보내기)에 문제 없음

 

  • 벡터 기반으로 디자인해야 배수로 export(내보내기) 가능
  • 벡터로 디자인하면 다양한 사이즈의 비트맵(PNG, JPG 등)으로 export 가능
  • 1 배수를 export 하면 정수의 배수(1 배수, 2 배수, 3 배수 등)만 export 되기 때문에 픽셀 깨짐 현상 없음
    따라서, 벡터 디자인 시 기준은 1 배수로 디자인해야 함

 

5. 입력 방식과 물리적 거리가 디자인에 끼치는 영향

 

입력 방식에 따라 디자인 크기가 달라짐

 

  • 입력 방식에 따른 디자인 차이
    • 마우스 커서보다 손가락이 더 평평하기 때문에 모바일의 터치 스크린에 사용되는 버튼이 더 큼

스크린과의 물리적 거리에 따라 디자인 크기가 달라짐

 

  • 스크린과의 물리적 거리에 따른 디자인 차이
    • 스크린을 보는 사용자와 디바이스의 거리에 따라 그래픽 에셋의 크기가 다름
    • 모바일보다 데스크톱을 더 멀리 떨어져 보기 때문에 그래픽 에셋의 크기가 더 커야 하고, TV는 더욱 멀리 떨어져 보기 때문에 그래픽 에셋의 크기가 더 커야 함
      → 스크린과 사용자의 물리적 거리가 클수록 더 크게 디자인해야 함
    • 스크린 간의 거리를 고려하여 컴포넌트 크기를 정의하는 것이 중요

디바이스에 따라 픽셀 밀도가 다름

 

    • 스마트폰과 태블릿을 사용할 때 사용자가 보게 되는 스크린의 크기도 다르고, 픽셀 밀도도 다름
    • 스마트폰은 20~30cm 거리에서 437 ppi까지, 모니터는 50~60cm 거리에서 185 ppi까지 구분할 수 있음
      즉, 가까운 거리에서 높은 밀도의 PPI를 인지할 수 있다(가까운 거리에서 픽셀이 더 잘 보임)는 의미로  픽셀 밀도를 더 신경 써야 함
      → 더 가까이 보는 디바이스가 픽셀 밀도가 더 높음(이미지 선명, 세밀)

 

 

티스토리툴바