[4월 TIL #16] 스타일 가이드 vs 디자인 시스템

월간 목표와 주간 목표를 처음으로 제대로 세워본 한 주가 시작되었다.

5월 목표: 논문 리뷰와 제품 경험을 연결하는 흐름을 설계한다
이번 주 목표: 연결된 흐름 설계에 필요한 디자인 시스템을 구축한다

목표를 적는 순간 내가 디자인 시스템을 제대로 알고 있는 게 맞는가 하는 생각이 들었다.

---

1. 오해: 스타일 가이드 vs 디자인 시스템 🪾
처음에는 디자인 시스템을 색상, 폰트, 버튼, 인풋 같은 요소들을 정리하는 일로 생각했다. 여러 이유들로 자연스럽게 디자인 시스템을 ‘스타일 가이드’에 가까운 것으로 떠올렸던 것 같다. (많은 디자이너들이 용어를 혼용하여 사용하고 있을 것이다)

디자인 시스템 하면 떠올렸던 이미지💭 (출처: Figma Community, Basic Design System)

하지만 디자인 시스템에 관한 이해도를 높히고, 작업도 해보면서 디자인 시스템은 그보다 더 넓은 개념이라는 걸 알게 됐다.

정리 w. GPT🎨 (출처: UXPin, Design Systems vs Pattern Libraries vs Style Guides)

스타일 가이드가 “어떻게 보여야 하는가”에 가깝다면, 디자인 시스템은 그것을 포함하여 “어떤 기준으로 일관된 결정을 내릴 것인가”에 더 가까운 것이었다.



2. 발견: ‘무엇을 만들지’보다 ‘누가 쓸지’🌲
오늘 디자인 시스템 작업을 처음으로 시작해보니 역시 이 시스템을 사용할 사람이 누구인지, 어떤 상황에서 쓰게 될지, 무엇을 보고 판단해야 하는지를 먼저 결정해야만 했다. 디자인 시스템을 만든다는 건 단순히 예쁜 UI 요소를 모으는 일이 아니라, 우리가 원하는 방향과 기준을 함께 정리하는 일이기 때문에. 그래서 자연스럽게 피그마보다 정혁 님께서 만들어주신 /interview 스킬을 먼저 꺼내들며 시작했었다.



전환: AI가 더 잘 만들게 하려면 🏕️
1. 의도와 기준을 더 명확히 말해야 한다
오늘 작업하면서 AI가 시각적으로 좋은 결과물을 만들어낼 수 있다는 믿음이 생겼다. 다만 좋은 결과를 얻으려면 왜 필요한지, 어떤 상황에서 쓰일지, 어떤 기준을 지켜야 하는지, 사용자는 누구인지가 더 분명해야 했다.

결국 AI가 잘 만들게 하려면 내가 먼저 원하는 것과 의도를 더 정확히 말할 수 있어야 한다.

2. 체계를 알고 부탁해야 한다
그리고 그러려면 나도 기본 개념을 더 잘 알고 있어야겠다고 느꼈다. 스타일 가이드, 컴포넌트 라이브러리, 패턴 라이브러리, 디자인 시스템이 각각 어떻게 다르고 어떻게 연결되는지 알아야 더 정확하게 요청할 수 있을 것 같다.

내가 이 체계를 이해하고 있어야 AI에게도 단순히 “화면을 만들어줘”가 아니라, 우리가 실제로 쓰기 좋은 기준과 구조를 요청할 수 있을 것 같다.

---

오늘은 아주 기본적인 개념을 가볍게 훑고 직접 시도해본 정도였지만, 충분히 의미 있었다. 디자인 시스템 공부를 작업 중에도 병렬적으로 하면서 보완해나가야겠다. 이제 시작이다. 굿!