19개 규칙 중 15개가 미작동 — 삼쩜삼 디자이너의 AI 잡도리 한 달 기록

한 달 전, 이 사람은 AI를 거의 쓸 줄 몰랐어요. Claude는 채팅용으로만 썼고, 터미널은 열어본 적도 없었습니다. IDE? CLI? 코드? 전부 모르는 세계였죠. (코드는 지금도 모른다고 합니다.)

그런 사람이 한 달 만에 Figma 없이 실제 핸드오프까지 시안 수십 개를 만들었고, 디자인 전용 AI 워크플로우를 구축했고, 직접 도구까지 만들게 됐어요. 사이드 프로젝트에서는 깃에 직접 붙어서 커밋하고 머지까지 한다고 합니다.

어떻게 했냐면, 그냥 잡도리로.

개발자는 뚝딱, 디자이너는 제자리

시작은 현업에서 느끼는 위기감이었어요. FOMO라고 해도 될 것 같은데요.

개발자들은 AI로 코드를 뚝딱 짜고 있었습니다. 기획자들도 리서치, 데이터 분석 등에 AI를 쓰기 시작했고요. 근데 디자인은? 체감상 변화가 거의 없었어요.

옆에서는 엄청나게 빨라지고 있는데, 자기만 같은 속도로 Figma를 붙잡고 있는 느낌. 그리고 어느 순간 깨달은 거예요. 디자인이 병목이 되고 있다는 걸.

좀 무서운 얘기죠.

Figma MCP의 75% 벽

처음에는 당연히 Figma에서 시작했어요. 디자이너니까요. Figma MCP라는 AI 연동 도구가 있길래 기대했죠. "이거 쓰면 AI가 Figma에서 바로 시안을 만들어주겠네?"

2일 차에 벽에 부딪혔습니다.

대충 그럴듯하게는 돼요. 근데 "대충 그럴듯하게"가 큰 문제였어요. 컴포넌트가 미묘하게 다르고, 간격이 어긋나고, 디자인시스템 토큰을 제대로 못 읽고. 75%까지는 정말 순식간인데 나머지 25%의 정합성을 맞추는 데 오히려 시간이 더 걸렸거든요. 재사용도 어려운 상황.

결국 깨달은 게 하나 있습니다.

Figma 시안은 사람이 보기엔 좋지만 AI가 읽을 수 있는 구조가 아니다

Figma 파일을 AI에게 주면, 레이어가 뭔지, 컴포넌트가 뭘 하는 건지 맥락 없이 시각 구조만 봐요. 사람은 한눈에 이해하지만 AI는 못 합니다. 코드 커넥트가 세팅된 환경이라면 이야기가 다르겠지만, 그 환경이 마련되기까지 기다려야만 하나?

그때 같은 팀 프론트엔드 개발자랑 이야기하다가 실마리를 찾았어요.

"ㅇㅇ님은 어떤 식으로 AI 작업하시나요?"

"코드로 시작해요."

센세이션.

코드를 먹이니까 세상이 달라졌다

AI에게 Figma 파일 대신 실제 프로덕션 코드를 읽게 했어요. 사내 디자인시스템의 컴포넌트 코드, 토큰 값, 실제 서비스 화면의 코드. AI는 이걸 정확히 읽었습니다.

어떻게 보면 당연한 얘기긴 해요. 코드는 원래 기계가 읽으라고 만든 거니까요. 근데 왜 처음부터 코드로 안 했냐면, 솔직히 그 개념 자체가 머릿속에 없었어요. 디자이너한테 "코드로 시안 만들어"는 화가한테 "엑셀로 그림 그려"와 비슷한 소리 같았거든요. 한 달 전까지는.

코드 기반으로 바꾸니까 디자인시스템 토큰도 꽤 정확히 적용되고, 한번 도메인 지식을 기록하면 매번 설명할 필요가 없었어요. 외부 문서(지라, 컨플, 앰플리튜드, 노션, 슬랙, 시트)도 자유롭게 연결할 수 있고, 도메인 지식도 항상 최신으로 가져와서 편하다고 합니다.

참고로 Figma Make(피그마 공식 AI 기능)를 안 쓴 이유도 있어요. 외부 지식을 효과적으로 주입할 수 없고, Git 연동이 안 되고, 반복 개선이 어렵다는 한계 때문이었습니다. (3월 24일에 나온 피그마 신규 기능으로 이 한계가 많이 상쇄되긴 했지만, 실험 시점에는 없었다고요.)

"적어뒀으니 되겠지" 함정

코드 기반으로 전환하고 본격적으로 AI와 핑퐁을 시작했어요.

CLAUDE.md에 규칙을 적어두면 매 세션마다 자동으로 읽는다길래, 신나서 규칙을 19개나 기록했습니다. "시안 만들면 판단 기록해", "페르소나 업데이트해", "커밋 자동으로 해" 같은 것들.

근데 그때는 몰랐어요. 이 핑퐁이 수백 번 반복될 줄은. "딸깍"하면 될 줄 알았거든요.

결과가 어땠냐면... 처음 만든 규칙 19개 중 15개가 미작동. 실패율 79%.

시안 20개를 만들었는데 판단 기록이 0개. AI는 규칙을 "읽었다"고 해놓고 안 지켰어요. 대화가 길어지면 앞에서 읽은 규칙이 기억에서 밀려나고, 강제 규칙도 아니라서요.

신입한테 매뉴얼 던져주고 "읽었으면 다 알지?" 하는 것과 똑같은 상황. 읽는 것과 실행하는 것은 전혀 다른 문제.

실행은 오직 잡도리에서 나온다.

AI가 알아서 해주길 기대하는 게 아니라, 안 하면 못 넘어가게 만드는 거예요. 체크 스크립트를 돌리고, 강제 실행 조건을 걸고, 빠뜨리면 경고가 뜨게 만들고, 주기적으로 메모리도 최적화하고. 규칙을 "적어두는" 게 아니라 "실행되게 만드는" 것. 이게 자동화의 진짜 의미였습니다.

세 마디면 되는 워크플로우

이후, 프로세스가 완전히 바뀌었어요.

전에는 매번 이랬습니다. 이전 세션 기억 더듬기, 도메인 지식 설명, 스크린샷 첨부, 화면 구조 설명, 작업, 요청 사항 스캔, 관련 문서 기록, 커밋 요청... 이걸 처음부터 반복.

지금은 세 마디면 돼요.

"/start" — 이전 세션 이어서 시작. AI가 맥락을 알아서 파악합니다. "이거 개선할 거야. 읽어." — 코드 읽고 바로 작업 들어갑니다. "세션 종료" — 판단 기록, 레슨런, 패턴 분석, 자동 커밋까지 한번에.

핵심은 판단에만 집중할 수 있게 나머지를 전부 자동화한 거예요. 시안을 만들기 전에 AI가 먼저 "이 화면에서 뭘 판단해야 하는지"를 정리해서 보여줍니다. 정보량은 최소 vs 상세? CTA는 단일 vs 스킵 포함? 톤은 친근 vs 전문적? 선택지를 제시하면 고르고, 그 방향대로 시안이 나오는 구조죠.

핑퐁 수천 번에서 태어난 도구들

이 과정에서 도구가 하나둘 생겼어요. 전부 "이거 매번 하기 귀찮다"에서 시작된 것들입니다.

커스텀 뷰어: 시안을 브라우저에서 바로 봅니다. Figma 안 열어도 시안을 보고 비교할 수 있어요. 오버뷰, 프로토타입, 버전 비교, 어노테이션까지 한 화면에. 어노테이션도 자동으로 써주고 지라 티켓 내용도 자동으로 반영한다고요. (이 친구는 신규 기능에 밀려 곧 대체될 운명이라고 합니다.)

/start 명령어: 한 줄 치면 이전 세션 요약, 미완료 작업, 맥락이 한번에 올라와요. "어디까지 했더라..." 하는 시간이 사라졌죠. 최근에는 백로그도 별도로 만들었다고 합니다.

세션 종료 자동화: "세션 종료"라고 말하면 디시전 로그, 패턴 분석, 레슨런 추출, 페르소나 업데이트, 자동 커밋까지. 아까 15/19 미작동했던 규칙들을 강제 실행으로 전환한 결과물이에요.

페르소나/자연어 매핑 사전: 디자인 판단 규칙과 패턴을 문서화하고, "정보량은 최소로" 같은 자연어가 어떤 코드 패턴으로 변환되는지 매핑해둔 사전까지 추가했어요. 세션이 쌓일수록 AI가 스타일을 점점 더 정확하게 이해하게 됩니다.

자료 비교 툴: 시안 A와 B를 나란히 놓고 비교하는 도구. "창 두 개 띄우기 귀찮다"에서 시작했다고요. 이제는 md, html 편집까지 툴 안에서 가능합니다. 클로드랑 핑퐁하다가 점심시간에 만들었다고 해요. 이것이야말로 진정한 "딸깍."

워크플로우가 어떻게 진화했는지 한 줄로 요약하면 이렇습니다.

원하는 걸 글로 씀 → 안 되는 걸 발견 → 강제 실행 전환 → 말을 안 들음 → 잡도리 → 효율화

코드를 몰라도, 딸깍은 없어도

처음 Figma에서 삽질하고, 75%의 벽에 막히고, "적어뒀으니 되겠지" 함정에 빠지고, 그걸 잡도리로 돌파하고. 돌아보면 전부 필요한 과정이었다고 합니다.

코드를 몰라도 됩니다. "이렇게 해줘"를 잘하는 게 더 중요해요.

다만 딸깍은 없어요. 오로지 끝없는 인내심과 잡도리가 필요합니다.

2편에서는 사이드 프로젝트에서 배운 것들, "AI 시대에 디자이너의 역할은 뭘까"에 대한 이야기가 이어진다고 해요. 하네스 엔지니어링, 모노레포, 비개발자가 직접 코드에 손을 대면 무슨 일이 벌어지는지 — 궁금한 분들은 기다려 보시길.