AI 시대, 디자이너에게 '디자인 시스템'이 더 중요해지는 이유
듀오톤의 고민아 디자이너는 요즘 들어 어렸을 때 포기했던 아이디어들을 다시 꺼내고 있어요. 혼자서는 만들수 없다고 생각해서 묻어뒀던 것들인데, 바이브 코딩을 시작하고 나서 생각이 바뀌었어요. "이거 할 수 있을 것 같은데, 한번 해볼까." 그 마음 하나로 지금도 이런저런 시도를 이어가고 있어요.
바이브 코딩의 완성도를 더해줄 ‘디자인 시스템’
바이브 코딩으로 다양한 실험을 하던 중, 고민아 디자이너에게 한 가지 재미있는 궁금증이 생겼어요. “라이브러리까지 잘 정리된 오픈소스 디자인 시스템을 활용하면, 바이브 코딩으로 실제로 돌아가는 앱을 훨씬 쉽게 만들 수 있지 않을까?” 하는 거였죠.
마침 오래 품고 있던 아이디어도 있었어요. 카페를 좋아해서, 갔던 카페와 먹은 메뉴를 사진과 함께 기록할 수 있는 앱을 만들고 싶었거든요. 마침 AI가 잘 읽을 수 있게 설계된 원티드의 디자인 시스템 (Montage)이 공개되었고 이걸 활용해 보기로 했어요.
Stitch → Claude → 앱, 이틀이면 됐어요
Stitch로 아이디어 시각화하기
먼저 Claude와 아이디에이션을 하면서 핵심 기능을 정리하고, 그걸 바탕으로 Stitch에서 와이어프레임을 잡았어요. Stitch는 완벽한 디자인보다 빠른 와이어프레임 구축에 강하다는 걸 알고 있었거든요.
Antigravity와 Claude Code로 코딩하기
와이어프레임이 잡히고 나서는 작업 화면을 Antigravity로 넘겼어요. 전체 파일 구조를 한눈에 보면서, 실제 대화와 코딩 지시는 Claude Code와 나눴죠.
디자인 시스템 소스 알려주기
GitHub에서 다운받은 원티드 디자인 시스템 소스 파일(https://montage.wanted.co.kr/docs/getting-started)을 Claude에게 올려주고, 이 소스를 기반으로 앱을 만들어달라고 했어요.
결과는 놀라웠어요. 구글 맵까지 연결된, 실제로 작동하는 카페 로그 앱이 단 이틀 만에 만들어졌거든요.
물론 실무 디자이너의 눈에 아쉬운 부분도 있었어요. 컬러 시스템이나 기본 버튼, 카드 같은 컴포넌트들은 원티드 디자인 시스템의 느낌이 훌륭하게 살아있었는데, 탭 바나 바텀 시트 같은 일부 영역은 원티드 고유의 UI보다 iOS 기본 네이티브 UI에 더 가깝게 느껴졌거든요.
하지만 빠르게 원하는 디자인으로 서비스를 구현하기에는 충분했어요. 만약 디자인 시스템과 더 완벽하게 일치하는 디자인을 원한다면, 원티드의 경우 전용 wds-mcp를 연결해서 AI의 컴포넌트 사용 정확도를 훨씬 높일 수 있다는 실질적인 팁도 얻었죠.
AI 한테는 이렇게 지시했어요
그럼 AI에게 어떻게 일을 시켜야 할까요? 프롬프트 창에 텍스트를 길게 늘어놓는 것보다, .md 파일 형태로 규칙과 기획서를 깔끔하게 전달하면 훨씬 효율적으로 일을 시킬 수 있어요. 고민아 디자이너는 아래와 같이 규칙 문서를 만들고 Claude Code에게 학습시켰어요.
그녀는 본인이 AI를 대하는 방식을 이렇게 표현해요
"저는 항상 12살짜리 똑똑한 친구한테 과제를 내준다고 생각해요. 다짜고짜 '이거 해'라고 하면 아이는 하기 어렵잖아요. 왜 이걸 하는지 맥락도 알려줘야 하고, 참고 자료도 줘야 하고, 규칙도 명확하게 설명해 줘야 해요. 그렇게 가이드를 주면 훨씬 훌륭하게 일을 해줘요."
앞으로 디자인 시스템이 더 중요해 질 거라고 생각해요
이틀 만에 퀄리티 있는 앱이 나온 건 잘 구축된 디자인 시스템 덕분이기도 해요. 단순히 피그마 화면만 그린 상태에서 MCP로 코드를 변환해 봤을 때는 레이아웃이 깨지거나 수정해야 할 부분이 훨씬 많았거든요.
하지만 잘 정리된 디자인 시스템이 주어지면 AI가 컴포넌트와 규칙을 제대로 익힐 수 있어서, 일관된 디자인으로 다양한 결과물을 만들 수 있어요. 이번 경험을 통해 그녀에게 생긴 확신이 하나 있어요.
"AI가 완벽히 이해할 수 있는 디자인 시스템을 체계적으로 설계해 두면, 나중에 AI가 그걸 스스로 조립해서 화면을 구현하는 시대가 올 거예요." 심지어 기획자도 잘 만들어진 디자인 시스템만 있다면 직접 바이브 코딩을 할 수 있게 될 거라고 봐요.
어렸을 때 포기했던 아이디어들을 다시 꺼내고 있어요
이번 경험에서 고민아 디자이너에게 가장 크게 달라진 건 마음가짐이었어요.
예전에는 아이디어가 떠올라도 어차피 안 된다는 걸 알고 있으니까 그냥 묻어뒀어요. 창의적인 생각을 굳이 꺼내지 않는 게 익숙해져 있었거든요. 그런데 바이브 코딩을 시작하고 나서 그 생각이 달라졌어요.
"옛날에 이거 있었으면 좋겠다 했던 것들을 다시 꺼내려고 하고 있어요. 어차피 안 되니까 없애버렸던 아이디어들을요.”
최근에는 손 인식 API 미디어파이프를 활용해서, 손을 펼치는 동작에 따라 영상 프레임이 앞뒤로 이동하는 프로젝트를 만들었어요. 영상의 시작과 끝은 정해져 있고, 손의 크기와 속도에 따라 프레임이 움직이는 방식이에요.
지금은 디자인 용어 사전 아카이브 사이트도 만들고 싶고, 한국에서 배운 것들을 홍콩에 알리고 싶어 홍콩 디자이너들을 위한 콘텐츠 사이트도 구상 중이에요.
한 번 해봐야 알아요
아직 바이브 코딩을 시작하지 않은 디자이너들에게 고민아 디자이너가 하고 싶은 말은 단순해요.
"해보고 나면 다른 세상인 걸 알게 돼요. 이게 나한테 이렇게 쓸 수 있구나, 이런 게 되는구나, 재밌구나. 그걸 직접 경험해야 알 수 있어요.
요즘 AI 도구들도 너무 많고 업데이트도 빨라서 '나만 뒤처지는 거 아냐?' 하는 불안함이 생길 수 있잖아요. 근데 저는 그럴수록 계속 직접 해보는 게 답이라고 생각해요. 피로감이 느껴질 땐 모든 걸 다 따라가려고 하기보다, 나한테 잘 맞는 도구 하나를 정해서 깊게 파보고 직접 만들어보는 거죠. 그렇게 실행하다 보면 불안감보다는 할 수 있다는 자신감이 더 커질 거예요."
결국 새로운 기술을 내 것으로 만드는 가장 확실한 방법은, 거창한 계획보다 "이거 한번 해볼까?" 하는 가벼운 마음가짐에 있습니다. 기술의 변화 속도가 두려울 때일수록 일단 내 손으로 무언가를 만들어 보는 재미를 느껴보는 것이 중요하니까요.
혼자서는 안 될 거라 생각했던 상상들이 하나둘 현실이 되는 지금, 더 많은 디자이너들이 망설임 없이 새로운 도전을 이어가기를 응원합니다.
오픈패스는 디자이너들이 시도하고, 배우고, 함께 성장하는 이야기를 계속 전합니다.