웹 디자인 이론 STEP 07.

 

웹디자인 이론 STEP 07. 에서는 모바일 화면구성에 필요한 용어, 모바일 디자인 벤치마킹 사이트, 모바일 실무용어들에 대해서 정리했습니다. 실무에서 팀원들과 회의를 할 때나 업무를 할 때 용어에 대한 정리와 레퍼런스를 찾을 수 있는 사이트들에 대한 지식이나 이해도는 필수이며 매우 중요하기 때문에 정리했습니다. 실무나 교육기관에서 배운 내용을 기반으로 작성하는 글로 잘못된 내용이 포함될 수 있습니다.

 

타이포그래피 규칙

1. 스플래쉬 스크린(Splash Screen)

모바일 앱 접속 시 로딩하는 동안 표시되는 화면으로 일반적으로 로고 이미지 또는 애니메이션으로 표현한다.

 

2. 슬라이드 메뉴(Slide Menu)

평상시에는 보이지 않다가 아이콘 및 텍스트 클릭 시 슬라이딩 되어 보이는 메뉴, 모바일 앱의 카테고리 및 로그인 기능 등이 보여진다.

 

3. 워크스루(Worktroughs)

해당 모바일 앱의 매뉴얼이나 서비스 이용 시 꼭 필요한 상세 도움말을 단계별로 제공하는 페이지이다.

 

4. 코치마크(Coach Mark)

앱을 처음 사용하는 사람들을 위한 도움말 및 가이드로 간략하게 반투명한 화면 위에 한 페이지로 표시된다. 보통 "Skip"버튼이 표시되며 버튼을 누를 시 화면이 사라진다.

 

 

모바일 디자인 벤치마킹 사이트

1. Android Material Guide

http://material.io/ 

Material Design

 

2. 실제 앱 구조 설계 시 벤치마킹

http://uxarchive.com/ 

UX Archive

 

3. 해외 앱 디자인 카테고리별 벤치마킹

http://pttrns.com/ 

pttrns

 

4. 해외 앱 디자인 벤치마킹

http://www.mobile-patterns.com/ 

Mobile Patterns - UI UX Inspirational Gallery for iOS and Android

 

4. 국내 앱 디자인 벤치마킹

http://www.umoby.co.kr/

Mobile Patterns - UI UX Inspirational Gallery for iOS and Android

 

 

모바일 실무 용어

모바일 터치 제스처는 마우스와 키보드를 이용하는 웹 환경과는 다르게 모바일 환경을 디바이스와 유저 사이에 터치라는 접점이 생긴다. 이렇게 신체 일부분의 움직임을 통한 경험이 하나의 디자인 요소로써 활용될 수 있다.

 

1. 탭(Tap)

- 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것. 들어올리는 순간 이벤트가 발생한다.

- 스크린을 터치하는 횟수에 따라서 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap)등이 있다.

 

2. 더블 탭(Double Tap)

- 화면에 손가락을 2회 연속 터치하는 행위

- 싱글 탭과는 상대적으로 해당 제스처의 목적이 분명한 기능에 배치. 예를들어 브라우저 사파리 혹은 지도나 이미지를 화면에서 확대하거나 축소하기 위한 제스처로 사용

 

3. 프레스(Press)

- 화면 위를 일정 시간(2초 이상)동안 약간의 힘을 가한 상태로 탭 하는 제스처

- 화면 전체가 바뀌는 것이 아니라, 주로 팝업과 같이 숨겨진 메뉴를 불러오거나 기능을 실행할 때 사용한다.

- 마우스 오른쪽 버튼과 유사한 기능이다.

 

4. 딥 프레스(Deep Press)

프레스보다 더 세게 누르는 방식으로, 아이폰 6s부터 추가된 3D 터치 중 3단계에 해당하는 제스처

Pop 튀어나오기

 

5. 팬(Pan)

- 손가락을 떼지 않고 계속 드래그(Drag)하는 제스처

- 시간과 방향의 제한 없이 사용자가 손가락을 뗄 때까지 패닝(Panning)으로 인식

- 화면에서 오브젝트를 이동할 때, 라인 그리기 혹은 확대된 이미지를 상하좌우로 움직여 탐색할 때 사용하는 제스처 방식이다.

 

6. 스와이프(Swipe)

- 손가락을 댄 후, 일직선으로 드래그하는 제스처

- 시간의 제한은 없으나 직선 움직임이라는 제한이 있다. 보통 화면 탐색 시, 스크롤(Scroll)기능으로 사용한다.

- 위로 올리면 Swipe Up, 아래로 내리면 Swipe Down 이라고 한다.

 

7. 플릭(Flick)

- 스와이프에서 좀 더 빠르게 한 방향으로 미는것. 책장을 넘기는 느낌의 동작을 말한다.

- 탐색하던 브라우저 화면을 불러오거나 다른 화면으로 넘길 때 혹은 숨겨진 드로어 메뉴(Drawer Menu)를 열 때 사용한다.

 

8. 드래그(Drag)

- 드래그는 오브젝트를 이동할 때나 정해진 방향으로 움직인(손가락으로 누른 채 이동)후 손가락을 떼는 행동

- 팬(Pan)처럼 제한 없이 이동할 수 있지만, 스와이프(Swipe)처럼 직선 움직임이 아니어도 인식이 가능하다.

 

9. 핀치 인 / 아웃(Pinch in / out)

- 위 동작들과 다르게 손가락 두 개를 화면에 댄 상태에서 두 손가락 사이를 넓히거나(out) 좁히는(in) 제스처

- 더블 탭 외에 지도나 이미지를 볼 때 확대 / 축소 기능으로 사용한다.

- 핀치 아웃은 핀치 오픈(Pinch Open)혹은 스프레드(Spread)로, 핀치 인은 핀치 클로즈(Pinch Close)라는 용어로도 알려져 있다.

 

10. 로테이트(Rotate)

- 로테이트도 핀치처럼 두 손가락을 이용한다.

- 오브젝트가 도는 회전 값을 인식하는데 차이가 있고 보통 화면에서 이미지를 회전시킬 때 사용되는 제스처