[TOC] 우리만의 디자인 시스템, 어디서부터 시작할까?

[boldkang]

현업에서 디자인 시스템 프로젝트가 진행되다 보면 종종 이런 질문을 하게 됩니다.
“처음엔 잘 가고 있었던 것 같은데, 왜 이게 점점 이상해지는 걸까?”
이유는 생각보다 단순합니다.

팀원들이 각자 다른 곳을 보고 있기 때문입니다.

서로 다른 우선순위, 엇갈리는 방향

디자인 시스템을 만들다 보면 이런 일이 자주 벌어집니다.

• 디자이너는 ‘예쁘게’ 디자인하는 데 집중하고,
• 개발자는 ‘잘 작동하는 코드’에만 신경 쓰고,
• 기획자는 또 다른 ‘우선순위’를 따릅니다.

각자의 입장에서 보면 모두 맞는 말이에요. 하지만 문제는 ‘하나의 제품’으로서 디자인 시스템이 자라나지 못한다는 것이에요.
저희 달레UI 팀도 한국, 캐나다, 영국에 있는 팀원들이 각자 다른 환경과 경험을 가지고 있다 보니, 처음엔 모두가 ‘다른 디자인 시스템’을 떠올리며 일하고 있었습니다.

그럼 어떻게 하나로 맞췄냐고요?

우리가 찾은 해답은 꽤 단순했습니다. 모두가 공감할 수 있는 **‘공통의 목표’**를 만들자.

디자인 시스템도 결국 하나의 ‘제품’입니다.
그러니 제품을 만들 때처럼 이런 질문들이 명확해야 하죠:

- 왜 이걸 만들고 있는 걸까?
- 어떤 가치를 담고 싶을까?
- 누구의 어떤 문제를 해결할 수 있을까?
- 그걸 어떻게 해결할까?
- 성공했는지는 어떻게 알 수 있을까?

이 질문들에 대한 답을 모두가 함께 고민하고 정리하는 과정이 필요했습니다.

우리는 피그잼(FigJam)이라는 온라인 협업 도구를 활용해서, 2주 동안 비동기 방식으로 의견을 모아 함께 정리를 해나갔습니다.

우리가 실제로 한 6단계 과정

1단계: 핵심 가치를 만들기 위해 디자인 시스템을 ‘사람’으로 상상해보기
"만약 우리가 만들 이상적인 디자인 시스템이 사람이라고 가정해봅시다.
어떤 특성이나 자질을 가진 사람이 될까요?"

예시. 디자인 시스템으로 상상하기

2단계: 우리 디자인 시스템의 미래를 상상해보기
"1년 후, 사람들이 우리 디자인 시스템에 대해 어떻게 말하길 바라나요?"

3단계: 그 목표를 이루기 위해 우리가 해야 할 일 구체화하기
"미션을 달성하기 위해 우리가 해야 할 일은 무엇인가요?"

4단계: 실제 사용자들의 불편함 조사하기
"한번 실제 현업에서 디자인 시스템을 도입/사용하는 사람들이 어떤 문제를 경험하고 있을지 생각해보아요."

5단계: 우리만의 해결책 찾기
"알고 있는 문제에서 우리가 최적화/해결할 수 있는 부분은 무엇이 있을까요?
현재 시중에 나온 디자인 시스템이 현재 사람들이 겪고 있는 문제를 해결하고 있는가요? 아니라면 어떤 것인가요?"

6단계: 성공 여부를 확인할 수 있는 지표 정하기
"우리 오픈소스의 성공을 어떻게 측정할 수 있을까요? 실행 방법보다는 실제 성과에 초점을 맞춰주세요 "

워크샵을 통해 팀의 방향성을 함께 고민한 끝에, 달레 UI 팀의 미션이 탄생했습니다.

달레 UI 팀의 미션

한국어 환경에 최적화된 접근성 높은 오픈소스 디자인 시스템을 통해
한국 디자이너와 개발자 사이의 협업을 원활하게 하고,
누구나 쉽게 이용할 수 있는 포용적인 디지털 제품 개발을 지원합니다.

그 이후, 팀은 확실히 달라졌어요

워크샵에서 도출된 미션과 핵심 가치는 팀 위키에 잘 정리되어 있고,
모든 팀원이 그 내용을 충분히 이해하고 공감했어요.
무엇보다도 중요한 건, 이제 우리 모두가 같은 방향을 바라보고 있다는 것입니다.

그 이후로 팀 분위기 자체가 눈에 띄게 달라졌어요.

예로, 우리의 주요 목표 중 하나는 접근성 표준의 내재화였고, 그 목표는 자연스럽게 팀의 문화로 자리잡기 시작했어요. 누가 시키지 않아도, 스스로 접근성을 먼저 고민하고 논의하게 되었죠.

• 초기 색상 기준은 접근성이 우수한 Radix UI 색상 시스템을 바탕으로 설정했습니다.
• 시맨틱 색상 정의 과정에서는 명확성과 시인성을 고려해, 오랜 시간에 걸쳐 신중히 색상을 선정했어요.
• 스크린 리더 사용자들을 위해 aria-label, aria-pressed 속성을 적용하기 위해 의논했어요.
• 링크 컴포넌트를 구현할 때도, 더 나은 사용자 경험을 제공하기 위한 고민과 연구가 이어졌습니다.
  ...

접근성 외에도, 디자인과 개발 간 협업 효율성을 높이기 위해 노력했어요. Figma 컴포넌트와 코드 컴포넌트 간 1:1 매핑을 시도하며, 서로의 언어를 이해하고 연결하는 데 집중했습니다.

팀은 이 긍정적인 흐름을 이어가기 위해, 3개월마다 핵심 가치를 점검하는 정기 미팅을 열기로 했습니다.
이 모든 변화는, 결국 우리 팀이 같은 목표를 향해 나아가려는 과정이자 그 여정의 일부라고 생각해요.

이제 남은 건, 그 목표들을 차근차근 실행에 옮기는 일뿐입니다.

달레UI팀 핵심 가치 보러가기
달레UI팀 목표 보러가기

마무리하며

이번 워크샵 방식은 디자인 시스템을 만드는 팀뿐 아니라, 서로 다른 배경과 환경을 가진 사람들이 협업하는 모든 프로젝트에도 유용하게 적용 될 수 있어요.

모두가 같은 방향을 보게 만드는 첫걸음,
그건 바로 ‘우리가 어디로 가고 싶은지’를 함께 정하는 것에서 시작됩니다.

출처: unsplash

This work is licensed under CC BY 4.0

[Sunjae95]

@boldkang 초안을 읽고 피드백을 드려요.

1. 저희 워크샵에서 추출된 핵심가치를 사전에 민구님이 잘 정리해주셔서 글에서 언급해도 좋을거 같아요.
2. 팀이 변하는 사진이 있으면 명확하니 있다면 추가하는것도 좋을거 같습니다.

워크샵 진행 해주시고 Dale UI 팀이 더 소통할 수 있던 시간이 된거 같아요. 초안작성 수고하셨습니다 👍

[RiaOh]

@boldkang 민구님! 초안 잘 읽었습니다! :)
제 개인적인 의견 남기겠습니당

• 도입부가 굉장히 흥미로웠고 주의를 끌어 글을 읽고싶게 만드는 것 같아 좋았습니다 👍

워크샵을 통해 정리된 미션과 핵심 가치는 팀 위키에 잘 정리해두었고, 모든 팀원이 그 내용을 이해하고 공감했어요.
무엇보다도 중요한 건, 이제 우리 모두가 같은 방향을 바라보고 있다는 점이에요.

• => 실제 워크샵에서 위 6단계를 통해서 정리된 '저희 프로젝트의 미션과 핵심가치'를 간단하게 언급하는 것도 좋을 것 같다는 생각이 들었습니다!

초안작성 고생 많으셨습니다 :)

[DaleSeo]

컴포넌트를 만들 때도 전문 용어보다는 쉽게 풀어 쓰는 걸 당연하게 여기기 시작했죠.

이 부분이 실제 프로젝트 경험자로 한 번에 다가오지 않는데 ㅋㅋ 혹시 기억나시는 사례가 있나요? 글에 추가해주실 필요는 없고 그냥 제가 이 부분을 순수하게 이해하고 싶어서 그렇습당~

[DaleSeo]

@boldkang 님, 워크샵 추억이 새록새록 나서 좋네요 ㅎㅎ 디자인 작업 바쁘신데 글 작성해주셔서 감사합니다. Placeholder 부분에 이미지만 추가되면 훨씬 더 갬성적인 포스트가 될 수 있을 것 같습니다.

디자인 시스템 오픈소스를 만들기 위한 기초 작업

내용에 비해서 제목이 살짝 좀 아쉬운 것 같아서 다음과 같은 제목을 제안드리고 싶습니다.

• 우리만의 디자인 시스템, 어디서부터 시작할까?
• 디자인 시스템, 여러 팀원이 만드는 하나의 목표
• 같은 방향을 바라보는 디자인 시스템 팀이 되기까지

[DaleSeo]

-저희 DaleUI 팀도
+저희 달레UI 팀도

참고: #254 (comment)

[yolophg]

전체적인 흐름이나 워크샵 과정 설명이 잘 정리되어 있어서 재미있게 읽었습니다!
개인적으로 느꼈던 부분 간단히 남겨봅니다.

마지막에 “같은 방향을 바라보게 되었다”는 정리를 해주셔서 좋았는데, 앞에서 말한 ‘공통 목표’가 정확히 어떤 내용이었는지 한 번만 더 짚어주시면, 처음 읽는 사람 입장에서 이해하기 훨씬 쉬울 수도 있을 것 같다는 생각이 들었습니다.

[DaleSeo]

@boldkang 님, 이미지 넣어주시느라 수고 많으셨어요 ㅎㅎ #275 참고하셔서 마지막에 라이선스 표기 좀 부탁드립니다!

[DaleSeo]

[이미지]

요기 이미지가 아직 빠져있네요?

[DaleSeo]

달레UI팀 핵심 가치 보러가기

요기는 링크를 넣으시려고 하시는 거죠?

[DaleSeo]

이미지 넣으면서 텍스트 정렬이 틀어진 것 같습니다.

[DaleSeo]

cc xlargeby xlarge

오타용!