찰떡같이 말해야 찰떡같이 알아듣죠.
디자인 시스템 이야기 (2)
디자인 조직 내의 대표적인 비효율 케이스를 꼽아본다면 중복 작업과 커뮤니케이션 오류로 인한 시간 낭비를 들 수 있습니다. 실제 디자인을 하는 시간보다 이러한 일을 해결하는데 더 많은 시간을 쏟을 때가 있죠.
개떡같이 말해도 찰떡같이 알아 들어라?
아..하면 척!하고 알아 듣는 눈치 빠른 사람은 모두가 선호하는 동료입니다. 나는 개떡같이 말해도, 상대방은 찰떡같이 알아듣는 것을 기대합니다. 하지만 우리 모두가 번뜩이는 눈치를 가질 수는 없으니, 좀 알아듣기 쉽게 커뮤니케이션 하면 좋겠죠?
개떡같은 말의 상당 수는 대부분 조직 내에서 알게 모르게 약속되어 사용해 온 은어입니다. '제이슨님, 통돌이 이슈 JIRA에 어싸인 되어 있던데요? 내일까지 그것 좀 리졸브해주시고, 그 다음 빵빠레 아이데이션 세션 잡아주실래요? 다소 과한 사례지만 이렇게 우리는 참여 중인 프로젝트의 기능과 새로 디자인한 UI에 고유의 이름을 붙입니다.
이름을 붙인 UI들을 모아서 공유하는 것을 패턴화라고 합니다. 패턴이라는 개념은 건축, 시각 디자인 등 다른 분야에도 오래 전부터 존재해왔고, 디지털 제품에 활용된 가장 유명한 예로는 아재들만 안다는 Yahoo! Library가 있습니다.
일반적으로 패턴을 다음의 세 가지 유형으로 정의를 합니다.
기능 패턴
기능 패턴은 반복되어 사용되는 UI의 단위인데요. 검색창이나 리스트 등의 단위 보다는 좀 더 크거나 복합적인 무엇입니다. 신용 카드를 발급받는 앱을 디자인한다고 예를 들어보겠습니다.
주유, 쇼핑 등 카드를 혜택 별로 고를 수 있는 UI영역을 '혜택 picker'라는 패턴으로 네이밍할 수 있습니다. 반면에 '쇼핑'을 누르면 불이 켜지는 UI요소나 검색창 등은 '컴포넌트'라고 부를 수 있습니다. 기능 패턴을 목적에 따라 네이밍을 한다면 명확히 구분됨과 동시에 목적 또한 전달할 수 있어서 생김새로 네이밍하는 것보다 유용합니다.
시각 패턴
타이포그래피, 컬러팔레트, 레이아웃, 아이콘, 일러스트레이션, 인터랙션 등 눈으로 반복적으로 보여져 제품의 이미지를 전달하는 것을 시각 패턴이라고 부릅니다. 브랜드가 시각 패턴으로 잘 만들어진 경우, 제품의 대부분을 손으로 가리고 일부만 보여주어도 그것이 어떤 브랜드인지 알 수가 있습니다. 아래 글씨가 어떤 브랜드의 시각패턴인지 모르시는 분은 없겠죠?
언어 패턴
Tone of voice라고 흔히 얘기하는 이것은 제품에서 일관되게 쓰여지는 어조와 단어를 의미합니다. 정중하고 차분한 톤을 사용하는 앱이 있는 반면에, 의도적으로 친근하고 위트있는 톤을 사용하는 앱이 있습니다.
이렇게 패턴이라는 것을 약속함으로 인해서 우리는 찰떡같이 말을 할 수 있게 됩니다. 모두가 같은 찰떡을 약속하고, 그것을 팀 내에 공유해 나눠먹는 것을 '디자인 시스템' 이라고 합니다. 패턴에 개발 코드가 포함된 경우도 있고, 디자인 팀 내에서만 공유하는 경우도 있는데 어떤 형태든 간에 이렇게 시스템이 구축되면 자연스럽게 중복작업도 줄어들게 됩니다.
이 글을 읽고 계신 분들 중에는 이미 조직 내에 디자인 시스템을 갖추고 있는 경우가 상당히 많을 텐데요. Airbnb, Atlassian 등 여러 회사들이 디자인 시스템을 구축해 업무에 활용을 하고 있습니다. 다음 시간에는 이러한 기업들이 어떻게 디자인 시스템을 구축하고 활용하고 있는지 알아보겠습니다.
