좋은 UI를 위한 움직임

모바일 디자인이 등장하기 전 웹 디자인에서 움직임은 금기였습니다. 속도를 느리게 하고 사용자가 보고 싶어하지 않는 정보에 강제로 집중하게 만드는 장치였습니다. 공급자가 보여주고 싶은 정보를 보게하는 용도로 많이 쓰였습니다. 모바일 시대로 들어서면서 인터넷이 불안정하고 기기 성능이 떨어졌기 때문에 움직임은 거의 사용되지 않았습니다. 이제는 모바일 관련 기술이 발달하면서 서비스에 움직임을 적용하는 난이도도 낮아졌습니다. 여전히 보여주고 싶은 정보를 강조하는데 쓰이고 있지만, 사용자를 위한 적절한 움직임을 제공하려는 노력이 점차 늘고 있습니다.

청각 언어, 시각 언어와 마찬가지로 움직임 역시 언어의 한 종류입니다. 한정된 공간에 다양한 정보를 전할 수 있어 정적인 요소로 전하기 어려운 내용을 쉽게 전할 수 있습니다. 또한 우리가 경험하는 실제 세계에는 ‘가만히 있는’ 것은 절대 없기 때문에 움직임으로 자연스러움 한 스푼을 더해줄 수 있습니다. 평면 스크린에서 자연스러움을 묘사하는 마지막 조각이라 볼 수도 있습니다. 여기에 더해 나의 행동에 따라 반응한다면 추상적인 시각 요소가 물리적인 세계에 정말로 존재한다는 느낌을 전합니다.

움직임의 용도

주목하고 기다리기

움직임은 사용자가 집중하게 만듭니다. 다른 시각 기법들보다 움직이는 요소에 가장 먼저 눈길이 갑니다. 정적인 요소는 눈과 뇌가 정보를 처리하는 속도가 빠르지만, 동적인 요소는 집중력이 떨어질 때까지 시선이 머무는 편입니다. 움직임 정보를 처리하는 동안 시간을 느끼지 못해 기다리는 시간을 짧게 느끼게 도울 수도 있습니다.

가상의 공간 상상하기

움직임은 서비스를 구조를 쉽게 이해할 수 있게 돕습니다. 평면의 모바일 스크린은 추상적인 공간입니다. 추상적인 공간에 구체적인 구조를 떠올릴 수 있도록 애니메이션을 활용합니다. 한정된 화면에 공간과 구조를 떠올릴 수 있도록 화면이 전환될 때 어디서 등장하는지 알려줍니다. 오른쪽에서 등장하는 애니메이션은 왼쪽에서 오른쪽으로 진행되는 구조를 상상할 수 있으며, 아래에서 튀어나왔다 작업을 마무리하고 사라지는 구조로 일시적인 작업은 아래에서 위로 잠깐 나타나는 구조를 상상할 수 있습니다.

많은 정보 순차적으로 이해하기

움직임은 적은 공간에 여러 정보를 전달하기 좋습니다. 고정되어 있을 경우 한번 표시된 정보는 특정 공간을 점유하게 됩니다. 이 때 움직임을 이용해 보이는 정보를 교체하면 짦은 시간에 여러 정보를 전할 수 있습니다. 눈이 한번에 받아들이는 정보량을 줄이고 고객이 터치나 스크롤 액션을 하지 않고 다양한 정보를 확인할 수 있는 기법입니다. 기다리지 않으면 무슨 내용이 나올지 알 수 없기 때문에 시작부터 끝까지 요소의 맥락이 연결되는 것이 좋습니다.

직관적이고 빠른 피드백 받기

움직임은 직관적으로 예측할 수 있는 피드백을 전할 수도 있습니다. 글, 사진, 이미지 시각 요소가 추가될 때마다 사용자는 정보를 해석해야 합니다. 특정 요소에서 일어나는 변화를 따로 설명하지 않고 요소 자체의 움직임만으로 전달할 수도 있습니다. 예를 들어 특정 요소를 삭제하려고 할 때, ‘실패했습니다’ ‘성공했습니다’를 텍스트나 아이콘을 추가해 정보를 전달할 수 있습니다. 하지만 여기서 시각 요소를 추가하지 않고 삭제하려는 대상에 움직임을 추가해 사용자가 시각 요소를 해석할 필요 없이 직관적으로 이해할 수 있게 도울 수 있습니다. 실패했을 때는 고개를 흔들듯 좌우로 움직이고, 성공하면 기분이 좋은듯 살짝 점프하는 것이죠.

움직임의 요소

속도

속도와 지속 시간은 상대적입니다. 1초(1,000ms) 모바일 환경을 기준으로 0.2초(200ms) ~ 0.5초(500ms)에서 시작하는 것이 좋습니다. 이 숫자는 Neilson Norman GroupModel Human Processor에서 기반합니다. 0.1초(100ms)가 순간으로 지각되고 1초(1,000ms)가 생각할 수 있는 상한선이라고합니다. Model Human Processor 에서는 너무 짧으면 인지가 되지 않고 너무 길면 지루합니다. 웹은 실행과 연관된 애니메이션은 속도가 더 빨라야 합니다. 웹이 정상적으로 작동하지 않는다고 생각할 수도 있기 때문입니다. 또한 요소의 크기가 클수록 빨리 움직여야 합니다. 동일한 면적에서 움직여야 하는 거리가 다르기 때문입니다.

반복되는 움직임은 가속도를 주는 것이 자연스럽습니다. 같은 속도로 움직이는 것은 존재하기 어렵기 때문에 자연스럽게 느껴지지 않습니다. 빠르게 시작하고 끝에 닿을수록 서서히 느려지는 움직임이 자연스럽습니다.

등장과 퇴장 움직임은 상황에 따라 다릅니다. 요소가 등장할 때는 사용자가 기다리지 않도록 최대한 빨리 표시하는 것이 좋습니다. 퇴장할 때는 요소가 움직인다는 사실을 전한 뒤에는 최대한 빨리 사라지는 것이 좋기 때문에 사라지는 속도가 점점 빨라지는 가속도로 표현하는 것이 좋습니다.

동선

디지털 프로덕트에서 요소가 표시되는 환경과 동선을 고려해야 합니다. 움직임이 사용자의 경험 단계에서 어떤 문제를 해결해주는지 명확하게 정의하고 사용자의 목표를 달성하는 여정에 도움을 줄 수 있는 맥락을 찾아 움직임을 적용합니다. 여러 요소가 움직여 혼란스럽지 않게 우선 순위를 명확하게 하고 인지 부하가 없도록 설계합니다.

사용자가 행동하는 위치에서 움직임이 시작되는 것이 좋습니다. 예를 들어 사용자가 오른쪽에서 화면을 쓸면, 새로운 창이 오른쪽에서 등장해야 합니다. 사용자가 팝업을 띄우는 버튼을 누르면 상세한 내용을 선택하는 창이 누른 버튼에서부터 시작해서 확장되어 등장하는 것이 자연스럽습니다.

요소 등장하는 순서는 맥락에 따라 다릅니다. 모든 요소들이 순차적으로 움직임이 진행될 필요는 없으며 가급적 움직임의 량과 시간이 적을수록 좋습니다. 정보의 시작과 끝을 표현하기 위해 모든 정보를 동시에 표시하지 않을 때에도 최대한 움직이는 요소를 그룹으로 묶어 사용자가 눈으로 쫓는 동선을 최소화해야합니다.

UI 디자인 가이드

좋은 UI를 위한 움직임

좋은 UI를 위한 움직임

모바일 디자인이 등장하기 전 웹 디자인에서 움직임은 금기였습니다. 속도를 느리게 하고 사용자가…

좋은 UI를 위해 꼭 확인해야 하는 20가지 경우의 수

좋은 UI를 위해 꼭 확인해야 하는 20가지 경우의 수

인터페이스를 디자인할 때 종종 개발자 분께서 ‘앗 그것도 정의해주셔야 해요’라고 말씀하실 때가…

좋은 UI를 위한 알림

좋은 UI를 위한 알림

알림은 애플리케이션에서 발생한 일에 대해 알려주는 것입니다. 시스템 변경사항이나 다양한 커뮤니케이션에 대한…

UI를 위한 글쓰기

UI를 위한 글쓰기

UX 글쓰기(UX Writing)는 제품과 고객의 대화를 디자인합니다. 웹사이트, 앱과 같은 다양한 디지털 환경에서…

패턴

패턴

패턴은 사용자가 디바이스를 조작해 행동하는 일반적인 과정을 뜻합니다. 컴포넌트와 다양한 시각 요소를…

컴포넌트

컴포넌트

컴포넌트는 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의…

레이아웃

레이아웃

레이아웃은 특정 영역 안에 요소를 배치하는 것입니다. 스크린에서 사용하는 레이아웃은 정적인 화면…

아이콘

아이콘

아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는…

타이포그래피

타이포그래피

문자는 다른 시각 언어보다 구체적이고 정확하게 정보를 전달하는 언어입니다. 물체나 풍경 같은…

더 보기

좋은 UI를 위해 꼭 확인해야 하는 20가지 경우의 수

인터페이스를 디자인할 때 종종 개발자 분께서 ‘앗 그것도 정의해주셔야 해요’라고 말씀하실 때가 많죠? 그래픽 디자인 툴을 이용해 정지된 화면을 만들다보면 다양한 경우의 수를 예측하기가 어려울 때가 많습니다. 정교하게 만든 디자인 시스템을 이용해 프로토타이핑을 해도 놓치는 부분이 생길 수 있습니다.

디자이너는 현재 사용자 상태, 사용자가 시스템에 주는 정보, 시스템이 사용자에게 주는 정보 등을 꼼꼼하게 살펴 사용자의 경로를 설계합니다. 가장 최고의 상태부터 가장 최악의 상태까지 촘촘하게 사용자 층을 나눠 누구나 목적을 쉽게 달성할 수 있게 돕는 길을 만드는 것이 중요합니다. 이번 글에서는 다양한 경우의 수에 대응할 수 있는 디자인을 만들기 위해 꼭 확인해야 하는 인터페이스의 20가지 속성에 대해 정리했습니다.

정보 입력

쉽게 보면 사용자가 버튼을 누르거나 글자를 입력하는 것을 입력이라 합니다. 사용자가 시스템에 정보를 보내는 행동에 대한 정의입니다.

  1. Default: 최초 상태입니다.
  2. Inactive: 조건에 따라 입력할 수 없는 상태입니다.
  3. Active: 입력할 수 있는 상태입니다.
  4. Touch Area: 상호 작용할 수 있는 범위의 크기입니다.
  5. Type: 입력하는 정보의 종류입니다.
  6. Action: 정보를 제출하는 행동입니다.

정보 출력

버튼을 누르면 다른 화면으로 이동하거나, 텍스트를 입력했을 때 잘못되었다고 표시하는 것들을 출력이라합니다. 사용자가 보낸 정보에 대한 시스템의 대답입니다.

  1. Loading: 시스템으로부터 정보를 기다리는 상태입니다.
  2. Incorrect: 정보가 틀린 상태입니다.
  3. Correct: 정보가 맞은 상태입니다.
  4. Fail: 진행하던 것이 실패한 상태입니다.
  5. Success: 진행하던 것이 성공한 상태입니다.
  6. Save: 정보를 저장하는 시점에 대한 정의입니다.
  7. Refersh: 정보를 다시 불러오는 시점에 대한 정의입니다.

정보의 량

카드 리스트, 필터 리스트 등 여러 개의 정보를 불러올 때 상태에 대한 정의입니다. 리스트처럼 동일한 요소를 불러오는 것 뿐만 아니라 상품 카드처럼 다양한 요소가 덩어리로 묶인 경우에도 량에 대해 고려해야 합니다.

  1. None: 정보가 없는 상태입니다.
  2. Min: 1개 혹은 최소 단위의 정보가 나온 상태입니다.
  3. Some: 약간 있는 상태입니다.
  4. Many: 많이 있는 상태입니다.
  5. Max: 꽉 찬 상태입니다.
  6. Overflow: 넘친 상태입니다.

좋은 UI를 위한 알림

알림은 애플리케이션에서 발생한 일에 대해 알려주는 것입니다. 시스템 변경사항이나 다양한 커뮤니케이션에 대한 내용을 주로 알려줍니다. 시스템 변경사항은 예약 상태 변경이나 팔로우한 콘텐츠 업데이트 등이 있고, 커뮤니케이션은 사용자 간의 소통으로 메시지, 전화 등이 있습니다.

사용자가 서비스를 사용하고 있지 않을 때 알림을 받는 경우가 많기 때문에 맥락에 맞는 메시지를 적절한 시간에 전해야 합니다. 사용자가 서비스로부터 기다리는 일반 메시지는 기본 수준의 강도로 알림을 전합니다. 만약 메시지를 놓치거나 의사결정이 늦었을 때 사용자에게 큰 리스크가 있을 때는 평소와 다르게 강한 강도로 알림을 전하기도 합니다.

양치기 소년이 되지 않도록 조심해야 합니다. 또한 모든 알림은 사용자의 동의를 받아야 하며 인지 공해에 대한 관심이 커지면서 사용자가 다양한 설정으로 알림을 무시할 수 있기 때문에 각 상황에 맞게 의미 있는 고객 경험이 되도록 섬세하게 설계해야 합니다.

좋은 알림을 위한 질문

사용자가 신뢰하고 알림에 집중할 수 있어야 합니다. 사용자가 알림을 확인할 가치가 없다고 생각하는 순간 앱에서 보내는 모든 메시지를 무시할 것입니다. 제작자가 보여주고 싶은 것이 아니라 사용자에게 필요한 것을 보여주는 것이 중요합니다. 알림을 보내기 전 아래 필수 질문과 주의 사항을 확인합니다.

필수 질문   

  • 알림을 왜 보내는가?
  • 어떤 내용을 알려야 하는가?
  • 어떻게 보여줄 것인가?
  • 사용자는 언제 반응해야 하는가?
  • 알림이 지속적인가 지속적이지 않은가?

주의 사항   

  • 사용자가 동의한 내용만 보낼 것
  • 사용자에게 가치 있는 정보를 줄 것
  • 제목과 내용을 짧고 읽기 쉽게 쓸 것
  • 시급도에 따라 강도를 조절할 것
  • 반복하지 말 것
  • 삭제와 같은 파괴적인 행동을 요구하지 말 것
  • 민감한 개인 정보를 포함하지 말 것
  • 광고를 위해 사용하지 말 것

알림 모델

앱 내에서 알림은 통합 알림을 주로 사용하며 알림의 종류가 많아지면 주로 통합 알림과 개별 알림이 섞인 하이브리드 형태를 많이 사용합니다. 알림은 소스, 정보, 메뉴, 배지로 구성됩니다.

  • 소스: 알림을 보낸 출처입니다.
  • 정보: 사용자에게 전하는 메시지입니다.
  • 탭: 정보의 출처가 시각적으로 표현된 탭입니다.
  • 배지: 새로운 정보가 있음을 알려주는 시각 장치입니다.

하단 탭 내비게이션에 정보 출처 탭이 있을 경우 해당 탭에 배지가 붙습니다. 사용자가 화면에서 소스에 바로 접근할 수 있는 방법이 없는 알림은 중앙 알림에서 모아서 보여줍니다.

플랫폼별 알림 형태

안드로이드 Android

알림 창

안드로이드 알림은 노티피케이션 창은 헤더, 콘텐츠, 행동으로 구성됩니다. 헤더에는 앱에 대한 정보와 타임 스탬프가 표시됩니다. 헤더 텍스트는 정보의 출처 Source를 알려줄 때 표기합니다. 콘텐츠 영역은 제목, 텍스트, 이미지를 표시합니다. 이미지에는 사용자와의 대화일 경우 아바타를 표기합니다. 액션 영역은 주로 2개 행동이 색이 있는 텍스트로 표시됩니다.

  • 헤더 (Header): 앱 아이콘, 앱 이름, 헤더 텍스트(옵션), 타임스탬프, 확장 가능한 노티 표시
  • 콘텐츠 (Content): 콘텐츠 제목, 콘텐츠 텍스트, 큰 아이콘(옵션)
  • 액션 (Action): 텍스트 버튼

UI 경험

사용자는 상단을 쓸어내려 볼 수 있는 알림 서랍 (Notification Drawer)에서 다양한 알림을 모아서 확인할 수 있습니다. 하단 알림 설정을 통해 전체 알림을 설정할 수 있고 개별 애플리케이션의 알림을 설정할 수도 있습니다. 확장 가능한 알림일 경우 더 많은 텍스트와 이미지를 확인할 수 있습니다. 같은 출처 (Source)의 알림이 겹칠 경우 하나로 합쳐서 “3개 메시지가 있습니다”처럼 표시하며 확장했을 때 자세한 요약을 표시합니다.   

  • 알림 서랍 (Notification drawer)
  • 확장 뷰 (Expanded view)
  • 알림 여러 개 겹칠 때 (Multiple notification)
  • 알림 그룹(Parent, Child)

인지 강도

안드로이드에서 디지털 디바이스에서 여러 방법으로 신호를 보냅니다. 강도에 따라 크게 5가지로 구분합니다.

  • LED 깜빡이기
  • 상단 스테이터스 바에 아이콘
  • 소리와 진동
  • 잠금 화면
  • 현재 화면에 보여주기

중요도 레벨

중요도에 따라 사용자의 주의를 끄는 4가지 단계가 있습니다.   

  • High: 시각 요소+소리. 메시지, 알람, 전화 같은 High
  • Default: 소리. 할 일 알림 같은 알림. 소리
  • Low: 소리 없음. 새 콘텐츠 등
  • Min: 소리, 시각 요소 없음. 프로모션 콘텐츠

iOS

알림 창

iOS 알림 창은 앱 아이콘, 미디어, 제목, 메시지, 앱 이름, 액션 버튼으로 구성됩니다. 앱 아이콘에서는 메시지일 경우에는 앱 아이콘과 출처(Source)를 함께 표시합니다. 사용자가 알림을 길게 눌러 창을 확장해 몇 가지 행동을 할 수 있게 설정할 수 있습니다.

  • 앱 아이콘
  • 앱 이름 or 출처
  • 제목
  • 메시지
  • 타임스탬프
  • 액션

UI 경험

잠금 화면에서 개별 알림을 관리할 수 있습니다. 설정에 따라 상세 내용을 가릴 수 있고 잠금을 해제하면 자세한 내용을 확인할 수 있습니다. 상단을 쓸어내려 볼 수 있는 알림 센터(Notification Center)에서 잠금화면과 동일한 작업을 할 수 있습니다. 앱을 사용하는 동안 알림이 올 경우에는 상단에 배너(Banner)가 뜹니다. 알림을 길게 눌러서 알림 창을 확장할 수 있고 바로 액션을 선택할 수도 있습니다. 가려졌을 때 보이는 문구도 설정할 수 있습니다.   

  • 잠금화면 Lock Screen
  • 알림 센터 Notification Center
  • 팝업 Banner
  • 길게 눌러 확장하기
  • 확장 보기에서 바로 행동하기
  • 가려졌을 때 플레이스 홀더
  • 그룹핑

인지 강도

크게 4가지 단계가 있으며 단계별로 강도에 따라 소리와 진동, 스크린 켜짐, 포커스 시스템 설정 무시가 다릅니다.   

  • Passive: 소리와 진동이 없고, 스크린이 켜지지 않고, 시스템 설정을 무시하지도 않습니다.
  • Active(Default): 소리와 진동이 있고 화면도 켜집니다. 집중 모드를 무시하지 않습니다. 가장 일반적인 알림입니다.
  • Time Sensitive: 소리와 진동이 있고 화면도 켜집니다. 집중 모드를 무시합니다. 집중 모드가 도입되면서 생겼습니다.
  • Critical: 소리와 진동이 있고 화면도 켜지고 집중 모드를 무시합니다. 행동하기 전까지 지속적으로 소리와 진동이 울립니다. 긴급 재난 경보 종류에 쓰입니다.

디자인 나침반

지식 한 꼬집 더해 주세요!

이 주제에 관해 바로 잡을 내용이나 더해주실 이야기가 있다면 위키피디아에 보태주세요. 작은 지식도 큰 도움이 됩니다.

디자인 나침반 위키피디아에서 보기

UI를 위한 글쓰기

UX 글쓰기(UX Writing)는 제품과 고객의 대화를 디자인합니다. 웹사이트, 앱과 같은 다양한 디지털 환경에서 쓰이는 기능적 텍스트를 작성하죠 사용자가 목표를 달성하는데 도움을 줄 수 있는 글을 작성하고, 나아가 통일된 목소리를 전달하는 역할을 하죠.

업계에서는 라이팅과 라이터가 통용되지만, 라이팅(Writing)과 라이팅(Lighting)이 겹치는 것을 피하고 한국어 맥락이 더 이해하기 편하다는 생각에 글쓰기와 작가라는 단어를 사용했습니다.

Continue reading “UI를 위한 글쓰기”

패턴

패턴은 사용자가 디바이스를 조작해 행동하는 일반적인 과정을 뜻합니다. 컴포넌트와 다양한 시각 요소를 이용해 페이지를 설계하고, 각 페이지에서 사용자와 상호작용하며 최종 결과에 도달하기까지의 과정을 설계합니다. 사용자에게 익숙한 일반적인 패턴을 많이 사용하며, 맥락에 맞추어 변형하기도 합니다.

Continue reading “패턴”

컴포넌트

컴포넌트는 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위입니다. 컴포넌트에서 가장 중요한 속성은 재사용으로 어떤 맥락에서도 사용자가 동일하게 이해하고 사용할 수 있어야 합니다. 특정 영역에서만 사용 가능하지 않도록 용도를 명확하게 정의하고, 색, 텍스트, 아이콘 등을 이용해 시각적으로 적절하게 구성해야 합니다.

Continue reading “컴포넌트”

레이아웃

레이아웃은 특정 영역 안에 요소를 배치하는 것입니다. 스크린에서 사용하는 레이아웃은 정적인 화면 균형 뿐만 아니라 서비스의 추상적인 공간의 구조를 적절하게 표현해야합니다. 또한 다양한 스크린에서 표시되기 때문에어떤 환경에서도 유사한 맥락으로 사용할 수 있도록 설계해야 합니다.

Continue reading “레이아웃”

아이콘

아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는 시각 언어입니다. UI 아이콘, 픽토그램, 사인 등으로 대표되며 좁은 영역을 차지하면서도 의미를 전달할 수 있어 다양한 영역에서 쓰이고 있습니다.

다른 요소보다 개성을 부여하기 쉽고 시각 원리에 대한 실험을 할 수 있어 많은 디자이너의 사랑을 받고 있습니다. 이 글에서는 아이콘의 속성과 UI 디자인에서 권장하는 아이콘 디자인 가이드를 요약했습니다.

Continue reading “아이콘”

타이포그래피

문자는 다른 시각 언어보다 구체적이고 정확하게 정보를 전달하는 언어입니다. 물체나 풍경 같은 것들은 아이콘이나 이미지로 알려주는게 좋을 수 있지만, 행동이나 개념을 알려줄 때는 문자가 더 효율적입니다. 같은 문화권이라면 의미 전달이 확실하기 때문에 가장 많이 쓰이는 시각 요소입니다.

Continue reading “타이포그래피”

좋은 UI를 만들기 위한 색

색은 디자인에서 정말 중요한 요소 중에 하나입니다.

같은 꽃이더라도 파란 꽃과 붉은 꽃이 전달하는 느낌이 다르죠. 어떤 디자인 요소보다 강렬한 자극을 주기 때문에 조심스럽게 다뤄야하는 요소입니다. 또 분위기나 뉘앙스를 전달하는 것 뿐만 아니라 정보를 전달하는 역할을 하기도 합니다. 신호등 처럼 초록색은 긍정,노란색은 경고, 빨간색은 금지와 같은 내용을 전달하기도 합니다.

색은 마치 불 같습니다. 적절하게 사용하면 원하는 결과를 얻을 수 있지만 과도하게 사용하면 내 디자인을 망쳐버릴 수 있습니다. 사용자가 우선순위에 따라 빠르게 행동할 수 있도록 도와야 하는 디지털 프로덕트 디자인에서는 색을 정말 신중하게 사용해야 합니다. 색이라는 불을 잘 다룰 수 있게 어떤 속성이 있는지 알아보겠습니다.

Continue reading “좋은 UI를 만들기 위한 색”