flex Mobile Desgin System

flex Mobile Design System

Design System · flex, Product designer · 2021. 12 - 2025. 3

flex Mobile Design System (이하 ‘fxm’)은 flex에서 설계한 두 번째 디자인 시스템 입니다. fxm은 PC 웹 디자인 시스템인 ‘fx’와는 다르게 강력한 제약과 미리 조합된 형태로만 사용하도록 설계되었습니다. 저는 fxm 프로젝트에 유일한 디자이너로 참여해서 프로젝트 매니지먼트, UI 설계를 담당했습니다.

모바일 환경

flex는 PC 웹, 모바일 App 제품으로 제공되고 있으며, 모바일 App을 위한 별도 조직이 구성되어있지만 PC 웹에 집중하는 인원 대비 현저히 적은 구성이었습니다. 제품은 더 많은 사용 비중을 차지하는 PC 웹에 초점이 맞춰져 있어서 PC 웹을 중심으로 설계되고. 모바일 App은 구성원 중심으로 훨씬 단순한 경험을 제공하는데 집중하고 있습니다.

또한 제품팀은 가능하다면 웹 일정과 비슷하게 모바일 기능도 함께 릴리즈하고 싶었지만 가능한 상황이 아니었습니다. 이런 상황을 개선하기 위해서 여력이 되는 개별 도메인 제품 팀 디자이너들도 모바일 App 설계를 함께하게 되었고, 작업에 대한 부담을 줄이기 위한 재료로 모바일 디자인 시스템을 새롭게 구성하기로 했습니다.

디자인 시스템의 방향성

출발점이 다른 fxm은 fx와 전혀 다른 방향성을 갖고 설계되었습니다. fx는 PC 웹 환경에 맞게 여러 컴포넌트의 조합과 커스텀을 통해서 자유도 높은 UX 설계를 추구했다면, fxm은 훨씬 더 강도 높은 규약과 조합을 통한 빠른 UX 설계와 화면 구성을 추구합니다.

1. 미리 정의된 조합

fxm의 컴포넌트들은 모두 용례에 따라서 미리 정의된 악세사리 요소들을 활용합니다. 컴포넌트 내부에는 사용해볼 수 있는 아이콘, 태그, 아바타 같은 요소들이 이미 포함되어있으며 사용처는 가능하다면, 고민 없이 즉시 사용할 수 있는 상태의 재료로 활용할 수 있습니다.

2. 토큰 체계

fxm은 사용처에서 임의로 직접 커스텀하는 것을 지양합니다. 가능하다면 시스템상으로 정의된 색상, 사이즈, 타이포그래피, 스타일 토큰을 사용해야 합니다. 또한 조합의 조형적인 균형감을 유지하기 위해서 개별 컴포넌트의 형태감을 좌우할 수 있는 일부 속성들은 커스텀할 수 없도록 제약됩니다.

파운데이션

fxm의 가장 기초적인 규칙에 대해서 정의합니다. fxm 파운데이션은 색상, 사이즈, 타이포그래피, 스타일로 구성되며 모바일 앱의 인상과 일관된 시각 언어의 재료로 활용됩니다.

색상

fxm 색상은 총 11개의 팔레트를 제공하며 Gray를 제외한 10개의 색상들은 명암을 기준으로 10단계로 구성됩니다. 색상은 모바일 기기에 적합한, 정확하고 의도된 표현을 위해서 Display P3 색 영역에 맞춰 설계되었습니다. 색상은 iOS, Android 플랫폼에서 모두 동일하게 적용됩니다.

기본으로 사용되는 색상 팔레트

Gray 색상은 조금 더 특별하게 취급됩니다. B2B HR 도메인 특성상 모바일에서 정말 많은 정보를 표현해야 하는 경우가 많고 적절한 정보량을 표현한다고 해도 텍스트 위주로 표현되는 경우가 거의 대부분입니다. UI에서 거의 모든 글자는 Gray 색상으로 표현되어서 섬세한 정보 위계 설정을 위해서는 가능하면 많은 단계를 구성하는게 좋겠다는 판단을 했습니다. Gray는 21단계로 구성됩니다.

색상 접근성 대비를 기준으로 텍스트 사용 가이드

모든 단계가 텍스트로 표현되는 것은 아니며 접근성을 보장하기 위해서 단계 별로 적용할 수 있는 요소가 배경색, 구분선, 테두리, 아이콘과 텍스트로 다르게 설정됩니다.

Gray 색상으로만 구성된 화면 예시

타이포그래피

PC 웹의 디자인 시스템인 fx는 타이포그래피 스타일을 제공하지 않았지만, fxm은 타이포그래피 스타일을 제공하고 정의된 규칙에 따라서 디자인해야 합니다. 제품 특성상 정보를 보조해서 설명할 수 있는 이미지, 그래픽, 일러스트 활용이 적은 상황에서 가능하면 최대한 작은 화면 안에 가독성과 시각 위계를 유지할 수 있는 재료로 제공되어야 했습니다. 따라서 제목과 본문 같은 용례를 기준으로 구성되었으며 그 안에서 font-weight로 2~3단계를 갖습니다.

타이포그래피 스타일

타이포그래피를 설계함에 있어서 놓치기 쉬운 부분은 글줄 높이 입니다. figma의 line-height와 iOS에서 제공하는 line-spacing은 계산 방식에 차이가 있고 타이포그래피 설계 초반에 제대로 정리해두지 않으면 이후에 수정하는데 많은 비용이 발생할 수 있습니다. fxm은 두 속성의 차이를 확인하고 UI 시안과 실제 구현이 일치 할 수 있도록 맞추는 작업을 진행했습니다.

line-spacing과 line-height 표현 차이

line-spacing을 맞추기 위한 테스트 앱 환경

아이콘

fxm 아이콘은 fx보다 약간 더 두꺼운 stroke와 둥근 radius를 갖고 있습니다. radius는 이후 설명하게될 컴포넌트의 UI 형상과 어울리도록 의도한 스타일입니다. 아이콘은 제품내 기능에서 서버 렌더링을 통해서 제공되는 경우가 자주 있었고 서버에서 전달되는 아이콘을 하나의 세트로 유지하는게 중요했습니다. fx 아이콘이 당시에 서버에 저장된 세트였지만, 디자이너 인원과 도메인 개수가 늘어나면서 발생한 파편화 문제 때문에 fxm 아이콘으로 전부 교체하는 것을 의도해서 제작되었습니다.

fxm 아이콘 예시

새로운 아이콘 라이브러리는 과거에 fx 아이콘을 운영하면서 가장 많은 파편화가 발생하거나 디자이너들이 그리기 도형 조합을 구조화해서 제공합니다. 특히 사용처에서는 아이콘으로 문서나 도메인 객체의 상태를 자주 표현했기 때문에 상태 표현을 모티프마다 모두 일관되게 표현할 수 있도록 했습니다.

fxm 아이콘 모티프 조합 가이드

토큰 체계

모바일을 UI를 설계하는 인원은 매우 적은 반면 관리해야할 화면과 스펙이 엄청나게 많았고, 디자인 시스템에 변경이 발생했을 때 연결성을 갖고 변경 지점을 모두 확인하기가 매우 어려웠습니다. 제품 팀에서는 가능하면 디자인 시스템에 대한 변경과 디자인 스펙을 최신으로 관리하고 싶었고 fxm의 토큰 체계는 정의된 UI 파운데이션과 규칙을 일관되게 유지할 수 있는 방법으로 선택했습니다.

기존에 사용하던 UI Kit를 기준으로 클라이언트 구현에는 이미 토큰이 있었지만, 디자인 변경이 발생해도 반영되지 않거나 엔지니어가 편의를 위해서 임의로 지정한 토큰들도 포함되어 있었습니다. 재활용할 수 있는 구성이 아니었기 때문에, fxm에 맞춘 spaceing radius font-size, color 등을 아주 기본적인 형태의 스타일 토큰으로 정의했습니다.

스타일 토큰은 사용처에서 컴포넌트를 도메인 맥락에 맞는 표현을 위해 커스텀이 필요한 경우 사용할 수 있는 스타일 선택지, fxm 컴포넌트에 종속되어서 컴포넌트의 표현 의도를 설명하는 역할을 부여 받을 수 있는 재료로 활용됩니다. 전자는 여전히 '스타일 토큰'이라는 이름으로 사용되지만 후자는 컴포넌트 안에서 구체적인 표현 의미를 내포하는 '시멘틱 토큰'으로 사용합니다.

도식화하면 매우 복잡한 체계를 포함하고 있는 것 같지만, 가장 원초적인 hex, 숫자 같은 값을 우선 정의하고 모든 UI 표현에 활용할 수 있는 스타일로부터 특정한 상황에서만 사용되는 규칙으로 정의합니다.

주요 컴포넌트, UX 설계

리스트, 그룹 타이틀

리스트는 웹과 마찬지로 모바일 UI에서 거의 80%의 비율을 차지하는 UI입니다. 웹에서 리스트가 기반이 되는 컴포넌트였던 것과 마찬가지로 fxm에서도 중요한 컴포넌트로 다뤄집니다. 다만 fxm에 기조에 맞춰서 미리 정의된 조합을 제공하기 위해서 형태적인 탐구를 진행하였습니다. 형태적인 탐구 과정에서는 도메인 맥락을 적절하게 표현하는데만 집중하고, 이후에 공통화할 수 있는 형태를 발굴하는데 노력했습니다.

리스트 UI를 탐구하기 위한 UI 화면들

설정된 값을 표현하는 행에 대한 표현 탐구

fxm의 리스트 컴포넌트는 좌우 악세사리 영역을 구분합니다. 좌측에는 아바타, 아이콘, 이미지가 기본으로 제공됩니다. 우측은 동작 힌트, 선택 값, 보조 정보 같은 요소들이 제공됩니다. 리스트는 기본적으로 행 전체가 클릭 영역으로 동작하며, 좌우 스와이프를 통해서 훨씬 다양한 동작을 활용할 수 있습니다.

여러가지 리스트 컴포넌트 조합 예시

리스트를 구성하면서 벌크 액션 UX도 함께 고려했습니다. 리스트 아이템을 스와이프해서 선택하거나 별도 메뉴에서 선택 모드로 진입할 수 있습니다. 선택 모드에 진입하면 상단 네비게이션이 전환되고 하단에 액션바가 표시됩니다. 아주 무거운 대량 비동기 다운로드 같은 기능을 제외하고 사용자는 PC 웹과 거의 동일한 벌크 액션을 경험할 수 있도록 했습니다. 리스트에서 무한 스크롤을 위주로 사용하는 것을 고려했기 때문에 로드되지 않은 데이터에 대한 처리 경험도 함께 상세하게 설계했습니다.

리스트 아이템 선택하기

리스트 아이템 벌크 액션바 예시

그룹 타이틀은 각 항목들을 범주화해서 모아볼 수 있도록 합니다. 리스트 접기, 펼치기를 할 수 있고 전체 리스트에서 특별하게 강조해야하는 항목들을 그룹화해서 표시할 수도 있습니다.

여러가지 리스트 컴포넌트 조합 예시

텍스트 인풋, 컨트롤러

리스트 만큼 많이 활용되는게 무언가를 입력하는 UX 입니다. 사용자들은 하루에도 몇 차례씩 문서 작성, 비용 처리 작성, 댓글 입력 등을 수행합니다. 다양한 화면과 맥락에서 사용될 수 있도록 fxm은 여러 인풋(필드) 타입들을 지원하고 있습니다. 리스트와 마찬가지로 제품 안에서 활용할 수 있는 표현 양식을 우선 탐색하였습니다. 아주 보편적인 인풋부터 비밀번호, 숫자 같은 데이터 타입들을 중심으로 구체화했습니다.

여러 가지 탐색을 해본 텍스트 필드 UI

다이얼로그 컨테이너 위에서 동작

텍스트 인풋은 두 가지 스타일로 설계되었습니다. 박스 스타일은 여러개의 인풋, 데이터 프로퍼티 필드, 버튼 같은 요소랑 조합을 쉽게 구성해서 사용하는 것을 의도했고, 라인 스타일은 화면에서 단독으로 사용하거나 분절된 입력 플로우에서 사용되도록 했습니다.

위에서부터 박스, 라인 스타일의 싱글, 멀티 라인 텍스트 필드

텍스트 인풋 안에서도 제한적인 모바일 화면을 최대한 효율적으로 사용하도록 몇 가지 구체적인 사용 가이드와 기능을 구성했습니다. 포커스, 오류 상태 등에 대한 표현은 기본으로 제공하며 최대 높이, 최대 글자수 제약을 사용하는 경우 표현되는 방법이나 동작과 표현이 어떻게 되는지를 안내합니다.

다양한 박스 스타일 텍스트 필드 타입과 예시들

텍스트 인풋 이외에도 시간, 구성원, 조직, 타입 등을 선택할 수 있는 데이터 프로퍼티 필드 (이하 ‘프로퍼티 필드')도 설계했습니다. 프로퍼티 필드는 전형적인 폼 레이아웃을 벗어나서 여러가지 종류의 데이터 필드를 맥락이나 UI 구성에 맞게 구성할 수 있는 장치로 제공됩니다. 보통 모바일 키보드 입력을 사용하지 않는 상황 예를 들면 타임, 데이트 피커 같은 입력기나 구성원 선택기 같은 기능을 조합해서 사용됩니다.

프로퍼티 필드, 텍스트 인풋 UX 사용례나 권장 패턴을 고안하면서 폼 입력 과정에에 필요한 주의, 안내 같은 장치들도 함께 설계했습니다. HR 도메인 안에서 근로기준법, 회사 정책 설명 같은 안내가 필요한 경후 폼과 적절하게 조합해서 사용할 수 있습니다.

프로퍼티 필드 예시

데이트 피커 (날짜 선택기)

HR 도메인에서 날짜 선택은 제일 까다로운 UX 패턴 중에 하나입니다. 일반적인 캘린더 앱에서 제공하는 기능보다 훨씬 복잡한 동작을 요구하고 여러가지 날짜 단위와 기간을 동시에 지원해야 합니다. fxm은 시작일과 종료일에 따른 벨리데이션, 선택할 수 없는 날짜, 반기, 분기같은 단위 등을 PC와 완전하게 동일한 기능으로 제공할 수 있도록 노력했습니다.

우선 iOS, Android에서 네이티브 API로 제공하는 컴포넌트는 기간이라는 개념을 다루지 않고 외부 필드에서 다루기 때문에 사용할 수 없었습니다. 오히려 다양한 요구사항을 수용하고 알맞게 값을 전달하기 위해서는 일부 기능을 직접 설계하는게 더 유연한 컴포넌트가 될 수 있다고 판단했습니다.

데이트 피커에서 날짜 선택하기

데이트 피커에서 날짜 선택 지우기

데이트 피커는 여러 상황에서 자연스럽게 화면에 제공될 수 있도록 선택 콘텐츠 영역과 바깥 컨테이너 영역을 분리해서 제공되도록 설계했습니다. 보통 모달, 팝오버 컨테이너를 통해서 활용할 수 있고 사용처에서 원한다면 레이아웃과 조합해서 활용하는 것도 가능합니다.

모달리티가 없는 인라인으로 구성된 데이트 피커

데이트 피커에서 연도, 월 이동하기

flex는 오피스에서 PC를 통해서 접속하는 상황을 주로 고려한 제품이기 때문에 기본적으로 모바일 UX 플로우, 단계 깊이가 고려되지 않았습니다. PC 웹은 큰 화면을 활용해서 여러 정보를 동시에 보면서 과업을 하는데 적합하게 설계되어있었다면, 모바일 앱에서는 적절하게 플로우를 분절시키면서도 자나치게 복잡하지 않은 플로우로 느껴지도록 하는게 제일 큰 고민이었습니다.

PC에서도 모바일에서도 모달은 페이지를 대체하는 가장 보편적인 화면 전환 수단이며 다른 모바일 제품들에서도 많이 사용되는 패턴 입니다. 보통은 단순한 과업을 수행하고 짤막한 안내 정보를 표시하는데 자주 사용됩니다. flex에서는 앞선 사용례를 담는 것도 필요했지만 반대로 심층적인 과업을 적절히 분절시킬 수 있는 방법이 필요했습니다.

페이지 단위의 플로우를 구성하는 것 보다 모달을 더 적극 사용하기로 결정한 이유는 실제로 사용자들이 도메인에서 수행하는 업무가 복잡하지만 화면과 플로우 경험상으로는 쉬운 접근성을 제공하고 싶기 때문입니다. 사용자가 화면상에서 이전 맥락을 잃지 않았음을 눈속임으로 표현하거나, 업무 과정을 중단하고 쉽게 다시 시작할 수 있는 접근성, 단순한 과업에서 필요하다면 고급 기능으로 쉽게 전환할 수 있도록 하는 사용성등을 모달을 통해서 제공하고자 했습니다.

iOS에서 활용되는 모달 패턴 예시

우선 모달의 기본적인 구조부터 설계했습니다. 가장 흔한 바텀시트 형태부터 페이지와 유사한 전체 화면 뷰까지 탐구를 진행했고, 두 방식을 모두 제공하는 것으로 결정했습니다. 화면에 표현되는 방식이 여러개가 되면서 복잡함도 올라가는걸 원치 않았기 때문에, 사용자가 원하는 경우 복잡한 액션을 자연스럽게 수행할 수 있는 방법도 찾아보고자 했습니다.

fxm 모달 종류

iOS와 Android 컴포넌트의 경험 간극을 줄이기 위해서 Android에서는 제공되지 않지만 iOS에서 자주 사용되는 Stack 스타일의 모달은 사용하지 않도록 결정했습니다.

fxm 모달 지양 가이드라인

모달 컨셉 UI - 전통적인 Bottom sheet 형태

모달 컨셉 UI - 컴펙트한 다이얼로그 스타일

모달 컨셉 UI - 페이지 처럼 표현되는 스타일

몇 가지 제품들*을 보면서 액션이나 무언가를 트리거했을 때 콘텐츠를 감싸고 있는 컨테이너 사이즈를 유동적으로 조정하는 트렌지션이 있다는 점을 찾았습니다. 이렇게 유동적으로 컨테이너가 조정되면 화면이 전환되면서 더 깊은 단계의 플로우로 진입하는 것 보다 가벼운 변화로 느껴진다고 판단했습니다.

* 유동적인 컨테이너는 트레이 시스템이라고도 불리는 경우가 있습니다. 유동성을 설계하기 위해서 Apple, Family, Craft, Slack 같은 여러 제품의 상호작용을 참고했습니다.

Apple App Store - iOS에서 쉽게 찾아 볼 수 있는 전환 예시

fxm 모달도 유동적인 트렌지션을 차용해서 UX 패턴을 구성할 수 있도록 설계했습니다. 모달은 가변 높이를 갖고 있어서 내부 컨텐츠에 따라서 높이가 자유자재로 조정됩니다. 사용자는 모달에서 무언가를 동작시켰다고 해서 반드시 모달이 닫히거나 전체 화면 페이지로 진입하지 않고 현재 보고 있는 상태의 UI에서 계속 다음 과업을 수행할 수 있습니다.

Floating action button을 기준으로 유지되는 모달 트렌지션

선택, 확인 맥락을 동일한 모달 컨테이너에서 제공

또한 몇 가지 사용처에서 지정한 트리거 요소를 통해서 전체 화면으로 전환해서 훨씬 더 복잡한 작업을 진행할 수 있습니다. 사용자는 자세한 정보나 고급 기능을 필요로 하는 시점에 현재 화면을 벗어난다는 이질감 없이 자연스럽게 접근할 수 있습니다.

전체 화면 모달로 전환 트렌지션

유동적인 모달 전환 구조를 설계한 이후에는 전반적인 모달에서 네비게이션 패턴도 함께 설계했습니다. 모달이 전환된 이후에 자연스럽게 깊이 있는 과업을 수행할 수 있도록 네비게이션 기능을 제공하면서 상단 툴바에서는 언제든 중단할 수 있는 닫기 버튼이 제공됩니다.

확장된 모달 맥락에서 닫기 동작

모바일 앱에서 네비게이션 동작은 아주 기발한 아이디어와 구조가 아니라면 특이하게 또는 다르게 느껴져서는 안된다고 생각합니다. 따라서 fxm의 네비게이션 구조는 각 플랫폼 OS 네이티브 기능을 최대한 보장할 수 있도록 설계했습니다. iOS 같은 경우에는 네이티브 API를 그대로 사용하려면 형태도 동일하게 유지해야했기 때문에 UI 표현에 제약이 있기는 했지만 가능한 여타 iOS 앱에서 제공하는 기능을 최대한 활용했습니다. Android 같은 경우에도 기기 네비게이션 바를 활용한 구조로 설계했습니다.

전진하는 네비게이션 플로우

전진하는 네비게이션 플로우

iOS 네비게이션은 언제나 앱의 하단 네비게이션이 있는 레이아웃을 상정해서 설계되었습니다. 페이지들이 계속해서 쌓이는 Stack 구조로 설계되었으며 상단 네비게이션 바의 뒤로가기 버튼을 누르거나 디바이스 가장자리 스와이프를 통해서 이전 페이지로 즉시 전환됩니다.

Stack 구조를 사용할 경우 너무 많은 페이지 기록이 쌓이면 최초 화면으로 이동하는게 어렵기 때문에 모든 Stack을 단축할 수 있는 동작도 설계했습니다. 하단 네비게이션의 현재 활성화된 메뉴를 다시 한 번 탭하면 어떤 화면에서라도 이전 Stack들을 무시하고 최초 화면으로 이동합니다.

전진, 후퇴하는 네비게이션 동작

Stack을 무시하는 Jump 동작

Android는 권장 가이드에 따라서 2 뎁스 이상 화면에서는 앱의 하단 네비게이션 바가 제공되지 않는 차이점을 갖고 있습니다. 이전 화면으로 이동하려면 상단 네비게이션의 뒤로가기 버튼을 누르거나 기기 네비게이션 바를 활용해서 이동할 수 있습니다.

Android 네비게이션 바

배움

멀티 플랫폼에 대한 이해 부족

PC와 Mobile 두 디자인 시스템 foundation component가 서로 공유되면서 의존성이 발생할 것이고 장기적으로 방해물이 되지 않을까 우려했습니다. 따라서 두 시스템을 완전히 분리된 구조로 설계하게 되었습니다. 예상과 다르게 두 플랫폼에서 색상이나 아이콘 등을 똑같이 제공해야 하는 경우가 자주 발생했고, 오히려 에셋을 두 벌 관리하게 되면서 구현 측에서 챙겨야 할 중간 작업이 늘어나서 생산성이 떨어지는 결과를 초래하게 되었습니다.

PC, Mobile이 방향이 다른 경험을 제공하니 그에 맞는 디자인 시스템을 설계해야 하는 것도 중요한 지점이지만, 두 플랫폼을 하나의 ‘제품’으로 생각하고 디자인 시스템의 기반이 공유되면 제품에 유연한 확장성**을 제공할 수 있다는 점을 배웠습니다.

** 멀티 플랫폼을 위한 디자인 시스템을 구상하는 방법에 대해서는 스포티파이 디자인 시스템팀의 How Spotify’s design system goes beyond platforms 글을 추천합니다.

전파를 위한 프로세스

Foundation과 Component를 제작하는 것도 중요하지만, 잘 사용될 수 있는 방법을 제공하는 것도 중요합니다. 챕터 안에서는 디자인 시스템 기여 프로세스가 정착되어있었지만, 도메인에서 임의로 수정해서 사용하는 것도 막지는 않았기 때문에 필요한 패턴이나 Component를 파악하기가 어려웠습니다. 올바른 Hand-off, 동작 명세, 가이드를 잘 준비해두는 것과 별개로 운영하면서 발생하는 여러 이슈들과 필요한 요소들을 발굴하고 다시 정리하는 과정이 프로세스를 기준으로 판단할 수 있어야 한다는 것을 배웠습니다.

프로세스 정비 문서

Endnote · 해당 에세이에는 프로젝트 진행 당시 실제로 구현되지 못했던 내용이 포함되어있습니다. 첨부된 인터렉션 예제들은 모두 Origami Studio를 통해서 제작되었으며, 글과 이미지를 제작하는데 AI는 사용되지 않았습니다.