UX/UI 프로젝트를 시작할 때 항상 명심해야 할 것은 스타일 가이드이다. 스타일 가이드는 브랜드의 사용자 경험을 완전히 새로운 수준으로 향상할 수 있다.
스타일 가이드는 일관된 디자인 시스템을 만드는 데 도움이 된다. 아이디어를 효과적으로 전달하고 훌륭한 콘텐츠를 만들 수 있게 해 준다. 생산성을 향상해 작업 시간을 절약할 수 있으며 보다 전문적인 방법으로 브랜드와 회사를 나타낼 수 있다.
스타일 가이드를 만드는 이유
스타일 가이드를 통해 일관성 있는 프로젝트를 만들 수 있다. 모든 팀원이 작업할 때 스타일 가이드 문서를 최대한 주의해서 참조해야 하는 이유이다.
스타일 가이드를 통해 얻을 수 있는 몇 가지 이점을 살펴보겠다.
- 프런트엔드 개발자는 스타일 가이드에서 중요한 정보와 데이터를 참조하여 CSS 및 HTML을 작성하고, 16 진수 색상 코드를 쉽게 찾을 수 있고, UI 구성 요소, SVG 파일을 재사용하고, 필요한 다른 자산을 빠르게 찾아 사용할 수 있다.
- UX 디자이너가 브랜드 스타일에 맞는 반응 형 레이아웃을 만드는 데 도움이 된다.
- 소셜 미디어 관리자는 스타일 가이드 문서를 참조하여 동일한 서체, 색상 팔레트 및 그래픽 에셋을 사용하여 소셜 미디어 피드를 일관성 있게 만들 수 있다.
- 카피라이터는 브랜드의 톤에 맞는 카피를 제작할 수 있다.
프로젝트를 시작하기 전에 범위, 스타일, 시각적 방향 및 목소리 톤을 정의하는 스타일 가이드가 있으면 프런트 엔드 개발자에서 디자인 팀, 프로젝트 관리자, 연구원 또는 리써쳐에 이르기까지 모든 팀원에게 정말 도움이 될 수 있다.
그 외에도, 당신이 구상한 제품을 만들면서 길을 잃지 않도록 안내하는 포인트가 될 수도 있다.
UX/UI 스타일 가이드 문서는 마감일을 맞추고 항상 높은 생산성을 유지하면서 스트레스를 피하는 데 도움이 된다.
스타일 가이드 또는 브랜드 가이드라인?
명확하게 말하자면 스타일 가이드는 브랜드 가이드라인이 아니다.
스타일 가이드는 프로젝트를 시작할 때 최종 제품의 시각적 이미지 및 표현을 정의하고 디자인 및 개발 프로세스를 계획하는 데 사용된다.
브랜드 가이드북은 로고 타입(기본 및 보조), 그래픽 요소, 패턴 및 아이콘과 같은 특정 브랜드 요소의 사용과 웹, 인쇄물 및 기타 미디어에서의 응용 방법을 정의하는 문서이다. 또한 모든 브랜드 에셋에 대한 최적의 애플리케이션 크기와 공간을 정의한다.
스타일 가이드의 규칙을 준수하면서 제공된 것을 활용하면 다음 사항에 대해 걱정할 필요가 없다.
- 타이포그래피 / 서체
- 색상 팔레트
- 아이콘
- 이미지
- UI 구성 요소
- HEX 코드, CMYK 및 RGB 값
- 문장의 톤(Tone of Voice)
- 코드 문서
머리 아픈 작업들과 수많은 반복을 피해 디지털 스타일 가이드 문서를 확인하기만 하면 된다.
NASA 그래픽 표준 매뉴얼, Mailchimp의 스타일 가이드 또는 Barnes & Noble의 UI 스타일 가이드가 잘 만들어진 스타일 가이드라고 할 수 있다.
지금까지의 소개로는 스타일 가이드가 무엇인지에 대해 희미하게 알 수 있을 것이다. 전체 개념을 이해하고 만드는 방법을 알고 싶으면 계속 읽어보기를 바란다.
스타일 가이드 및 브랜드 메시지
디자이너라면 스타일 가이드가 무엇인지는 이미 알고 있을 것이다. 대신 브랜드 측면에서의 스타일 가이드를 좀 더 살펴보고 브랜드 메시지에 대해 좀 더 이야기를 해보도록 하겠다.
Marty Neumeier에 따르면 브랜드는 직감( The Brand Gap )이다.
“브랜드는 제품, 서비스 또는 회사에 대한 사람들의 직감이다. 브랜드는 회사가 말하는 것이 아니다. 그것은 사람들이 말하는 것이다.”
(Marty Neumeier, The Brand Gap)
사람들이 안전하고 아늑하게 느끼도록 만드는 것, 그리고 사람들이 느끼게 하고 싶은 모든 것을 만드는 것이다. 다음과 같이 생각해보라. 잠재 고객이 웹 사이트, 앱 또는 기타 디지털 및 인쇄 매체와 같은 터치 포인트와 접촉할 때 색상, 타이포그래피, 카피 라이팅, 좋은 UX와 깔끔한 UI로 고객들에게 영향을 줄 수 있다. 이때가 브랜드가 빛을 발할 때이다.
스타일 가이드에는 무엇이 포함되어야 하나?
앞서 말했듯이 프로젝트의 설계 및 개발 과정에서 효과적으로 참고할 수 있는 스타일 가이드는 최소한 다음과 같은 요소를 포함해야 한다.
- 타이포그래피
- 색상 팔레트
- UI 구성 요소
- 이미지
스타일 가이드는 어떻게 만드는가?
스타일 가이드가 있으면 프로젝트를 처음부터 끝까지 완벽하게 컨트롤할 수 있다.
이제 스타일 가이드의 중요한 요소들을 하나씩 분석하면서 퍼즐의 모든 조각들이 최적의 디자인 결정을 내리고 브랜드 일관성을 유지하는데 어떻게 도움이 되는지 살펴보겠다.
타이포그래피
타이포그래피를 올바른 방식으로 구현하는 것은 생각만큼 쉽지 않다.
예를 들어, 웹 사이트 카피 형식과 구조, 카피 라이팅을 통해 표현된 브랜드의 전반적인 보이스 톤은 고려해야 할 가장 중요한 측면 중 하나이다.
따라서 앞서 언급했듯이 잘 작성된 문구와 스토리 텔링을 통해 브랜드의 목표와 미션을 요약하거나 사용자가 전환으로 이어질 수 있는 CTA(Call to Actions)로 유도할 수 있다.
그리고 적절하고 SEO 친화적인 콘텐츠 형식과 문자 간격과 줄 높이를 잘 사용한 구조는 사용자 경험을 높은 수준으로 끌어올릴 수 있다. H1, H2 및 H3과 같은 제목을 사용하여 텍스트에 계층 구조를 만드는 것을 표준화하여 도입해야 한다.
결국, 웹 사이트는 타이포그래피의 큰 덩어리라고 볼 수 있다. 홈페이지와 문단들이 깔끔하게 보여야 한다.
홈페이지의 문단은 명확하고 매혹적이며 읽기 쉽고 전환율이 높아야 한다. 최상의 가독성을 제공하기 위해 본문과 제목에 적합한 글꼴 크기를 적용하는 것을 중요시해야 하며 접근성을 위한 가장 중요한 요소 중 하나가 되어야 한다.
제목과 본문 텍스트에 사용할 서체와 글꼴 크기를 바로 알 수 있으면 디자이너와 개발자가 일일이 글꼴을 테스트하며 찾는 시간을 절약할 수 있다.
색상 팔레트
음성의 톤(tone of voice)을 전달하는 데 도움이 되는 웹 사이트나 앱의 타이포그래피와 마찬가지로 브랜드의 시각적 아이덴티티에 사용되는 색상은 사용자에게 특정한 감정적 반응을 불러일으킬 수 있다. 색상 팔레트를 올바로 선택하면 사용자의 기분에 영향을 미치고 브랜드에 대한 느낌을 개선하여 전환 가능성을 높일 수 있다.
색상은 모든 브랜드 아이덴티티 및 스타일 가이드의 주요 요소 중 하나입니다. 음영과 색조가 스타일 가이드에 많은 영향을 미친다. 컬러 팔레트는 사용자의 구매 심리에 영향을 미치고 브랜드의 목소리(voice)를 반영하는 특정 감정과 분위기를 표현할 수 있다.
모든 브랜드에는 기본 및 보조 색상 세트가 있다.
색상 팔레트를 만들기 위해 브랜드 속성과 관련된 기본 및 보조 색상을 정의해야 한다. 기본 색상 세트는 주요 브랜드 어셋이므로 변경하지 않도록 정의하는 것이 중요하다.
보조 색상 세트는 강조 색상이다. 웹 페이지의 특정 UI 요소와 텍스트를 맥락화하고 사용자와 고객에게 더 명확하게 보일 수 있도록 해준다.
엑센트 또는 보조 색상은 링크, 텍스트, 버튼, 메뉴, 애니메이션, 양식 또는 입력 필드에 사용되어 뚜렷이 구분되는 색상으로 동작을 설명하거나 콘텍스트를 사용자에게 전달할 수 있다.
강조 색상과 기본 색상이 같이 사용될 때 항상 잘 어울려야 한다. 색상이 서로 충돌하지 않고 조화로운 색상을 이루어야 한다.
적절한 색상 팔레트를 사용하면 브랜드를 포지셔닝하고 브랜드 가치와 목소리 톤을 고객에게 잘 전달할 수 있다.
UI 구성 요소
사용자 인터페이스 디자인 구성 요소는 최고의 사용자 경험을 제공하는 데 있어 중요한 부분이다. GUI를 통해 웹 사이트에 생명을 불어넣을 수 있다.
스타일 가이드에 필요한 UI 구성 요소는 다음과 같다 :
- Buttons
- Forms
- Input Fields
- Icons
- Toolbars
- Layouts
- Menus
- Lists
- Grids
- Steppers
- Modals
UI 요소는 깔끔하고 기능적이며 픽셀이 완벽히 맞아야 한다. UI 요소의 가장 중요한 역할은 UI 요소가 설계된 의미를 시각적으로 전달하는 것이다. 사용자는 UI 요소를 통해 다음에 수행해야 하는 작업과 현재 작업을 수행하는 방법에 대한 콘텍스트를 파악할 수 있어야 한다.
예를 들면, 버튼은 현재 상태(state)를 명확하게 보여주어야 한다. 애니메이션, 색상 및 텍스트를 올바르게 조합하면 이를 사용자에게 잘 전달할 수 있다. 폼(form)도 마찬가지이다. 사용자의 관점을 염두에 두고 입력 필드를 디자인하라.
이미지(Imagery)
브랜드 아이덴티티의 일부인 사진과 일러스트레이션은 브랜드의 비전을 반영해야 한다.
사진은 천 개의 단어의 가치가 있다. 때때로 시각적 의사소통은 말보다 사람들에게 더 많은 감동을 줄 수 있다.
프로 팁 : 항상 접근성을 염두에 두고 디자인
디자인 트렌드를 따르되 사용자 경험이 모든 계층과 배경의 사람들에게 쉽게 상호 작용할 수 있도록 하는 것을 잊지 말아야 한다.
항상 디자인과 디자인 요소가 최신 접근성 표준을 준수하는지 확인하고 스타일 가이드에 적용하라.
결론
요약하자면, 스타일 가이드는 브랜드의 일관성을 유지하면서 원하는 결과물을 만들기 위해 팀원들이 브랜드 표준 세트를 준수하게 함으로써 팀의 역량을 통합해 준다.
프로젝트의 설계 및 개발 과정에서 참조하는 스타일 가이드는 사용자에게 호소할 수 있는 제품을 만드는데 도움을 주며, 팀 작업을 훌륭하게 수행하게 해 줄 수 있을 것이다.
김준범님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
