스타일 가이드는 디자인 및 개발 팀이 일관된 비주얼 아이덴티티를 유지하고, 사용자의 경험을 향상시키기 위해 정의한 UI 및 UX 디자인 규칙을 문서화한 자료입니다. 이는 브랜드 아이덴티티를 강화하고, 제품 간의 디자인 일관성을 유지하며, 협업을 원활하게 만드는 역할을 합니다.
스타일 가이드는 색상, 타이포그래피, 버튼 스타일, 아이콘, 간격, 네비게이션 방식, 애니메이션 효과 등 UI 디자인의 다양한 요소를 포함합니다. 특히, UI/UX 디자이너와 프런트엔드 개발자가 원활하게 협업할 수 있도록 디자인 시스템과 연계되어 활용됩니다.
스타일 가이드의 구성 요소
1. 색상(Color Palette)
스타일 가이드에서 색상은 브랜드의 정체성을 반영하는 중요한 요소입니다. 기본 색상(Primary Color), 보조 색상(Secondary Color), 경고 색상(Alert Color), 배경 색상(Background Color) 등 다양한 용도로 분류될 수 있습니다.
- 기본 색상(Primary Color): 브랜드의 대표 색상으로, 버튼이나 중요한 UI 요소에 사용됩니다.
- 보조 색상(Secondary Color): 기본 색상을 보완하며, 다양한 강조 효과에 사용됩니다.
- 중립 색상(Neutral Color): 배경이나 텍스트에 사용되는 흑백 및 회색 계열 색상입니다.
- 피드백 색상(Feedback Color): 성공(Green), 경고(Yellow), 오류(Red) 등 상태를 나타낼 때 사용됩니다.
예시
| 색상 | HEX 코드 | 용도 |
|---|---|---|
| Primary | #007AFF | 주요 버튼, 링크, 강조 요소 |
| Secondary | #34C759 | 서브 버튼, 보조 강조 요소 |
| Success | #28A745 | 성공적인 상태 메시지 |
| Error | #DC3545 | 오류 메시지, 경고 텍스트 |
| Neutral | #F5F5F5 | 배경, 컨테이너 영역 |
2. 타이포그래피(Typography)
폰트는 사용자의 가독성과 브랜드 아이덴티티를 결정하는 중요한 요소입니다. 스타일 가이드에서는 사용할 폰트 종류, 크기, 두께, 자간, 줄 간격 등을 명확하게 정의해야 합니다.
- 헤드라인(Headline): 페이지의 주요 타이틀에 사용되는 가장 큰 글자 스타일
- 서브타이틀(Subtitle): 헤드라인보다 작은 크기의 제목 스타일
- 본문(Body Text): 기본적으로 사용되는 텍스트 스타일
- 캡션(Caption): 설명, 툴팁, 보조 정보 등에 사용
예시
| 스타일 | 폰트 | 크기(px) | 두께(Weight) | 줄 간격(Line Height) |
|---|---|---|---|---|
| H1 | Noto Sans | 32px | Bold | 1.4 |
| H2 | Noto Sans | 24px | Semi-Bold | 1.4 |
| Body | Noto Sans | 16px | Regular | 1.5 |
| Caption | Noto Sans | 12px | Light | 1.4 |
3. 버튼 스타일(Buttons)
버튼은 사용자 인터랙션을 유도하는 핵심적인 UI 요소입니다. 버튼 스타일 가이드는 버튼의 크기, 색상, 테두리, 그림자, 라운드 정도, 비활성화 상태 등의 디자인을 정의해야 합니다.
- 기본 버튼(Primary Button): 주요 액션을 수행하는 버튼
- 보조 버튼(Secondary Button): 대체 가능한 액션을 수행하는 버튼
- 텍스트 버튼(Text Button): 배경 없이 텍스트만 있는 버튼
- 비활성화 버튼(Disabled Button): 클릭할 수 없는 상태의 버튼
예시
| 버튼 타입 | 배경 색상 | 글자 색상 | 테두리 | 그림자 |
|---|---|---|---|---|
| Primary | #007AFF | #FFFFFF | 없음 | 있음 |
| Secondary | #FFFFFF | #007AFF | 1px solid #007AFF | 없음 |
| Text Button | 없음 | #007AFF | 없음 | 없음 |
| Disabled | #C0C0C0 | #FFFFFF | 없음 | 없음 |
4. 아이콘 및 아이콘 스타일(Icons)
아이콘은 UI에서 정보를 빠르게 전달하는 시각적 요소입니다. 크기, 색상, 일관된 디자인 스타일을 정의하는 것이 중요합니다.
- 일관성 유지: 모든 아이콘은 동일한 스타일(라인, 필드, 컬러 스타일 등)을 유지해야 합니다.
- 명확성 강조: 아이콘의 의미가 직관적으로 전달될 수 있도록 디자인해야 합니다.
- 크기 규칙 적용: 모든 아이콘은 일정한 크기(예: 24px, 32px)를 유지해야 합니다.
예시
| 아이콘 | 크기(px) | 색상 | 용도 |
|---|---|---|---|
| 홈(Home) | 24px | #333333 | 네비게이션 |
| 검색(Search) | 24px | #333333 | 검색 기능 |
| 알림(Notification) | 24px | #FF3B30 | 알림 표시 |
| 설정(Settings) | 24px | #333333 | 설정 화면 이동 |
5. 그리드 시스템(Grid System) & 레이아웃(Layout)
그리드 시스템은 웹사이트 및 앱의 요소를 체계적으로 배치하여 일관된 디자인을 유지하는 기준입니다.
- 12단 그리드 시스템: 데스크톱 및 반응형 디자인에 가장 많이 사용됨
- 6단 그리드 시스템: 태블릿 화면에서 활용됨
- 4단 그리드 시스템: 모바일 화면에서 최적화
레이아웃 규칙
- 좌우 마진(Margin): 16px~40px
- 컬럼 간 여백(Gutter): 16px~24px
- 최대 콘텐츠 너비: 1200px
6. 네비게이션(Navigation)
네비게이션 스타일은 사용자가 원하는 페이지를 쉽게 탐색할 수 있도록 정의되어야 합니다.
- GNB(Global Navigation Bar): 웹사이트나 앱에서 가장 상단에 위치하는 주요 네비게이션 바
- LNB(Local Navigation Bar): 특정 페이지 내에서 제공하는 서브 네비게이션
- 햄버거 메뉴(Hamburger Menu): 모바일 화면에서 주로 사용되는 메뉴 방식
7. 폼(Form) 스타일
입력 필드, 체크박스, 라디오 버튼, 드롭다운 등 폼 요소의 일관된 스타일을 유지하는 것이 중요합니다.
| 요소 | 테두리 색상 | 배경 색상 | 포커스 시 색상 |
|---|---|---|---|
| 텍스트 필드 | #D1D1D1 | #FFFFFF | #007AFF |
| 체크박스 | #D1D1D1 | #FFFFFF | #007AFF |
| 라디오 버튼 | #D1D1D1 | #FFFFFF | #007AFF |
스타일 가이드 적용 시 주의할 점
- 일관성을 유지해야 합니다.
모든 UI 요소는 동일한 스타일을 따라야 하며, 디자인과 개발 과정에서 가이드가 제대로 적용되고 있는지 지속적으로 검토해야 합니다. - 반응형 디자인을 고려해야 합니다.
모바일, 태블릿, 데스크톱 등 다양한 화면 크기에 맞춰 스타일 가이드가 적용될 수 있도록 설계해야 합니다. - 접근성을 반영해야 합니다.
텍스트 대비, 버튼 크기, 네비게이션 방식 등 사용자가 편리하게 접근할 수 있도록 고려해야 합니다. - 디자인 시스템과 연계해야 합니다.
스타일 가이드는 디자인 시스템의 일부로 활용되며, 컴포넌트 라이브러리(Figma, Storybook, Design Tokens 등)와 함께 관리하면 더 효율적입니다.
스타일 가이드는 브랜드의 정체성을 유지하면서도 UI/UX 디자인의 일관성을 보장하는 필수적인 문서입니다. 이를 기반으로 개발 및 디자인 팀이 협업하며, 제품의 시각적 품질과 사용자 경험을 최적화할 수 있습니다.
