[Claude Code] AI가 코드를 짜주는 게 아니다 — 디자이너가 직접 써본 Claude Code 현실 후기

📝 한줄 요약

Figma 의존도를 줄이고 싶었던 프로덕트 디자이너가 Claude Code로 하루 만에 7개 화면 + 다국어 + 다크모드 + 스토리북까지 갖춘 라이브 웹 프로토타입을 만들었다. 기대한 것과 달랐던 것들도 있었다.

바쁘시면 이것만 읽어도 돼요:

• AI 코딩 도구의 가치는 속도가 아니라 정적 파일이 아닌 실제 작동하는 웹 버전을 혼자 만들 수 있다는 것

• 화면 7개를 하루에 만드는 건 Figma로도 가능하다. 다국어 전환 · 다크모드 · 테마 스위치 · 스토리북이 동시에 달린 웹 버전은 AI 없이는 혼자 못 했다

• Claude Code(기획·구조)와 Codex CLI(검토·수정)가 역할이 자연스럽게 나뉘었다

• AI는 디자인 규칙을 자꾸 어긴다. 내가 계속 옆에서 확인해야 한다

• AI가 동의를 구하는 타이밍을 예측할 수 없어서 자리를 못 뜬다 — 이게 생각보다 피로하다

🎯 이런 분들께 도움돼요

• Figma는 잘 쓰는데 "이걸 실제로 어떻게 보여주지?"가 고민인 디자이너

• 기획서를 쓰고 나서 그게 실제로 어떻게 보일지 빠르게 확인하고 싶은 PM/기획자

• AI 코딩 도구를 써보고 싶은데 코드를 모른다는 이유로 망설이는 비개발자

• 디자이너와 협업할 때 프로토타입 퀄리티 때문에 답답한 프론트 개발자

😫 문제 상황 (Before)

프로덕트 디자이너로 일하면서 Figma는 거의 모든 작업의 중심이었다.

화면을 그리고, 컴포넌트를 만들고, 프로토타입을 연결하고, 개발자에게 전달하는 흐름. 이 안에서 디자이너가 할 수 있는 건 어디까지나 "Figma 파일"이었다. 실제로 동작하는 웹 버전을 보여주려면 개발자가 붙어야 했고, 언어 전환이나 다크모드 같은 걸 직접 테스트하려면 개발 완료를 기다려야 했다.

Figma 의존도를 낮추고 싶었다. 더 정확히는, 내가 상상한 것을 실제로 작동하는 형태로 빠르게 만들어서 팀에게 보여주고 싶었다. 정적인 화면이 아니라, 클릭하고 언어도 바꿔보고 다크모드도 켜볼 수 있는 것으로.

그때 Claude Code가 나왔다는 얘기를 들었다.

🛠️ 사용한 도구

• Claude Code (Anthropic) — 기획, 구조 설계, 전체 구현

• Codex CLI (OpenAI) — 코드 검토, 버그 수정

• Figma MCP — 코드 → Figma 화면 전송

• Vercel — 배포 (팀 공유용 URL)

🔧 작업 과정

설치부터 막혔다

시작부터 순탄하지 않았다. Windows용 설치 명령어를 Mac 터미널에 그대로 붙여넣었다가 실패. Claude한테 보여줬더니 "이건 Windows 전용 명령어예요"라고 바로 짚어줬다.

이거 왜 안되는거야?

이렇게 물어봤고, 에러 내용을 그대로 붙여넣었더니 Mac용 설치 방법을 안내해줬다. 첫 경험에서 배운 것: 에러 메시지를 그대로 보여주면 된다. 원인을 스스로 분석하려고 하면 더 느리다.

"이걸 누구나 볼 수 있게 올리려면?"

설치가 됐으면 배포를 먼저 생각했다. 혼자 보는 게 아니라 팀에게 공유해야 하니까.

이거를 누구나 볼 수 있게 올리려면 어떻게 해야해?

Netlify, Vercel 두 가지를 비교해줬는데, "시크릿하게 하고 싶다"고 했더니 Vercel + Password Protection 조합을 추천해줬다. 30분도 안 걸려서 https://socrachat.vercel.app이 생겼다.

하루 만에 7개 화면이 나왔다

디자인 파일을 건네주면서 구현을 요청했다.

Fetch this design file, read its readme, and implement the relevant aspects of the design.
Implement: the designs in this project

Landing, Home, Analyzing, Comparison, Source, Follow-up, Deep Chat — 7개 화면이 실제로 작동하는 HTML로 나왔다. 여기까지는 솔직히 Figma로도 하루면 만들 수 있는 수준이다.

진짜 차이는 그 다음이었다.

이게 Figma 프로토타입과 다른 점

화면이 생기고 나서 추가로 요청한 것들이 있었다.

지금 이 디자인에서 쓴 디자인 요소들을 하나의 디자인 시스템 스토리북으로 만들고싶은데
웹으로 볼 수 있고 마우스나 손가락 액션 state도 볼수있게끔

스토리북이 생겼다. 컴포넌트마다 Default · Hover · Pressed · Disabled 상태가 나란히 보이는 웹 페이지. 클릭하면 실제로 눌리는 느낌도 된다.

언어 전환, 다크모드 토글, 데스크탑/모바일 뷰 전환도 붙였다. Figma 프로토타입에선 상상으로만 봐야 했던 것들이 버튼 하나로 전환됐다.

모든 페이지의 셋팅 영역은 다 똑같아야해. 지금 flow와 그 외 html 파일끼리 모양과 기능이 달라.
플로팅 형태를 내가 마우스로 잡고 이동할수도있으면 좋겠어.

드래그 가능한 플로팅 툴바가 생겼다. 위치를 마음대로 옮길 수 있고, 다음에 열어도 위치가 유지된다.

이게 핵심이었다. 정적인 화면 7개가 아니라, 실제 서비스처럼 작동하는 웹 버전. 팀원에게 URL 하나만 보내면 언어도 바꿔보고 다크모드도 켜보고 모바일 뷰로도 볼 수 있다.

Claude Code와 Codex CLI를 함께 쓰다

작업 중간에 Codex CLI도 써봤다.

코드에 문제없는지 검토해줘

Claude Code는 큰 구조를 잡는 데 강했고, Codex CLI는 "이 부분이 왜 안 되지?"를 파고드는 데 더 집중적이었다. 두 도구를 같은 프로젝트에서 번갈아 써도 서로의 작업이 유지됐다.

역할 분리가 자연스럽게 됐다: Claude Code는 기획과 구현, Codex CLI는 검토와 수정.

Figma 연동을 해봤더니

Figma에 화면을 보내는 것도 해봤다.

근데 내가 궁금한건, 지금 여기 있는 코드기반의 화면들을 피그마 화면으로 보내고싶어

MCP로 Figma에 자동으로 화면을 전송했다. 7개 화면이 Figma 파일에 생겼다. 신기했다. 그런데 한계도 명확했다.

flow.html처럼 JavaScript로 화면을 전환하는 구조는 첫 화면만 캡처됐다. Figma에 들어간 건 각 화면의 스크린샷 수준이지, 컴포넌트가 연결된 디자인 파일이 아니었다. Figma를 디자인 도구로 쓰는 게 아니라 문서 도구로 쓰는 것에 가까웠다. 양방향 연동에 대한 기대는 좀 내려놓게 됐다.

😤 현실적인 불편함 (솔직하게)

AI는 디자인 규칙을 자꾸 어긴다

가장 예상 못했던 부분이다. 색상, 간격, 폰트 크기 같은 디자인 규칙을 정해놔도 AI가 작업하다 보면 하드코딩된 값이 슬그머니 들어온다. 토큰으로 정의된 색상이 있는데 임의로 hex 코드를 직접 쓰는 식이다.

일관성 검토는 내가 해야 했다. 결국 "전부 다 하드코딩 없애줘"라고 명시적으로 지시해야 정리가 됐다.

자리를 못 뜬다

생각보다 많이 붙어있어야 했다. AI가 작업 중간중간에 동의를 구하러 온다. 문제는 그 타이밍을 예측할 수 없다는 것. 3분 만에 물어볼 수도 있고 20분 후에 물어볼 수도 있다. 다른 일을 하다가 자리를 비울 수가 없다.

AI가 코드를 짜주는 동안 다른 일을 할 수 있을 거라는 기대는 접었다. 지금은 AI와 같이 일하는 시간으로 생각하는 게 맞다.

✅ 결과 (After)

Before vs After

결과물

• 라이브 URL (회사업무라 노출이 어려워요ㅠ)

• 7개 앱 화면 (한국어/일본어/영어 · 라이트/다크 · 데스크탑/모바일)

• 디자인 시스템 스토리북

• Figma 컴포넌트 라이브러리 (Button 12 variants, AI Avatar 18 variants 등)

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 에러 메시지를 그대로 붙여넣기 — "왜 안 되지?"보다 증상을 그대로 보여주면 훨씬 빠르다

2. "나한테 허락받지 말고 진행" — 반복적인 작업은 승인 과정 없이 진행하게 하면 속도가 확실히 빨라진다

3. 두 도구를 역할 분리해서 쓰기 — Claude Code는 큰 그림, Codex CLI는 집중 검토. 같은 프로젝트에서 번갈아 써도 된다

4. 체크리스트를 명령어로 만들어두기 — 반복 작업(/ship)을 등록해두면 새 세션에서도 자동으로 기억한다

이렇게 하면 안 돼요

1. 디자인 규칙을 한 번 말하고 끝냈다고 생각하기 — AI는 자꾸 어긴다. 작업 후에 반드시 검토해야 한다

2. AI 작업 중에 다른 일 하려고 계획 세우기 — 동의를 구하는 타이밍이 랜덤이라 자리를 비우기 어렵다

3. Figma 양방향 자동 연동을 기대하기 — 색상/토큰은 가능하지만 레이아웃까지는 현실적으로 한계가 있다

🌍 다른 업무에 적용한다면?

• PM/기획자: 기획서를 그대로 건네주고 실제 작동하는 프로토타입 URL을 받아볼 수 있다. 스테이크홀더에게 "이런 느낌입니다"를 설명하는 게 훨씬 쉬워진다

• 프론트 개발자: 디자이너가 만든 라이브 프로토타입이 있으면 구현 스펙 논의의 출발점이 달라진다. 픽셀 단위 Figma 파일이 아니라 동작하는 레퍼런스가 생긴다

• 소규모 팀: 개발자가 없어도 팀 내부 리뷰용 라이브 버전을 빠르게 만들 수 있다

🚀 앞으로의 계획

솔직히 아직 고민 중인 게 많다.

모바일에서 확인할 수 있는 시스템 구축 — 지금은 AI가 작업하는 동안 화면 앞에 계속 있어야 한다. 핸드폰으로 진행 상황을 확인하고 동의 요청에 응답할 수 있다면, 수업 중이나 이동 중에도 AI를 돌릴 수 있을 것 같다.

디자인 레퍼런스를 어떻게 학습시킬지 — Figma 연동 방식은 한계가 보인다. 무드보드나 레퍼런스 이미지를 AI가 제대로 반영하게 하는 방법을 더 찾아봐야 한다.

PM 기획서를 AI 워크플로우에 어떻게 연결할지 — 상위 기획 문서가 들어왔을 때 AI에게 바로 던질지, 내가 먼저 해석할지, 아니면 둘이 같이 볼지. 아직 정답을 모르겠다. 아마 이것도 써보면서 답이 나올 것 같다.

📋 재사용 가능한 프롬프트

프롬프트 1: 디자인 파일 기반 초기 구현

[디자인 파일 또는 스크린샷 첨부] 이 디자인을 기반으로 실제 작동하는 웹 화면으로 만들어줘. 언어 전환(KO/EN), 다크모드 토글, 데스크탑/모바일 뷰 전환 기능도 포함해줘. [사용할 언어나 원하는 기능]은 본인 상황에 맞게 변경하세요

프롬프트 2: 팀 공유용 즉시 배포

지금 만든 결과물을 팀원이 바로 볼 수 있는 URL로 올려줘. 비밀번호 보호가 가능한 방식이면 더 좋아.

프롬프트 3: 디자인 규칙 일괄 정리

지금 코드 전체에서 디자인 토큰(CSS 변수)이 아닌 직접 입력된 색상, 크기, 간격 값을 모두 찾아서 토큰으로 바꿔줘. 나한테 확인 없이 전부 진행해줘.