You are looking for information, articles, knowledge about the topic nail salons open on sunday near me 모바일 제스처 on Google, you do not find the information you need! Here are the best content compiled and compiled by the Toplist.maxfit.vn team, along with other related topics such as: 모바일 제스처 모바일 터치 드래그, 모바일 드래그 하는법, jQuery 터치 스 와이프, 스와이프 제스처, 모바일 터치 CSS, 스와이프 스크롤 차이, Swipe Flick 차이, 제스처 UI
Web Club :: Mobile Gesture(모바일 제스처) 알아보기
- Article author: webclub.tistory.com
- Reviews from users: 16260
Ratings - Top rated: 4.2
- Lowest rated: 1
- Summary of article content: Articles about Web Club :: Mobile Gesture(모바일 제스처) 알아보기 이러한 제스처의 종류로는 Tap(누르기), Double Tap(두 번 누르기), Drag(누른 채 움직임), Flick(빠르게 스크롤), Pinch(두 손가락으로 넓히기/좁히기), Press(오래 … …
- Most searched keywords: Whether you are looking for Web Club :: Mobile Gesture(모바일 제스처) 알아보기 이러한 제스처의 종류로는 Tap(누르기), Double Tap(두 번 누르기), Drag(누른 채 움직임), Flick(빠르게 스크롤), Pinch(두 손가락으로 넓히기/좁히기), Press(오래 … Mobile Gesture 이 포스팅에서는 스마트폰에서 사용하는 제스처에 대해 알아봅니다. 먼저 제스처(Gesture)의 사전적 정의는 다음과 같습니다. 상징적 기능을 하는 신체적, 음성적, 감정적 동작 또는 표현. 디바이..
- Table of Contents:
네비게이션
Mobile Gesture(모바일 제스처) 알아보기
사이드바
검색
티스토리툴바
[용어] 모바일 터치 제스처
- Article author: sorrow16.tistory.com
- Reviews from users: 12984 Ratings
- Top rated: 4.9
- Lowest rated: 1
- Summary of article content: Articles about [용어] 모바일 터치 제스처 [용어] 모바일 터치 제스처 · 1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것. · 2. 더블 탭(Double Tap) : · 3. 프레스(Press) … …
- Most searched keywords: Whether you are looking for [용어] 모바일 터치 제스처 [용어] 모바일 터치 제스처 · 1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것. · 2. 더블 탭(Double Tap) : · 3. 프레스(Press) … 1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것. 보통 앱을 실행하거나 어떤 것을 선택할 때 사용됨. 손가락을 화면에 놓은 뒤 들어 올리는 순간, 이벤트가 발생. 스크린을 터치하는..혼자 놀고, 혼자 공부하고, 혼자 즐기는 곳
- Table of Contents:
![[용어] 모바일 터치 제스처](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhuEfy%2FbtqKgFqL7UE%2FQGk2iEsV4NYoZNqtvxR1d1%2Fimg.png)
“이 동작이 뭐더라…?” 터치 제스처 알아보기
- Article author: brunch.co.kr
- Reviews from users: 10187 Ratings
- Top rated: 4.4
- Lowest rated: 1
- Summary of article content: Articles about “이 동작이 뭐더라…?” 터치 제스처 알아보기 네이버 지도 앱으로 터치 제스처 공부하기 | 이 동작… 뭐라고 하더라? 꾹 누르기..? 모바일 앱 서비스를 기획하다 보면 스와이프, 탭 등 사용자의 … …
- Most searched keywords: Whether you are looking for “이 동작이 뭐더라…?” 터치 제스처 알아보기 네이버 지도 앱으로 터치 제스처 공부하기 | 이 동작… 뭐라고 하더라? 꾹 누르기..? 모바일 앱 서비스를 기획하다 보면 스와이프, 탭 등 사용자의 … 네이버 지도 앱으로 터치 제스처 공부하기 | 이 동작… 뭐라고 하더라? 꾹 누르기..? 모바일 앱 서비스를 기획하다 보면 스와이프, 탭 등 사용자의 동작을 정의해야 한다. 그런데 막상 기획서를 작성하다 보면 제스처 이름이 헷갈릴 때가 있다. (그렇다고 누르기 / 꾹 누르기 이렇게 쓰면 본새 안나잖아요ㅜㅜ) 오늘은 ‘네이버 지도’ 앱을 통해 터치 제스처의 종류와 차이점을 알아보도록 한다. 그리고 모
- Table of Contents:
핀치 Pinch와 스프레드 Spread
로테이트 Rotate
탭 Tap
더블 탭 Double Tap
프레스 Press
스와이프 Swipe
패닝 Panning
플리킹 Flick 그리고 스와이프와의 차이점
그래도 플리킹의 예를 찾고 싶다면!
Reference 고마운 선생님들
알아둬야 하는 모바일 터치 제스처(Mobile Touch Gesture)
- Article author: reinvite.tistory.com
- Reviews from users: 7198 Ratings
- Top rated: 3.8
- Lowest rated: 1
- Summary of article content: Articles about 알아둬야 하는 모바일 터치 제스처(Mobile Touch Gesture) 알아둬야 하는 모바일 터치 제스처(Mobile Touch Gesture) · 제스처는 화면을 컨트롤하는 UI의 기본 요소 중 하나로 사용자가 디바이스의 화면을 누르거나 … …
- Most searched keywords: Whether you are looking for 알아둬야 하는 모바일 터치 제스처(Mobile Touch Gesture) 알아둬야 하는 모바일 터치 제스처(Mobile Touch Gesture) · 제스처는 화면을 컨트롤하는 UI의 기본 요소 중 하나로 사용자가 디바이스의 화면을 누르거나 … 음, 쓰다보니 모바일 터치 제스처(Mobile Touch Gesture)도 정리를 해봐야 할 것 같아서 써봅니다. 터치 제스처(Touch Gesture) 제스처는 화면을 컨트롤하는 UI의 기본 요소 중 하나로 사용자가 디바이스의 화면을..
- Table of Contents:
알아둬야 하는 모바일 터치 제스처(Mobile Touch Gesture)
티스토리툴바
모바일 사용자 UX의 시작, 터치 제스처
- Article author: slowalk.com
- Reviews from users: 2513 Ratings
- Top rated: 3.6
- Lowest rated: 1
- Summary of article content: Articles about 모바일 사용자 UX의 시작, 터치 제스처 모바일 사용자 UX의 시작, 터치 제스처 · 1. 탭(Tap) : · 2. 더블 탭(Double Tap) : · 3. 프레스(Press) : · 5. 스와이프(Swipe) : · 6. 플릭(Flick) : · 7. …
- Most searched keywords: Whether you are looking for 모바일 사용자 UX의 시작, 터치 제스처 모바일 사용자 UX의 시작, 터치 제스처 · 1. 탭(Tap) : · 2. 더블 탭(Double Tap) : · 3. 프레스(Press) : · 5. 스와이프(Swipe) : · 6. 플릭(Flick) : · 7. IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기..
- Table of Contents:
[2019.08.13] 모바일 제스처
- Article author: since2018.tistory.com
- Reviews from users: 10157 Ratings
- Top rated: 3.1
- Lowest rated: 1
- Summary of article content: Articles about [2019.08.13] 모바일 제스처 모바일 제스처. 플릭은 손가락을 휘릭 날리듯히 움직여 떼는 것. 떼더라도컨텐츠는 액션을 계속 하다 멈추는 느낌. 스와이프와 핀치의 차이는. …
- Most searched keywords: Whether you are looking for [2019.08.13] 모바일 제스처 모바일 제스처. 플릭은 손가락을 휘릭 날리듯히 움직여 떼는 것. 떼더라도컨텐츠는 액션을 계속 하다 멈추는 느낌. 스와이프와 핀치의 차이는. 플릭은 손가락을 휘릭 날리듯히 움직여 떼는 것 떼더라도컨텐츠는 액션을 계속 하다 멈추는 느낌 스와이프와 핀치의 차이는 정해진 일정한 거리이냐(스와이프) 정해진 거리없이 진행 가능하냐(핀치)
- Table of Contents:
![[2019.08.13] 모바일 제스처](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcp1IZh%2FbtqxsBuosj1%2FXtOgoMtwiifsRs5aMk3XR1%2Fimg.png)
모바일 UX/UI 디자인 강의 with Adobe XD: 10년차 디자이너에게 1:1로 배우는 – 김영삼 – Google Sách
- Article author: books.google.com.vn
- Reviews from users: 37206 Ratings
- Top rated: 3.2
- Lowest rated: 1
- Summary of article content: Articles about 모바일 UX/UI 디자인 강의 with Adobe XD: 10년차 디자이너에게 1:1로 배우는 – 김영삼 – Google Sách Updating …
- Most searched keywords: Whether you are looking for 모바일 UX/UI 디자인 강의 with Adobe XD: 10년차 디자이너에게 1:1로 배우는 – 김영삼 – Google Sách Updating 이것이 진짜 모바일 앱 디자인이다!좋은 디자인을 만드는 모바일 앱 UX/UI 디자인 퍼펙트 가이드! 모바일 기기에 사용하는 모바일 웹앱 서비스에 생명력을 불어넣기 위해서는 UX 디자이너의 역할이 크다. 하지만 UX 디자이너가 수행해야 하는 과정을 정확하고 체계적으로 다루기는 쉽지 않다. 최근 들어 모바일 웹앱 서비스에 필요한 UX, UI, 기획, 디자인 쪽으로 감성과 철학이 담긴 트렌드가 생겨나고 있으며, 앱 개발을 단순한 프로그래밍과 운영체제의 조합이 아닌 사용자 경험과 인터랙션으로 접근하는 방식, 즉 UX를 기반으로 한 접근 방식이 대두되고 있다. 좋은 모바일 앱 디자인을 만들기 위해서는 단순히 보기 좋게 디자인해서는 안 된다. 매력적인 디자인에 사용자가 편리하게 조작할 인터랙션을 적용해야 하고, 이를 위해서는 UX 시나리오에 맞춘 업무 수행과 운영체제별 정확한 디자인 가이드라인을 지켜 디자인해야 한다. 《10년차 디자이너에게 1:1로 배우는 모바일 UX/UI 디자인 강의 with Adobe XD》는 제목 그대로 10년차 선배의 모바일 앱 디자인의 실무 노하우가 고스란히 들어 있는 모바일 UX/UI 디자인 활용서이다. PART 1에서는 국내 실정에 맞는 꼼꼼한 UX, UI 이론 설명과 실무 워크플로우를 살펴보고 각 운영체제에 맞는 디자인 가이드라인을 확인한다. PART 2에서는 실제 서비스 중인 트렌디한 프로젝트 예제 실습을 통해 모바일 UX/UI 디자인 실무를 제대로 파악할 수 있게 구성했다. 특히 iOS, Android, Web 서비스 예제를 통해 실제 모바일 앱을 디자인하고 프로토타이핑으로 인터랙션을 구현할 수 있게 구성하여 실무 경험치를 높이기에 안성맞춤이다. 어떤 독자를 위한 책인가?모바일 앱 디자인 프로세스를 A부터 Z까지 경험해보고 싶은 예비 디자이너(디자인 전공 대학생)취업, 이직을 위해 포트폴리오를 준비하는 주니어 디자이너웹 디자인에서 모바일 디자인으로 넘어가는 현직 디자이너 스타트업 관련자, 혹은 자사 서비스 앱 디자인/제작 담당자 등모바일 앱 디자인에 관심 있고 빠르게 배우고 싶은 분 이 책의 특징 UX 시나리오로 모바일 앱 디자인 실무 흐름 완전 정복!좋은 모바일 앱 디자인은 사용자가 편리하게 사용할 수 있도록 UX 시나리오를 통한 단계별 프로세스를 거쳐야 한다. ‘서비스 기획 UI 설계(스토리보드) 프로토타입 제작 운영체제별 최적화 및 공유, 협업’ 과정이 원활하게 진행되어야 개발자와도 효율적으로 협업할 수 있다. 이 책에서는 저자가 직접 경험한 국내 모바일 앱 디자인 프로세스를 단계별로 나누어 꼼꼼히 소개한다. 그런 다음 Adobe XD를 활용해 디자인과 프로토타입(인터랙션)을 적용할 수 있게 구성했다. 단계별로 이어진 실습만 따라 해도 UX/UI 실무 워크플로우를 익히고 완성도 높은 모바일 앱 디자인까지 학습할 수 있을 것이다. 어디서도 듣지 못한 10년차 선배 디자이너의 멘토링이 가득!저자는 10여 년 이상 모바일 앱 디자인을 하며 차곡차곡 쌓은 경험과 노하우를 이 책에 가득 담았다. UX/UI 및 실무 프로세스에 관한 꼼꼼한 설명과 현장감 넘치는 다양한 실습 예제를 구성하여 모바일 UX/UI 디자인을 경험하지 못한 예비(신입) 디자이너라도 미리 실무를 경험할 수 있게 도와준다. 다섯 개의 iOS, Android, Web 앱 실습 프로젝트와 10년차 선배 디자이너의 멘토링까지 제대로 익힌다면 초보 디자이너에게 벗어나 좋은 모바일 앱 디자인을 만들 수 있을 것이다. 실력을 향상시켜줄 운영체제별 디자인 가이드라인 제공!좋은 모바일 앱 디자인을 만들기 위해서는 ‘운영체제에 맞는 디자인 가이드라인’이 가장 중요하다. 모바일 앱 디자인은 자유롭게 이루어지지만 앱 규격화를 위해 정해진 규칙이나 테마, 디자인 가이드라인을 따라야 한다. 이 책에서는 iOS, Android에서 제공하는 디자인 가이드라인에 대해 꼼꼼하게 설명하고 UI-Kit를 활용해 더 효율적으로 디자인할 수 있는 방법을 제시한다. 다양한 예시 이미지와 상황에 맞는 디자인 가이드라인을 참고한다면 모바일 앱 디자인을 공부하는 데는 물론이고 디자인 작업에 필요한 시간을 줄여주는 데 큰 도움이 될 것이다.
- Table of Contents:
당신이 몰랐던 놀라운 안드로이드 제스처 8가지 – StepsBoard
- Article author: stepsboard.com
- Reviews from users: 28508 Ratings
- Top rated: 3.7
- Lowest rated: 1
- Summary of article content: Articles about 당신이 몰랐던 놀라운 안드로이드 제스처 8가지 – StepsBoard 당연히 Andro Mobile에는 기기와 상호 작용할 수 있는 제스처 컨트롤이 많이 … Andro 모바일에서 Chrome을 많이 사용하고 여러 탭이 열려 있을 수 있습니다. …
- Most searched keywords: Whether you are looking for 당신이 몰랐던 놀라운 안드로이드 제스처 8가지 – StepsBoard 당연히 Andro Mobile에는 기기와 상호 작용할 수 있는 제스처 컨트롤이 많이 … Andro 모바일에서 Chrome을 많이 사용하고 여러 탭이 열려 있을 수 있습니다.
- Table of Contents:
ANDROID 빠른 시작 안내서, Android 모바일 기술 플랫폼 4.4, KitKat® – Google, Inc. – Google Sách
- Article author: books.google.com.vn
- Reviews from users: 17916 Ratings
- Top rated: 3.0
- Lowest rated: 1
- Summary of article content: Articles about ANDROID 빠른 시작 안내서, Android 모바일 기술 플랫폼 4.4, KitKat® – Google, Inc. – Google Sách Updating …
- Most searched keywords: Whether you are looking for ANDROID 빠른 시작 안내서, Android 모바일 기술 플랫폼 4.4, KitKat® – Google, Inc. – Google Sách Updating Nexus 및 Google Play 에디션 기기용 Android 4.4™ (KitKat®)를 소개합니다. 전 세계적으로 사용 가능합니다. 전체 온라인 도움말을 보려면 http://goo.gl/Sn5RG8 페이지를 참조하세요.
- Table of Contents:
See more articles in the same category here: toplist.maxfit.vn/blog.
Web Club :: Mobile Gesture(모바일 제스처) 알아보기
Mobile Gesture
이 포스팅에서는 스마트폰에서 사용하는 제스처에 대해 알아봅니다.
먼저 제스처(Gesture)의 사전적 정의는 다음과 같습니다.
상징적 기능을 하는 신체적, 음성적, 감정적 동작 또는 표현.
디바이스를 이용함에 있어서 사용자의 동작에 의해 반응할 수 있는 기본 요소.
Touch Gestures
위 사전적 정의에서 알 수 있듯, 제스처는 화면을 컨트롤 하는 UI(User Interface・사용자인터페이스)의 기본 요소 중 하나입니다.
사용자는 디바이스 화면을 누르거나, 쓸거나 하는 동작으로 콘텐츠를 이용합니다.
이러한 제스처의 종류로는 Tap(누르기), Double Tap(두 번 누르기), Drag(누른 채 움직임), Flick(빠르게 스크롤), Pinch(두 손가락으로 넓히기/좁히기), Press(오래 누르기), Rotate(회전하기) 등이 있습니다.
이러한 인터랙션은 UI 가이드 문서를 제작할 때 화면의 플로우(Flow)를 보여주기 위해 주로 사용합니다.
디자이너와 개발자의 소통에 있어서도 관련 용어의 정의를 정확히 알고 있다면 서로에게 명확한 단어로 의사를 전달할 수 있을 것입니다.
1. 탭(Tap)
화면을 한 손가락으로 짧고 가볍게 두드리는 제스처로 주로 콘텐츠를 선택할 때 사용되는 기본 동작 단위입니다.
한 손가락을 화면에 놓은 다음, 손가락을 화면에서 떼면 탭 이벤트가 발생하는데, 이 때 화면 상에서 다른 움직임이 없어야 합니다.
탭은 두드리는 횟수에 따라 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap), 쿼드루플 탭(Quadruple Tap) 등으로 구분됩니다.
2. 더블탭 (Double Tap)
화면을 재빨리 두 번 두드리는 제스처입니다.
화면이 확대된 상태에서 두 번 두드려 화면을 축소 시키거나, 화면이 축소된 상태에서 두 번 두드려 화면을 확대할 때 사용합니다.
이뿐만 아니라 화면의 특정 컴포넌트를 편집모드로 전환시킬 때도 사용합니다.
Double Tap은 한번 탭(Tap)하여 실수로 기능이 실행되는 것을 방지하기 위해 비교적 중요도가 높은 기능을 배치합니다
3. 프레스 (Press)
‘터치앤홀드(Touch and Hold)’라고도 사용되는 프레스는 화면에 손가락을 꾹 누르는 제스처입니다.
주로 말풍선, 팝업과 같은 화면의 컴포넌트를 나타나게 하거나, 글씨를 확대하기 위한 용도로 사용됩니다.
때로는 더블탭과 같이 숨겨진 메뉴(Hidden menu)로 존재하며 특정 컴포넌트를 편집 모드로 전환시킬 때 사용하기도 합니다.
4. 팬 (Pan)
손가락을 댄 후, 손을 떼지 않고 계속적으로 드래그하는 움직임을 말합니다.
움직이는 방향이나 시간의 제한은 없으며 손을 뗄 때까지 패닝(Panning)으로 인식합니다.
화면의 오브젝트를 이동시키거나 라인 그리기, 다중 개체 선택, 확대된 이미지 화면을 상하좌우로 움직여서 볼 때 사용합니다.
5. 드래그 (Drag)
화면의 특정 오브젝트에 손가락을 대고 있다가, 정해진 방향으로 움직인 후 손가락을 떼는 것을 말합니다.
특정 오브젝트를 특정 영역으로 이동시킬 때는 ‘드래그앤드롭(Drag & Drop)’ 이라고 표현하기도 합니다.
손가락의 움직임만 보면 스와이프(Swipe)나 팬(Pan)과 유사하지만 드래그는 오브젝트를 이동시킬 때 사용하며, 스와이프와 같은 직선 움직임이 아니라 팬과 같이 제한 없이 이동할 수 있는 것이 차이점입니다.
6. 스와이프 (Swipe)
한 손가락을 화면 위에 터치한 상태에서 일정 거리를 움직이는 제스처입니다.
직선 움직임이라는 제한이 있으나 시간의 제한은 없으므로 손가락을 뗄 때까지 스와이프(Swipe)동작을 인식합니다.
수직 방향의 스와이프는 스크롤(Scroll)이라고도 통용되며 일반적으로 화면 스크롤 내리기, 화면 전환 등에서 사용됩니다.
7. 플릭 (Flick)
손가락을 터치하면서 수평 또는 수직 방향으로 빠르게 스크롤 하는 제스처 입니다.
스와이프와 유사하게 사용될 수 있지만, 차이점은 플릭이 비교적 빠르고, 화면에서 손가락의 움직임이 멈추기 전에 화면에서 손가락을 뗀다는 것입니다.
화면을 빠르게 스크롤 하거나 회전할 때, 드로어 메뉴(Drawer menu)를 연다거나, 오브젝트를 무작위 방향으로 던질 때 사용됩니다.
각 동작은 팬 > 스와이프 > 플릭이라는 포함 관계를 가집니다. 팬이 가장 포괄적이므로 스와이프나 플릭은 팬으로 인식될 수 있으며, 플릭은 스와이프로 인식될 수 있겠지요. 따라서 UI를 설계, 개발할 때 이 점을 유의해서 진행해야 인터페이스가 꼬이는 일을 피할 수 있습니다.
8. 핀치 아웃 & 핀치 인 (Pinch Out & Pinch In)
두 손가락을 화면 위에 터치한 상태에서 서로 다른 방향으로 움직이는 제스처입니다.
확대(Pinch out) 또는 축소(Pinch in)를 위한 제스처이며, 두 손가락의 거리에 따라 확대 값이나 축소 값이 결정됩니다.
핀치 아웃(Pinch out)은 ‘핀치 오픈(Pinch open)’이나 ‘스프레드(Spread)’, 핀치 인(Pinch in)은 ‘핀치 클로즈(Pinch close)’로 통용되는데 이러한 제스처는 이미지를 확대, 축소할 때 뿐만 아니라 페이스북 페이퍼 앱(Paper)와 같은 카드 타입의 UI에서 컨텐츠에 진입하고 빠져나올 때 사용하기도 합니다.
9. 로테이트 (Rotate)
“Touch surface with two fingers and move them in a clockwise or counterclockwise direction”
화면을 수직에서 수평, 수평에서 수직으로 전환하는 제스처입니다. 이미지를 회전시킬 때 사용되는데, 로테이트(Rotate) 역시 두 손가락의 거리에 따라 회전값이 결정 됩니다.
위에서 모바일에서 자주 쓰이는 제스처들을 알아보았습니다.
이제 모바일 뿐만 아니라 랩탑의 트랙패드나 테이블 디스플레이와 같은 터치스크린을 비롯한 다양한 디바이스에서 쓰이는 제스처들을 알아보겠습니다.
인풋(Input)의 매개체가 마우스에서 손가락 터치로 바뀌면서 마우스가 수행했던 기능들에 대응하는 식의 제스처가 많지만, 멀티 터치의 경우 대부분 대응할 수 있는 마우스 제스처가 없어서 사용자 경험이 없는 새로운 제스처로 분류됩니다.
이 경우 설정에 따라 사용자가 원하는 기능을 제스처에 매치해 사용하곤 합니다.
각각의 제스처들이 적절한 기능과 연결되어 직관적인 사용을 유도하는 것은 편리한 사용성의 기반이 됩니다.
10. 두 손가락 탭 (Two Finger Tap)
두 손가락을 이용해 화면을 짧고 가볍게 두드리는 제스처 입니다. 트랙패드에서 두 손가락 탭은 일반적으로 마우스의 ‘우클릭’ 기능입니다.
윈도우 OS에서 트랙패드를 이용해 마우스 우클릭을 하기 위해서는 한 손가락으로 프레스(Press)를 사용하기도 하는데, 맥OS처럼 멀티 터치를 활용하여 두 손가락 탭으로 마우스 우클릭의 기능을 수행하기도 합니다.
또, 더블 탭으로 이미지를 확대했을 때 두 손가락 탭으로 이미지를 다시 축소할 때도 사용합니다.
11. 두 손가락 더블 탭 (Two Finger Double Tap)
두 손가락으로 화면을 재빨리 두 번 두드리는 제스처입니다.
두 손가락 탭이 마우스의 우클릭 기능이라면 두 손가락 더블 탭은 마우스의 오른쪽 버튼을 더블 클릭 하는 것에 대응하겠지만, 명확히 정해진 기능은 없습니다.
태블릿PC에서 두 손가락 더블 탭은 설정에 따라 음악, 영상, 사진을 재생하거나 멈출 때, 사진을 찍을 때, 녹화를 시작하고 멈출 때, 스톱워치를 시작하고 멈출 때 사용하곤 합니다.
12. 두 손가락 스와이프 (Two Finger Swipe)
두 손가락을 이용해 화면을 스와이프(Swipe)하는 제스처입니다. 두 손가락 스와이프는 일반적으로 화면 스크롤 기능입니다.
윈도우OS에서 트랙패드의 오른쪽 가장자리를 스와이프하여 화면을 스크롤 하기도 하지만, 주로 두 손가락 스와이프를 사용합니다.
이 외에도 좌우 가로 두 손가락 스와이프는 맥OS에서 사용자 설정에 따라 화면 가로 스크롤뿐 아니라 웹 화면의 페이지 뒤로, 앞으로의 기능을 수행하기도 합니다.
13. 세 손가락 스와이프 (Three Finger Swipe)
세 손가락을 이용해 화면을 스와이프하는 제스처입니다. 일반적으로 좌우 가로 세 손가락 스와이프는 탐색기나 웹 화면에서 페이지를 뒤로, 앞으로 이동할 때 사용합니다.
또, 세 손가락 스와이프는 지도앱의 로드뷰와 같은 3D 사진 보기 모드에서 이미지가 보이는 View (카메라 앵글)를 상하좌우로 움직일 때에도 사용합니다.
14. 네 손가락 스와이프 (Four Finger Swipe)
네 손가락을 이용해 화면을 스와이프하는 제스처입니다.
네 손가락 좌우 가로 스와이프는 세컨드스크린(Second screen), 서드스크린(Third screen)으로 이동할 때 사용하고, 상하 세로 스와이프는 현재 실행중인 프로그램들을 모두 드러내거나, 다시 이전 화면으로 돌아갈 때 사용합니다.
태블릿PC에서 홈 버튼을 더블 탭하여 멀티태스킹 바를 볼 때, 네 손가락 상하 세로 스와이프를 사용하기도 합니다.
15. 다섯 손가락 핀치 아웃 & 핀치 인 (Five Finger Pinch Out & Pinch In)
다섯 손가락으로 화면을 움켜잡거나(Grab) 다시 펼치는(Spread) 제스처입니다.
다섯 손가락을 모으는 제스처로 활성화되어 있는 창을 모두 최소화하여 데스크탑 화면을 볼 수 있고, 다시 펼치는 제스처로 최소화된 창을 펼쳐 이전 화면으로 돌아갑니다.
16. 프레스 & 탭 (Press and tap)
화면에 한 손가락을 대고, 다른 손가락으로 화면을 짧고 가볍게 두드리는 제스처 입니다.
자주 쓰이는 제스처는 아니지만 jitouch의 사례를 보면 웹 화면에서 좌우 방향을 구분해 탭 간 이동 시 유용하게 사용되고 있습니다.
17. 프레스 & 드래그 (Press and drag)
화면에 한 손가락을 대고, 다른 손가락을 화면에 터치한 상태에서 일정 거리를 움직인 후 손가락을 떼는 제스처 입니다.
마치며
지금까지 디바이스에서 자주 쓰이는 제스처에 대해서 알아보았습니다.
UI 시나리오 작성에 사용되는 제스처의 정의를 머릿속에 명확하게 정립해두면, 깔끔하고 탄탄한 UI 디자인을 제작할 수 있을 뿐만 아니라, 개발자와도 원활한 소통을 할 수 있으리라 생각됩니다.
[출처] [바이널 X] 디자이너와 개발자의 원활한 소통을 도와줄 제스처 총정리Jaehee’s e-room
[용어] 모바일 터치 제스처
728×90
1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것. 보통 앱을 실행하거나 어떤 것을 선택할 때 사용됨. 손가락을 화면에 놓은 뒤 들어 올리는 순간, 이벤트가 발생.
스크린을 터치하는 횟수에 따라서 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap) 등이 있음.
2. 더블 탭(Double Tap) : 화면에 손가락을 2회 연속 두드리는 것. 싱글 탭과는 상대적으로 해당 제스처의 목적이 분명한 기능에 배치. 브라우저 사파리 혹은 지도나 이미지를 화면에서 확대하거나 축소하기 위한 제스처로 사용됨.
3. 프레스(Press) : 화면 위를 일정 시간 동안 약간의 힘을 가한 상태로 탭 하는 제스처. 화면 전체가 바뀌는 것이 아니라, 주로 팝업과 같이 숨겨진 메뉴를 불러오거나 기능을 실행할 때 사용됨. 프레스는 ‘터치 앤 홀드(Touch and Hold)’라는 용어로 불리기도 함.
4. 팬(Pan) : 손가락을 떼지 않고 계속 드래그(Drag) 하는 제스처로, 시간과 방향의 제한 없이 사용자가 손가락을 뗄 때까지 패닝(Panning)으로 인식. 화면에서 오브젝트를 이동할 때, 라인 그리기 혹은 확대된 이미지를 상하좌우로 움직여 탐색할 때 사용하는 제스처 방식.
5. 스와이프(Swipe) : 스와이프는 손가락을 댄 후, 일직선으로 드래그하는 것. 시간의 제한은 없으나 직선 움직임이라는 제한이 있음. 보통 화면 탐색 시, 스크롤(Scroll) 기능으로 사용함.
6. 플릭(Flick) : 스와이프에서 좀 더 빠르게 한 방향으로 미는 것을 말함. 탐색하던 브라우저 화면을 불러오거나 다른 화면으로 넘길 때 혹은 숨겨진 드로어 메뉴(Drawer menu)를 열 때 사용됨.
위 동작 UI를 기획 및 배치할 때 주의해야 할 점은 바로 팬 > 스와이프 > 플릭 제스처라는 포함 관계입니다. 즉 스와이프나 플릭의 경우 팬으로 명령어를 인식할 수 있고 플릭의 경우 스와이프로 인식될 수 있으므로 터치 UI를 설계할 때 제스처의 각 포함관계와 특징을 살펴 구성해야 함.
7. 드래그 (Drag) : 손가락의 제스처만 보면, 스와이프나 팬과 유사하지만, 드래그는 오브젝트를 이동할 때나 정해진 방향으로 움직인 후 손가락을 떼는 행동을 말함. 팬처럼 제한 없이 이동할 수 있지만, 스와이프처럼 직선 움직임이 아니어도 인식이 가능. 오브젝트를 이동시킬 때나 텍스트를 복사할 때 주로 사용함.
8. 핀치 인/아웃 (Pinch in/out) : 위 동작들과 다르게 손가락 두 개를 화면에 댄 상태에서 두 손가락 사이를 넓히거나(out) 좁히는(in) 제스처를 말함. 더블 탭 외에 지도나 이미지를 볼 때 확대/축소 기능으로 사용됨. 핀치 아웃은 핀치 오픈(Pinch Open) 혹은 스프레드(Spread)로, 핀치 인은 핀치 클로즈(Pinch Close)라는 용어로도 알려져 있음.
9. 로테이트 (Rotate) : 로테이트도 핀치처럼 두 손가락을 이용하는데, 오브젝트가 도는 회전 값을 인식하는데 차이가 있음. 보통 화면에서 이미지를 회전시킬 때 사용되는 제스처.
728×90
“이 동작이 뭐더라…?” 터치 제스처 알아보기
이 동작… 뭐라고 하더라? 꾹 누르기..?
모바일 앱 서비스를 기획하다 보면 스와이프, 탭 등 사용자의 동작을 정의해야 한다. 그런데 막상 기획서를 작성하다 보면 제스처 이름이 헷갈릴 때가 있다. (그렇다고 누르기 / 꾹 누르기 이렇게 쓰면 본새 안나잖아요ㅜㅜ)
오늘은 ‘네이버 지도’ 앱을 통해 터치 제스처의 종류와 차이점을 알아보도록 한다. 그리고 모바일 제스처와 연관 있는 UI 용어도 알아보자!
이 글을 읽어봐야 하는 사람들:
1. 터치 제스처의 종류를 알고 싶다!
2. 플리킹과 스와이핑의 차이점을 도무지 모르겠다!
핀치 Pinch와 스프레드 Spread
#축소와 확대
‘Pinch in; & ‘Pinch out’이라고도 불리는 핀치(Pinch)와 스프레드(Spread)는 보통 사진이나 범위를 축소하거나 확대할 때 사용된다. 두 손가락을 이용해서 바깥쪽으로 벌리는 것이 스프레드(Spread), 안쪽으로 모으는 것이 핀치(Pinch)다.
네이버 지도 앱에서는 지도를 확대, 축소할 때 핀치와 스프레드 동작을 사용하고 있다.
핀치 시 축소, 스프레드 시 확대
로테이트 Rotate
#회전하기
두 손가락을 이용하는 또 하나의 터치 제스처가 바로 로테이트(Rotate)다. 로테이트는 이름에서도 알 수 있듯이 대상을 원하는 방향으로 회전할 때 사용한다. 네이버 지도 앱에서는 지도를 내가 원하는 방향으로 회전해서 보고 싶을 때, 로테이트를 이용해서 회전할 수 있다.
로테이트 하는 방향에 따라 지도가 회전
탭 Tap
#PC에 클릭이 있다면, 모바일에는 탭이 있다.
탭은 한 손가락으로 화면을 짧게 두드리는 동작이다. 모바일 디바이스를 이용할 때 필요한 가장 기본적인 동작으로, 주로 콘텐츠나 버튼을 선택할 때 사용한다.
네이버 지도에서도 탭은 버튼을 선택하는 가장 기본적인 동작이다. 탭을 이용해 원하는 장소를 검색하거나 조회할 수 있다.
위 조작은 모두 탭으로만 이루어져 있다.
더블 탭 Double Tap
#PC에 더블 클릭이 있다면, 모바일에는 더블 탭이 있다.
더블 탭은 마치 더블 클릭처럼 화면을 두 번 연속으로 두드리는 제스처다. 더블 탭은 보통 화면이 확대된 상태에서 더블 탭으로 화면을 원 상태로 되돌리거나, 원래 상태에서 더블 탭으로 화면을 확대하도록 할 때 사용한다. 모바일 제스처를 신선하게 적용하는 ‘인스타그램’은 게시물 좋아요 누르기, 계정 전환에도 더블 탭을 사용한다.
더블 탭의 경우 그냥 탭 하려는 동작과 혼선이 있을 수 있기 때문에, 유저가 잘못 사용했을 때 크리티컬한 이슈가 있는 기능에 더블 탭을 사용하지는 않는다. (인스타그램 게시물을 염탐하다가 잘못하고 더블 탭을 눌러서 좋아요 누른 거 나뿐인가…)
네이버 지도 앱에서 화면을 더블 탭 하면 지도를 조금 더 확대해서 볼 수 있다.
더블 탭을 할 때마다 조금씩 확대된다.
프레스 Press
#꾹 누르기
프레스(Press)는 화면에 손가락을 꾹 누르는 동작이다. 주로 빠르게 과업을 수행할 수 있는 Shortcut을 제공할 때 사용된다. 프레스는 IT Literacy가 높지 않은 사용자가 쉽게 학습할 수 있는 제스처가 아니다. 따라서 중요도가 높은 기능을 프레스로 동작하게 하는 것은 사용자에게 어렵게 느껴질 수 있다.
네이버 지도 앱 내에서 특정 위치를 프레스(Press)하면, 해당 위치의 상세 주소를 확인할 수 있다. 건물의 경우 그냥 탭을 해도 상세주소를 확인할 수 있지만, 프레스를 이용하면 건물이 없는 곳도 주소를 볼 수 있다. 이런 기능은 굳이 꼭 필요한 기능은 아니기 때문에 프레스(Press)로 구현한 듯하다.
프레스를 이용하면, 탄천 한가운데의 주소도 확인할 수 있다. (탭으로는 확인할 수 없다.)
스와이프 Swipe
#화면 밀기 #가장 많이 쓰이는 제스처
스와이프는 아마 가장 많이 들어본 터치 제스처일 것이다. 손가락을 직선 방향으로 움직여서 동작을 이끌어낸다. 스와이프는 사용자가 한 손가락으로 쉽게 취할 수 있는 제스처이기 때문에 광범위하게 적용이 가능하다. 가로 또는 세로로 이동해 콘텐츠 보여주는 스크롤도 모바일에서는 스와이프를 사용한다.
네이버 지도 앱 홈에서는 아래에서 위로 스와이프 하면 Smart Around 기능을 이용할 수 있다. 그리고 가로로 스와이프 하면 사진을 옆으로 넘겨가며 확인할 수 있다.
패닝 Panning
#이리저리 여러 방향으로 움직이기
패닝은 한 손가락을 떼지 않고 이동하는 동작이다. 스와이프와 가장 큰 차이점은 스와이프가 한 직선 방향으로만 움직이는 동작인 반면에 패닝은 손가락을 뗄 때까지 움직이는 모든 방향 인식이 가능하다는 점이다. 때문에 보다 섬세한 움직임에 적합한데, 선을 그리거나 큰 화면을 움직이면서 보도록 할 때 사용된다.
네이버 지도 앱에서는 지도를 이리저리 움직이며 확인하도록 할 때 패닝을 적용했다.
패닝을 이용하면 지도를 이동하며 볼 수 있다.
플리킹 Flick, 그리고 스와이프와의 차이점
#넌 도대체 뭐니… #플리킹의 예를 찾아보기 힘든 이유
모바일 제스처를 공부할 때 가장 스트레스받았던 부분이 플리킹이었다. 플리킹이란, 한 손가락으로 빠르게 선을 긋는 제스처이다. 도대체 스와이프랑 다른 점이 뭔지? 그냥 빠르게 스와이핑 하면 플리킹인 건가? 스와이핑과 구분되는 플리킹의 예시를 찾기도 어려웠다. (플리킹이랍시고 적용된 게 스와이프랑 별 다를 바가 없음)
그리고 위계 상으로는 패닝 > 스와이프 > 플릭이라는 포함관계가 있다는데… 너무 추상적이라 이해가 잘 가지 않았다. 그래서 깊게 찾아보니 iOS 개발자 문서에 이런 말이 있었다.
앱을 만드는 사람에게 달려있다.
유레카! 그렇다. 플리킹과 스와이프, 패닝은 각각의 제스처를 추상적으로 범주화한 것에 지나지 않는다. 각 앱에서 플리킹과 스와이프를 구별하고 싶다면, 제스처를 시작하는 지점과 거리, 그리고 속도로 ‘알아서, 자의적으로’ 규정하면 되는 부분이라고 한다.
그리고 이 지점이 바로 대부분의 앱 서비스가 플리킹과 스와이프를 구분하지 않고 사용하는 이유다. 사용자는 앱을 사용할 때 ‘이럴 땐 플리킹! 이럴 땐 스와이핑’ 하며 구분하며 사용하지 않는다. 동작이 비슷한 플리킹과 스와이프가 서로 다른 결과를 가져온다면, 사용자에게 큰 피로감을 가져올 것이다.
그러니 스와이핑과 플리킹의 차이점 때문에 고민했던 당신. 이제 스트레스받지 말자.
그래도 플리킹의 예를 찾고 싶다면!
일반적으로 플리킹은 사용자가 제스처를 취한 후에 손가락을 떼어도 해당 대상이 그 방향으로 움직이거나, 제스처의 속도가 대상의 반응에 영향을 준다고 한다.
여기에 가장 적법한 예시가 아마 공 던지기 게임일 것 같다. 사용자가 플리킹을 끝내고 손을 떼도 공은 계속 가던 방향으로 간다. 그리고 사용자의 플리킹 속도가 공의 속도에 영향을 준다.
Reference: 고마운 선생님들
So you have finished reading the 모바일 제스처 topic article, if you find this article useful, please share it. Thank you very much. See more: 모바일 터치 드래그, 모바일 드래그 하는법, jQuery 터치 스 와이프, 스와이프 제스처, 모바일 터치 CSS, 스와이프 스크롤 차이, Swipe Flick 차이, 제스처 UI