AI시대, 클로드 알못에서 잡도리 전문가가 되기까지_1
AI로 제대로 된 시안을 만들 수 있을까?
안녕하세요. 삼쩜삼 프로덕트 디자이너 남소정입니다.
한 달 전, 저는 AI를 거의 쓸 줄 몰랐습니다.
Claude는 채팅용으로만 썼고, 터미널은 열어본 적도 없었어요. IDE? CLI? 그게 뭐지? 코드도 당연히 몰랐습니다. 아, 코드는 지금도 몰라요.
그런 제가 한 달 만에 Figma 없이 실제 핸드오프까지 시안 수십개를 만들었고, 디자인 전용 AI 워크플로우를 구축했고, 직접 도구까지 만들게 되었습니다. (2편에서 말씀드릴 내용이지만, 사이드 프로젝트에서는 직접 깃에 붙어서 커밋하고 머지도 합니다.)
어떻게 했냐면, 그냥 잡도리로요.
이 글은 그 과정의 기록입니다.
시작하기 전에, 꿀팁 3줄 요약
1. AI에게는 Figma가 아니라 코드를 먹이세요.
2. 딸깍 신화는 틀렸습니다. 노가다 점검이 자동화를 만듭니다.
3. 코드를 몰라도, "이렇게 해줘"만 잘하면 됩니다.
FOMO가 만든 시작
왜 시작하게 됐냐면... 현업에서 느끼는 위기감 때문이었어요.
개발자들은 AI로 코드를 뚝딱 짜고 있었습니다. 기획자들도 리서치, 데이터 분석 등에 AI를 쓰기 시작했고요.
그런데 디자인은? 체감상 변화가 거의 없었습니다.
옆에서는 엄청나게 빨라지고 있는데, 저만 같은 속도로 Figma를 붙잡고 있는 느낌.
그리고 어느 순간 깨달았어요. 디자인이 병목이 되고 있다는 걸.
이건 좀 무서웠습니다.
그래서 생각했어요.
나도 AI로 뭔가 할 수 있지 않을까? 아니, 해야 하지 않을까?
첫 시도는 Figma로
처음에는 당연히 Figma에서 시작했습니다. 디자이너니까요.
Figma MCP라는 AI 연동 도구가 있길래 기대했어요."이거 쓰면 AI가 Figma에서 바로 시안을 만들어주겠네?"
하지만 2일 차, 벽에 부딪혔습니다.
대충 그럴듯하게는 돼요. 하지만 "대충 그럴듯하게"가 큰 문제였습니다. 컴포넌트가 미묘하게 다르고, 간격이 어긋나고, 디자인시스템 토큰을 제대로 못 읽고. 75%까지는 정말 순식간인데, 나머지 25%의 정합성을 맞추는 데 시간이 오래 걸렸어요. 그리고 그 이후에 재사용을 하기도 어려운 상황.
결국 깨달은 게 하나 있습니다.
Figma 시안은 사람이 보기엔 좋지만
AI가 읽을 수 있는 구조가 아니다
Figma 파일을 AI에게 주면, 레이어가 뭔지, 컴포넌트가 뭘 하는 건지 맥락 없이 시각 구조만 봐요.
사람은 한눈에 이해하지만, AI는 못 합니다.
그걸 위해 코드 커넥트가 존재하는 거지만, 그 환경이 세팅되지 않은 상황에서는 답이 보이지 않았어요. 지금 당장 뭔가를 해보고 싶은데 코드 커넥트 환경이 마련되기까지 기다려야만 하나?
그때 같은 팀 FE(프론트엔드 개발자)와 이야기하다가 실마리를 찾았습니다.
"ㅇㅇ님은 어떤 식으로 AI 작업하시나요?"
"코드로 시작해요."
'코드'로 다시 시작
세상이 달라졌습니다. 센세이션. ✨
AI에게 Figma 파일 대신 실제 프로덕션 코드를 읽게 했어요. 사내 디자인시스템의 컴포넌트 코드, 토큰 값, 실제 서비스 화면의 코드. AI는 이걸 정확히 읽었습니다.
어떻게 보면 당연한 얘기예요. 코드는 원래 기계가 읽으라고 만든 거니까.
그런데 왜 처음부터 코드로 안 했냐면, 솔직히 '코드부터 시작한다'는 개념 자체가 머릿속에 없었어요. 좀 과장하자면 디자이너한테 "코드로 시안 만들어"는 화가한테 "엑셀로 그림 그려"와 비슷한 소리 같았거든요.
한 달 전까지는.
코드 기반으로 바꾸니까 — 디자인시스템 토큰도 꽤 정확히 적용되고, 한번 도메인 지식을 기록하면 매번 설명할 필요가 없었어요. 그래서 '이건 되겠다' 하고 워크플로우 통째로 클로드코드 기반으로 변경하는 실험을 했습니다. 이렇게 작업하니 외부 문서(지라, 컨플, 앰플리튜드, 노션, 슬랙, 시트 등등)도 자유롭게 연결할 수 있고, 도메인 지식도 항상 최신으로 가져와서 편해요.
워크플로우 세팅 이외에도 자동화 프로세스를 계속 추가하고 있는데, 시간이 지날수록 '내 맞춤 디자인 비서'가 되어가고 있어서 조금씩 더 편해지는 걸 느낍니다.
참고로 Figma Make(피그마 공식 AI 기능)를 왜 안 썼냐면... 외부 지식을 효과적으로 주입할 수 없고, Git 연동이 안 되고, 반복 개선이 어렵다는 한계가 있기 때문이었어요. 이건 제가 원하는 워크플로우를 만들 수 없었습니다.
비주얼 폴리싱에서는 장점이 있을 수도 있는데... 이미 클로드랑 친해져 버려서요.
(3월 24일에 나온 피그마 신규 기능으로는 앞서 설명드린 고민과 한계를 많이 상쇄할 수 있습니다만, 이 실험과 글을 작성하던 시점에는 없었다는 점 감안 부탁드려요)
"적어뒀으니 되겠지" ➡️ ???
코드 기반으로 전환하고, 본격적으로 AI와 핑퐁을 시작했습니다.
나: "매번 같은 설명 반복하기 귀찮아. 자동으로 안 돼?"
AI: "CLAUDE.md에 규칙을 적어두면 매 세션마다 자동으로 읽어요."
오, 규칙을 문서에 적어두면 AI가 매번 읽고 따른다고?
신나서 규칙을 꽤 많이 기록했습니다. 처음엔 19개로 시작했어요."시안 만들면 판단 기록해", "페르소나 업데이트해", "커밋 자동으로 해" 같은 것들.
근데 그때는 몰랐어요. 이 핑퐁이 수백 번 반복될 줄은.
"딸깍"하면 될 줄 알았거든요.
결과가 어땠냐면...
처음 만든 규칙 19개 중 15개가 미작동했습니다.
15/19 (=실패율)
나: "그간 시안 20개를 만들었는데 판단 기록이 0개야?"
AI: "대화가 길어지면 앞에서 읽은 규칙이 기억에서 밀려나요. 그리고 이건 강제 규칙이 아니에요."
AI는 규칙을 "읽었다"고 해놓고 안 지켜요.
텍스트로 "이렇게 해"라고 적어둔다고 실행되는 게 아니었습니다.
신입한테 매뉴얼 던져주고 "읽었으면 다 알지?" 하는 것과 비슷해요.
읽는 것과 실행하는 것은 전혀 다른 문제.
여기서 하나를 깨닫습니다.
실행은 오직 잡도리에서 나온다.
AI가 알아서 해주길 기대하는 게 아니라, 안 하면 못 넘어가게 만드는 것.
체크 스크립트를 돌리고, 강제 실행 조건을 걸고, 빠뜨리면 경고가 뜨게 만들고.
주기적으로 메모리도 최적화하는 것.
규칙을 "적어두는" 게 아니라 "실행되게 만드는" 것.
이게 자동화의 진짜 의미였습니다.
그래서 지금은 이렇게 일해요
이후, 프로세스가 완전히 바뀌었습니다.
AS-IS :
이전 세션 기억 더듬기, 도메인 지식 설명, 스크린샷 첨부, 화면 구조 설명, 작업, 요청 사항 스캔, 관련 문서 기록, 커밋 요청... 이걸 매번 처음부터 반복했어요.
TO-BE :
세 마디면 됩니다.
"/start" — 이전 세션 이어서 시작. AI가 맥락을 알아서 파악해요.
"이거 개선할 거야. 읽어." — 코드 읽고 바로 작업 들어갑니다.
"세션 종료" — 판단 기록, 레슨런, 패턴 분석, 자동 커밋까지 한번에.
결국 핵심은, 제가 판단에만 집중할 수 있게 나머지를 전부 자동화한 거예요.
시안을 만들기 전에, AI가 먼저 "이 화면에서 뭘 판단해야 하는지"를 정리해서 보여줍니다.
정보량은 최소 vs 상세? CTA는 단일 vs 스킵 포함? 톤은 친근 vs 전문적?
선택지를 제시하면 제가 고르고, 그 방향대로 시안이 나와요.
핑퐁 수천 번에서 태어난 도구들
이 과정에서 도구가 하나둘 생겼습니다.
전부 "이거 매번 하기 귀찮다"에서 시작된 것들이에요.
커스텀 뷰어 : 시안을 브라우저에서 바로 봅니다. Figma 안 열어도 시안을 보고 비교할 수 있어요. 오버뷰, 프로토타입, 버전 비교, 어노테이션까지 한 화면에. 어노테이션도 자동으로 써주고 지라 티켓 내용도 자동으로 반영합니다. (단, 이 친구는 신규 기능에 밀려 곧 대체될 운명입니다... 아마도)
/start : 한 줄 치면 이전 세션 요약, 미완료 작업, 맥락이 한번에 올라옵니다. "어디까지 했더라..." 하는 시간이 사라졌어요. 최근에는 백로그도 별도로 만들었어요.
세션 종료 자동화 : "세션 종료"라고 말하면 — 디시전 로그, 패턴 분석, 레슨런 추출, 페르소나 업데이트, 자동 커밋까지. 아까 15/19 미작동했다고 했잖아요. 그 규칙들을 강제 실행으로 전환한 결과물이에요.
페르소나 / 자연어 매핑 사전 : 제 디자인 판단 규칙과 패턴을 문서화하고, 거기에 "정보량은 최소로"같은 자연어가 어떤 코드 패턴으로 변환되는지 매핑해둔 사전도 추가했습니다. 세션이 쌓일수록 AI가 제 스타일을 점점 더 정확하게 이해해요.
자료 비교 툴 : 시안 A와 B를 나란히 놓고 비교하는 도구. "창 두 개 띄우기 귀찮다"에서 시작했어요. 이제는 md, html 편집까지 툴 안에서 가능합니다. 클로드랑 핑퐁하다가 점심시간에 만들었어요. 이것이야말로 진정한 "딸깍."
워크플로우가 어떻게 진화했는지 한 줄로 요약하면 이렇습니다.
원하는 걸 글로 씀 → 안 되는 걸 발견 → 강제 실행 전환 → 말을 안 들음 → 잡도리 → 효율화
1편을 마치며
(3편까지 있습니다)
처음 Figma에서 삽질하고, 75%의 벽에 막히고, "적어뒀으니 되겠지" 함정에 빠지고, 그걸 잡도리로 돌파하고. 돌아보면 전부 필요한 과정이었어요.
코드를 몰라도 됩니다. "이렇게 해줘"를 잘하는 게 더 중요해요.
다만, "딸깍"은 없습니다. 오로지 끝없는 인내심과 잡도리가 필요합니다.
2편에서는 이 프로세스와는 또 다른, 사이드 프로젝트에서 배운 것들, 그리고 "AI 시대에 디자이너의 역할은 뭘까"에 대한 이야기를 하려고 합니다.
하네스 엔지니어링, 모노레포, 비개발자가 직접 코드에 손을 대면 무슨 일이 벌어지는지 — 이런 것들이요.
2편에서 뵙겠습니다.