[기획자의 도구들 2편] 클로드 코드로 디자인과 개발까지!

클로드 코드란?

클로드 코드(Claude Code)는 Anthropic에서 만든 터미널 기반 AI 코딩 도우미다. 최근 Cursor, Windsurf와 함께 AI 에디터 '3대장'으로 불리고 있다. 주간 다운로드 수만 300만 건을 넘길 정도로 급부상 중이다.

기존 AI 코딩 도구들이 IDE에 통합되는 방식이라면, 클로드 코드는 터미널에서 실행된다. 덕분에 VS Code, Cursor, 등 어떤 에디터와도 함께 사용할 수 있다. 에디터를 대체하는 게 아니라 보조자처럼 옆에서 함께 작업하는 도구다.

기획자가 왜 클로드 코드를?

나는 UI/UX 기획자다. 코드를 모른다. 그런데 클로드 코드를 쓰면 자연어 명령만으로 실제 동작하는 프로토타입을 만들 수 있다. "로그인 화면 만들어줘", "여기에 버튼 추가해줘"라고 말하면 된다.

1편에서 피그마로 기획 문서를 만든다고 했다. 클로드 코드는 거기서 한 발 더 나아간다. 피그마로 그린 화면을 실제로 구현할 수 있다. 디자인에서 개발까지, 기획자 혼자서도 가능해진다.

물론 전문 개발자 수준의 결과물을 기대하긴 어렵다. 하지만 아이디어를 빠르게 검증하거나, 간단한 어드민 페이지를 만들거나, MVP를 테스트하기엔 충분하다.

그래서 뭐가 좋은데?

1. 자연어로 코딩한다. 코드 문법을 몰라도 된다. "이 버튼 클릭하면 다음 페이지로 이동하게 해줘"라고 말하면 알아서 구현한다.

1. 전체 코드베이스를 이해한다. 단순히 코드 조각을 생성하는 게 아니다. 프로젝트 구조 전체를 파악하고, 맥락에 맞게 수정한다. 관련 파일을 찾아서 설명해주기도 한다.

1. Git 작업을 자동화한다. 커밋 생성, PR 작성, 머지 충돌 해결까지 알아서 처리한다. 개발 워크플로우의 번거로운 부분을 덜어준다.

1. 테스트와 디버깅도 한다. 테스트를 실행하고, 실패하면 원인을 분석해서 자동으로 수정한다. 버그 잡는 시간이 확 줄어든다.

1. 로컬에서 안전하게 동작한다. 코드가 외부 서버로 전송되지 않는다. 보안이 중요한 프로젝트에서도 안심하고 쓸 수 있다.

비용은?

얼마 전까지만 해도 별도의 API 키를 생성하고 사용량만큼 과금되는 방식이었다. 그런데 최근에 Claude Pro 플랜($20/월)에 포함되었다. 웹에서 Claude를 쓰면서 클로드 코드까지 함께 사용할 수 있다.

더 많이 쓰고 싶다면 Max 플랜($100/월 또는 $200/월)을 선택하면 된다. Pro 대비 5배에서 20배까지 사용량이 늘어난다.

클로드 코드 시작하기

Node.js가 설치되어 있다면 터미널에서 바로 설치할 수 있다.

npm install -g @anthropic-ai/claude-code

설치 후 프로젝트 폴더에서 claude 명령어를 실행하면 된다. 처음엔 Claude 계정 인증이 필요하다.

작업 중 원하지 않는 방향으로 흘러가면 ESC 키로 언제든 중단할 수 있다. 프로젝트 루트에 CLAUDE.md 파일을 만들어서 프로젝트 설명, 코드 스타일, 중요한 디렉토리 등을 적어두면 더 정확한 결과를 얻을 수 있다.

기획자의 새로운 무기

피그마가 기획자에게 디자인의 문턱을 낮춰줬다면, 클로드 코드는 개발의 문턱을 낮춰준다. 아이디어가 있으면 직접 만들어볼 수 있다. 개발자에게 설명하고 기다리는 시간이 줄어든다.

물론 한계는 있다. 복잡한 로직이나 대규모 시스템은 여전히 전문 개발자의 영역이다. 하지만 "일단 만들어보고 검증한다"는 린(Lean) 방식에는 최적의 도구다.

기획자라면 한번 써보길 권한다. 생각보다 쉽고, 생각보다 강력하다.