화면을 그리는 디자이너에서, 규칙을 설계하는 디자이너로

개발자들은 요즘 AI랑 꽤 자연스럽게 같이 일해요. 평소 쓰던 코드 에디터에 Claude Code나 Codex 같은 게 들어오면서, 자리를 옮길 것도 없이 그 안에서 AI한테 시키고 받아요. 일하던 흐름이 거의 그대로예요.

그런데 디자이너는요? 'AI로 디자인한다'는 도구는 쏟아지는데, 막상 써보면 늘 같은 벽에 부딪혀요. 그럴듯한데, 못 써요. 색이 우리 색이 아니고, 버튼은 만들 때마다 모양이 달라요. 분명 화면처럼 생겼는데 그대로 제품에 넣을 수는 없어요. 결국 디자이너가 받아서 처음부터 다시 그려요.

AI가 우리 디자인 시스템을 따라야 한다는 것, 그건 새삼스러운 얘기가 아니에요. 다들 알아요. 문제는 그걸 실제로 해주는, 디자이너가 매일 쓸 만한 도구가 없었다는 거예요. 저희 AX팀이 부딪힌 진짜 벽은 거기였어요.

디자이너에게는 마땅한 툴이 없었어요

나와 있는 도구들을 하나씩 들여다봤어요.

• Figma의 AI 연동은 아직 부족한 게 많았어요.
• AI한테 디자인을 코드로 바로 짜게 하는 방식은, 디자인을 하려는 사람이 코드를 들여다봐야 하는 환경부터가 영 어색했어요. AI가 디자인 실력에 더해 코드 실력까지 갖춰야 하는 셈인데, 꼭 그래야 하나 싶었고요.
• Pencil(AI 기반 UI 디자인 툴) 같은 도구는 개인이 쓰기엔 훌륭했지만, 회사의 메인 툴로 삼기엔 디자인 시스템을 다루는 부분이 아직 약했어요.

물론 언젠가는 이 모든 걸 아우르는 '한 명의 승자'가 나올 거예요. 저희도 그날이 오면 바로 올라탈 수 있게, 우리 디자인 시스템을 AI가 읽을 수 있는 형태로 미리 정리해두고 있었고요. 문제는 그게 언제일지 모른다는 거였어요. 그때까지 디자이너의 일을 멈춰 둘 수는 없잖아요.

그래서 그냥 직접 만들었어요

지금 AI로 못 만들 게 뭐가 있나 싶었어요. 그래서 직접 만들기로 했어요. 목표는 분명했어요. 디자이너가 일하는 흐름에 자연스럽게 스며드는 도구. 자연어로 디자인하고, 디테일은 손으로 깎아낼 수 있는 도구요. 이름은 '디자인 스튜디오'에요.

혼자서 이틀 만에 PoC를 돌려보고, 가능성이 보이길래 다른 AX 업무를 하는 틈틈이 다듬었어요. 그렇게 3주 반쯤 만에 지금 모습이 됐어요. 무엇보다 좋은 건 속도예요. 누가 "이거 좀 불편한데요" 하면 그날 바로 고쳐서 내보내요. 외부 툴이었다면 이슈를 올리고 하염없이 기다렸을 일을, 우리 툴이니까 당일에 끝내요.

한 가지 결정만 짚을게요. 자체 채팅창을 넣지 않았어요. 명령을 입력하는 창을 따로 만드는 대신, 개발자가 이미 쓰는 AI 환경(Claude Code나 Codex) 위에 그대로 올라타게 했어요. 별도 앱을 깔 것 없이, 평소 AI한테 말 거는 그 자리에서 디자인을 시키는 거죠. 채팅창을 직접 만들면 사용자가 우리 앱에 묶이고 우리가 관리할 것도 늘어요. 남의 환경에 올라타면 그쪽 업데이트에 기대야 하지만, 그 자리는 매일같이 좋아지고 다른 도구도 얼마든지 붙일 수 있으니 그쪽이 낫다고 봤어요. 디자인 결과물은 이 툴만의 포맷인 .moyo 파일 하나에 담기고, 그 파일만 주고받으면 돼요.

대신 툴을 우리가 소유한 덕분에, 우리 디자인 시스템과 작업 방식을 AI가 그대로 따르게 만들 수 있어요. 외부 툴에선 그 회사가 열어준 만큼만 할 수 있는 일이에요.

자연어로 만들고, 손으로 깎아내요

핵심은 단순한 루프예요. 자연어로 요청하면 AI가 화면을 만들고, 사용자가 그걸 손으로 다듬고, 다시 요청하고. 이걸 빠르게 반복해요.

그런데 디자인은 말로 일일이 짚어가며 고치기가 참 어려워요. "그 카드 말고, 그 위에 두 번째 줄, 오른쪽 여백을 조금만…" 이런 게 잘 안 돼요. 손으로 가리키는 게 훨씬 빠른데 채팅으로는 그걸 못 하죠.

그래서 화면 위에 직접 그리는 펜 기능을 넣었어요. AI가 만든 화면 위에 낙서하듯 슥슥 그리면 돼요. "여기 좁혀", 화살표 쓱, "이 영역 빼"라고 동그라미 치고. 그러면 AI가 그 낙서를 읽고 화면을 고쳐요. 말로 다 설명하지 않아도 화면 위에 바로 표시하면 알아듣는, 디테일을 손으로 깎아낸다는 게 이런 거예요.

사실 이 펜 기능은 Lovable이 얼마 전 선보인 거예요. 보자마자 "이거 좋다" 싶어서 바로 우리 툴에 붙였어요. 좋은 아이디어를 어디서 보든 그날 가져다 쓸 수 있다는 것, 이것도 직접 만든 덕이에요.

규칙을 가르쳤더니 '쓸 수 있는 화면'이 됐어요

직접 만든 다음에도 한동안은 AI가 만든 화면이 매번 달랐어요. 레이아웃은 잡는데 색은 아무 파랑이고, 버튼은 그때그때 새로 그린 사각형이었죠. 도구를 우리가 가졌을 뿐, AI는 아직 우리 시스템을 모르니까요.

그래서 우리 디자인 시스템 — 색·간격·폰트 같은 값(토큰)과 버튼·카드처럼 재사용하는 UI 조각(컴포넌트) — 을 라이브러리로 정의해뒀어요. 한 번 정의해두면 AI가 화면을 만들 때 그 시스템을 따라요.

• "로그인 화면 만들어줘" 하면, 이제 아무 파란 사각형을 새로 그리는 대신 팀의 버튼 컴포넌트를 가져다 써요.
• 색도 primary-500처럼 정해둔 토큰을 참조해요. 토큰 값 하나만 바꾸면 그걸 쓰는 모든 화면이 한 번에 바뀌고요.
• 화면에 놓인 버튼은 원본과 연결돼 있어서, 나중에 원본 버튼 모양을 바꾸면 이미 만들어둔 화면들의 버튼까지 한꺼번에 따라 바뀌어요.

여기에 AI가 자기가 만든 화면을 캡처해서 직접 볼 수 있게 해줬어요. 그러자 만들고 → 보고 → 고치는 일을 혼자 돌리기 시작했어요. "여백이 좀 이상한데" 하고 사람이 짚어주기 전에, 자기가 먼저 잡아서 고쳐 와요. 이때부터였어요. 결과물이 처음으로 '그럴듯한 화면'이 아니라 **'쓸 수 있는 화면'**처럼 보이기 시작한 게요. 그러면서 화면을 만드는 일이 조금씩 디자이너 혼자만의 일에서 벗어나고 있었어요.

만든 화면을 넘기는 것까지가 일이에요

디자이너들이 쓰기 시작하니 다음 단계가 자연스럽게 따라왔어요. 만든 화면을 개발자에게 넘기는 일이요. 처음엔 로컬 파일 기반이다 보니 .moyo 파일을 그냥 주고받았어요. 문제는 늘 그렇듯 최신화예요. 누가 어떤 버전을 들고 있는지 헷갈리고, 받아둔 파일은 어느새 옛날 게 돼 있고요.

그래서 공유 기능을 붙였어요. 작업하다가 '공유'를 누르면 링크가 하나 발급돼요. 그 링크를 열면 공유용 화면이 바로 뜨는데, 파일을 주고받을 필요 없이 항상 최신 상태를 보여줘요.

재밌는 건 이 링크가 열리는 사이트예요. 이건 런치패드*로 띄운 사내 사이트거든요. 디자인 툴은 우리가 만들고, 그 결과물을 공유하는 사이트는 또 다른 사내 도구로 배포하고. 어느새 AX팀이 만든 것들이 서로 맞물려 하나의 환경처럼 돌아가고 있었어요. 그리고 이렇게 만들고 공유하는 길이 누구에게나 열리자, 가장 적극적으로 쓴 건 뜻밖의 사람들이었어요.

정작 제일 잘 쓰는 건 개발자였어요

이 툴의 주인공은 당연히 디자이너일 거라고 생각했는데, 막상 반응이 가장 뜨거웠던 건 개발자들이었어요.

개발자가 디자인 스튜디오로 만든 디자인

생각해보면 자연스러운 일이에요. 개발자는 이미 Claude Code나 Codex 안에서 일하고 있으니, 이 툴도 자리를 옮길 것 없이 그 안에서 바로 쓰거든요. 평소 사업이나 아이디어에 관심이 많던 개발자들이 머릿속에만 있던 새 서비스의 화면을 직접 만들어서 동료들에게 공유하기 시작했어요. 디자이너에게 부탁하고 일정을 잡고 기다릴 것도 없이요. 게다가 그 화면이 우리 디자인 시스템을 따르고 있으니, 대충 그린 와이어프레임 수준을 넘어 제법 '모요다운' 화면이 나와요.

디자이너의 일이 자리를 옮기고 있어요

그러자 자연스럽게 한 가지 질문이 따라왔어요. 화면 만들기를 직군에 상관없이 누구나 할 수 있게 되면, 그동안 디자이너가 맡아온 그 일은 어디로 가는 걸까요?

답을 더듬다 보니 앞으로의 그림이 또렷해졌어요. 이 툴로 화면을 직접 만드는 건, 앞으로 디자이너보다 비디자인 직군이 더 많이 할 거예요. 화면이 필요한 사람이면 누구든 직접 만들어요. 디자이너는 그 동료들이 만들어낸 결과물을 보고 리뷰하면서, AI가 따르는 디자인 시스템을 더 단단하게 다듬는 쪽으로 옮겨가요. 화면 한 장을 그리는 대신, 수많은 화면이 따라올 규칙을 설계하고 지키는 거예요. 처음에 막연히 떠올렸던 역할 전환이 실제로 일어나는 모습이에요.

솔직히 아직 베타예요. 이 도구를 쓴다고 좋은 디자인이 저절로 나오는 것도 아니고요. 결과는 결국 우리가 AI에게 어떤 원칙과 토큰과 컴포넌트를 주느냐에 달려 있어요. 그래서 이건 'AI가 디자인을 대신하게 만드는' 프로젝트가 아니에요. AI와 함께 디자인할 때 우리 팀에 무엇이 필요한지를, 만들면서 같이 찾아가는 과정에 더 가까워요.

언젠가 정말 모든 걸 아우르는 '승자' 툴이 나오면, 그땐 갈아타도 돼요. 그동안 다듬어둔 우리 디자인 시스템은 거기에 그대로 올라타면 되니까요. 도구는 바뀌어도, 우리가 만든 규칙은 남아요.

이 글은 모요 AX팀이 일하는 방식을 기록하는 시리즈 중 하나예요. AI로 일하는 방식을 어떻게 바꿔가고 있는지, 이런 이야기를 계속 들려드릴게요.