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

[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

[DaleSeo]

@boldkang 님, 워크샵 추억이 새록새록 나서 좋네요 ㅎㅎ 디자인 작업하시느라 바쁘신데 글까지 작성해주셔서 감사합니다. 🙇