[경제지표 대시보드 개발기 #3] 클로드 코드와 첫 성공
채팅 앱의 한계를 넘어 CLI 에이전트를 만나고, 드디어 진짜 바이브 코딩을 시작했다.
채팅 앱의 한계
클로드 채팅 데스크톱 앱에서는 프로젝트를 만들고 프로젝트별로 컨텍스트와 지침을 추가할 수 있었습니다. 그 당시 ChatGPT는 이런 부분이 약했던 것으로 기억합니다.
다만 1개의 채팅 컨텍스트에 제한이 있으니까 자주 “새 채팅에서 진행해달라”는 메시지를 받았습니다.
그래서 한 채팅에서 작성하기보다는:
- 문서 종류별로 새 채팅에서 작성
- 컨텍스트를 자료로 첨부할 수 있는 기능 활용
- 필요한 부분만 참조시켜서 문서 구체화
제한된 환경에서 일관성 있는 문서를 작성하기 위해 이리저리 하다보니 문서작성을 위한 프롬프트 작성을 요청하게 되었습니다. 지나고 보니까 메타 프롬프트라고 하는 프롬프트 엔지니어링 기법 중 하나였습니다.
문서 중심 개발의 시작
이렇게 프롬프트 작성에 익숙해지면서 실제 개발을 위한 프롬프트도 작성했습니다.
약 2주간 경제지표 대시보드 개발에 대한 문서를 작성하고 드디어 개발을 시작했습니다. 처음에는 프로젝트 셋팅부터 시작했습니다.
1단계 프롬프트를 생성해서 나온 가이드에 따라 실제로 프로젝트 셋팅을 진행했습니다. 문제가 생기면 동일한 프롬프트를 다시 실행했더니 프로젝트 셋팅을 자동화해주는 쉘 스크립트를 생성하기도 했습니다.
하지만 실제 2단계, 3단계 프롬프트를 실행하고 받은 결과물은 다소 실망스러웠습니다:
- 이전 작성한 변수명과 일치하지 않음
- 사소하게 경로가 다름
- 컨텍스트 제한으로 이전 개발 내용 인지 불가
완전히 자동화하는 건 어렵다고 생각했습니다. 이때는 1년간 20달러씩 쓰느니 단기간에 몰아서 AI 자원을 활용하는 게 더 효율적이라고 생각해서 MAX 플랜으로 업그레이드한 뒤였습니다.
CLI 에이전트의 발견
맥스로 업그레이드하면서부터 이제 “CLI 에이전트 클로드 코드를 쓸 수 있다”는 광고문구가 눈에 들어오기 시작했습니다.
뭔가 처음 생각대로 잘 되고 있는 건지 모르겠던 상태였고, 한번 써보자는 마음으로 클로드 코드를 실행했습니다.
차이는 확연했습니다:
- 어느 경로에 있는 문서를 참조해서 개발 시작하는 것을 쉽게 지시
- 자동으로 컨텍스트 압축
- 용량 제한 걱정 없이 전체 프로젝트 구조 파악
이전에 채팅 앱에서는 수동으로 컨텍스트 문서를 골라서 용량제한을 생각하면서 참조시켜야 했던 것과는 비교도 안 될 만큼 사용자 경험이 달랐습니다.
진짜 바이브 코딩의 시작
그제서야 정말 바이브 코딩을 할 수 있게 되었다고 느꼈습니다.
클로드 코드와 함께:
- 문서를 기반으로 체계적인 개발
- 전체 프로젝트 구조를 이해하는 AI
- 빠른 반복과 수정
그렇게 4개월에 걸쳐서 바이브 코딩을 진행했습니다.
처음엔 순조로웠습니다. 문서와 코드가 1:1로 매칭되고, AI가 정확히 의도를 파악해서 구현했습니다.
실제로 첫 달만에 상당한 성과가 나왔습니다:
- React Grid Layout의 Tailwind CSS 대안인 tailwind-grid-layout 오픈소스 라이브러리를 3주 만에 완성 (데모)
- 68개의 UI 컴포넌트를 담은 디자인 시스템 페이지 구현
디자인 시스템의 색상 시스템
디자인 시스템의 컴포넌트 예시
하지만…
다음 편에서는 4개월간의 바이브 코딩이 어떻게 복잡도의 늪에 빠지게 되었는지 이야기합니다.