flex Design System (이하 ‘fx’)는 flex를 위해서 2022년부터 제작된 디자인 시스템입니다. 팀에 첫 Platform Designer로 합류해 디자인 시스템의 방향성 설정, 전반적인 구조 설계에 참여했고 특히 심미성이 뛰어난 유저 인터페이스와 UX 패턴을 만들어내기 위해서 노력했습니다.
첫 플랫폼 디자이너로 합류한 시점에 제품은 대규모 업데이트를 앞두고 있었고, 새로운 구조에 발맞춘 새로운 디자인 언어가 필요했습니다. 시점상 기존 디자인 시스템으로 구성된 제품 업데이트가 더 빠르게 배포될 예정이었고, 새로운 디자인을 시도하면서 순차적으로 전반적인 제품 디자인 언어를 교체할 수 있는 시간이 있었습니다.
디자인 플랫폼 팀은 새로운 디자인 시스템(이하 fx)을 제품과 동일하게 지속적인 개선과 발전이 필요하다고 생각했고, 이전 디자인 시스템을 사용하면서 발생했던 문제를 해결하면서 더 많아진 인원들과 도메인이 일관성을 지키면서 제품을 만들 수 있는 원칙들을 고민했습니다.
유연함을 보장한다.
새로운 디자인 시스템은 유연함(자유도)를 최대한 보장할 수 있는 방향으로 설정했습니다. 많은 도메인을 다루는 제품의 성격을 고려했을 때 과거 일관성을 너무 중시한 나머지 표현에 대한 강력한 제약은 오히려 사용자 경험을 떨트리는 것을 경험했습니다. fx는 일종의 기초적인 재료로서 제품의 톤과 무드를 만들지만, 사용처에서는 재료들을 조합해서 원하는 방식으로 설계할 수 있도록 하는데 집중했습니다.
컴포넌트는 형태에 종속적이지 않다.
유연함을 가져가기 위해서 fx는 일반적인 디자인 시스템에서는 강결합되어있는 컴포넌트들을 분리하는 방향으로 설계되었습니다. 보통 Select는 반드시 Input과 결합된 형태로 제공되었겠지만, fx는 Input 같은 Trigger 컴포넌트를 분리했기 때문에 디자이너와 엔지니어가 원한다면 Button, Chip, Tag 같은 요소에 Select를 조합할 수 있도록 자유롭게 설계 했습니다.
모든 것은 클릭 가능하다.
앞서 이야기한 유연함, 형태에 종속되지 않은 구조는 모두 fx가 형태(스타일) 없이 기능(동작)만 갖고 있는 Headless Component 를 기반으로 구현되었기 때문에 세울 수 있는 원칙입니다. 형태와 기능이 분리되었기 때문에 fx의 모든 컴포넌트는 Trigger가 될 수 있었습니다. 따라서 2번째 원칙과 이어지게 fx를 모든 것을 클릭할 수 있도록 구조화하여 제작했습니다.
디자인 문법은 제품의 특성이 반영되면서도 디자인 시스템의 원칙과 방향성을 잘 표현할 수 있도록 고안하는데 노력했습니다. flex는 근무, 전자결재, 급여정산까지 여러 도메인이 포함되어있는 제품이기 때문에 사용자들이 너무 많은 탐색 과정을 거치지 않고 적절한 시점에 과업을 수행할 수 있도록 모달을 적극 활용하는 방향과 많은 메뉴를 일차원적으로 펼쳐서 보는 네비게이션 구조를 선택했습니다.
표현 스타일도 정립되지 않은 브랜드를 UI에 녹이는 것 보다는 무새무취의 스타일을 고려했습니다. 전반적으로 정보가 많기 때문에 위계 설정에 용이하도록 대비가 큰 타이포그래피 스타일, 적은 컬러 규칙, 항상 고정된 CTA 스타일과 위치 등 사용자가 쉽게 화면을 이해할 수 있도록 하는데 집중했습니다.
거의 처음 컨셉을 찾기 위해서 작업했던 화면
fx가 제공하는 네비게이션 문법은 크게 2가지 종류입니다.
App Navigation — 제품 전체 레이아웃 구조에 영향을 미치며 메뉴에서 메뉴로 이동, 알림, 검색 같은 글로벌한 액션을 수행할 수 있음.
Page Navigation — 메뉴내에서 하위 탭으로 이동, 상·하위 뎁스로 이동, 목록 필터·검색·정렬 같은 액션을 수행할 수 있음.
앱 네비게이션(App Navigation)은 제품 전체에 영향을 끼치는 영역이기 때문에 신중한 접근이 필요했습니다. flex 1.0 버전은 상단 메뉴바 네비게이션 구조를 사용했기 때문에 사용자들에게는 상단 네비게이션 구조가 더 익숙했습니다. 반면 제품 측면에서 상단 메뉴바는 표현할 수 있는 메뉴 개수와 정보에 한계가 있었습니다. 또한 기존 UI는 2단 탭 구성을 유지하기 때문에 하위 메뉴로 접근 경로를 제공하기 어려웠습니다.
flex 1.0 홈 피드 화면 예시
fx는 상단 메뉴바를 대신해서 사이드 메뉴바 구조를 채택했습니다. 사이드 메뉴바는 훨씬 더 많은 메뉴를 노출 시킬 수 있고 스크롤 공간과 별도로 구성되기 때문에 상대적으로 작은 해상도에서도 접근성을 챙길 수 있는 장점이 있습니다.
새롭게 설계한 메뉴 네비게이션 구조를 살펴보겠습니다. 사이드 메뉴바는 사용자의 윈도우 사이즈에 따라서 자동으로 접히거나 펼쳐집니다. 상단에서는 내 프로필 정보와 제품에서 가장 중요한 근무 타각을 할 수 있고 다른 메뉴로 이동하거나 검색, 알림 같은 공용 기능을 바로 사용할 수 있습니다.
fx 디자인 시스템으로 새롭게 구성한 flex 사이드 메뉴바 구성
회사 메뉴 구성 (회사 프로필은 예시입니다.)
사이드 메뉴바가 제품의 전체 메뉴(1 뎁스)관련 부분을 담당한다면 페이지 헤더는 하위 뎁스, 페이지 네비게이션을 담당합니다. 해당 도메인 메뉴 화면의 전체 위계에서 최상단에 위치하며, 도메인에 속한 메뉴들과 CTA, 검색과 필터 등을 포함한 탭과 함께 위치합니다. 페이지 헤더는 명료한 시각 위계를 위해서 단 하나의 CTA만 갖고 있을 수 있으며 사용자에게 필요한 보조 액션도 포함할 수 있습니다.
페이지 헤더 컴포넌트 구성
페이지 헤더 컴포넌트 상황별 쓰임
모달은 동일한 플로우를 다루더라도 배경에 오버레이와 함께 직전 화면이 보여지고, 바깥(또는 닫기)를 누른다면 곧 바로 과업을 중단할 수 있습니다. flex는 메뉴가 많아서 탐색해야 하는 메뉴가 많기 때문에 사용자들이 맥락을 잃지 않으면서도 과업을 잘 수행할 수 있도록 모달을 적극 활용하도록 설계 했습니다.
따라서 fx에서 모달은 일종의 페이지처럼 제공됩니다. 모달이 광범위하게 사용되기 때문에 기본 골격을 제외한다면 사용처에서 거의 모든 것을 자유롭게 활용할 수 있도록 구성했습니다.
fx의 모달은 순서대로 모달의 네비게이션이나 보조 액션을 담당하는 툴바, 모달내에서 정보를 확인할 수 있는 타이틀과 콘텐츠 영역, 중요한 액션을 수행할 수 있는 푸터(CTA), 댓글이나 로그 같은 보조 정보를 안내하는 어사이드로 구성됩니다. 어사이드는 모달 컨테이너 양 옆에 위치하며 맥락에 맞게 사용자들이 직접 접거나 펼칠 수 있습니다. 또한 다양한 사용 환경에 편리한 접근성, 네비게이션을 제공하기 위해서 사이드, 중앙, 전체 보기를 기능을 지원합니다.
모달 기본 구조 예시
모달 레이아웃 선택 메뉴
오른쪽에서 보기, 전체 화면으로 보기 구조 예시
모달이 페이지처럼 동작하기 위해서는 툴바 역할이 매우 중요합니다. 위 예시로 나온 레이아웃 설정부터 네비게이션과 다음, 이전으로 이동같은 기본 기능들과 공유, 수정을 포함한 사용처에서 필요한 액션이 다뤄질 수 있습니다. 모달 인터페이스의 일관성을 제공하기 위해서 툴바는 디자인 시스템에서 제시하는 규약*을 지켜서 사용해야 합니다.
* 모달은 제품에서 가장 활발히 사용되는 패턴 중 하나였고, 사용처의 요구사항이나 디자인 시스템에서 구성해야할 방향성이 어느 정도 구체화된 상태로 새롭게 설계되었습니다.
모달 툴바 UI 예시
fx의 아이콘 리소스는 크게 Line, Fill 두 가지 타입으로 구분되어서 제작합니다. 24x24px 사이즈로 제작되며 일반적으로 사용되는 아이콘들과 특정 도메인 개념을 표현하는 아이콘들도 함께 구성되어 있습니다. 다만 아이콘은 이해를 돕기 위한 요소이기 때문에 도메인의 개념 중에서 시각 메타포로 표현하기 어려운 개념은 아이콘으로 제작하지 않았습니다.
아이콘을 인터페이스에 맞춰서 잘 표현한다면 단순한 디자인을 유지할 수 있지만, 상황에 따라서는 함축적인 의미보다 정직한 설명이 사용자들에게 더 도움이 될 수 있다고 생각했습니다.
리스트는 fx의 가장 기본이 되는 컴포넌트입니다. 간결한 정보를 표현하는데 적합하며 상세 페이지 이동, 항목 선택 같은 단일 액션만 이뤄집니다. fx 사용처들의 요구사항에 충족하기 위해서 형태, 표현에 대한 제약이 거의 없는 상태로 제공됩니다. 사용처들은 각 도메인에 적합한 정보를 표현하기 위해서 아바타, 태그, 칩 또는 직접 제작한 요소와 조합해서 사용할 수 있습니다.
fx는 아토믹한 컴포넌트 조합을 통해서 설계하는 것을 지향하지만 리스트는 그 중에서도 가장 추상화 많이 되어있는 컴포넌트이며, 이렇게 제공함으로서 취할 수 있는 몇 가지 장점이 있습니다.
구성원 목록부터 급여 명세서, 할 일 목록까지 각 정보 속성에 맞게 자유롭게 표현을 할 수 있다.
리스트 내부를 태그, 칩, 커스텀 요소 같은 컴포넌트 조합으로 구성하기에 구조, 구현적으로 훨씬 유리하다.
도메인에서 제공하는 고유의 액션이나 기능을 원하는 형태로 제공할 수 있다.
아래는 추상화된 리스트 컴포넌트 예시입니다. 리스트 컴포넌트는 오른쪽, 왼쪽 악세사리(슬롯)으로 구성되며 기본 상태와 클릭커블(clickable) 기능으로만 구성됩니다.
사용처에서는 필요한 요소들을 조합해서 자유롭게 리스트를 구성할 수 있습니다. 아래는 실제 사용처의 디자이너들과 제가 각각 구성한 리스트 예시입니다.
리스트는 클릭커블(Clickable) 기능만 제공합니다. 사용처에서는 기본 기능을 갖고 표현과 맞춰서 상황에 맞는 커스텀 동작도 구성할 수 있습니다. 마우스를 호버하면 체크박스, CTA, 부가 액션 등을 표시하고 클릭한다면 상세 화면을 보여주는 등의 구성입니다.
사용처는 fx가 정의한 리스트 행 클릭에 대한 기본 동작만 보장할 수 있다면, 다양한 방식으로 커스텀할 수 있습니다. 단, 리스트 행 클릭을 권장 가이드를 벗어나게 설계한다면 안되도록 안내 받습니다.
리스트 호버 상태 예시. 위에서 부터 할 일, 구성원
섹션 헤더는 목록을 그룹핑하기 위한 컴포넌트입니다. 목록 없이 혼자 사용할 수 없어서 보통은 리트스 같은 목록 컴포턴트와 결합되어 사용됩니다. 그룹 제목(머리말)이 표시되고 목록에 아이템을 추가, 그룹 접기, 펼치기 같은 액션을 제공합니다. 그룹에 대한 표현만 섹션 헤더가 제공하는 것이고 데이터 그룹핑은 사용처에서 직접 구현해야 합니다.
보통 셀렉트는 인풋 요소와 결합된 형태로 제공되지만, fx의 셀렉트는 다른 요소와 조합할 수 있는 방식으로 설계되었습니다. 셀렉트는 단일, 복수 선택 모드로 구분해서 설계되었으며 사용자가 선택지를 쉽게 이해할 수 있도록 단일 선택에서는 체크, 복수 선택에서는 체크 박스를 사용합니다. 또한 옵션 항목이 많은 경우 검색 필드를 활용할 수 있습니다.
다중 선택 셀렉트 예시
셀렉트 옵션 항목은 간결한 텍스트 레이블을 사용하는 것을 권장하지만, 사용처에서 다양한 표현을 할 수 있도록 여러 슬롯도 갖고 있습니다. 다만 셀렉트안에서 장식 요소로 사용하는 것은 지양하며 사용자가 선택하는 맥락에서 이해를 도울 수 있는 장치로만 사용하는 것을 권장합니다. 또한 모든 옵션 항목의 우선 순위를 표현을 통해서 설정하는 것보다 순서 또는 그룹핑 등으로 구분 하는 것을 권장합니다.
셀렉트 옵션 표현 예시
셀렉트는 접근성을 위해서 키보드 인터렉션을 지원합니다. 외부 요소에서 셀렉트를 트리거했다면 셀렉트로 포커스가 이동하며, 검색 인풋에 포커스를 유지한채로 상하 항목 탐색, 아이템 선택, 닫기 등 다양한 키보드 인터렉션이 포함되어있습니다. 접근성을 유지하기 위해서 키보드, 포커스 동작은 사용처에서 임의로 수정할 수 없도록 설계했습니다.
드롭다운 메뉴는 셀렉트와 유사하지만 조금 더 범용적인 컴포넌트로 활용됩니다. 드롭다운은 사용자의 액션이 필요하거나 복합적인 설정 옵션들을 조합해야 하는 경우, 메뉴를 통해서 이동이 필요한 경우 사용합니다. 또한 하위 메뉴 용례도 제공하기 때문 정보 계층에 따라서 체계적인 액션, 옵션 탐색도 도울 수 있습니다.
하위 메뉴 같은 경우 구현, 사용자 경험의 일관성 유지를 위해서 동일한 드롭다운 메뉴로만 조합해서 사용할 수 있도록 설계되었습니다. 또한 메뉴 오른쪽 악세사리에 {>} 아이콘을 사용하며 다른 아이콘을 사용할 수 없습니다.
드롭다운 메뉴 예시
드롭다운 하위 메뉴 케이스 예시
드롭다운의 메뉴 항목에는 다양한 악세사리를 조합해서 활용수 있도록 설계되었습니다. 셀렉트는 설명을 위한 표현에 초점이 맞춰져 있다면 드롭다운 표현은 액션할 수 있는 요소를 어포던스 있게 전달하는데 초점이 맞춰져있습니다. 드롭다운 팝오버 컨테이너 상하단에 커스텀 영역을 제공하며 개별 메뉴 항목에서도 토글 스위치, 단축키, 체크 같은 컨트롤 요소들이 포함되어있습니다.
드롭다운 조합 예시
fx에서 폼(form)은 사용자가 입력, 컨트롤할 수 있는 구성을 의미합니다. fx는 텍스트 필드, 라디오, 체크박스, 세그먼티드 컨트롤 등 다양한 폼 요소 컴포넌트를 제공하며, 사용처는 상황에 맞게 조합해서 폼을 구성합니다. 각 컴포넌트들은 개별 상태를 관리하지만, 폼으로 구성된다면 폼 안에서 일관된 벨리데이션 규칙을 갖도록 합니다.
텍스트 필드로 조합된 폼 예시
표현 방식에서도 가능하다면 폼의 넓이에 맞출 수 있도록 권장하며, 구조적으로 사용자가 이해하기 쉬운 형태로 순서와 흐름을 배치해야 합니다. 지그재그 배치 보다는 관련 필드들이 가로 또는 세로로 근접해서 그룹핑되고 폼 구성 전반적으로는 수직으로 구성하는 것을 권장하였습니다. 또한 입력하는 데이터 양식에 맞는 폼 요소를 적절히 제공해서 사용처에서 올바르게 사용할 수 있도록 설계했습니다. 사용처의 이해가 쉽도록 전달한 몇 가지 사례 중 하나 입니다.
다양한 요소로 조합된 폼 예시
일반적으로 폼을 구성할 때 사용처에서 정형화된 구성을 따르는 경우가 많았고, 입력해야할 데이터 포맷이 적다면 구성이 빈약해보이는 문제가 있었습니다. fx는 헤드리스로 기능만 있는 컴포넌트들도 있었기 때문에 커스텀 표현을 활용하는 몇 가지 미니멀한 폼도 제안했습니다.
아주 단순한 폼 구성 컨셉 예시
flex는 보통 목록, 테이블 표현으로 이뤄져있기 때문에 전체 목록에서 원하는 조건의 정보를 잘 찾을 수 있는 UX 패턴이 일관되게 사용될 수 있도록 설계했습니다. 각 패턴에 활용되는 주요한 컴포넌트들을 설계하고 사용되는 대표적인 상황에 맞는 가이드 시나리오 작업을 진행했습니다.
검색은 fx의 텍스트 필드 컴포넌트를 검색 전용으로 커스텀해서 제작한 ‘검색 필드’ 컴포넌트를 기반으로 사용됩니다. 검색 필드는 탭, 페이지 헤더 우측에 위치하며 아이콘 트리거 상태와 필드가 활성화된 상태를 갖습니다.
검색과 다르게 정렬, 필터는 탭, 툴박스, 드롭다운, 셀렉트와 함께 조합되어 사용되는 복합적인 패턴입니다. 툴박스는 정렬과 필터 칩이 위치하는 컨테이너 컴포넌트로 정렬, 필터를 사용한다면 툴박스에서 설정할 수 있습니다. 필터, 정렬 값은 칩 컴포넌트에 표시되며 드롭다운, 셀렉트에서 원하는 값을 조합할 수 있습니다.
조합되는 컴포넌트들의 기본 동작은 있지만 필터, 정렬 컴포넌트로 제공되지 않기 때문에 사용처에서는 각각 조합해서 사용해야 합니다. 조합되는 컴포넌트들 중 기존에 없었던 표현이 필요한 경우 필터, 정렬 전용 컴포넌트로 한 번더 커스텀 되어서 사용처에 제공됩니다.
탭 우측에 위치한 정렬, 필터 트리거 예시
툴박스는 표현을 위해서 커스텀된 대표적인 컴포넌트입니다. 필터, 정렬이 적용되면 사용자에게 표시되는 형태와 항상 고정으로 표시되는 종류가 있습니다. 툴박스에는 필터칩이 기본으로 내장되어있고, 필터에 해당되는 항목 개수 정보와 설정을 전부 초기화 할 수 있는 버튼도 포함되어있습니다.
사용처에서는 필요하다면 칩 외에 세그먼티드 컨트롤 같은 다른 폼 요소를 활용해서 필터를 구성하는 것도 가능합니다. 다만 필터 용례적으로 칩은 사용자가 자유롭게 추가, 제거가 가능하지만 일부 커스텀 필터 표현은 고정형으로 제거할 수 없는 UX를 권장합니다.
툴박스에서 필터 구성 예시
툴박스에서 필터 메뉴 예시
필터, 정렬을 위해서 기본으로 제공되는 컴포넌트들도 있지만, 사용처에서 다른 컴포넌트들과 조립해서 사용해야 했기 때문에 일관성 유지를 위해서는 적절한 사용 예시들과 동작 방식에 대한 안내가 매우 중요했습니다. 필터, 정렬 패턴을 정립하면서 각각 요소의 동작 명세들과 제품 안에서 일반적으로 적용되는 대표적인 시나리오 예시들을 구상해서 안내했습니다. 사용처에서는 해당 명세를 보면서 도메인에 맞게 활용하게 됩니다.
필터 기능 명세 문서 중 일부
필터 동작 시나리오 중 일부
플렉시컬 에디터는 제품 안에서 사용되는 텍스트 에디터입니다. 인풋 요소라면 어디든 조합하여 사용할 수 있고 강조, 기울임, 취소선, 글머리 항목, 번호 목록, 링크 등의 스타일을 제공합니다. 텍스트를 선택하면 표시되는 인라인 스타일 타입과 인풋 영역 상단에 고정형 툴바를 제공하는 스타일로 구분됩니다.
인라인 스타일은 fx가 제공하는 형태이지만, 고정형 툴바 스타일은 사용처에서 커스텀해서 사용되는 스타일입니다. 일반적으로는 고정형 툴바가 제공되지만 fx에서는 제외한 이유는 플렉시컬은 아주 기초적인 텍스트 스타일링만 제공하고, 최대한 복잡함을 줄이기 위한 결정이었습니다.
플렉시컬 텍스트 스타일 예시
인라인 스타일에서 툴바는 텍스트를 선택했을 경우 표시됩니다. 선택된 텍스트(스타일별 노드 단위)에 스타일이 적용되어있다면 해당 스타일이 활성화된 상태로 표현됩니다. 선택된 텍스트에 여러 스타일이 적용되어있다면 활성화 되지 않으며 스타일을 적용하면 덮어쓰게 됩니다.
플렉시컬 텍스트 스타일 예시
fx는 일반적인 디자인 시스템과는 조금 다른 방향성을 갖고 출발했습니다. fx를 전체 제품에 적용해야 했던 시점에는 디자인 시스템 주도의 제품 개발이 이뤄졌지만, 전반적인 적용이 마무리되는 시점에는 제품 주도의 디자인 시스템 구현으로 흐름이 변했기 때문에 실제 사용하는 제품 스쿼드와 디자인 플랫폼 팀 사이의 컴포넌트 구현과 UX 컨벤션에 대한 많은 이해와 노력이 필요했습니다.
fx가 기본 구조가 잡힌 시점부터는 제품 스쿼드들에서 직접 사용하시면서 여러 시행착오가 있었고, 새로운 변화에 불만을 이야기할 수 있었지만 충분한 시간을 기다려주시고 필요하다면 직접 기여해주신 분들이 있어서 fx가 더 성숙해진 시스템이 될 수 있었던 것 같습니다. 정말 많은 것을 배울 수 있었습니다. 감사합니다.