스타트업에 스타일 가이드가 필요한 이유

노련한 디자이너에게도 주어진 제품에 대한 새로운 스타일 가이드를 만드는 것은 어렵습니다. 가능한 디자인 방향이 많고 프로세스가 빠르게 압도적일 수 있습니다. 시작 생활은 바쁘고 빠르며 "완벽한 것은 완료의 적", "빨리 움직여서 일을 부수기" 또는 "지금 시작하고 나중에 고칠 것"과 같은 진부한 표현으로 가득 차 있습니다.

이러한 슬로건과 변동하는 우선순위 아래 스타일 가이드를 제시하는 것은 어려운 일이지만 제품의 디자인이 장기적으로 성공하려면 필수입니다.

최근 몇 년 동안 우리는 디자인 시스템, 스타일 가이드, 패턴 라이브러리, 원자적 디자인에 대해 많이 들었습니다. 이러한 도구는 매우 유용하지만 MVP용 화면을 몇 개만 만들거나 앱을 시연하려는 경우 사용하는 것이 과도하게 보일 수 있습니다. 그러나 스타일 가이드를 사용하면 일반적으로 디자인 프로세스를 개선할 뿐만 아니라 앱을 더욱 견고하고 일관성 있게 만들 수 있습니다.

먼저 스타일 가이드의 주요 이점에 대해 이야기한 다음 도전적인 시작 환경에 대해 알아보겠습니다. 마지막으로 스타일 가이드가 살아있는 문서로 어떻게 항상 진화하는지 논의할 것입니다.

스타일 가이드가 좋은 아이디어인 5가지 주요 이유

1. 스타일 가이드는 디자인을 구체화하고 브랜드를 명확하게 만듭니다.

스타트업의 외로운 디자이너로서(종종 그런 경우가 있음) 팀의 다른 사람들이 내린 디자인 결정을 검토하고 이의를 제기할 기회가 많지 않습니다. 모든 사람이 공동 작업을 할 수 있지만 디자인이 반드시 다른 사람과 공유되는 것은 아닙니다. 즉, 최종 디자인을 검증하는 사람은 단 한 명뿐입니다.

스타일 가이드는 참조용 지침과 문서를 스타트업에 제공합니다. 앱의 글로벌 컨텍스트에서 유효성을 검사해야 하기 때문에 디자이너 또는 팀이 선택한 일부 디자인에 도전합니다. 한 화면에서 잘 작동하기 때문에 UI 구성 요소를 디자인하면 잘리지 않습니다. 잘 생각한 디자인은 한 상황에서 단일 디자인 문제를 해결해야 할 뿐만 아니라 앱의 다른 화면에서 볼 수 있는 만연한 문제도 해결해야 합니다.

스타일 가이드는 회사의 모든 사람이 전반적인 디자인 스타일, 브랜드 지침, 사양 및 규칙을 사용할 수 있도록 합니다. 클릭 한 번이면 됩니다. URL로 이동하여 온라인 스타일 가이드에 쉽게 액세스하거나 PDF를 다운로드할 수 있습니다. 디자인은 모든 사람의 일이 됩니다. 더 이상 디자인 팀의 전적인 책임이 아닙니다. 이는 제품의 사용자 인터페이스를 개선하는 신중한 접근 방식입니다.

2. 스타일 가이드는 디자인을 더욱 일관되게 만듭니다.

UI 디자인 언어에 대한 일종의 사전을 제공합니다. 이미 표현한 것을 전달하고 싶을 때 같은 용어를 사용할 수 있습니다. 같은 것을 표현하기 위해 약간 다른 단어가 있다고 상상해보십시오.

1. “비가 와요. 내 우산이 필요해.”
2. “비가 와요, 우산이 필요해요”
3. “비가 와요, 우산이 필요해요”

그것은 언어를 시적으로 만들 수 있지만 이해하기 어렵습니다. 기본적으로 사이트나 앱의 UI와 같은 개념입니다. 사용 편의성을 위해 실제로 새로운 것을 만들 때만 새로운 "단어"를 발명해야 합니다. 이렇게 하면 "제품 전체에 걸쳐 반복적으로 디자인 문제를 해결하는 구성 요소만 제품 및 이후 스타일 가이드에 허용됩니다."라는 엄격한 규칙에 구속됩니다.

일관성은 제품을 보다 사용자 친화적으로 만듭니다. 활용도가 높은 제품은 더 많은 참여와 판매로 이어질 수 있습니다.

3. 동일한 시스템 구성 요소를 재사용하면 앱을 더 쉽게 사용할 수 있습니다.

언어 예에서와 같이 일관성이 핵심입니다. 사용자가 각 구성 요소를 이해하고 다른 컨텍스트에서 다시 사용할 때 사람들은 이미 그 동작에 익숙할 것입니다. 사용자 상호 작용과 관련하여 이러한 일관성은 제품의 전반적인 사용성을 향상시킵니다.

구성 요소 기반 설계 시스템으로 작업하면 비용을 절감하고 제품을 더 쉽게 업데이트할 수 있습니다. 특정 상황에서 구성 요소에 사용성 문제가 있는 경우 한 번 수정할 수 있으며 해당 구성 요소에 대한 다른 모든 잠재적 문제도 업데이트됩니다.

4. 스타일 가이드를 사용하면 장기적으로 앱을 더 빠르게 개발할 수 있습니다.

팀에서 화면의 공통 구성 요소를 개발할 때 다른 곳에서도 사용할 솔루션을 개발하고 있습니다. 이렇게 하면 개발 시간이 많이 절약됩니다. 회사가 확장되면 새 화면을 구축하는 데 필요한 작업 시간의 10배를 절약할 수 있습니다.

5. 스타일 가이드는 생산 효율성과 혁신을 촉진합니다.

스타일 가이드를 만들면 회사의 나머지 직원이 디자인에 더 쉽게 접근할 수 있고 쉽게 사용할 수 있습니다. 개발자와 디자이너는 아이디어를 더 빠르고 쉽게 프로토타입으로 만들 수 있습니다. 부트스트랩은 개발자가 작동하는 프로토타입을 쉽게 만들 수 있다는 점에서 종종 칭찬을 받습니다. 스타일 가이드도 같은 목적을 제공합니다. 디자인 팀이 먼저 화면을 만들 필요 없이(디자인 팀이 최종 화면을 QA해야 함에도 불구하고) 개발자가 빌드할 새 UI에 대한 참조 기반을 제공합니다.

Flux의 스타일 가이드, 스타트업의 도전 과제

스타트업 환경에서 디자인 시스템을 만드는 것은 좀 더 간소화된 프로세스에 익숙한 성숙한 회사에서처럼 선형적이지 않습니다. 보다 전통적인 회사에서 디자인 팀은 UX 연구, 아이디어 및 실험을 수행한 다음 최종 브랜드 스타일 가이드를 작성합니다. 이 프로세스는 모든 회사에 적합하지 않습니다. 스타트업은 제품에 대한 비전과 요구 사항이 항상 유동적인 환경에서 일합니다. 그들은 아이디어를 테스트하고 사용자에게 잠재력을 보여주는 데 사용되는 불완전한 버전의 앱인 MVP(최소 실행 가능한 제품)를 사용합니다.

스타일 가이드를 만들 때 이것이 문제가 될 수 있습니다.

항상 진화하는 환경에서 디자이너는 일반적으로 어느 정도 '고정'되어야 하는 스타일 가이드를 만드는 데 어려움을 겪습니다. 디자이너는 생성되는 모든 구성 요소를 완전히 생각할 시간이 없을 수 있습니다. 이러한 구성 요소는 앱의 다음 릴리스에 포함될 수도 있습니다. Facebook은 조금 성숙했을 때 탭 탐색을 위해 햄버거 메뉴를 교체한 것으로 유명합니다. 햄버거 메뉴를 처음에 올린 사람이 페이스북 스타일 가이드에도 추가한 것 같나요?

아직 스타일 가이드를 만들 때가 아니라고 생각할 수도 있습니다. 장기적으로 필요하다는 것을 알 수 있지만 지금은 앱의 사용성 테스트를 위해 화면을 만드는 것이 더 중요합니다. 또한 앱을 홍보하려면 마케팅 페이지도 필요합니다. 갑자기 디자인을 늘려야 하고 화면을 만들면서 디자인과 회사 브랜드를 일관되게 유지할 수 있는 스타일 가이드의 가치를 보기 시작합니다.

문제는 안정성을 위해 유연성을 교환해야 하는 적절한 시기가 언제인지 정확히 모른다는 것입니다. 스타일 가이드를 시작해야 할 때와 화면 생성에만 집중해야 할 때를 결정해야 합니다. 최적의 접근 방식은 화면을 전달하는 동시에 스타일 가이드를 생성하는 것일 수 있습니다. 이렇게 하면 두 세계의 장점을 모두 누릴 수 있습니다.

UI 영감으로 시작하기

특히 디자이너가 아닌 경우 시작하는 좋은 방법은 좋아하는 디자인 스타일의 예 또는 더 중요하게는 사용자가 응답할 것으로 생각하는 디자인 스타일의 예를 수집하는 것입니다. 가능한 한 많은 예제를 수집하여 폴더/InVision 보드/Niice 보드 등에 넣습니다. 디자인 감성과 함께 참고자료로 활용하실 수 있습니다. 나중에 패턴 라이브러리를 작성하기 위해 빌드할 수 있습니다.

예를 들어, 엔터테인먼트 업계에서 아티스트를 홍보하는 회사의 스타일 가이드 작업을 할 때 밝은 배경이나 어두운 배경이 사용자에게 더 큰 영향을 미칠지 궁금했습니다. 나는 게임/영화/비주얼 프로덕션에서 수백 개의 다른 웹사이트를 살펴보고 그들이 어둡고 밝은 배경을 어떻게 사용했는지 확인했습니다.

가장 일반적인 패턴을 강조 표시한 참조 시트를 만들었습니다. 내가 확인한 한 가지 패턴은 해당 산업의 회사가 제품을 발표할 때 어두운 배경을 사용하는 경향이 있지만 마케팅 활동, 전자 상거래 및 상점에서는 흰색 배경을 사용한다는 것입니다.

그렇게까지 깊이 들어갈 필요는 없지만 시각적 참조가 있으면 스타일 가이드를 만드는 것뿐만 아니라 디자인해야 할 몇 가지 사용 사례를 기억하는 데 도움이 된다는 것을 알았습니다. 수집한 참고 문헌에 대해 기분이 좋으면 시각 디자인 작업을 시작할 수 있습니다.

견고한 UI 구성 요소 디자인

스타트업에서 일하는 동안, 적어도 처음에는 페이지를 만드는 것보다 구성 요소를 만드는 것이 더 어렵습니다. 페이지를 디자인할 때 페이지가 어떻게 사용될지 생각하는 경우가 많습니다. 구성 요소를 설계할 때 반드시 그런 것은 아닙니다. 특정 사용 사례를 위해 디자인하려고 하지만 유니버설 디자인 시스템의 일부가 되기를 원하고 그런 방식으로 접근해야 합니다. 예를 들어 세 개의 버튼이 있는 하위 탐색 구성 요소를 만들 수 있습니다. 4개, 5개 또는 10개의 버튼으로 작동하는 데 필요할 수도 있으며 모바일, 태블릿 및 데스크탑에서 작동해야 합니다. 미리 생각해야 합니다.

구성 요소에서 특정 수준의 지속성 또는 유지력 을 원합니다. 공통 구성 요소는 자주 변경되어서는 안 되며 제품 전체의 여러 위치에서 재사용할 수 있어야 합니다. 예를 들어 iOS 앱에만 관심이 있다면 화면 크기가 아니라 옵션의 수나 콘텐츠의 길이를 기반으로 구성 요소를 테스트하려고 합니다. 아이디어는 앱의 여러 위치에서 UI에서 실행 가능하다면 스타일 가이드의 일부가 될 가능성이 있는 구성 요소라는 것을 알 수 있다는 것입니다.

스타트업은 거의 아무것도 없는 상태에서 시작한 다음 빠르게 움직여야 합니다. 상사는 하루가 끝날 때까지 디자인된 화면을 원할 수 있습니다. 즉, 전체 스타일 가이드를 실제로 개발한 다음 화면을 만들 수 없습니다. 설상가상으로 회사의 비전이 바뀌었기 때문에 결코 빛을 보지 못할 구성 요소로 스타일 가이드를 디자인할 수 있습니다. 그들이 말했듯이, 지금 배송하는 것이 좋습니다.

훌륭한 스타일 가이드를 만드는 데는 시간이 걸리며, 이것이 디자인 시스템의 기초가 되기 때문에 제대로 만들고 싶을 것입니다. 시작 환경에서는 스타일 가이드를 모든 것과 함께 작업해야 합니다.

살아있는 문서로서의 스타일 가이드

스타일 가이드를 진행 중인 작업으로 생각해야 합니다. 스타트업이 전략을 파악하는 것처럼 스타일 가이드도 함께 파악해야 합니다. UI의 기초가 될 때까지 편집하고 시간이 지남에 따라 조정합니다. 한 가지 유용한 접근 방식은 스타일 가이드를 시작하는 동시에 첫 번째 목업을 시작하는 것입니다. 좋아하는 소프트웨어(제 경우에는 Sketch)로 두 개의 파일을 엽니다. 하나는 page name 이고 다른 하나는 styleguide 입니다. 화면 디자인 작업을 하면서 디자인을 구성하는 요소로 스타일 가이드를 시드할 수 있습니다.

이러한 작업을 더 많이 시작하면 일부 구성 요소가 스타일 가이드에 포함될 주요 후보라는 것을 일찍 알게 될 것입니다. 예를 들어 아이콘 스타일을 정했다면 모든 아이콘이 처음부터 스타일 가이드에 들어갈 수 있습니다.

저는 보통 '지금까지 완료한 아이콘'이라는 섹션을 만듭니다. 누군가가 아이콘을 필요로 하는 시점이 있는 경우 새 아이콘을 만들기 전에 먼저 이 섹션을 확인해야 합니다.

고려해야 할 다른 명백한 항목은 색상, 버튼, 선택기, 제목, 헤더, 본문 텍스트 등입니다. 특히 마케팅을 위해 스타일을 사용하는 경우 스타일 가이드에 넣고 적절하게 레이블을 지정하는 것을 고려할 수 있습니다. 특정 항목에 완전히 정착하지 않아도 괜찮습니다. 나중에 기회가 있을 때 디자인 시스템의 UI 요소를 수정하고 가이드를 적절하게 업데이트할 수 있습니다. 스타일 가이드는 특히 스타트업에서 살아있는 문서 라는 것을 잊지 마세요.

결국 가이드에 레이아웃을 추가하기 시작했을 때 모든 구성 요소가 최종 상태에 가까워야 하는 지점에 도달하기 시작했다는 것을 압니다. 이 부분은 스타일 가이드 생성 과정의 전환점을 표시합니다. 이제 축하할 수 있습니다! 이러한 이정표를 기념하는 좋은 방법은 스타일 가이드의 1.0 버전에 대한 로고 또는 아이콘(이름 지정 고려)을 만드는 것입니다.

어떤 사람들은 로고/아이콘을 스티커로 인쇄하여 팀이 일종의 트로피를 가지도록 합니다. 그것은 또한 내가 먼저 스타일 가이드를 연 다음 수행해야 하는 인터페이스에 대한 새 파일을 생성하여 가이드를 사용하는 보다 전통적인 방식으로 일반적으로 돌아가는 지점이기도 합니다.

결론

디자이너로서 가능한 한 빨리 스타일 가이드를 생성함으로써 스타트업이 더 높은 품질 표준을 준수하도록 하고 있습니다. 어려울 수 있지만 노력할 가치가 있습니다. 견고하고 균형 잡힌 스타일 가이드는 더 나은 제품을 만드는 데 도움이 될 뿐만 아니라 개발 비용을 줄이는 데도 도움이 됩니다.

빠른 결정을 내리고 때로는 설계를 빠르게 변경해야 하는 급변하는 환경에서도 이를 실현할 수 있는 방법이 있습니다. 위에 설명된 프로세스가 모든 스타트업의 디자이너가 복잡성과 속도의 문제에 대처하는 동시에 제품의 이점을 위한 견고한 스타일 가이드를 만드는 데 도움이 되기를 바랍니다.

• • •

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

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법