좋은 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 “레이아웃”

아이콘

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

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

Continue reading “아이콘”

타이포그래피

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

Continue reading “타이포그래피”

iOS & Android: UI 디자인

디지인할 때 알아두어야 할 각 플랫폼의 차이점에 대한 정리입니다. 모바일 디자인이 고도화되면서 점점 비슷한 UX로 발전하고 있지만, 그 안에서도 디테일한 차이가 있습니다. 서비스를 디자인 할 때 목적에 따라 패턴을 디자인하고 각 플랫폼에 동일하게 적용하는 편이지만 OS에서 권장하는 UI 가이드라인을 살펴보면 적합한 패턴을 선택하는데 도움이 될 것입니다.

Continue reading “iOS & Android: UI 디자인”