여러분은 지금 50%의 확률로 스마트폰에서 이 글을 읽고 계실 겁니다. 그렇지 않다면 5~10초 후 스마트폰 잠금 화면에 앱 알림이 떠서 소셜 미디어를 보거나, 음식을 주문하거나, 자주 사용하는 e커머스 플랫폼에서 쇼핑하실 수도 있겠죠.

이 글을 통해서 사용자의 관심을 사로잡고 이를 수익으로 전환할 수 있는 모바일 앱의 사용자 인터페이스를 디자인하는 방법을 차근차근 배워 보세요.

모바일 앱 디자인에 중점을 둬야 하는 이유는 무엇일까요?

모바일 폰 사용이 늘어나면서 엄청난 수의 사용자가 여러 운영 체제의 수백만 개 앱을 사용하고 있습니다. 모바일 폰을 우선한 디자인은 이제 굳이 말하지 않아도 업계 표준이 되었다고 할 수 있죠. 사용자층 대부분이 모바일을 선호하며 수십억 달러 규모의 앱 개발 열풍을 불러오고 있기 때문에 이것이 우리는 모바일 디자인에 집중해야 하는 이유죠.

하지만 안타깝게도 모든 앱이 시장에서 성공하는 건 아닙니다. 네, 사용자 경험이 통하려면 사용자의 취향에 딱 맞아야 하고, 사용자 인터페이스는 기존 사용자를 유지하고 신규 사용자를 확보하기 위해 이러한 경험을 보완해야 하죠. 이는 Hitachi 디자인 센터의 연구원 두 명이 주장한 UX의 심미적 사용성 법칙과 관련이 있습니다. 사용자 인터페이스가 시각적으로 매력적일수록 사용자의 마음에 긍정적인 반응을 일으켜 앱의 사용성이 좋게 느껴진다는 뜻이죠.

모바일 앱의 유형

이상적인 모바일 UI 디자인 요소를 자세히 알아보기 전에 모바일 앱의 유형을 먼저 살펴보겠습니다. 모바일 앱은 특정한 기술을 사용해 코딩하는 방식에 따라 분류됩니다.

  • 네이티브 앱: 특정한 운영 체제에서만 작동하는 앱
  • 웹 앱: 뷰포트에 반응하고 모바일의 웹 브라우저에 앱처럼 표시되는 웹사이트
  • 하이브리드 앱: 위 두 가지 앱 유형이 조합된 유형이지만, 네이티브 앱에 속해 있어 사용자가 기기에 다운로드할 수 있는 앱
  • 프로그레시브 웹 앱: 웹 개발 기술을 통해 만들어지는 앱으로, 플랫폼 독립적이며 모바일과 데스크톱 환경에서 모두 작동하는 앱

모바일 UI 디자인의 원칙

모바일 앱은 다른 기기와 같은 UI 디자인 원칙을 따릅니다. 다만 모바일 폰은 터치 기능을 지원하는 상대적으로 작은 기기이기 때문에 더 나은 사용자 경험을 위해 약간의 조정을 거쳐야 하죠. 아래는 스마트폰용 UI 디자인 시 고려해야 할 방법을 세 가지로 나누어 정리했습니다.

미니멀리즘

기기가 작은 만큼 어수선한 화면은 불편하게 느껴지고 사용자의 앱 이용 경험이 만족스럽지 않겠죠. 미니멀리즘을 추구하는 깔끔한 인터페이스일수록 여유로운 공간을 제공하고, 사용자는 산만해지지 않아 최선의 결정을 내릴 수 있겠죠.

가독성과 피드백

반복적인 정보는 피해야 해요. 그러면서 사용자는 시종일관 자신이 무엇을 하고 있는지도 알 수 있어야 하죠. 사용자의 흥미를 유지할 수 있도록 적절한 시기에 필요한 정보만 제공하는 것이 가장 이상적입니다.

유사성과 친숙성

사용자가 다른 앱과 웹사이트에서 대부분의 시간을 보낸다고 가정해 보세요. 그렇다면 특정한 패턴과 행동에 익숙하겠죠. 따라서 디자인에 이러한 일관성을 유지하고 가능하면 독창성이 두드러지지 않아야 합니다.

기본적인 정보를 알아봤으니 이제 본격적으로 좋은 이용 경험을 위한 모바일 앱 UI를 디자인하는 방법을 알아보죠.

모바일 앱에 필수적인 소프트웨어 디자인 패턴

모바일 UI 디자인에서 자주 사용되는 화면이 있다는 걸 알 수 있을 거에요. 이러한 디자인 패턴을 이해하고 모바일 인터페이스를 웹의 기존 인터페이스와 비슷하게 유지한다면 사용자가 앱에 적응하기 쉽고 더 빠르게 앱을 사용할 수 있겠죠.

아래는 가장 일반적으로 사용되는 화면을 몇 가지 모아 봤습니다.

스플래시 화면

스플래시 화면은 앱이 열리자마자 나타나는 화면으로, 사용자와 앱의 브랜드가 처음 만나는 접점이라고 할 수 있습니다. 스플래시 화면은 4~8초 정도 화면에 머무르는데, 브랜드의 기본이 되는 색상 배경과 그 중심에 앱 로고가 있는 경우가 일반적이죠.

온보딩 화면

필요한 온보딩 단계에 따라 3~5개 화면이 한 세트로 이루어져 있습니다. 사용자는 여기에서 앱의 기능과 로그인 후 무엇을 할지 미리 알 수 있죠. 온보딩 화면은 사용자가 앱을 사용하기 전부터 흥미를 느낄 수 있도록 재미있고 상호적인 게 좋아요. 일반적으로 화면에 이미지와 일러스트레이션이 포함되고, 화면마다 간단한 설명 문구가 표시되죠.

로그인/가입 화면

대부분의 앱처럼 소비자가 앱을 사용하기 전에 가입이나 로그인을 해야 한다면 로그인/가입 화면은 매우 중요한 요소가 될 수 있겠죠. Google, Facebook, Apple ID처럼 다양한 로그인 옵션은 전반적으로 더 나은 온보딩 경험을 제공하기도 합니다.

홈 화면

앱의 작전 기지와도 같은 화면입니다. 사용자는 이곳에서 설치된 소프트웨어의 옵션과 기능을 관리하고 모든 메뉴에 빠르게 접근할 수 있죠.

이외 다른 화면:

통계 및 데이터 화면

요즘 모바일 앱은 다른 어떤 소스보다 더 많은 데이터를 가지고 있습니다. 사용자에게 이러한 데이터를 제공한다면 훨씬 더 상호적인 앱을 만들고 사용자에게 앱 이용 경험을 보완하는 정보를 제공할 수 있겠죠.

카탈로그 화면

e커머스 플랫폼에서 카탈로그 화면은 소비자가 고를 수 있도록 여러 브랜드나 특정 브랜드의 모든 제품을 보여줍니다. 회사에서 판매하는 모든 제품을 전시하는 진열대와 같은 화면인 셈이죠. 여기에서 사용자의 행동을 유도하는 핵심적인 콜 투 액션 버튼은 바로 "장바구니에 추가"나 "구매" 버튼이 되겠네요.

소셜 피드 화면

대부분의 사람들은 세상에서 일어나는 최신 소식을 접하기 위해 모바일 폰 속 소셜 미디어에서 시간을 보냅니다. 피드 화면은 빠르게 소식을 훑어볼 수 있도록 지나치게 많은 세부 정보를 담지 않아야 합니다. 일반적인 피드 화면에는 무한 스크롤 패턴이 활용되고 있죠.

여기에서는 일반적인 UI 패턴에 대해서만 다뤘지만, 모바일 디자인은 개발된 앱의 의도와 목적에 따라 그 밖에 많은 화면으로 이루어져 있습니다.

모범 사례

아래는 스마트폰용 UI 디자인 시 명심/기억해야 할 만한 모범 사례 몇 가지를 정리해 봤습니다.

블리드 영역과 엄지 영역 주의

모바일 폰마다 상태 바와 하단 메뉴 내비게이션에 여백이 있습니다. 이러한 여백을 인지하고 적절히 디자인하는 것이 중요하죠. 아이폰과 안드로이드 폰은 서로 다른 여백을 가지고 있지만, 여기에서는 스마트폰 디자인의 일반적인 레이아웃과 여백에 관해 이야기해 볼게요. 권장 크기는 상태 바의 경우 높이 44px, 헤더 바는 높이 44px(최대 56px), 하단 내비게이션 바는 48~56px입니다. 그 사이의 크기라면 디자인하기 안전한 공간이죠. 또한, 화면 요소의 여유 공간을 위해 화면 양쪽에 16px의 여백을 남겨두는 게 좋습니다.

단계적 공개

모바일 화면의 공간은 훨씬 협소하기 때문에 사용자에게 모든 내용을 한 번에 보여줄 수 없습니다. 기능의 보조 레이어를 메뉴와 서랍에 숨겨 사용자가 필요할 때 탐색할 수 있는 단계적 공개 방식을 활용해 보세요. 특정 시점에 화면에 보이는 옵션 수가 적을수록 사용자의 오류율이 낮아질 거에요.

접근성

모든 사용자의 시력과 청력이 좋은 것은 아닐 거에요. 장애를 가진 사용자를 배려하고 누구나 손쉽게 사용할 수 있는 디자인을 하는 것이 좋습니다. Google의 머티리얼 디자인은 색맹 사용자를 배려하는 색상 선택, 시각 장애인을 위한 음성 보조, 청각 장애나 언어 장애인을 위한 제스쳐 인식 등의 접근성 옵션을 가지고 있죠. 현재는 모바일 앱에 더 나은 접근성을 제공하고자 신경망과 같은 첨단 기술이 많은 곳에서 사용되고 있지요.

과도한 전문 용어 사용 지양

소프트웨어의 카피는 항상 이해하기 쉽게 작성 해주세요. 기술적인 전문성이 없는 경우가 대부분인 일반 사용자들이 읽기 때문이죠.

모션과 애니메이션

그 자체만으로 방대한 개념이죠.. 정적인 디자인을 피해주세요. 애니메이션과 모션 요소들은 색깔/모양의 변화, 오브젝트 제어, 진동버튼누름, 로딩화면 애니메이션, 스크롤 애니메이션으로 인터페이스에 추가될수 있어요. 거기에 더하여 스크롤되는 요소에 약간의 지연을 추가하면 훨씬 더 재미있는 인터페이스가 되고, 흥미로운 요소를 만들어 내죠. 화면의 거의 모든 작은 요소에 약간의 애니메이션을 사용할 수도 있습니다.

물론 주의해야 하는 부분이기도 해요. 너무 많은 애니메이션은 혼란을 주기도 하고 사용자가 앱을 사용하려고 했을 때 생각했던 일을 하지 못하게 방해할 수 있죠. 과도한 모션 또한 앱 로딩을 느려지게 만들고 더 많은 휴대전화 메모리를 사용하게 되거든요.

색상 변화, 스크롤, 성공 또는 오류와 같은 시스템 확인에 사용되는 단순한 CSS 애니메이션은 인터페이스 개선에 도움이 될 수 있습니다. 모션에 관한 자세한 정보는 Google 머티리얼 디자인의 요소 동작 방식 섹션을 참고해 보세요.

모바일 폰용 콘텐츠 최적화

모바일 폰용 디자인 시 폰트 크기, 문단 길이, 버튼 크기를 고려해야 할 거에요. 버튼의 대상 영역이 더 작고, 가독성이 중요하기 때문이죠. 추천하는 버튼 크기는 최소 42px x 42px, 본문 폰트 크기는 16px이에요.

사용자 입력 최소화

사용자가 가만히 앉아 작은 모바일 폰의 작은 키보드로 많은 양식에 텍스트를 입력해야 한다면 좌절할 만한 순간이 되겠죠. 이를 피하려면 자동 입력과 저장된 영역과 같은 구성요소를 추가해 보세요.

기타 측면

기기의 기능이 가진 이점을 활용하세요. 여러분이 디자인하는 기기는 주머니에 넣어서 가지고 다닐 수 있으며 무선 인터넷 연결이 가능합니다. 요즘 대부분의 모바일 폰에는 GPS, 자이로 센서, 가속도 센서, 카메라와 같은 기능이 탑재되어 있기도 합니다. 이를 활용한 기능을 앱에 넣어 보세요. GPS와 다른 센서를 사용해 걸음 수와 거리를 기록하는 달리기 앱이 좋은 예라고 할 수 있죠.

여담으로, 항시 인터넷을 사용하지 못하는 사용자를 위한 디자인을 고려하는 게 좋아요. 모두가 고급 스마트폰을 사용하는 게 아니지만, 앱은 누구나 사용할 수 있으니까요. 모든 화면 해상도를 고려해 디자인하는 것 또한 중요하죠. 툴킷에 꼭 추가해야 할 것 중 하나는 여러 지역을 고려해 디자인하는 것입니다. 스마트폰은 이제 수십억 명이 사용하고 있으니까요.

중요한 것은, 처음에는 문제에 대한 올바른 해결책이 없을 수도 있다는 사실이에요. 이용자로부터 피드백을 받고 반복해서 전반적인 사용자 경험을 개선하는 것이 좋습니다.

이 블로그를 통해 잘 기획되고, 매력적이며, 원하는 결과를 가져올 모바일 앱 UI 디자인에 대한 개념을 정리하셨길 바랍니다. 여러분의 디자인이 더 멋진 여정으로 나아가기 위한 의견이 있다면 아래 코멘트를 남겨주세요.