AI 로 코드쓰기? 지폐로 똥 닦기!

AI를 타자기로 쓰지 마세요

Claude Code Max 플랜, 딸각 몇번 만에 한도 초과.

이런 상황, 익숙하시죠?
버그인지, 정책인지, 캐시 문제인지 — 원인이 뭔지는 모르겠지만 중요한 건 하나예요.

토큰 하나하나가 귀해진 세상이 왔다는 겁니다.

그런데 말이죠. 이 상황에서 대부분의 바이브코딩 가이드가 뭘 알려주는지 아세요?
"CLAUDE.md 잘 쓰세요." "세션을 짧게 나누세요." "오프피크 시간에 작업하세요."
틀린 말은 아닙니다.

근데 그건 수도꼭지에서 물이 새는데 양동이를 더 가져오라는 얘기예요.
수도꼭지를 고쳐야죠.

수도꼭지가 어디서 새는지 봅시다

한번 생각해 볼게요. 구독이든 API든, 결국 여러분의 한도를 갉아먹는 건 토큰입니다.
Claude API의 토큰 가격 구조를 보면 구조가 선명해져요.

모델	인풋 ($/MTok)	아웃풋 ($/MTok)	배율
Opus 4.6	$5	$25	5배
Sonnet 4.6	$3	$15	5배
Haiku 4.5	$1	$5	5배

모든 모델에서 아웃풋은 인풋의 5배!

여러분의 "이 컴포넌트 만들어줘"라는 명령에, 코드 수십 줄에서 수백 줄이 생성되며
이건 전부 아웃풋 토큰입니다. 가장 비싼 토큰이요.

그런데 그 코드 수정 안할거에요?

"아 이거 아닌데, 이렇게 바꿔줘."

라고 하는 순간 앞에서 생성한 코드가 인풋으로 다시 들어가고,
수정된 코드는 아웃풋으로 또 나옵니다.

아웃풋 토큰을 태워서 코드를 만들고, 그 코드를 인풋으로 다시 넣고, 또 아웃풋으로 받고.
이걸 서너 번 반복하면 세션 하나에 토큰이 녹는 겁니다.

문제의 본질은 명확합니다.
AI한테 코드 작성을 위임하고 있으니까요.
AI를 타자기로 쓰고 있는 거예요.

React 쓰면서 DOM 직접 조작하는 사람 없잖아요

잠깐 프론트엔드 얘기를 해볼게요.

2013년 이전, 우리는 DOM을 직접 조작했습니다.
document.getElementById로 요소 잡고, innerHTML로 갈아끼우고,
이벤트 리스너 달고 떼고. 되긴 됐습니다. 근데 비쌌어요.

DOM 조작은 브라우저에서 가장 비싼 연산이거든요. 그렇기에 React는
Virtual DOM이라는 가벼운 추상층을 하나 끼워 넣었습니다.

개발자는 vDOM에다 "화면이 이렇게 되어야 해"만 선언하고,
실제 DOM 조작은 reconciler가 최소한으로만 처리하는 구조로요.

핵심이 뭐냐면, 비싼 연산을 직접 하지 않는 겁니다.
싼 추상층에서 "뭘 바꿀지"만 결정하고, 실제 실행은 최적화된 엔진에 맡기는 거예요.

	DOM의 세계	토큰의 세계
비싼 연산	DOM 조작	아웃풋 토큰
싼 추상층	Virtual DOM	스펙/설정 객체
최적화 엔진	Reconciler	코드 생성 하네스
개발자의 역할	선언적 UI 작성	요구사항 → 스펙 작성

React가 DOM 직접 조작을 죽였듯, 우리도 AI한테 코드 작성 위임을 그만둬야 합니다.

AI한테는 결정을 시키세요.
"이 요구사항이면 어떤 컴포넌트를 어떻게 조합할지" — 이건 AI가 잘하는 영역입니다.

실제 코드를 찍어내는 건? 그건 미리 만들어둔 생성기가 하면 됩니다. 토큰 0으로.

그래서 어떻게 쓰라는 건가요

한번 생각해 볼게요.
여러분이 AI한테 "버튼 컴포넌트 만들어줘"라고 하면
코드 수십 줄이 돌아옵니다. 아웃풋 토큰 수백 개를 태워서요.
근데 그 버튼, 여러분 프로젝트에서 열 번째 만드는 버튼 아닌가요?

방법은 단순합니다. 컴포넌트마다 세 쌍을 준비해두세요.

첫 번째, 컴포넌트. 실제 돌아가는 코드입니다.

// Button.tsx
export function Button({ label, variant, size = 'md', onClick }: ButtonProps) {
  return (
    <button className={`btn-${variant} btn-${size}`} onClick={onClick}>
      {label}
    </button>
  );
}

두 번째, 생성기. 스펙 넣으면 코드가 나옵니다.

// button-generator.ts
function generateButton(spec: ButtonSpec): string {
  return `<Button label="${spec.label}" variant="${spec.variant}" size="${spec.size ?? "md"}" onClick={${spec.action}} />`;
}

세 번째, 사용법. AI가 읽는 문서입니다. "이럴 때 이 컴포넌트를 이렇게 써라"만 적어둡니다.

## Button
- 저장/등록 → variant: "primary"
- 삭제/초기화 → variant: "danger"
- 취소/닫기 → variant: "ghost"

이 세 쌍이 있으면 AI한테 시키는 방식이 완전히 달라집니다.

Before

"저장 버튼이랑 삭제 버튼 만들어줘, 저장은 파란색 크게, 삭제는 빨간색 작게"
→ AI가 코드 전체를 생성합니다. 아웃풋 토큰 ~300개를 태워서.

After

"이 페이지에 필요한 버튼 스펙을 ButtonSpec으로 출력해"
→ AI 아웃풋:

[
  {
    "label": "저장",
    "variant": "primary",
    "size": "lg",
    "action": "handleSave"
  },
  {
    "label": "삭제",
    "variant": "danger",
    "size": "sm",
    "action": "handleDelete"
  }
]

→ 생성기가 코드를 만듭니다. 아웃풋 토큰 ~50개. 6분의 1도 안 쓴 겁니다.

컴포넌트마다 이 세 쌍을 만들어두면, AI는 코드를 짜는 게 아니라
어떤 컴포넌트를 어떻게 조합할지 결정만 하는 존재가 됩니다.
vDOM이 "화면이 이래야 해"만 선언하듯이요.

비싼 건 하네스가 합니다.
한 번 만들어두면 토큰 0으로 무한히 재사용할 수 있는 하네스가.
(같은 패턴을 5번 이상 생성하는 컴포넌트라면, 하네스 만드는 시간은 충분히 본전입니다.)

AI는 AI일 때 아름답습니다

우리 솔직해집시다.
AI한테 코드작성을 시키는 건, AI를 가장 비효율적으로 쓰는 방법이에요.

AI가 진짜 잘하는 게 뭔가요?
맥락을 이해하고, 패턴을 파악하고, 요구사항을 분석해서 결정을 내리는 거잖아요.

"이 화면은 그리드 + 필터 + 버튼 3개 조합이고, 필터는 날짜 2개에 드롭다운 1개"
— 이런 판단은 AI가 사람보다 빠르고 정확하게 해냅니다. 토큰도 적게 씁니다.

근데 우리가 시키는 건요?
"그 판단을 바탕으로 JSX 150줄 짜줘."
가장 비싼 아웃풋 토큰으로, AI가 굳이 안 해도 되는 일을 시키고 있었던 겁니다.

React가 우리한테 가르쳐준 게 있죠.
관심사를 분리하라. 선언적으로 "무엇"만 표현하고, "어떻게"는 엔진에 맡겨라.

AI도 마찬가지입니다.
AI한테는 "무엇을"만 물어보세요.
"어떻게"는 여러분이 한 번만 짜둔 하네스가 처리할 겁니다.

토큰이 불타는 시대, 수도꼭지를 고치는 건 양동이를 더 가져오는 게 아니라,
AI를 AI답게 쓰는 것입니다.

지폐로 똥 닦지 마세요.

AI를 타자기로 쓰지 마세요

Claude Code Max 플랜, 딸각 몇번 만에 한도 초과.

이런 상황, 익숙하시죠?
버그인지, 정책인지, 캐시 문제인지 — 원인이 뭔지는 모르겠지만 중요한 건 하나예요.

토큰 하나하나가 귀해진 세상이 왔다는 겁니다.

근데 그건 수도꼭지에서 물이 새는데 양동이를 더 가져오라는 얘기예요.
수도꼭지를 고쳐야죠.

수도꼭지가 어디서 새는지 봅시다

한번 생각해 볼게요. 구독이든 API든, 결국 여러분의 한도를 갉아먹는 건 토큰입니다.
Claude API의 토큰 가격 구조를 보면 구조가 선명해져요.

모델	인풋 ($/MTok)	아웃풋 ($/MTok)	배율
Opus 4.6	$5	$25	5배
Sonnet 4.6	$3	$15	5배
Haiku 4.5	$1	$5	5배

모든 모델에서 아웃풋은 인풋의 5배!

여러분의 "이 컴포넌트 만들어줘"라는 명령에, 코드 수십 줄에서 수백 줄이 생성되며
이건 전부 아웃풋 토큰입니다. 가장 비싼 토큰이요.

그런데 그 코드 수정 안할거에요?

"아 이거 아닌데, 이렇게 바꿔줘."

라고 하는 순간 앞에서 생성한 코드가 인풋으로 다시 들어가고,
수정된 코드는 아웃풋으로 또 나옵니다.

아웃풋 토큰을 태워서 코드를 만들고, 그 코드를 인풋으로 다시 넣고, 또 아웃풋으로 받고.
이걸 서너 번 반복하면 세션 하나에 토큰이 녹는 겁니다.

문제의 본질은 명확합니다.
AI한테 코드 작성을 위임하고 있으니까요.
AI를 타자기로 쓰고 있는 거예요.

React 쓰면서 DOM 직접 조작하는 사람 없잖아요

잠깐 프론트엔드 얘기를 해볼게요.

DOM 조작은 브라우저에서 가장 비싼 연산이거든요. 그렇기에 React는
Virtual DOM이라는 가벼운 추상층을 하나 끼워 넣었습니다.

개발자는 vDOM에다 "화면이 이렇게 되어야 해"만 선언하고,
실제 DOM 조작은 reconciler가 최소한으로만 처리하는 구조로요.

핵심이 뭐냐면, 비싼 연산을 직접 하지 않는 겁니다.
싼 추상층에서 "뭘 바꿀지"만 결정하고, 실제 실행은 최적화된 엔진에 맡기는 거예요.

	DOM의 세계	토큰의 세계
비싼 연산	DOM 조작	아웃풋 토큰
싼 추상층	Virtual DOM	스펙/설정 객체
최적화 엔진	Reconciler	코드 생성 하네스
개발자의 역할	선언적 UI 작성	요구사항 → 스펙 작성

React가 DOM 직접 조작을 죽였듯, 우리도 AI한테 코드 작성 위임을 그만둬야 합니다.

AI한테는 결정을 시키세요.
"이 요구사항이면 어떤 컴포넌트를 어떻게 조합할지" — 이건 AI가 잘하는 영역입니다.

실제 코드를 찍어내는 건? 그건 미리 만들어둔 생성기가 하면 됩니다. 토큰 0으로.

그래서 어떻게 쓰라는 건가요

방법은 단순합니다. 컴포넌트마다 세 쌍을 준비해두세요.

첫 번째, 컴포넌트. 실제 돌아가는 코드입니다.

// Button.tsx
export function Button({ label, variant, size = 'md', onClick }: ButtonProps) {
  return (
    <button className={`btn-${variant} btn-${size}`} onClick={onClick}>
      {label}
    </button>
  );
}

두 번째, 생성기. 스펙 넣으면 코드가 나옵니다.

// button-generator.ts
function generateButton(spec: ButtonSpec): string {
  return `<Button label="${spec.label}" variant="${spec.variant}" size="${spec.size ?? "md"}" onClick={${spec.action}} />`;
}

세 번째, 사용법. AI가 읽는 문서입니다. "이럴 때 이 컴포넌트를 이렇게 써라"만 적어둡니다.

## Button
- 저장/등록 → variant: "primary"
- 삭제/초기화 → variant: "danger"
- 취소/닫기 → variant: "ghost"

이 세 쌍이 있으면 AI한테 시키는 방식이 완전히 달라집니다.

Before

"저장 버튼이랑 삭제 버튼 만들어줘, 저장은 파란색 크게, 삭제는 빨간색 작게"
→ AI가 코드 전체를 생성합니다. 아웃풋 토큰 ~300개를 태워서.

After

"이 페이지에 필요한 버튼 스펙을 ButtonSpec으로 출력해"
→ AI 아웃풋:

[
  {
    "label": "저장",
    "variant": "primary",
    "size": "lg",
    "action": "handleSave"
  },
  {
    "label": "삭제",
    "variant": "danger",
    "size": "sm",
    "action": "handleDelete"
  }
]

→ 생성기가 코드를 만듭니다. 아웃풋 토큰 ~50개. 6분의 1도 안 쓴 겁니다.

AI는 AI일 때 아름답습니다

우리 솔직해집시다.
AI한테 코드작성을 시키는 건, AI를 가장 비효율적으로 쓰는 방법이에요.

AI가 진짜 잘하는 게 뭔가요?
맥락을 이해하고, 패턴을 파악하고, 요구사항을 분석해서 결정을 내리는 거잖아요.

근데 우리가 시키는 건요?
"그 판단을 바탕으로 JSX 150줄 짜줘."
가장 비싼 아웃풋 토큰으로, AI가 굳이 안 해도 되는 일을 시키고 있었던 겁니다.

React가 우리한테 가르쳐준 게 있죠.
관심사를 분리하라. 선언적으로 "무엇"만 표현하고, "어떻게"는 엔진에 맡겨라.

AI도 마찬가지입니다.
AI한테는 "무엇을"만 물어보세요.
"어떻게"는 여러분이 한 번만 짜둔 하네스가 처리할 겁니다.

토큰이 불타는 시대, 수도꼭지를 고치는 건 양동이를 더 가져오는 게 아니라,
AI를 AI답게 쓰는 것입니다.

지폐로 똥 닦지 마세요.

AI 로 코드쓰기? 지폐로 똥 닦기!

AI를 타자기로 쓰지 마세요

수도꼭지가 어디서 새는지 봅시다

React 쓰면서 DOM 직접 조작하는 사람 없잖아요

그래서 어떻게 쓰라는 건가요

Before

After

AI는 AI일 때 아름답습니다

댓글 0

AI 로 코드쓰기? 지폐로 똥 닦기!

AI를 타자기로 쓰지 마세요

수도꼭지가 어디서 새는지 봅시다

React 쓰면서 DOM 직접 조작하는 사람 없잖아요

그래서 어떻게 쓰라는 건가요

Before

After

AI는 AI일 때 아름답습니다

댓글 0