프로덕트 디자이너가 Claude Code로 피그마를 부린 후기 — 토큰은 녹고, 시간은 벌었다

프론트엔드 개발자인 남편이 AI로 며칠 걸리던 일을 하루 만에 해치우는 걸 옆에서 봤어요. 같은 회사 동료이기도 한데, 솔직히 그 순간 든 감정은 감탄이 아니었어요. 공포감. 소외감. 나만 이 로켓에 못 올라탄 느낌이었거든요. 기차도 못 타면 어쩌지, 하는 아찔함까지.

개발 직군에서는 AI 활용 사례가 드라마틱하게 쏟아지잖아요. 서너 명 몫을 병렬로 처리해낸다는 이야기도 흔하고요. 근데 프로덕트 디자이너는? PO든 디자이너든 비즈니스팀이든 다들 AI를 도구로 쓰고는 있지만, "뭘 어떻게 써야 진짜 내 무기가 되느냐"에 대한 답은 아직 흐릿하더라고요.

그래서 목적을 딱 두 가지로 좁혔어요. 내 시간을 아껴주거나, 내 결과물의 퀄리티를 높여주거나. 뭔가 새로운 걸 시도하기보다는, 기획-제작-핸드오프-검증이라는 매일 반복하는 프로세스에 AI를 끼워넣기로 한 거예요.

가상의 크리에이터 '하린이'한테 기획 방향을 물어본다

기획 단계에서 가장 먼저 한 건 페르소나 만들기였어요. 비즈니스 팀이 진행한 크리에이터 인터뷰 로우 데이터를 종합해서, '하린'이라는 이름의 가상 크리에이터 페르소나를 Google Gems로 구축했거든요. 상상으로 지어낸 캐릭터가 아니에요. 실제 인터뷰이들의 목소리를 학습시킨 데이터 기반 페르소나라서, 사람보다 훨씬 더 일관된 자기주장을 유지해요.

"이런 문제점이 있는데 왜 그렇게 생각해?", "새 기능에 대한 아이디어 줄 수 있어?", 심지어 디자인 화면을 보여주며 "야기될 리스크 없어?"까지 물어봐요. 물론 인터뷰 자체가 전문적으로 진행된 건 아니라 편향이 있을 수 있어요. 100% 신뢰는 당연히 안 되죠. 근데 주관이 개입돼서 방향을 잃기 쉬운 순간에, 하린이는 입력된 데이터 맥락 안에서만 반응하면서 기획의 중심을 잡아줘요. 꽤 쓸만합니다.

(NotebookLM으로 더 디벨롭시킬 예정이래요. 이걸로 클로드 코드 스킬도 만들고, 피그마 버즈 QnA도 만들고, 별 걸 다 하고 있다고.)

Claude Code에 피그마 작업을 시켰더니 — 토큰이 5시간 만에 증발했다

제작 단계에서 시간을 아끼겠다고 Claude Code를 피그마에 연결했어요. iTerm 깔고, 슬랙·노션 커넥트하고, Claude Talk to Figma 플러그인까지. (어떻게 했냐고요? 클로드가 시키는 대로 했어요. 진지하게.) 이 플러그인을 깔면 클로드가 피그마 노드를 읽고, 수정하고, 새로 만들 수 있어요.

남편처럼 AI에게 일 시켜두고 나는 병렬로 다른 작업을 하겠다는 기대가 있었어요. 모바일 청첩장 에디터 프로젝트에 바로 투입해봤는데, 여기서 교훈이 쏟아졌습니다.

토큰은 진짜 무서운 속도로 녹아요. 욕심이 앞서서 큰 섹션을 한꺼번에 맡겼더니 순식간에 바닥. 다음 세션까지 꼬박 5시간을 기다렸어요. 피그마는 코드와 달라요. 프레임 안의 모든 레이어를 방대한 JSON으로 불러오니까 데이터 덩어리가 크거든요. 눈 끈 레이어는 과감히 삭제하고, 화면 단위가 아니라 컴포넌트 단위로 쪼개서 시키는 게 핵심이에요. 화면 분석을 맡길 때는 스크린샷을 찍어서 주는 것도 방법이고요.

'알아서' 해주는 건 없더라고요. 오토 레이아웃은 무조건 명시적으로 주문해야 적용되고, 좌표 인식도 자주 틀려서 결과물이 엉뚱한 곳에 생기는 일이 많아요. 작업할 노드를 섹션 밖으로 꺼내놓고 "선택한 노드 옆에 생성해 달라"고 시키는 게 정확했어요.

반복 작업과 엣지 케이스 — 여기서 빛났다

그래도 가장 유용했던 건 반복적인 레이아웃 변형이에요. 기존 슬라이드형 갤러리를 그리드형이나 풀 위드형으로 바꿔달라는 요청을 아주 빠르게 수행했거든요.

엣지 케이스 대응에서도 큰 도움을 받았어요. 작업하다 보면 해피 패스 위주로 그리다가 나중에 개발자가 "이럴 땐 화면 어떻게 나와요?"라고 물어보는 상황, 왕왕 있잖아요. 스크린샷을 올리고 "이 화면에서 발생할 수 있는 엣지 케이스를 고려해서 필요한 화면 리스트를 뽑아줘"라고 시키면, 내가 생각 못 한 예외 상황들을 짚어주고 어떤 화면이 더 필요한지 알려줘요.

실제로 신랑 신부 인사말이 아주 길거나 짧을 때의 대응, 부모님이 고인이거나 성함 표시를 하지 않는 특수한 상황까지 클로드가 대신 그려줬어요.

솔직히 이런 작업은 내가 직접 하는 게 더 빠를 수 있어요. "굳이 저거 시키는 데 토큰을 쓴다고?" 할 수도 있고, 나도 그렇게 생각해요. 근데 핵심은 시키는 동안 나는 다른 일을 한다는 거예요. 실제로 저렇게 일을 맡겨두고 다른 작업을 했거든요. 병렬 처리의 묘미.

더미 데이터, Stitch, UX 라이팅까지 — 퀄리티도 올라간다

맥락 있는 가짜 데이터를 채우는 건 피그마 내장 AI보다 훨씬 잘해요. '그럴싸한' 이름이나 인사말 생각하는 거, 은근히 고통스럽잖아요. 클로드가 프로젝트 맥락에 맞는 리얼한 데이터를 채워주니까 디자인의 리얼리티가 확 올라갔어요.

Stitch도 인상적이었어요. 컬러 피커나 이미지 Crop 디자인이 필요했는데, 레퍼런스 찾고 직접 그리는 대신 Stitch에 요청했더니 즉석에서 뽑아줬거든요. 리서치 시간이 비약적으로 줄었어요. 아이콘 세트도 프로젝트 무드에 맞게 일관성 있게 생성해줘서, 별도 아이콘 팩을 뒤지지 않아도 됐고요.

결국 '무엇을 그릴까' 고민하며 툴과 씨름하는 시간이 줄고, '어떤 디자인이 적합한가'를 결정하는 데 시간을 더 쓸 수 있게 된 거죠. (물론 만들어준 걸 좀 수정해야 하긴 해요.)

UX 라이팅에도 클로드 코드 스킬을 세팅했어요. NotebookLM으로 정리한 UX 라이팅 원칙들을 학습시킨 결과물인데, 화면 문구를 고민할 때 원칙을 되새기며 머리 쥐어짜지 않아도 돼요. "유엑스 라이팅 스킬 사용해서 요기 노드에 있는 문장 만들어줘, ~~한 느낌이야~~" 이러면 뚝딱. 수정이 필요할 순 있지만, 출발점으로는 충분해요.

지라 티켓까지 자동으로 — 핸드오프의 귀찮음이 줄었다

디자인 완성 후 개발자에게 전달할 때도 클로드를 활용해요. 피그마 링크만 던지는 게 아니라, 지라 티켓을 생성하면서 담당 개발자를 지정하고, 동시에 슬랙에도 피그마 링크와 지라 티켓을 함께 공유하도록 세팅했어요. "그때 전달해 주신 피그마 링크 어디 있죠?"라는 질문이 사라지거든요. 정보가 파편화되지 않으니까 서로 편해요.

(근데 어떤 티켓에 하위항목으로 남겨야 하는지, 어떤 채널에 누구를 태그할지는 명확하게 써줘야 해요. 안 그러면 클로드가 샅샅이 뒤지면서 토큰을 어마어마하게 소모합니다.)

Zero UI 시대, 디자이너의 다음 스텝

결국 이 모든 여정의 이유는 명확해요. 앞으로 UI를 예쁘게 그리는 기술의 가치는 희석될 거예요. 딸칵 한 번에 수십 개의 시안이 쏟아지는데, 픽셀을 깎는 정교함만으로 경쟁력을 증명할 수 없잖아요. (서글프다...)

거창한 미래 준비가 아니에요. 조만간 마주할 Zero UI — 인터페이스가 사라지고 맥락만 남는 시대에 적응하기 위한 거예요. 화면 구성에 쏟았던 수많은 시간은 더 이상 큰 의미가 없어지거든요. 그래서 인터페이스를 AI가 만들어주는 걸 연습하고 있는 거예요. 남은 시간에 다음 스텝을 준비하려고요.

Zero UI 시대에 가장 중요한 건 도메인에 대한 통찰과 사용자에 대한 본질적인 이해. 결국 그거예요.