디자인 시스템 | Holliverse Wiki

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

0. 마스코트 캐릭터 - Holeman

Holeman은 우주 탐험가 콘셉트의 캐릭터로서, 사용자가 서비스를 이용하는 경험을 우주 탐사에 비유하여 표현한 Holliverse의 마스코트 캐릭터입니다.

1) 색상 (Color)

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

2) 타이포그래피 (Typography)

Preteandard: 기본 글씨체입니다. 통일감과 가독성을 위해 채택하였습니다.
Mulmaru: 픽셀 기반의 글씨체입니다. 픽셀 기반의 느낌을 Holliverse의 우주 탐사의 분위기를 시각적으로 강조하는 곳에서 사용하기 위해 채택하였습니다.

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)

5) 그림자 (Shadow)

시각적 계층 구조를 명확하게 하기 위해 1차 레이어 요소에는 그림자를 사용하지 않고, 모달과 같이** 화면 위에 떠오르는 (z-index가 달라지는) 컴포넌트에만 그림자를 적용**하였습니다.
TailwindCSS의 shadow 유틸리티는 md와 lg만 사용하여 UI 일관성을 높였습니다.

1. 컴포넌트 구조

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

2. 폴더구조

components

 ├ common

 └ domain

3. Common Components

4. Domain Components