디자인 시스템 | Holliverse Wiki

저희 Holliverse는 아래의 세가지 원칙을 따르며 작업을 진행하였습니다.

          **1) 색상 (Color)**

Primary Color → Holliverse 고객 서비스와 동일한 Primary Color를 채택하였습니다.
Secondary Color → **밝은 파란 계열의 색상을 사용하여 **메인 컬러와 대비를 주어 화면에 시각적인 포인트를 주는 곳에서 사용하였습니다.
Neutral Color → 특정한 의미나 상태를 나타내지 않는 색사으로, 배경, 텍스트, 구분선 등의 UI의 기본적인 요소를 표현하는데 사용합니다.
Semantic Color → 성공, 경고, 취소 등 UI 상태와 의미를 사용자에게 직관적으로 전달하기 위한 색상입니다.
Tag Color → 상품 정보에서 인기, 신규 등의 라벨 태그에 사용되는 색상입니다. 전체 서비스의 색상에 통일감을 유지하며 Semantic Color와 더불어 의미를 갖는 부분에서만 다른 색상이 사용되도록 하였습니다. 2) 타이포그래피 (Typography)

Hollverse는 TailwindCSS를 사용합니다.
텍스트의 크기를 설정하는 text 유틸리티 그룹의 범위를 xs, sm, md, lg, xl, 2xl로 한정하고, 각각 12px, 14px, 16px, 20px, 24px, 32px로 매핑하여 UI 전반의 타이포그래피 일관성을 확보하였습니다.

텍스트의 두께를 설정하는 text 유틸리티 그룹의 범위를 regular, medium, semibold, bold로 한정하고, 각각 400, 500, 600, 700으로 매핑하여 텍스트 두께에 통일감을 유지했습니다. 3) 간격 (Spacing)
TailwindCSS는 기본적으로 4px 단위의 spacing 시스템을 사용한니다.
이에 따라 Margin, Padding, Gutter 등 레이아웃 간격을 4px 단위로 통일하여 UI 전반의 간격 규칙을 일관되게 유지하였습니다. 4) 아이콘 (Icon)
Lucide Icon 라이브러리를 통해 개발 환경에서 쉽게 활용할 수 있도록 하였습니다.
또한 일관된 스타일의 아이콘을 제공하여 UI 전반의 시각적 통일감을 유지하기 위해 채택하였습니다. 5) 그림자 (Shadow)
시각적 계층 구조를 명확하게 하기 위해 1차 레이어 요소에는 그림자를 사용하지 않고, 모달과 같이** 화면 위에 떠오르는 (z-index가 달라지는) 컴포넌트에만 그림자를 적용**하였습니다.
TailwindCSS의 shadow 유틸리티는 md와 lg만 사용하여 UI 일관성을 높였습니다.

          **1. 컴포넌트 구조**

Holliverse 프론트엔드는 공통 도메인 기반 컴포넌트 구조를 채택하였습니다.
컴포넌트의 역할과 사용 범위에 따라 common과 domain으로 구분하는 구조를 사용하였습니다.
재사용 가능한 공통 컴포넌트와 특정 페이지에 종속되는 컴포넌트를 명확하게 분리하여 컴포넌트 관리 및 유지보수성을 높이고자 하였습니다. 2. 폴더구조

components

 ├ common

 └ domain

          **3. Common Components**