[책 리뷰] 개발자의 모바일 UX/UI 디자인 접하기 (feat. 모바일 UX/UI 디자인 강의)

개발자와 디자이너, 디자이너와 개발자는 서로 이해하지 못하는 부분들과 오해로 자주 충돌하곤 한다.

디자이너는 사용자에게 더 편하고 심미적인 디자인을 전달하고, 개발자는 기술적으로 어렵거나 과하다고 여겨지는 부분에서의 불만을 초래하기도 한다.

따라서, 본인은 조금이나마 디자이너의 입장과 디자인 가이드 등을 이해하여 좀더 원활한 커뮤니케이션과 나아가 토이 프로젝트들에서 셀프 디자인을 할 수 있도록 개발자의 입장에서 "모바일 UX/UI 디자인 강의"라는 책을 읽으며 눈여겨볼 내용들을 간략하게 정리해보았다.

참고한 책

• 책 제목 : 모바일 UX/UI 디자인 강의
• 글쓴이 : 김영삼
• 출판사 : 한빛미디어
• 개정판 1쇄 : 2021년 8월 30일

디자인 가이드 및 구성 요소들을 제공해주고 있어서 샘플 가이드를 기본으로, 원하는 토이 프로젝트의 프로토타입을 구성하기 충분할 것 같다.

운영체제 별 샘플을 제공하고 있으며, Zeplin 등을 이용해 공유하는 방법까지 상세히 설명하고 있다.
XD의 각 기능을 설명하고 있기 때문에, 이후 셀프로 제작해 보기에도 원활할 것으로 생각되며, 향후 프로토타입에 대한 발표 등을 수행 시, XD 또한 오븐과 같은 프로토타입 제작 툴로 활용하기에도 무리가 없을 것 같다.

실무에서의 모바일 UX 디자인

UX는 "넓은 의미, 종합적인 Overall UX"와 "좁은 의미인 직관적인 Intuitive UX"로 나뉜다.

• Overall UX
  • 서비스 자체를 설계하고 기획/제작하는 방법을 말한다. (기획, 설계, 마케팅, 사용자 분석 등 서비스 자체를 기획하고 설계하는 과정)
• Intuitive UX
  • 실제 사용자들이 서비스를 접하고 사용할 수 있도록 구체화하고 시각화하는 작업을 말한다. (서비스를 시각화 하는 과정으로, 흔히 아는 UX 디자인이 이에 속함)

자주 쓰이는 용어

UX란?

UX는 User Experience 로, '사용자 경험' 이라고 해석할 수 있다. 개인이 특정한 제품/서비스를 사용자가 상호작용하면서 가지는 모든 경험의 결과를 의미한다. (출처. 위키피디아)
'Experience' 즉, '사용자의 편리성', '효율적인 조작' 등 사용자의 편리성과 조작성에 대부분의 디자이너가 집중하지만, 모든 콘텐츠의 제작을 '사용자의 편리함'에 집중해야하는 것은 아니다.
실무에서 UX에 고려해야할 세가지 요소는 다음과 같다.

• UX 는 발명이 아닌 발견
  • 전에 없던 새롭고 창의적인 것을 만드는 것보다, 기존 서비스를 현재 환경/기술에 맞춰 새로운 형태로 재구성한 서비스들이 많다.
  • 완전히 새로운 서비스를 추구하기보다, 익숙하게 사용하고 있는 서비스를 현재에 맞게 재구성하는 것도 좋은 접근 방식이다.
  • 기존의 서비스들이 사용자들에게 어떠한 가치, 기술, 경험을 제공하는지 연구/분석을 하고, 이를 토대로 새로운 서비스를 제작하면, 사용자들의 숨어있는 니즈가 충족될 것이다.
• UX는 편리함보다 익숙함을 따른다.
  • 대부분의 사용자들은 편리함보다 익숙함을 따른다.
  • 사용자가 서비스를 익숙하게 사용하게하려면 어떻게 해야할 것인가에 대한 기획 전략이 필요하다.
  • 화려한 UI만 필요한 것은 아니라는 것을 명심하자.
• UX는 제품이 아닌 가치를 제공한다.
  • UX는 브랜드의 가치를 결정하기도 하므로, 성능과 기능 외에 브랜드의 가치를 높이는 방법에 대해 고민해야한다.

BX란?

BX는 Brand Experience 로, 서비스의 기능 및 성능 외적으로, 사용자가 해당 브랜드에 대한 감성이나 가치를 가질 수 있도록 브랜드의 이미지를 대표할 수 있는 것을 디자인하는 과정을 말한다. (모바일 앱에서는 앱 스타일이 된다.)
색상, 로고, 레이아웃 등의 메타포들을 활용해 디자인을 한다.

UI란?

UI는 User Interface 로, 사용자 인터페이스 즉, 폰트, 레이아웃, 컬러 등을 활용한 화면 디자인을 말하며, 사용자가 서비스를 조작(interaction)하는 것을 포함한다. 그러나, UX 디자이너들에게는 제작 과정에서 UI를 설계하는 행위 자체를 의미하며, 이를 스토리보드라고 부르기도 한다.

UI 스토리 보드의 예시

UI 설계 시, 꼭 표현되어야 하는 2가지가 존재한다.

• 서비스가 이루어질 모든 화면들을 구성한다.
• 각 화면 별 주요 메뉴를 구성해야한다.

GUI란?

GUI란 Graphical User Interface로, 사용자가 앱 서비스 등을 손쉽게 조작할 수 있도록 그래픽을 이용해 직과적으로 제작한 UI 형식을 말하며, UX 디자인 과정에서 UI 설계 완료 후, UI를 GUI로 변환하는 과정이 진행된다.
디자인된 GUI는 개발 협업을 거쳐 실제 앱 디자인으로 완성된다.

모바일 서비스의 구분

• 네이티브 앱 : 스마트폰에 직접 설치, 운영되는 애플리케이션을 말하며, 운영체제 별로 앱을 따로 만들어야 하므로, 디자인도 이에 고려되어야한다.
• 모바일 웹앱 : 서버에서 준비된 서비스를 스마트폰에 설치된 앱으로 보여주는 역할 (예시 : 네이버 앱)
• 반응형 웹앱 : Responsive Web Design(RWD)는 모바일과 웹을 동시에 서비스 시, 사용되곤하며 사용자의 기기 화면 크기를 분석해 미리 제작된 GUI에 맞게 서비스를 제공한다. (화면 사이즈에 따라 m을 붙인 버전으로 이동하는 서비스들 존재)
• 하이브리드 앱: 한번의 모바일 앱 개발로 다양한 운영체제에서 수행 가능 (예시 : Flutter, React Native 등)

런쳐 아이콘 및 런치 스크린 디자인

런처 아이콘은 앱 아이콘, 런치 스크린은 안드로이드 기준으로 스플래시에 해당한다.

• 런쳐 아이콘
  • 각 운영체제에 맞게 디자인 되어야하되, 사용자에게 운영체제별로 동일한 BX를 제공해야한다.
  • BX가 온전히 드러나도록 디자인한다.
• 런치 스크린
  • 런처 아이콘에서 사용한 로고를 이용해 디자인하며, 주로 중앙 정렬을 이용한다.
  • 런치 스크린은 최초 실행 시 나타나는 인트로 화면이므로, 로그인이나 회원가입을 유도하는 화면으로도 사용할 수 있다.

Android의 DP 해상도 및 제작 방법

DP는 Device independent Pixel로 가로 세로 인치 안에 포현되는 픽셀의 개수를 말하며, 어떠한 해상도에서도 같은 크기를 보여주는 것을 핵심으로 하는 안드로이드 고유의 단위이다.
안드로이드는 XXXHDPI, XXHDPI, XHDPI, HDPI, MDPI, LDPI로 구분되는 총 6가지의 자체 해상도를 가지고 있으며, 6세트 중, 1세트의 대표 해상도 한가지만을 선택해 제작할 수도 있다.
6개의 해상도를 전체 다 제작할 경우, 제일 큰 XXXHDPI를 먼저 제작하고, 해상도를 줄이며 이미지를 저장하는 것을 권장한다.
(XD에서는 운영체제 별로 자동 추출이 가능하다.)

Android App 디자인 주요 가이드 라인

• Android 앱 가이드는 8dp 를 기준으로 작성
  • 실제로는 4dp 그리드가 기준이지만, 고해상도를 대비하여 8dp를 기준으로 레이아웃 및 디자인에 반영한다.
• 툴바 즉, 네비게이션 바는 56dp 로 정해져있으며, 버튼의 터치 영역도 48dp이다.
• 콘텐츠와 콘텐츠 사이의 마진은, 주로 8dp이다.
• 전체 화면의 마진은 화면 양쪽 여백을 나타내는 수치로, 기본 테마의 마진은 16dp로 되어있으며, 디자인에 따라 8dp가 적용되기도 한다.
• 상태바(status bar)와 아이콘들의 크기는 24dp이다.
• 오른쪽 끝 마진은 LTR 문화에서 발생한 기준으로, 전체 화면의 마진과 별개로 오른쪽 콘텐츠 내용이 끝나는 부분에 16dp를 추가로 넣는 경우가 존재한다.
• 버튼의 터치 영역은 48dp 이며, 내부 아이콘은 24dp로 주로 지정한다.
• 플로팅 버튼은 56dp 이다.
• 리스트 목록은 72dp 을 주로 규격으로 사용한다.

셀프 디자인 해보기

책에서 제공해 주는 예시

간단한 앱들의 경우 심플하게 XD를 이용해 프로토타입을 제작할 수 있을 것 같다.

참고 자료

• "모바일 UX/UI 디자인 강의" 김영삼 지음
• UI 스토리보드의 예시