30 스타일가이드만들기

스타일 가이드 만들기

1. 스타일가이드 제작전 준비

1-1. 리디자인할 프로젝트의 콘셉트 정의

프로젝트의 무드보드에서 콘셉트 선정 (형용사적인 단어 하나만, 주조색 1개)

1-2. 디자인 콘셉트 정의

프로젝트를 시작하기 전에 범위, 스타일, 시각적 방향 및 목소리 톤을 정의하는 스타일 가이드가 있으면 프론트엔드 개발자에서 디자인 팀, 프로젝트 관리자, 연구원에 이르기까지 모든 팀원에게 도움이 됩니다.

2. 스타일가이드 제작

2-1. 개요

디자인에 필요한 ASSET 및 스타일링, 인터랙션 지침을 담은 문서입니다. 프로젝트를 시작할 때 최종 제품의 시각적 이미지 및 표현을 정의하고 디자인 및 개발 프로세스를 계획하는 데 사용합니다.

3. 스타일가이드 구성요소

정보

스타일가이드의 주요 구성요소:

타이포그래피 - 폰트 위계 포함, 제목/본문 서체와 크기 지정
색상 팔레트 - 기본/보조 색상 정의
UI 구성요소 - 버튼, 인풋, 메뉴, 아이콘
이미지 - 브랜드 비전을 반영하는 사진/일러스트
접근성 고려 - 배경과 콘텐츠 명도대비 4.5:1, 행간 1.75, 폰트크기 최소 12pt 이상

3-1. 타이포그래피

적절하고 SEO 친화적인 콘텐츠 형식과 문자 간격과 줄 높이를 잘 사용한 구조는 사용자 경험을 높은 수준으로 끌어올릴 수 있습니다. H1, H2 및 H3과 같은 제목을 사용하여 텍스트에 계층 구조를 만드는 것을 표준화하여 도입해야 합니다.

3개 이하로 사용
모바일 폰트크기 16pt → 22px, 행간 33
잘 작성된 문구나 스토리텔링을 통해 브랜드의 목표나 미션 요약

CTA는 웹 사이트 내 목표를 달성하기 위해 고객에게 ‘행동’을 유도하는 버튼이나 배너입니다.

SEO에 친화적인 콘텐츠 형식
가독성 높은 자간 행간 유지
- 영문 -0, 국문 -0.5

폰트의 위계 작성
제목과 본문에 사용할 서체, 크기 작성

3-2. 색상

브랜드의 시각적 아이덴티티에 사용되는 색상은 사용자에게 특정한 감정적 반응을 불러일으킬 수 있습니다. 색상 팔레트를 올바로 선택하면 사용자의 기분에 영향을 미치고 브랜드에 대한 느낌을 개선하여 전환 가능성을 높일 수 있습니다.

3개 이하로 사용
컬러 팔레트는 사용자 이용 심리에 영향을 미치고 브랜드의 가치관을 반영하는 특정 감정과 분위기 연출
브랜드 속성과 관련된 기본/보조색 정의
서로 충돌하지 않고 조화롭게 선택

요약

모든 브랜드에는 기본 및 보조 색상 세트가 있습니다. 강조 색상과 기본 색상이 같이 사용될 때 항상 잘 어울려야 합니다.

3-3. UI 구성요소

사용자 인터페이스 디자인 구성 요소는 최고의 사용자 경험을 제공하는 데 있어 중요한 부분입니다. GUI를 통해 웹 사이트에 생명을 불어넣을 수 있습니다.

UI 요소는 깔끔하고 기능적이며 픽셀이 완벽히 맞아야 합니다. UI 요소의 가장 중요한 역할은 설계된 의미를 시각적으로 전달하는 것입니다.

주요 UI 구성요소:

버튼
폼
인풋요소
아이콘
툴바
메뉴
리스트
그리드
스태퍼
모달

input

3-4. 이미지

브랜드 아이덴티티의 일부인 사진과 일러스트레이션은 브랜드의 비전을 반영해야 합니다.

브랜드 정체성의 일부인 사진과 일러스트레이션은 브랜드의 비전을 반영해야 합니다.
사진은 천 개의 단어 가치를 지니고 있습니다.
시각적 의사소통은 말보다 더 큰 감동을 줄 수도 있습니다.

3-5. 접근성 고려

폼

레이블의 근접성을 고려해야 합니다.

터치 영역

높이와 너비가 약 44dot 이상이어야 합니다.

색상 대비

텍스트 콘텐츠와 배경 간의 명도 대비 4.5 : 1

텍스트 크기

최소 11pt 이상

4. 관련 링크

구분	링크
스포카 브랜드 아이덴티티	bi.spoqa.com
KISA 스타일가이드	kisa.or.kr/styleguide
네이버 접근성 가이드	nuli.navercorp.com
어도비 지침서	adobe.com Brand Guide
타사이트 분석	stylifyme.com

5. 스타일 가이드 모범사례

5-1. NASA 그래픽 표준 매뉴얼

NASA의 그래픽 표준 매뉴얼은 로고 사용법, 색상 규정, 서체 가이드 등을 포함한 대표적인 스타일 가이드입니다.