[UIUX] 디자인 시스템 파헤치기 1편 - UI요소

안녕하세요. 민트소프트 UIUX 디자이너 최현아입니다.

 

민트소프트 기술블로그의 첫 번째 디자인 포스팅을 어떤 주제로 다룰지 고민이 많았는데요🙃 저는 프로젝트를 들어가기 전 가장 밑바탕이라고 생각하는 것이 바로, 모든 제품의 인터페이스가 일관성을 유지할 수 있게 도와주는 디자인 시스템입니다.

 

디자인 시스템은 디자이너와 개발자 간의 협업을 위한 중요한 문서 중 하나이죠. 프로덕트의 새 화면을 구축하는 것에 필요한 모든 스타일과 컴포넌트를 찾을 수 있는 핵심적인 문서라고도 할 수 있습니다. 그래서 이번에 저는 베이직 디자인 시스템을 구축해놓으면 시간적, 업무적으로 효율성이 좋고 작업 흐름도 편리하겠다고 생각하여 베이직 디자인 시스템 구축을 진행하고 있답니다! 그럼 디자인 시스템에 대해서 한번 파헤쳐 보겠습니다✨

 

📌 디자인 시스템 요소

파헤쳐 보기 전에 앞서 프로덕트에서 사용될 수 있는 UI 요소들을 정리해봤습니다.

  

✏️ UI 요소 개념 정리

Color

색상은 UI 전체에 일관되게 사용해야하며 요소 사이에 충분한 대비로 요소를 구분해야 합니다. 크게 Accent colors / Neutral colors 으로 분류하여 세분화하는 게 일반적이며, 명확한 커뮤니케이션을 위해 Hex Code보다는 컬러명을 사용합니다. 

Material - Color system

Spacing

스페이싱은 균일한 요소와 간격을 사용하여 UI의 체계적인 배열을 도와줍니다. 주요 디바이스의 스크린 사이즈는 8px로 나누어 떨어지며 1.5배수 시 렌더링 이슈가 최소화됩니다.

 

Typograpy

타이포그래피는 서비스와 사용자가 커뮤니케이션하는 중요한 요소 중 하나이기 때문에 가독성과 심미성이 좋아야 하며 라이선스 이슈가 없어야 합니다.

 

Icongraphy

아이콘은 어떠한 상징을 기호로 만든 시각 언어로 누구나 이해할 수 있는 단순한 구조의 형태로 제작하는 것이 좋습니다. 또한 비쥬얼 일관성도 매우 중요한 요소입니다. 그러기 위해서는 개별 아이콘의 사이즈를 줄이기가 필요하며 같은 두께의 스트로크 라인(stroke)을 사용하는 것이 좋습니다.

Material Symbols

Accordions

아코디언은 내용을 펼쳤다가 접을 수 있는 컴포넌트 입니다. 주요한 사항들을 먼저 강조 표시하고 확장되면 그에 해당하는 세부 정보들을 표시합니다. 컨텐츠 전체를 나타내지 않아도 된다면 아코디언을 활용하여 스크롤을 줄일 수 있습니다. 또한 사용자의 목표와 관련이 있는지 빠르게 파악할 수 있으며 관심 있는 섹션에 빠르게 접근할 수 있습니다.

 

Badges

벳지는 사용자에게 특정 정보에 주의를 끌기 위해 아이콘이나 텍스트에 추가적인 요소를 사용하여 표시합니다. 일반적으로는 숫자나 아이콘을 포함합니다.

Banner

배너는 마케팅 정보성이나 사용자의 행동 유도를 목적으로 사용합니다.

Buttons

버튼은 가장 중요한 UI 컴포넌트 입니다. 사용자의 행동을 유도하거나 원하는 선택을 할 수 있도록 합니다. 또한 버튼에 따른 시각적 계층 구조에 차이가 있습니다. 버튼 스타일 및 쓰임새에 따라 크게 Button / Action Button / Text Button / Icon Button 등으로 분류합니다. 버튼의 상태는 크게 Enabled / Pressed / Disabled / Loading 으로 분류합니다.

쏘카 디자인 시스템 - Button

Chips

칩은 사용자로 부터 정보, 선택, 컨텐츠의 필터링, 특정 액션 등을 유도합니다. 또한 필터링하는 기능으로도 사용할 수 있습니다.

Dialogs

다이얼로그는 현재 작업과 관련된 긴급 정보를 사용자에게 알리는 용도로 사용합니다. 이는 사용자가 액션을 취하기 전까지 화면에 남아 있습니다.

Dropdowns

드롭다운은 사용자가 옵션 리스트 중 하나의 옵션 선택 시 활용되는 컴포넌트 입니다. 선택 가능한 옵션이 다수일 경우 드롭다운 메뉴를 사용해 노출시킵니다.

Info boxes

인포 박스는 본문 외 정보 또는 주의, 강조형 정보로 강조가 필요할 때 사용합니다.

Tabs

탭은 페이지 내 유사한 컨텐츠를 그룹핑하여 섹션 간 이동 시 사용합니다. 해당 페이지를 벗어나지 않고 섹션별 컨텐츠를 둘러볼 수 있습니다.

 

Cards

카드는 사용자에게 정보를 집약적으로 전달하기 위한 요소 입니다. 정보를 명확하게 전달해 상세 페이지로 유도하는 목적을 가집니다.

Labels

라벨은 추가적인 정보를 나타내는 데 사용됩니다. 또한 분류 및 검색을 위한 분류법에서 사용되기도 하며 유의할 점은 다른 시각적 Tag와 같은 요소와 함께 사용할 시 시각적 피로도가 늘어나고 제 기능을 못할 수도 있습니다.

Lists

리스트는 텍스트 기반 선택 요소 정보를 섹션 또는 그룹으로 나눌 수 있는 연속적인 수직 집합체 입니다. 대량의 정보를 목록 형태로 깨끗하고 효율적으로 정리할 수 있습니다.

Navigations

내비게이션은 사용자가 필요한 것을 찾도록 도와주며 현재 위치를 알려주는 컴포넌트 입니다. 제품 내에서 상위 수준 탐색에 사용되는 구성 요소로 크게 바텀 내비게이션과 GNB 헤더로 분류합니다. Bottom Navigation은 화면 하단에 노출되는 요소로 다른 페이지로 빠르게 이동할 수 있게 도와줍니다. 이는 직관적이고 예측 가능해야 하며 스크롤 시에도 계속 하단에 고정되어 노출됩니다. GNB Header는 현재 화면과 관련된 정보와 작업을 표시하며 화면의 계층을 탐색할 수 있도록 도와줍니다.

Popovers

팝오버는 부가 정보가 필요한 요소에 사용자의 클릭 인터렉션으로 노출됩니다. 타이틀, 이미지, 버튼, 링크 등 다양한 요소를 포함할 수 있으며 좀 더 많은 보조 설명 또는 추가 정보를 제공합니다.

 

 

다음편에서는 나머지 UI 요소들에 대해서 들려드리겠습니다.

감사합니다😊

 

 

---

민트소프트는 모바일 앱 개발 전문회사입니다. 하이브리드앱,크로스플랫폼,네이티브영역 전반에 걸친 모바일 앱을 개발하고 있습니다.

하이브리드는 민트앱이라는 솔루션을 보유하고 있어서 Time To Market에 매우 유리합니다. 

언제는 찾아주시면 신속하고 빠른 상담을 진행하도록 하겠습니다. 

 

https://www.mint-soft.com