1. 스타일가이드 제작 준비
1-1. 리디자인할 프로젝트의 콘셉트 정의
- 프로젝트의 무드보드에서 콘셉트 선정 (형용사적인 단어 하나만, 주조색 1개)
1-2. 디자인 콘셉트 정의
프로젝트를 시작하기 전에 범위, 스타일, 시각적 방향 및 목소리 톤을 정의하는 스타일 가이드가 있으면 프론트엔드 개발자에서 디자인 팀, 프로젝트 관리자, 연구원에 이르기까지 모든 팀원에게 도움이 됩니다.
1-2-1. 마인드맵 작성하기
표현하고 싶은 느낌과 단어를 마인드맵을 활용하여 나열해 봅니다. 예) 고급스러운, 신비로운, 어두운 컬러
1-2-2. 자료수집
유사한 웹 사이트 디자인을 캡처하여 비슷한 느낌끼리 묶어 그룹으로 분류합니다.
각 그룹이 풍기는 분위기와 사용된 표현 방법을 분석합니다
표현하려는 분위기와 가장 가까운 그룹을 선택합니다
1-2-3. 최종정리
다음과 같이 콘셉트를 정리 합니다.
- 모던하면서 고급스러운 느낌을 살리기 위해 메인 컬러를 검정으로 정한다.
- 제품 이미지가 돋보이도록 이미지 영역을 넓히고 나머지 메뉴는 줄인다.
- 배경과 이미지 영역을 구분하지 않고 빛 효과로 신비로운 분위기를 부각시킨다.
- 이미지 영역에 플래시 애니메이션을 사용하여 동적인 느낌을 표현한다
2. 스타일가이드 제작
2-1. 개요
디자인에 필요한 ASSET 및 스타일링, 인터랙션 지침을 담은 문서입니다. 프로젝트를 시작할 때 최종 제품의 시각적 이미지 및 표현을 정의하고 디자인 및 개발 프로세스를 계획하는 데 사용합니다.
3. 스타일가이드 구성요소
스타일가이드의 주요 구성요소:
- – 폰트 위계 포함, 제목/본문 서체와 크기 지정
- – 기본/보조 색상 정의
- – 버튼, 인풋, 메뉴, 아이콘
- – 브랜드 비전을 반영하는 사진/일러스트
- – 배경과 콘텐츠 명도대비 4.5:1, 행간 1.75, 폰트크기 최소 12pt 이상
3-1. 타이포그래피
적절하고 SEO 친화적인 콘텐츠 형식과 문자 간격과 줄 높이를 잘 사용한 구조는 사용자 경험을 높은 수준으로 끌어올릴 수 있습니다. H1, H2 및 H3과 같은 제목을 사용하여 텍스트에 계층 구조를 만드는 것을 표준화하여 도입해야 합니다.
- 3개 이하로 사용
- 모바일 폰트크기 16pt → 22px, 행간 33
- 잘 작성된 문구나 스토리텔링을 통해 브랜드의 목표나 미션 요약
CTA(call to action)란?
CTA는 웹 사이트 내 목표를 달성하기 위해 고객에게 ‘행동’을 유도하는 버튼이나 배너입니다.
- SEO에 친화적인 콘텐츠 형식
- 가독성 높은 자간 행간 유지
- 영문 -0px, 국문 -0.5px
- 폰트의 위계 작성
- 제목과 본문에 사용할 서체, 크기 작성
관련 링크
3-2. 색상
브랜드의 시각적 아이덴티티에 사용되는 색상은 사용자에게 특정한 감정적 반응을 불러일으킬 수 있습니다. 색상 팔레트를 올바로 선택하면 사용자의 기분에 영향을 미치고 브랜드에 대한 느낌을 개선하여 전환 가능성을 높일 수 있습니다.
- 3개 이하로 사용
- 컬러 팔레트는 사용자 이용 심리에 영향을 미치고 브랜드의 가치관을 반영하는 특정 감정과 분위기 연출
- 브랜드 속성과 관련된 기본/보조색 정의
- 서로 충돌하지 않고 조화롭게 선택
모든 브랜드에는 기본 및 보조 색상 세트가 있습니다. 강조 색상과 기본 색상이 같이 사용될 때 항상 잘 어울려야 합니다.
컬러매트릭스
3-3. UI 구성요소
사용자 인터페이스 디자인 구성 요소는 최고의 사용자 경험을 제공하는 데 있어 중요한 부분입니다. GUI를 통해 웹 사이트에 생명을 불어넣을 수 있습니다.
UI 요소는 깔끔하고 기능적이며 픽셀이 완벽히 맞아야 합니다. UI 요소의 가장 중요한 역할은 설계된 의미를 시각적으로 전달하는 것입니다.
주요 UI 구성요소:
- 버튼
- 폼
- 인풋요소
- 아이콘
- 툴바
- 메뉴
- 리스트
- 그리드
- 스태퍼
- 모달
- input
3-4. 이미지
브랜드 아이덴티티의 일부인 사진과 일러스트레이션은 브랜드의 비전을 반영해야 합니다.
- 브랜드 정체성의 일부인 사진과 일러스트레이션은 브랜드의 비전을 반영해야 합니다.
- 사진은 천 개의 단어 가치를 지니고 있습니다.
- 시각적 의사소통은 말보다 더 큰 감동을 줄 수도 있습니다.
3-5. 접근성 고려
3-5-1. 폼
3-5-2. 터치영역
높이와 너비가 약 44dot
3-5-3. 색상 대비
텍스트 콘텐츠와 배경 간의 명도 대비 4.5 : 1
3-5-4. 텍스트 크기
최소 11pt 이상
4. 관련 링크
| 구분 | 링크 |
|---|---|
| 스포카 브랜드 아이덴티티 | bi.spoqa.com |
| KISA 스타일가이드 | kisa.or.kr/styleguide |
| 네이버 접근성 가이드 | nuli.navercorp.com |
| 어도비 지침서 | adobe.com Brand Guide |
5. 스타일 가이드 모범사례
5-1. 전자정부 가이드라인
5-2. 토스 디자인 시스템
https://developers-apps-in-toss.toss.im/design/components