더 나은 UX를 위한 UI 스타일 가이드 만들기

이 기사의 오디오 버전을 들어보세요

응집력 있는 제품 디자인 및 사용자 경험 보장

1976년 Johnny Cash는 조립 라인에서 훔친 캐딜락 부품을 20년 동안 모으는 디트로이트 자동차 노동자의 이야기를 담은 노래 One Piece at a Time을 발표했습니다.

불행히도 작업자가 해적판 캐딜락을 만들기 시작했을 때 주요 설계 기능이 수년에 걸쳐 변경되었기 때문에 많은 부품이 호환되지 않는다는 사실을 알게 됩니다. 약간의 독창성으로 맞춤형 자동차가 완성되지만 가는 곳마다 조롱을 불러일으키는 보기 흉한 엉망진창입니다.

뒷태도 좀 웃기게 생겼다
하지만 우리는 그것을 합쳤고 우리가 이겨냈을 때
글쎄, 그 때 우리는 꼬리 지느러미가 하나만 있다는 것을 알아차렸습니다.

오늘날 디지털 경험의 디자이너와 개발자는 비슷한 문제에 직면해 있습니다. 시간의 흐름은 디지털 제품의 연속성을 파괴할 수 있는 강력한 적입니다. 시간이 지남에 따라 팀 구성원이 왔다가 사라지고 트렌드가 진화하며 기능이 변경됩니다. 또한 현대 디지털 환경의 빠른 속도로 인해 제품 혁신은 몇 년이 아니라 몇 분기 만에 이루어집니다.

비즈니스 또는 디자인 팀에 제품의 의도된 모양과 느낌을 문서화하는 공유 기록이 없으면 시각적 및 경험적 불일치가 발생하고 사용자는 좌절감을 느끼고 브랜드 평판이 타격을 받게 됩니다.

UI 스타일 가이드는 디지털 제품의 사용자 인터페이스와 경험에 응집력을 제공하는 디자인 및 개발 도구입니다. 핵심은 다음과 같습니다.

• 제품 내에서 발생하는 모든 디자인 요소 및 상호 작용 기록
• 버튼, 타이포그래피, 색상, 탐색 메뉴 등과 같은 중요한 UI 구성요소를 나열합니다.
• 호버 상태, 드롭다운 채우기, 애니메이션 등과 같은 중요한 UX 구성 요소를 문서화합니다.
• 개발자가 참조하고 사용할 수 있는 라이브 요소 및 코드 스니펫 포함

전문가 수준의 UI 스타일 가이드를 구성하는 방법을 자세히 살펴보기 전에 만능 접근 방식이 없다는 점을 이해하는 것이 중요합니다. 스타일 가이드의 가치는 대규모 제품 팀이 있는 대형 브랜드를 넘어 확장됩니다. 일관된 디지털 경험을 원하는 중소 규모 기업은 UI 스타일 가이드가 특정 요구 사항에 맞게 맞춤 제작될 때 이점을 얻습니다.

UI 스타일 가이드에 이러한 중요한 디자인 구성요소 포함

브랜드 아이덴티티 지침에 익숙한 디자이너는 UI 스타일 가이드로 전환하는 데 문제가 없어야 합니다. 포함해야 하는 많은 중요한 디자인 구성 요소와 겹치는 부분이 많기 때문입니다.

전문가 팁: 관련 디자인 구성 요소만 문서화하십시오. 관련 없는 정보는 UI 스타일 가이드를 부풀리고 작업하기 어렵게 만듭니다.

타이포그래피 체계

타이포그래피는 가장 일반적인 인터페이스 디자인 요소 중 하나이므로 제품에 사용되는 서체의 이름을 나열하는 것만으로는 충분하지 않습니다. 제목, 부제, 표제(H1, H2, H3), 본문 및 캡션에 대해 명확한 지침을 제공해야 합니다.

또한 글꼴 크기, 표시된 두께 및 정의된 스타일을 제공해야 합니다. 줄 높이와 커닝도 필요하며 특별한 상황이 발생할 때 사용할 go-to 글꼴을 선택하는 것이 좋습니다.

반응형 레이아웃

디지털 제품이 반응형 그리드 시스템을 중심으로 설계될 때 UI 스타일 가이드는 화면 크기 전반에 걸쳐 인터페이스 레이아웃을 다루어야 합니다. 이는 간격, 패딩 및 배치에 대한 참고 및 예를 포함하는 것을 의미합니다. 다양한 화면 크기와 관련하여 제품의 그리드 시스템 오버레이를 표시하는 것도 도움이 됩니다.

여기서 큰 목표는 일회성 화면 디자인이 필요하지 않도록 충분한 컨텍스트를 제공하는 것입니다. 시간이 지남에 따라 디지털 제품의 응집력이 증가하고 약화됩니다.

색상 팔레트

인터페이스를 망치는 가장 빠른 방법 중 하나는 일관성 없는 색상 사용이므로 색상 조합을 명확하게 정의해야 합니다. 색상과 해당 값(HEX, UIColor)을 나열하는 것이 좋은 시작이지만 특정 페어링 및 사용 예제도 제공해야 합니다.

UI 스타일 가이드가 일련의 브랜드 아이덴티티 지침을 참조하는 경우 더 밝은 강조 색상의 보조 구성표를 사용할 수 있는지 확인하십시오. 그렇지 않은 경우 자신의 문서와 문서를 만드십시오. 회색 값을 선택하는 것도 유용합니다.

버튼

거의 모든 인터페이스에는 버튼이 포함되어 있으므로 시간을 들여 크기, 스타일, 색상, 배치, 간격 및 활자체 요소를 문서화하십시오. 다양한 버튼이 다른 컨텍스트에서 사용되는 경우에도 명확하게 하십시오.

필요할 수 있는 추가 UI 구성 요소

• 도상학
• 툴팁 및 팝오버
• 모달
• 양식 요소
• 데이터 테이블
• 탐색 메뉴
• 차트 및 데이터 시각화
• 탭
• 온-오프 스위치
• 대화 상자
• 콘텐츠 그리드 목록
• 수직 목록
• 도구 모음
• 날짜 및 시간 선택기
• 로딩 표시기
• 체크박스
• 경고
• 드롭다운 메뉴
• 슬라이더
• 스테퍼
• 쪽수 매기기

설계 지침 구성 및 컨텍스트화

필수 UI 구성 요소 외에도 기업 및 디자인 팀이 UI 스타일 가이드를 더 쉽게 참조, 탐색 및 구현할 수 있도록 하는 실용적인 기능이 많이 있습니다.

목차

잘 정리되고 명확하게 표시된 목차는 모든 사람이 문서 내부의 내용을 빠르게 찾을 수 있도록 도와주는 간단한 방법입니다.

컨텍스트 노트

제품 수명 동안 발생할 수 있는 모든 문제가 있는 디자인 결정을 예측하는 것은 불가능하므로 자주 사용하는 UI 구성 요소 뒤에 있는 디자인 근거를 명확히 하면 예상치 못한 시나리오를 더 쉽게 해결할 수 있습니다.

예를 들어:

“핵심적으로 우리 제품은 전 세계 최고의 건축 이미지를 보여주는 것입니다. 이러한 이유로 인터페이스의 레이아웃은 텍스트보다 크고 화려한 이미지를 우선시합니다. 가능하면 이미지를 제품의 초점으로 만드십시오.”

간격 및 위치 지정 지침

간격 및 위치 지정은 종종 '반응형 레이아웃' 섹션에서 다룹니다. 디지털 제품의 복잡성에 따라 지침은 일반적인 "경험 법칙"으로 구성되거나 매우 세분화될 수 있습니다.

해야 할 일과 하지 말아야 할 일

종종 디자인의 해야 할 일과 하지 말아야 할 일을 명확하게 설명하는 것이 도움이 될 수 있습니다. 예를 들어:

• "인터페이스 바닥글에 우리 회사 로고의 흰색 워드마크 버전을 사용 하십시오 ."
• "검정 배경에 우리 회사 워드마크의 대체 색상 버전을 사용 하지 마십시오 ."

해야 할 일과 하지 말아야 할 일에 대한 논쟁을 막고 설계 및 개발 시간을 절약할 수 있지만 항상 다음과 같은 컨텍스트를 제공하는 것이 가장 좋습니다.

“이 해야 할 일과 하지 말아야 할 일 목록은 광범위한 중요한 디자인 결정을 다루지만 제품 디자인 요소의 모든 가능한 오용을 고려하지는 않습니다. 이를 염두에 두고 불확실성이 발생할 때 최선의 판단을 내리고 우리 제품의 전체적인 모양과 느낌을 정확하게 반영하는 선택을 하십시오.”

라이브 요소 및 코드 조각

브랜드 아이덴티티 가이드라인은 일반적으로 정적 문서이지만 UI 스타일 가이드에는 최종 제품에서와 같이 작동하는 라이브 요소가 포함되어 있습니다. 즉, 버튼은 버튼처럼 작동하고 드롭다운 메뉴는 실제로 드롭다운되며 애니메이션은 애니메이션됩니다.

코드 조각을 사용하면 개발자가 라이브 요소의 코드를 제품의 백엔드에 빠르게 복사하여 붙여넣을 수 있습니다.

디자인 팀이 UI 스타일 가이드에 쉽게 액세스할 수 있도록 합니다.

이제 스타일 가이드를 만드는 방법과 UI 스타일 가이드에 포함된 구성 요소 및 기능을 이해했으므로 공유 및 커뮤니케이션에 관심을 둡니다. 더 구체적으로, UI 스타일 가이드를 수용하기 위한 옵션은 무엇입니까?

전통적으로 UI 스타일 가이드는 웹 페이지로 존재했습니다. 이를 통해 디자이너와 개발자는 쉽게 액세스할 수 있으며 디자인 요소가 제품 내에서 작동하는 것처럼 작동할 수 있습니다.

최근에는 팀이 제품을 공동으로 설계, 프로토타입 및 테스트할 수 있도록 하는 소수의 클라우드 기반 플랫폼이 등장했습니다. 이와 동일한 플랫폼은 UI 스타일 가이드를 수용하고 팀원들이 지속적인 피드백과 아이디어를 교환할 수 있도록 합니다.

이러한 플랫폼 중 일부가 UI 스타일 가이드에 대한 접근 방식을 설명하는 방법을 살펴보겠습니다.

피그마

“전체 팀이 사용할 수 있는 연결된 UI 구성 요소로 디자인 시스템을 만듭니다. 공유 구성 요소가 변경되면 업데이트 받기"

단계

“색, 속성, 요소… 심지어 전환 타이밍까지 – 이제 모든 것이 구성 요소에 있어야 합니다. 제자리에서 편집 - 모든 것이 마스터입니다. 인스턴스별로 필요하지 않은 모든 항목을 재정의합니다.”

인비전

“사용 설명서를 포함한 모든 브랜드 및 UX 구성 요소가 한 곳에서 관리됩니다. 변경 사항은 전체 팀에 동기화되며 디자이너는 언제든지 최신 버전으로 전환하거나 업데이트를 롤백할 수 있습니다.”

Material.io

"색상, 모양 및 타이포그래피에 스타일 변경 사항을 적용하여 나만의 Material 테마를 만들고 브랜드 심볼 라이브러리를 만드십시오. 갤러리에서 디자인 이터레이션을 공유, 업로드 및 표시합니다. 그런 다음 검사 모드를 사용하여 개발자 문서에 액세스하십시오.”

UI 스타일 가이드는 사용하기 쉬워야 합니다.

UI 스타일 가이드를 조합할 때 의사 소통을 당연하게 여길 수는 없습니다. 제품 팀은 다양한 분야, 문화적 배경 및 전문적인 경험을 가진 사람들로 구성됩니다. 이러한 원칙을 사용하여 명확성과 사용 용이성을 보장하십시오.

간단한 레이아웃

UI 스타일 가이드에는 깨끗하고 깔끔한 화면 레이아웃이 필요합니다. 각 화면은 잘 정리되고 레이블이 명확하고 가독성이 높아야 합니다. 화면에 시각적 정보가 가득 차면 이점이 없으므로 최소한의 공간과 넓은 공간을 모두 고려하십시오.

간결한 지침

지침을 짧고 간단하게 유지하십시오. 긴 단락을 피하고 글머리 기호를 사용하십시오. 가능하면 말보다 시각적으로 보여줍니다.

정보 사용 시나리오

그 슬라이더 위에 이 스타일의 슬라이더를 언제 사용해야 하는지 궁금하십니까? '시나리오 사용'은 이러한 혼란을 해결합니다. 다시 말하지만, 여기에서는 시각적인 것이 말보다 강력하므로 시나리오와 앞으로의 적절한 경로를 모두 명확하게 보여주는 예를 제공하십시오.

관련 버전 기록

디지털 제품은 자주 업데이트됩니다. 제품 팀이 모든 마지막 인터페이스 세부 사항을 개선하려고 할 때 디자인 구성 요소가 어떻게 발전했는지 지속적으로 기록하는 것이 중요합니다. 여기에서 재량권을 사용하십시오. 소규모 비즈니스 및 제품 팀의 경우 광범위한 버전 기록 라이브러리를 유지 관리하는 것이 비현실적일 수 있습니다.

UI 스타일 가이드는 귀중한 리소스이자 강력한 디자인 도구입니다.

현대의 디자인 및 개발 팀은 MailChimp, Google 및 Salesforce와 같은 대형 브랜드에서 선전하는 디자인 언어 시스템에서 알 수 있듯이 효율성과 다분야 협업을 중요하게 생각합니다.

디자인 언어 시스템을 사용하면 정교한 디지털 제품을 작업하는 다양한 팀이 표준화된 시각적 언어를 사용하여 커뮤니케이션할 수 있습니다. UI 스타일 가이드는 디자인 언어 시스템의 구조에 짜여져 있으며 빠른 반복과 일관된 디지털 경험을 위해 신뢰할 수 있는 도구 역할을 합니다.

동시에 디자인은 대기업만이 추구하는 것이 아닙니다. 다양한 제품 팀과 디지털 프로젝트가 잘 구성된 UI 스타일 가이드의 이점을 얻을 수 있지만 리소스(재정, 시간 및 인재)는 비즈니스마다 다릅니다.

이러한 이유로 UI 스타일 가이드는 개별 비즈니스 및 디자인 팀의 요구 사항에 맞게 조정될 때 가장 유용합니다. 모든 UI 스타일 가이드의 가장 큰 목표는 일관되게 즐거운 사용자 경험으로 이어지는 명확성과 실용성의 균형입니다.

Toptal Design 블로그에 대한 추가 정보:

• 웹 및 인쇄 디자인을 위한 서체 스타일
• 반응형 디자인 – 모범 사례 및 고려 사항
• 스타트업에 스타일 가이드가 필요한 이유
• 아이콘 사용성 및 디자인 모범 사례
• 영감을 사용하십시오 - 무드 보드 가이드