brunch

매거진 UX 디자인의 모든 것

라이킷 183 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 30. 2016

모바일 인터랙션 디자인 원칙

UX 디자인 배우기 #22

Today UX 아티클

UX Planet에 게재된 Nick Babich의 글 MobileDesign Techniques를 소개하고자 합니다.

Nick Babich는 지난 몇 년 동안 가장 성공적이었던 인터랙션 디자인을 살펴보면, 인간의 행동에서 정보를 얻어 우리가 느끼지 못한 사이에 장벽을 걷어내고 시각적 표현과 상호적인 경험, 특히 스캐너빌리티(scannability)에 초점을 맞추어 만들어졌다고 말합니다. 이글에서는 가장 중요한 디자인 테크닉과 그 적용 방법을 살펴봅니다.

효과적인 타이포그래피

사이트나 앱에서 보여주는 텍스트의 역할은 앱과 유저 사이에 명확한 연결 고리를 만들고 유저가 목표를 달성하도록 도와주는 것이라고 합니다. 그리고 이 인터랙션에서 타이포그래피가 중요한 역할을 한다고 합니다. 너무 글이 작거나 간격이 좁으면 읽는 데 오래 걸려 결국 대부분의 정보를 건너뛰게 된다고 합니다. 특히 모바일같이 작고 밝은 스크린에서 더욱 그러하다고 합니다. 때문에 화면이 작을수록 타이포그래피는 더 중요해진다고 합니다.

적절한 글자 크기와 줄 간격을 선택해서 쉽게 읽어 내려갈 수 있게 만들어야 한다고 합니다.

적절한 크기와 간격을 사용한 모범 사례, iOS용 Medium 앱

단순한 컬러 스킴(color scheme)

너무 많은 색을 이용하면 사용자 경험에 부정적인 영향을 미칠 수 있는데, 컬러 스킴을 단순화하면 사용자 경험을 개선할 수 있다고 합니다. 한 색상의 채도와 명도만 조절해도 여러 색상과 컬러 스킴을 만들 수 있다고 합니다.

파란색 단일 색상의 컬러 스킴

단색 컬러 스킴 활용 앱 사례

팁: 자신만의 컬러 스킴을 만드는 것이 두려울 수는 있지만 그렇게 복잡하진 않다고 합니다. 무채색 팔레트에 밝은 강조 색상을 추가하는 것이 가장 쉬운 방법 중 하나라고 합니다. 밝은 색이 간단하고 효과적으로 눈길을 사로잡을 수 있다고 합니다.

콘텐츠 기반 내비게이션과 카드

콘텐츠 기반 내비게이션은 오버뷰와 디테일 사이의 매끄러운 전환을 위해 사용되는 디자인 패턴이라고 합니다. 특히 이런 내비게이션과 함께 카드를 사용하면 엄청난 양의 콘텐츠를 소화하기 쉽게 정리할 수 있다고 합니다.

첫 번째 이유는 카드는 적은 공간을 차지하면서도 의미 있는 섹션으로 콘텐츠를 나눌 수 있는 도구이기 때문이라고 합니다.

두 번째 이유는 유저가 이미 직관적으로 카드를 이용하는 방법을 이해하고 있다고 합니다. 정보를 더 찾기 위해서 카드를 뒤집거나 다음 정보 한 뭉치를 보기 위해 스와이핑 해야 된다는 것을 알고 있다는 겁니다.

팁: UI 는최대한 보이지 않게 하고, 콘텐츠에 집중하라고 합니다.

레이어와 뎁스

모바일 스크린은 데스크탑 스크린에 비해 공간이 훨씬 적은데, 점점 더 많은 인터페이스에서 여러 레이어를 쌓아 올려 Z 축을 만들어 이런 결점을 보완하고 있다고 합니다.

겹쳐 놓기 접근법은 인터페이스에 깊이감을주어 경험을 보다 실제처럼 만들어줍니다.

레이어는 유저가 디자인과 상호작용 할 수 있도록 도와준다고 합니다. 면과 그림자는 앱의 구조를 전달해주는 중요한 역할을 한다고 합니다.

레이어는 인터랙션 단서가 됩니다.

많이 사용되는 layered interface 사례는 다음과 같습니다.

플로팅 액션 버튼(Floating action button)

사용을 장려하는 액션에 사용된다고 합니다. UI 위에 원형 아이콘을 떠 있게 만들어 구분해준다고 합니다.

줌인(Zoom-in)

리스트에서 상세 보기로 들어갈 때 사용되고, 전체 리스트 위에 상세 보기 화면이 펼쳐졌다가 리스트로 다시 나올 수 있도록 만든다고 합니다.

스티키 내비게이션(Sticky navigation)

메뉴와 기본 사항이 항상 스크린에 보이도록 고정한 내비게이션이라고 합니다.

스크롤을 내려도 사라지지 않는 스티키 네비게이션(sticky navigation)

픽스드 내비게이션(fixed navigation)

스크롤을 내리면 사라지는 픽스드 내비게이션(fixed navigation)

스크롤을 내리면 사라지는 픽스드 네비게이션(fixed navigation)

모달 윈도(modal window)

기존 창에 새로운 창을 겹쳐서 보여주는 것으로 로그인, 광고, 리마인더 등 공지를 할 때 사용된다고 합니다.

팁: 유저 플로우를 간소화하라고 합니다 - 각 스크린을 한 가지 목적을 위해 디자인하면 된다고 합니다.

익숙한 제스처

제스처 기반 디바이스의 부상은 우리가 인터랙션을 생각하는 방식을 급격하게 바꾸었다고 합니다. 스크린은 터치 타깃만이 아니라 제스처 타깃까지 되었다고 합니다. 스와이프, 탭, 줌 등은 가장 흔하게 쓰이는 제스처로 이젠 거의 본능적으로 사용되고 있다고 합니다.

앱이 제스처 컨트롤에 더 의존할수록 버튼은 더 적어지고 가치 있는 콘텐츠를 담을 공간이 많아진다고 합니다. 그러면 매우 콘텐츠 중심적인 앱이 된다고 합니다.

팁: 앞서 언급한 모든 제스처는 표준 (“직관적인”) 제스처고, 창의적인 제스처를 쓸 땐 조심해야 한다고 합니다. 표준 제스처든 창의적인 제스처든 제스처는 언제나 숨겨져 있으니 시각적 단서가 없으면 유저가 혼란스러워할 수 있다고 합니다.

기능적 애니메이션

기능적 애니메이션은 프로세스의 일환으로 유저 인터페이스에 박아 넣은 미묘한 애니메이션을 뜻한다고 합니다. 기능적 애니메이션은 다음과 같은 ‘인터랙션의 촉진제’ 역할을 한다고 합니다.

시각적 피드백 제공 역할

탭이나 클릭 액션을 취했을 때 움직이는 피드백을 주면, 유저는 즉시 액션이 받아들여졌다는 걸 알 수 있다고 합니다.

매끄러운 상태 전환 및 변화에 이목 집중 역할

아이콘이 다른 이미지로 바뀌면서 두 가지 기능을 할 수 있다고 합니다.

팁: 미묘한 모션과 전환 효과로도 사용자 경험을 강화할 수 있다고 합니다. 하지만 재미만을 위해 이용하면 안 되고, 유저에게 실용적인 분명한 목적을 가지고 있어야 한다고 합니다.

이제 UI 디자인은 모든 불필요한 요소를 걷어내고 기능성에 더욱 집중하는 방향으로 발전하고 있다고 합니다. 앞서 언급된 깔끔한 인터페이스, simple color schemes, 시각적으로 즐거운 심미성 등이 인터페이스에 현대적인 감각을 불어넣어주고 제품을 사용하기 쉽게 만들어 준다고 합니다.