[번역] 디자인 언어 만들기
Creating a design system language
Web designer depot에 Alan Power가 올린 'Creating a design system language'를 번역한 글입니다.
이 글에서 Design language는 어떤 웹이나 서비스 디자인에 적용된 디자인 스타일의 규칙 또는 가이드라인을 의미합니다. 공통으로 사용된 컬러, 타이포그래피, 아이콘, 레이아웃에 대한 정의라고 볼 수 있습니다. 이러한 'design language'를 목적에 맞게 정의하고 적용하는 것이 팀 작업을 효율적으로 만들고 디자인의 일관성을 만들 수 있다고 하네요. 당연한 이야기이지만 현실적으로는 상황과 일정에 맞게 스타일 가이드를 약식으로 만들어 팀원들과 암묵적으로 공유하며 진행하게 되는 것 같습니다. 같은 팀원들끼리는 서로 눈빛만 봐도 통해서 일까요? 통한다고 믿지만 결과물을 보면 어딘가 어긋나 있고, 서로 다른 부분은 협의와 수정을 통해 맞춰나가는 게 현실이죠. 아래에서 이야기하는 design language를 철저하게 만들면 만들수록, 커뮤니케이션 오류나 서로 맞지 않는 부분에 대한 수정 작업이 줄어들 테고, 무엇보다 초기단계에서 스타일을 디테일한 부분까지 빠짐없이 정의함으로써 놓치는 부분이 줄어들 것 같습니다. 그러면 진행하면서 기준이 되는 스타일을 불가피하게 수정하며 전체 디자인을 수정해야 할 일도 줄어들겠죠. 어쨌든 목적에 맞는 디자인과, 효율적인 작업을 위해서 꼭 필요한 작업인 것 같습니다.
Design language. 디자인 업계에서 흔히 듣는 말이지만 모두가 원하는 말이기도 하다. 그러나 살아있는 design language는 제품에 어떻게 영향을 줄 수 있을까? 그것이 왜 필요한지 기본적인 내용부터 알아보도록 하자.
기초적인 language를 만드는 것은 적용되는 플랫폼에 걸쳐 디자인 철학과 방법론을 통일시킬 것이다.
왜 Design language가 필요한가? 내부적인 관점과 외부적인 관점의 두 가지 시점이 있다.
INTERNAL
팀으로서 같은 방법과 패턴을 따르게 해주는 전체적인 관점을 만들어 준다. 모든 팀원은 추구하는 컨셉을 따라야 하고, 작업하는 모든 프로젝트에서 디자인 원칙을 참조하여 제작을 해야 한다. Design language의 목적은 디자이너에게 분명한 목표를 제공하는 것이다. Design language는 다른 language와 다를 바 없다. 혼동이 있으면, 커뮤니케이션이 와해될 것이다.
EXTERNAL
결집된 design language는 플랫폼 안에서의 조화를 만들어낸다. 보는 사람에게 표준화된 컬러, 인터렉션, 패턴은 친숙함과 안정된 느낌을 제공해 준다. 잘 계획되고 실행된 design language는 경험을 기쁘게 하는 열쇠이다. 예를 들면, 당신이 아일랜드의 스타벅스를 방문한다면, 집 근처에서 보던 스타벅스와 비슷한 느낌을 받을 것이다. 친숙함은 사용자에게 편안함과 안정된 느낌을 가져다준다.
플랫폼에서 사용하는 각각의 디자인 요소에 대해 디자인 규칙을 제공하는 것은 상위 수준의 일관성을 제공한다.성공적인 design language는 :
Focus : 디자이너가 여러 가지 요소에 방해받지 않고 프로젝트에 명확하게 집중하게 해 준다.
Clarity : 디자이너 여러 플랫폼에 걸쳐 디자인의 방향성과 규칙에 대해 명확히 이해하게 해 준다.
Confidence : 디자이너가 자신이 디자인하는 것들이 다른 팀원이 디자인하는 것과 긴밀히 연관되어 있다는 확신을 준다.
Consistency : 여러 제품에 일관된 디자인을 제공함으로써 플랫폼에 걸쳐 안정되고 친숙한 느낌을 전달한다.
Efficiency : 팀원 전체에게 디자인에 대한 이해를 제공함으로써, 중요하지 않은 디테일에 시간을 허비하지 않게 해준다.
기본적으로, 디자이너가 design language를 이해하고 신경 쓴다면, 디자인에 대한 신뢰감을 통한 일관적이고 효율적인 작업으로 비즈니스를 도울 수 있을 것이다.
기본 만들기
DESIGN PRINCIPLES
견고한 디자인 원칙을 가지면, 팀 전체는 동일한 방법과 패턴으로 작업할 수 있다. 모든 팀원은 내세우고자 하는 컨셉을 이해할 수 있으며, 현재 작업하는 프로젝트에서 디자인 원칙을 가지고 적용할 수 있을 것이다.
TONE OF VOICE
제품에 있어서 일관적인 목소리를 내는 것이 중요하다. 각각의 디자이너는 컨텐츠를 만들 때 필요한 접근방식에 주의해야 한다. 일관적인 컨텐츠는 일관적인 사용자 경험을 만드는데 매우 큰 부분을 차지하며, 디자이너는 모든 컨텐츠를 일관되게 구성해야 한다.
팀으로서 어떻게 협업을 해야 할까? 모든 팀원이 동일한 방향을 가지고, 선택한 가치가 행복한 업무환경을 만드는데 중요하다는 것에 동의를 해야 한다.
디자인 아이덴티티의 핵심을 만들기 위해 훨씬 많은 요소들이 있을 것이다. 지금까지 이야기한 것은 빙산의 일각일 뿐이다. 모든 회사의 환경은 다를 것이며, 당신의 접근 방법을 설명하기 좋은 방법으로 자유롭게 확장하길 바란다.
VISUAL IDENTITY
Visual identity를 만드는 것은 하룻밤에 되는 것이 아니다. 시간이 걸린다. 필요에 따라 명확하기도 하고, 완성시키려면 시간이 걸리기도 한다. 핵심적인 내용은 높은 수준에서 명시되거나 문서화되기도 한다. 색상 사용, 타이포그래피, 아이콘 스타일은 플랫폼에 걸쳐 일관성을 만드는데 중요한 요소들이다.
Colours : 플랫폼에서 사용되는 컬러 팔레트는 무엇인가? 어떻게, 어디에서, 그리고 왜 그 색상을 사용하는지 설명해 보라.
Typography : 플랫폼에서 사용된 폰트는 무엇인가? 무게, 크기, 정렬 등의 규칙을 정리하라.
Iconography : 아이콘의 일반적인 스타일은 무엇인가? 여러 가지 아이콘 스타일 중에 특정 스타일을 사용한 논리를 설명하여라.
Grid/Layouts : 플랫폼에 걸쳐 어떤 그리드 시스템이 사용되었는가? 그리드의 사용과 이상적인 레이아웃을 설명하여라.
Interactions : 사용자가 우리의 사이트에서 무엇을 보기를 원하고, 언제 인터렉션 하는가? 표준 인터렉션에 대해 개략적으로 설명하여라.
Animations : 어떻게 애니메이션에 접근하는가? 애니메이션의 이유와 규칙에 대해 설명하여라.
Design resources : Color swatch, icon set 등 디자인 요소들은 쉽게 다운로드할 수 있다.
THE NEXT STEPS
Design language가 얼마나 중요한지 충분히 이해했겠지만, 어디서부터 시작해야 할지 난감할 것이다. 이 아티클은 매우 상위 수준의 내용만 다루었다. Design language를 만드는 것은 위에 논의한 것보다 훨씬 더 깊이 들어가야 할 것이다. 스타일 가이드를 만드는 것과 컴포넌트 라이브러리 등 디자인 시스템을 발전시켜야 할 것들이 있다.
아래 명시된 프로세스는 진행하기 위해서 무엇이 필요한지 파악하는데 도움이 될 것이다.
UI 목록에 대한 점검
모든 것에 앞서, 현재 디자인이 얼마나 일관적이지 않은지 파악하는 것이 가장 중요하다. 이것은 이틀 이면 충분하다. 이것은 왜 design language 작업을 해야 하는지, 그리고 모든 것이 얼마나 일관적이지 않게 되어 있는지에 대해 증명해 줄 것이다. 그러나 이 작업은 design system을 왜 만드는지에 대해 비즈니스적인 근거를 얻는데 도움을 줄 것이다.
An example of a UI AuditUI 요소의 우선순위 정의
디자인팀마다 일관성을 확보하는데 어떤 요소가 중요한지 각기 다른 우선순위가 있을 것이다. 그러나 기본적인 사항을 만드는 데 있어 일반적으로 기본적인 사항들이 있다. Color, typography, iconography가 시작하기에 좋은 요소들이다. UI 요소에 근거해 우선순위를 만들기 위해 디자인팀과 개발팀이 면밀히 협업하라. 이것은 예측 가능한 미래에 대해 로드맵을 제공할 것이다.
Trello 보드를 이용하여 우선순위를 정의하는 방식을 추천한다. Trello는 다루어야 할 요소들에 대해 우선순위를 리스트로 볼 수 있게 해 주고, 각각의 요소에 대해 얼마나 더 다루어야 할지 추적할 수 있게 해 준다.
An example of a Trello board documenting the transition of a component in the cycle디자인팀과 토론을 시작해라
우선순위에 따라 무엇을 먼저 다루어야 할지 결정을 했다면, 첫 번째로 진행할 컴포넌트에 대해 디자인팀과 모든 아이디어와 의견에 대해 논의를 할 차례이다. 이 방법에는 who owns the design system project를 보면 다양한 접근방식이 있다. 다음의 예에는, 프로젝트에 참여한 디자이너가 한 명이라는 가정 하에 접근을 하겠다.
이것은 design language를 사용할 디자이너와 컴포넌트의 모든 사항을 논의하는 것은 당신에게 달려있다는 뜻이다. 디자이너가 만들어질 디자인에 대해 인풋을 가지고 있는 것처럼 확실히 느끼게 하는 것이 매우 중요하다는 것을 의미한다.
모든 인스턴스를 문서에 담아라
이제는 결정을 내릴 차례이다. 당신이 만드는 도큐먼트는 필요한 모든 인스턴스(Instance)를 포함하고 있어야 한다. 당신이 만드는 요소들이 절대 주관적이면 안된다. 왜 그러한 결정을 내렸는지 논리적으로 밝일수 있어야 당신의 결정을 디자인팀에게 설명할 수 있을 것이다.
An example of color usage.제대로 기능하는지 확인하라
다음 단계는 당신의 결정을 시험해 보은 것이다. 종이 위에 결정을 내리는 것은 쉬우나 실제 구현을 했을 때는 어떤 결정은 제대로 기능을 하지 않을 수도 있다. 현재 디자인 스타일을 사용하는 다른 예를 시험해 보라.
LOCK IT DOWN
결과에 대해 만족한다면, 디자인을 결정하고, 나머지 팀원들에게 이런 요소들이 어떻게 사용되는지 알려주어라. 그러나 스타일을 결정한 후에도, 어떤 요소들이 제대로 동작하지 않는다면, 필요에 따라 변경할 수도 있다.
다른 요소를 진행하라.
팀원들에게 공유하고 디자이너가 당신의 결정을 존중한다는 생각이 들면, 다른 요소들을 진행할 차례이다. 한 번에 얼마나 많은 요소들을 진행할지 결정하라. 하지만 한꺼번에 너무 많은 요소를 진행하지는 말라. 작은 디테일에 신경 쓸 것들이 많을 것이다 Color, Typography, icon, input field, table, list 가 시작하기에 좋을 것이다.
새로운 스타일에 대해 모두 공유했다면, 모든 디자이너와 개발자들이 그 스타일을 잘 적용하는 것이 중요하다.
모두가 동일한 디자인으로 적용하고 있는지 확인하기 위해 주기적인 검토가 중요하다. Craft by Invision과 같은 앱이 일관성을 가지고 진행하는데 도움이 될 것이다.
어떻게 성공을 측정하는가?
회사가 design language를 사용하기 시작하고, 가치를 발견하기 전에는 성공한 것이 아니다.
