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

- 작성자: [궁금한 정원사](https://community.clauders.ai/member/imported-member-6Cn6LtJqGg)
- 공간: [노트 / 글쓰기](https://community.clauders.ai/writing)
- 게시: 2026-05-22
- 연재: [지식 볼트와 자동화 인터페이스](https://community.clauders.ai/series/personal-knowledge-interface) 1/3편
- 태그: #인터페이스개발
- 주소: https://community.clauders.ai/writing/post/claude-code-ai%EA%B0%80-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%A7%9C%EC%A3%BC%EB%8A%94-%EA%B2%8C-%EC%95%84%EB%8B%88%EB%8B%A4-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EA%B0%80-%EC%A7%81%EC%A0%91-%EC%8D%A8%EB%B3%B8-claude-code-%ED%98%84%EC%8B%A4-%ED%9B%84%EA%B8%B0-4b366a7f-869f-83e8-900e-cc07838a9a60

---

### **설치부터 막혔다**

시작부터 순탄하지 않았다. 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와 같이 일하는 시간**으로 생각하는 게 맞다.

### **Before vs After**

항목

Before (Figma만)

After (Claude Code)

화면 수

7개 (하루 가능)

7개 (하루 가능)

언어 전환

불가 (별도 개발 필요)

KO/JA/EN 실시간 전환 ✅

다크모드

별도 아트보드 필요

버튼 하나로 전환 ✅

디자인 테마

별도 파일 필요

SC/AP 테마 즉시 전환 ✅

스토리북

없음

컴포넌트 상태별 웹 전시 ✅

팀 공유

Figma 링크

실제 작동하는 URL ✅

개발자 없이

불가

혼자 가능 ✅

### **결과물**

- 라이브 URL (회사업무라 노출이 어려워요ㅠ)
- 7개 앱 화면 (한국어/일본어/영어 · 라이트/다크 · 데스크탑/모바일)
- 디자인 시스템 스토리북
- Figma 컴포넌트 라이브러리 (Button 12 variants, AI Avatar 18 variants 등)

### **효과적이었던 것**

1. **에러 메시지를 그대로 붙여넣기** — "왜 안 되지?"보다 증상을 그대로 보여주면 훨씬 빠르다
2. **"나한테 허락받지 말고 진행"** — 반복적인 작업은 승인 과정 없이 진행하게 하면 속도가 확실히 빨라진다
3. **두 도구를 역할 분리해서 쓰기** — Claude Code는 큰 그림, Codex CLI는 집중 검토. 같은 프로젝트에서 번갈아 써도 된다
4. **체크리스트를 명령어로 만들어두기** — 반복 작업(`/ship`)을 등록해두면 새 세션에서도 자동으로 기억한다

### **이렇게 하면 안 돼요**

1. **디자인 규칙을 한 번 말하고 끝냈다고 생각하기** — AI는 자꾸 어긴다. 작업 후에 반드시 검토해야 한다
2. **AI 작업 중에 다른 일 하려고 계획 세우기** — 동의를 구하는 타이밍이 랜덤이라 자리를 비우기 어렵다
3. **Figma 양방향 자동 연동을 기대하기** — 색상/토큰은 가능하지만 레이아웃까지는 현실적으로 한계가 있다

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

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

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

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

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

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