'터치'에 해당되는 글 2건

  1. 2015.11.26 모바일 사용자 UX의 시작, 터치 제스처
  2. 2013.11.12 당신에게 '서울'은 무엇인가요? (6)

IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 




 

우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 


본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 


터치(Touch)

손가락이 화면 위에 올려진 상태를 말합니다. 예를 들어, 손가락 하나를 화면 위에 올려놓았을 경우 디바이스는 한 손가락의 제스처를 명령어로 인식합니다. 즉 터치의 개수는 손가락의 개수와 일치한다고 생각할 수 있습니다. 


제스처(Gesture)

혹시 떠오르는 장면이 있으신가요? 미래를 배경으로 하는 SF, 공상과학 영화에서 많이들 보셨을 겁니다. 바로 사람의 움직임, 가령 동작이나 표정, 근육의 변화 등을 얘기할 수 있습니다. 이를 디바이스가 수학적 알고리즘으로 변환 및 입력된 신호로 인식하는 과정의 인터페이스를 말합니다.



터치 제스처의 중요성

이러한 신체의 일부분이나 움직임을 기반으로 하는 인터페이스가 인터렉션 디자인에서 중요한 이유는 무엇일까요? 첫번째는 대중화 즉, 최근 가장 많은 사용자 사용하는 인터페이스 방식이기 때문입니다. 스마트폰이나 태블릿과 같은 휴대용 디바이스의 경우, PC 사용에 비해 사용하기 쉬운 인터페이스의 역할이 더욱 강조된다는 점을 생각해보면, 이는 가장 쉽고 직관적인 인터페이스 방법 중 하나입니다. 두 번째 이유는 바로 디자인의 효율성입니다. PC보다 작은 모바일 스크린에선 가능한 모든 픽셀을 콘텐츠 자체에 집중시켜 디자인하게 됩니다혹시 상단 혹은 하단에 배치됐던 내비게이션(Navigation) 탭 바(Tap Bar)를 기억하시나요? 요즘은 이 탭 영역을 스크린과 분리시켜 디바이스 자체에 배치하여 지문을 인식하거나 어떠한 제스처를 취하는 방식으로 바뀌었습니다. 현재 우리는 과거 탭 바가 차지하던 공간까지 디자인에 활용할 수 있다는 것입니다. 또한, 터치 제스처 인터페이스는 눈에 보이는 작은 스크린 자체가 뷰포트(viewport)의 전부라는 생각을 탈피하는 계기가 되었습니다. 메인 스크린의 위, 아래 혹은 양옆의 다른 공간을 잡아끌거나(Drag) 미는 (Swipe) 제스처를 취함으로써 스크린 자체보다 더 넓은 사이즈의 영역을 통해 콘텐츠를 효율적으로 선택하고 볼 수 있게 변화했습니다.



터치 제스처의 종류

사용자가 설명서 없이도 직관적으로 사용할 수 있는 모바일 UX / UI를 기획하기 위해서 해야 할 일은 무엇일까요? 기본적으로 다수가 사용하고 있는 터치스크린 중심의 인터렉션을 이해하는 것입니다. 터치 기능을 잘 활용한 디자인은 사용자가 더 빠르게, 효율적인 인터렉션을 경험할 수 있습니다. 





1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것을 말합니다. 보통 앱을 실행하거나 어떤 것을 선택할 때 사용됩니다. 손가락을 화면에 놓은 뒤 들어 올리는 순간, 이벤트가 발생합니다. 또한, 스크린을 터치하는 횟수에 따라서 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap) 등이 있습니다. 애플의 아이폰 6s부터 추가된 3D 터치의 경우, 1단계에 해당하는 기본 제스처입니다. 


2. 더블 탭(Double Tap) : 탭의 종류 중 싱글 탭 다음으로 많이 사용되는 제스처입니다. 더블 탭은 화면에 손가락을 2회 연속 두드리기 때문에 싱글 탭과는 상대적으로 해당 제스처의 목적이 분명한 기능에 배치합니다. 예를 들어 브라우저 사파리 혹은 지도나 이미지를 화면에서 확대하거나 축소하기 위한 제스처로 사용합니다. 


3. 프레스(Press) : 화면 위를 일정 시간 동안 약간의 힘을 가한 상태로 탭 하는 제스처를 프레스라고 합니다. 화면 전체가 바뀌는 것이 아니라, 주로 팝업과 같이 숨겨진 메뉴를 불러오거나 기능을 실행할 때 사용됩니다. 프레스는 '터치 앤 홀드(Touch and Hold)'라는 용어로 불리기도 하며, 추가로 아이폰 6s부터 추가된 3D 터치 중 2단계 제스처(Peek 엿보기)입니다. 


3-2. 세게 누르기 (Deep press) : 프레스보다 더 힘을 줘 길게 누르는 방식으로, 아이폰 6s부터 추가된 3D 터치 중3단계에 해당하는 제스처(Pop 튀어나오기)입니다.





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) : 로테이트도 핀치처럼 두 손가락을 이용하는데, 오브젝트가 도는 회전 값을 인식하는데 차이가 있습니다. 보통 화면에서 이미지를 회전시킬 때 사용되는 제스처 입니다. 




지금까지 모바일에서 자주 쓰이는 기본적인 제스처에 대하여 알아봤습니다. 모바일 플랫폼에 따라 약간의 차이가 있지만, 기본적인 제스처에 대한 정의와 이해는 개발자와 원활한 소통뿐 아니라 깔끔하고 체계적인 UX, UI 디자인을 완성할 수 있는 기본기가 될 것입니다. 




by 고양이 발자국





Posted by slowalk

많은 사람이 꿈을 찾아 모여드는 곳 서울, 당신에게 서울은 어떤 의미인가요? 서울 시민들의 행복, 미래, 인생, 희망, 기회, 친구가 되기를 꿈꾸는 서울시는 지난 9월 서울 시민들의 이야기를 담은 브로슈어를 발간하였습니다. 슬로워크에서 작업한 서울시 홍보 브로슈어의 작업과정, 한번 살펴볼까요?



발행처 울특별시   디자인 SLOWALK(디자이너 강혜진, 디렉터 펭도)



국문, 영문, 중문으로 제작되어 국내뿐만 아니라 해외에서도 사용될 예정인 이번 홍보 브로슈어는 사진으로만 보는 서울이 아닌 만질 수 있고 다가갈 수 있는 서울이라는 느낌을 전달하기 위해 'touch'라는 컨셉으로 진행하게 되었습니다. 스마트폰의 잠금해제 화면을 연상시키는 표지 그래픽을 통해 표지를 열고 서울시의 이야기 속으로 빠져들고 싶은 생각이 들지 않으시나요?



브로슈어 속에는 여성, 청소년, 어르신, 장애인, 대학생, 외국인 등 각 분야를 대표하는 서울시민 6명이 등장합니다. 기존의 홍보 브로슈어는 행정편의상의 분류에 따라 시의 정책을 소개하는 방식이었는데요, 이번 브로슈어는 시민의 시각에서 바라볼 수 있도록 기획했습니다. 따라서 각 분야를 대표하는 시민가족을 섭외해서, 직접 경험한 서울시의 정책을 소개하도록 하여 현실성을 높이고 이해가 쉽도록 구성했습니다. 





첫번째 시민가족은 자녀 출산으로 인해 직장을 그만두었다가 출산 후 사회적기업에 근무하고 있는 경력단절여성 이은영씨 입니다. 서울시의 국공립 어린이집, 여성안심서비스, 여성일자리에 대한 정보를 얻을 수 있습니다.





두번째 시민가족은 집 근처 도서관을 애용하는 중평중학교 3학년 학생 남궁유나씨 입니다. 서울시의 공공도서관, 청소년 체험프로그램, 그리고 서울시의 에너지 절감량, 생활폐기물 재활용률과 같은 환경 정보 또한 얻을 수 있습니다.





번째 시민가족은 마을신문인 '낙산골 사랑방' 발행인 조우철씨 입니다. 서울시의 마을공동체, 도시농업 지원과 노후지원, 집 근처 복지시설에 대한 정보를 얻을 수 있습니다.





번째 시민가족은 불의의 사고로 인해 하반신 마비가 된 자영업자 나동수씨 입니다. 서울시의 장애인 콜택시 및 복지제도와 생활환경, 그리고 서울시의 경제지원사업에 대한 정보도 얻을 수 있습니다.





다섯번째 시민가족은 셰어하우스에 거주하는 연세대학교 영문학과 4학년 학생 이선민씨 입니다. 서울시의 공유도시 정책과 심야버스, 청년 일자리에 대한 정보를 얻을 수 있습니다.




여섯번째 시민가족은 실리콘밸리에서의 성공 경험을 바탕으로 IT기업을 경영하고 있는 마이클 실만씨 입니다. 서울시의 관광정보와 외국인 투자에 대한 정보를 얻을 수 있습니다.




서울의 600년 역사를 한 눈에 볼 수 있는 페이지도 제작했습니다. 




슬로워크에서 기획한 이번 사진촬영의 스토리보드도 간단히 살펴볼까요?

인포그래픽을 따로 제작하는 것이 아니라 사진을 통해 정보도 함께 제공할 수 있도록 사진촬영 단계에서부터 정보 전달에 초점을 맞추었습니다. 




시민에게 한 걸음 다가가고자 하는 서울시의 노력이 느껴지시나요? 이번 결과물을 통해 서울시 안에서 새로운 꿈을 꾸는 분들이 많아졌으면 하는 바람입니다.


> E-BOOK으로 보기 (서울시 홈페이지)




by 사막여우 발자국


Posted by slowalk