비개발자라면 이렇게 해보세요: 클로드 코드와 친해지기

지난 1편 ‘비개발자라면 이렇게 해보세요: 바이브 코딩 실전 가이드’에서는 나만의 첫 번째 프로덕트를 만드는 과정에 대해 소개해 드렸습니다. 그와 관련된 4가지 팁을 전달드렸고요. 이번 글에서는 한 걸음 더 나아가, 외부 서비스(Supabase, GitHub 등)와의 CLI 연동으로 작업을 자동화하고, 이해하기 어려운 개발 용어는 쉽게 풀거나, HTML·PNG 파일로 추출해 확인하는 노하우를 소개하려고 합니다.
 

제가 바이브 코딩을 처음 시작할 때부터 지금까지의 경험을 담았습니다. ‘기획자 입장에서 바이브 코딩을 시작하는 방법’과 프로덕트를 개발해 나감에 있어 ‘몸으로 때우며 알게된 팁’에 관한 이야기입니다. 물론 디자이너나 마케터 등 비개발자 직군에게도 도움이 될 것이라 생각합니다. 추상적인 개념보다는 실제로 사용한 ‘방법’에 집중하고자 노력했고, 이 방법이 꼭 ‘정답’은 아니라는 점을 미리 말씀드립니다.

‘딸깍’만으로는 잘 되지 않습니다

나는 잘 모르겠고, 직접 해줘

개발하고자 하는 프로덕트의 특성에 따라 상이하겠지만, 거의 대부분의 프로덕트는 외부 서비스와의 연동이 필수적입니다. 대표적으로 github가 있고, F/E 또는 B/E, DB 등의 외부 서비스가 그런 것들입니다. 저의 경우와 같이 카카오톡 로그인이 필요하므로, 카카오톡까지 포함되었고, 다른 로그인 방식(e.g. 구글 또는 애플 ID) 필요 시, 구글 및 애플과의 연동도 필요합니다.

참고로 저의 경우, 앞서 설명 드린 ‘일정 공유 캘린더’ 서비스에 아래와 같은 외부 서비스가 연동되어 있습니다

• 로그인: 카카오톡 로그인
• 호스팅: Render
• DB: Supabase
• 저장소: github

간단한 예시를 들어보겠습니다.

지난 글에서 설명드린 Plan Mode를 통해 어느 정도 계획 수립이 완료되면, 본격적으로 개발이 진행되는데요. 이때 주요 작업 중 하나가 DB 설계 및 테이블 생성입니다. 로그인이 필요한 서비스라면 기본적으로 사용자 테이블이 필요할 것이고, 인증 테이블도 필요합니다. 그리고 컨텐츠가 등록될 때 이에 대한 테이블도 필요합니다. 이런 작업을 개발자도 아닌 일반 사용자가 직접 수행한다고 생각해보면 정말 끔찍합니다. 아마 DB 설계 및 테이블 생성에만 몇 주는 필요할 것입니다.

이런 것들을 직접 하나하나 만들 필요 없이 ‘클로드 코드 ↔ Supabase’ 간 연동만 해 놓으면 바이브 코딩을 통해 자동으로 생성 및 관리할 수 있습니다. 이런 방식을 보통 CLI라고 부릅니다. (스킬이나 에이전트와 마찬가지로) CLI에 대해 자세한 정의를 알 필요는 역시 없습니다. 중요한 것은 사용자가 직접 처리하지 않고 클로드 코드를 통해 각 서비스 간의 연동 및 작업 진행을 수행하도록 한다는 것만 기억하시면 됩니다. 사용자는 발생한 이슈 및 작업 사항에 대해 ‘직접 진행해줘’라고 명령만 하면 됩니다.

만약 직접 진행을 요청했는데 클로드 코드가 수행할 없는 경우일 때는, 클로드 코드가 직접 수행을 위해 필요한 정보를 알려줍니다. 해당 서비스의 인증 키(Secret Key)를 요청하는 경우가 대표적입니다. 이 경우, 해당 서비스에 직접 로그인 한 후, 클로드 코드의 가이드에 따라 메뉴 진입 및 인증 키를 알려주면 그 이후부터는 따로 관리할 필요 없이 작업 수행을 클로드 코드에게 위임할 수 있습니다.

▣ 팁 5. 실제 작업 수행은 클로드 코드에게

아래와 같은 순서로 클로드 코드의 CLI를 구성하여 편하게 바이브 코딩으로 작업을 수행할 수 있습니다.

• 계획 수립을 통해 내가 개발하고자 하는 프로덕트에 적합한 외부 서비스를 확인
• 각 외부 서비스의 가입 및 로그인
• 클로드 코드와 함께 CLI 구성
• - 로그인 후 인증 키를 클로드 코드에게 전달
• 클로드 코드에게 ‘직접 실행해줘.’라고 당당하게 요청하기

이해가 안되면, 다시 요청하자

바이브 코딩으로 개발을 진행하다 보면, 클로드 코드와의 질의응답 과정을 제법 많이 거칩니다. 사용자의 요청 사항을 파악하고 의도에 대한 확인을 하는 경우도 있고, 작업 수행 방식에 대한 여러가지 선택지를 제공하고 사용자에게 의사결정을 요청하는 경우가 그 예입니다. 이 때마다 어려움을 느끼는게, ‘클로드 코드는 비 개발자인 나의 고려는 전혀 없이 어려운 개발 용어로 나에게 선택을 요구한다는 점’입니다. 개발자라면 전혀 어려움이 없을 테지만 저를 포함한 비 개발자에게는 이런 과정들이 제법 바이브 코딩의 난이도를 높이는 요소 중 하나로 작용합니다.

이 때마다 제가 했던 것은 ‘비 개발자도 이해할 수 있도록 쉽게 설명해줘.’라고 요청하는 것이었습니다. 그러면 해당 이슈에 대해 클로드 코드가 개발 용어를 최대한 제거하고 이해 가능한 수준으로 다시 설명을 합니다. 그러면 우리는 이 설명을 보고 판단 & 선택을 하면 되는 것입니다.

더 나아가서, 조금 더 복잡하고 큰 이슈에 대해 설명이 필요할 경우에는 HTML로 정리 문서를 생성하여 내용을 확인할 수도 있습니다. 아무래도 IDE의 터미널 상에서 설명해주는 것은 한계가 있고 가독성도 떨어지므로, 저의 경우 간단한 이슈는 터미널에서 확인하고 이슈 내용이 많을 경우 HTML로 추출하여 상세히 검토하는 편입니다.

▣ 팁 6. 파일로 추출하여 쉽게 확인하자

HTML과 PNG 등, 파일 형태로 추출하여 확인하면 훨씬 수월합니다.

클로드 코드에게 ‘비개발자도 이해할 수 있도록 쉽게 설명해서 HTML로 만들어줘.’라고 요청하거나 ‘이 화면 설계를 PNG로 만들어줘.’라고 요청하면 됩니다.

개발 지식이 아예 없는 일반 사용자라면 CLAUDE.md 파일에 아예 정의를 해 놓는 것도 하나의 방법입니다. 예를 들어 ‘내가 ‘쉽게 설명해줘.’라고 요청하면, 이슈 사항에 대해 비 개발자가 이해할 수 있도록 쉽게 설명하여 HTML 파일로 만들어서 제공할 것’이라고 정의해 놓으면, 매번 요청할 필요 없이 이해가 되지 않는 시점에 ‘쉽게 설명해줘’라고만 요청하면 됩니다.

파일을 활용하자

바이브 코딩이라는 것은 결국 클로드 코드와의 대화가 중심이 되는 행위입니다. 그러다보니 가능한 정확한 요청을 하는 것이 제일 중요합니다. 전통적인 개발 방식 기준으로 본다면, 기획안 및 정책서, 화면설계서 등이 개발을 진행함에 있어 뼈대가 되는 문서입니다. 특히, 화면설계서의 경우 원하는 UI에 대한 정의를 포함하므로 화면 개발 및 UX 개발에 있어 기준이 되는 문서라고 볼 수 있습니다.

문제는 바이브 코딩을 할 때 이 부분이 쉽게 생략된다는 점입니다. 열 줄의 텍스트 요청사항보다 한 장의 이미지로 원하는 바를 표현하는 것이 더 나을 때가 있는데, 바이브 코딩을 함에 있어서도 이 부분은 유효합니다.

저의 경우는 프로젝트 폴더 내, 임의의 폴더를 생성하여 클로드 코드와 소통하는데 사용하는 방식을 채택했습니다. 특정 폴더에 원하는 문서나 이미지를 넣은 후, 클로드 코드에게 이 파일을 탐색하여 개발을 진행하도록 지시하는 형태입니다. 오류가 발생했을 때도 오류 발생 상태를 캡쳐 후 클로드 코드에게 탐색 및 수정 진행을 하도록 지시하여 보다 명확하게 수정을 지시할 수 있습니다.

▣ 팁 7. 파일로 대화하기

막히는 부분이 있다면 아래와 같은 예시를 따라서 진행해 보시길 바랍니다.

• 프로젝트 폴더 내 임의의 폴더 생성
• - 생성 시, 폴더명 제일 앞에 콤마를 붙일 것 (이렇게 하면 git hub에 푸시되지 않음)
• - 예시 : .file
• 클로드 코드가 확인해야 하는 파일 삽입
• - 만약 오류가 발생한 화면이 있다면 해당 화면 캡쳐본을 해당 폴더에 삽입
• 클로드 코드에게 이 파일 확인 후 수정 요청
• - 예시 : “.file 폴더에 있는 error.jpg 확인 후, 오류 사항 확인하여 수정해줘.”

몇 가지 명령어와 단축키는 알아두면 좋아요

클로드 코드에서는 수많은 명령어를 제공하고, 실제로 명령어에 따른 효과들이 제법 좋다고 알려져 있습니다. 어차피 모든 명령어를 다 쓸 수도 없고, 사실 모두 알 필요도 없기에 제가 바이브 코딩을 진행하면서 주로 썼던 몇 가지만 알려드리고자 합니다.

가장 일반적으로 사용하는 명령어는 ‘/compact’와 ‘/clear’입니다. 이 2가지 명령어는 수시로 사용하는 편이라 제일 먼저 언급하게 되네요. 바이브 코딩을 하시는 분들께는 습관적으로 사용하기를 권장합니다.

‘/compact’는 현재 세션에서 진행한 작업 내역을 압축하는 명령어입니다. 클로드 코드 특성 상 세션 내 맥락이 길어질수록 정확도 측면에서 성능이 저하되는 현상이 있습니다. 때문에 작업 내역이 길어져서(즉, 대화의 스크롤이 엄청나게 길어진다면) 연속된 다음 단계 작업을 진행하기에 부담스러울 정도가 된다면 이 명령어를 통해 앞서 처리한 작업의 핵심 내용들만 기억하도록 하는 것이 좋습니다. 작업의 핵심은 기억하고 맥락은 줄여서 작업의 연속성을 지킬 수 있도록 하는 명령어입니다.

‘/clear’는 현재까지 대화한 모든 내역을 지우는 명령어입니다. 말 그대로 모든 내역을 초기화하는 것입니다. 저의 경우는 하고자 했던 작업이 완료되면 이 명령어를 통해 초기화를 진행한 후, 다음 작업을 시작합니다. 만약 후속 작업이 이전 작업과 연관이 있다면 ‘/compact’를 사용하고, 이전 작업과 무관하다면 ‘/clear’를 사용하시면 됩니다.

그 외에 몇가지 소소한 명령어는 다음과 같습니다.

- /model : 현재 사용 중인 클로드 코드의 모델 정보 확인하고 변경할 수 있습니다. 모델과 해당 모델의 강도를 조절할 수 있고, 저의 경우는 opus로 세팅하고 efforts는 max로 설정합니다. 모델과 강도가 강할수록 강력한 추론이 적용되어 정확도가 올라가지만 그만큼 추론 연산에 시간이 소요되므로 적절한 세팅으로 하시면 됩니다. 모델의 변경은 상하 방향키로(↑↓), efforts는 좌우 방향키(←→)로 설정합니다.

- /usage : 클로드 코드 사용량을 확인할 수 있습니다. 아시다시피 유료 모델을 구독하더라도 토큰 사용량의 한계가 있습니다. 이 명령은 현재까지의 토큰 사용량을 확인할 수 있고, 주간 한도가 얼마나 남았는지 볼 수 있습니다. 최근에는 Fable이 추가됨에 따라 Fable 사용량도 함께 볼 수 있습니다. (Fable은 사용량을 따로 집계합니다.)

단축키 중에서는 단연 ‘컨트롤 & C’가 압도적입니다. 이 단축키는 클로드 코드에게 지시한 명령의 수행 중단을 의미합니다. 만약 잘못된 명령이 전달되었거나 내용 추가가 필요할 경우 이 단축키로 작업을 중단할 수 있습니다. 윈도우의 복사 단축키와 동일하다보니 가끔 복사를 하기 위해 눌렀다가 작업이 중단되는 경우가 종종 있으니 이 점만 주의해 주시면 됩니다.

그 다음으로 단축키는 아니지만, 클로드 코드와의 대화에서 유용한 방법으로, 방향키 조작이 있습니다. 바이브 코딩을 진행하다보면 클로드 코드가 추천하는 답안을 프롬프트 입력란에 Place holder 형태로 표시합니다. 이 때 이 추천 답안을 그대로 적용하고자 할때 우측 방향키(→)를 입력하면 추천 답안이 그대로 입력됩니다. 경험 상 많은 경우에서 클로드 코드의 추천 답안이 옳은 경우가 많아서, 이 방식 역시 자주 사용했습니다.

마지막으로 클로드 코드를 실행할 때 제가 사용하는 명령어입니다.

처음 바이브 코딩을 진행하면, 클로드 코드가 사소한 것 하나까지 확인 요청을 하는 것을 경험하게 될 것입니다. git hub 푸시나, DB 마이그레이션처럼 중요한 작업의 경우는 사용자에게 한번 더 확인 요청하는 것이 어느 정도 납득이 갑니다만, 중요도가 낮은 일반 작업에서도 매번 확인 요청을 하므로 업무 효율성이 많이 떨어지게 됩니다. (이른바, 엔터 지옥…)

때문에 저의 경우는 아래와 같은 형태로 클로드 코드를 실행합니다.

이 명령어는 제가 설명하기 보다는 아래와 같이 클로드 코드의 답변으로 자세한 설명을 대신하는 게 좋겠습니다.

▣ 팁 8 : 다양한 명령어와 단축키

클로드 코드의 시작과 끝 사이에는 유용한 명령어가 많습니다. 제가 알려드린 것 외에도 도움이 되는 많은 명령어가 있으니 나에게 맞는 것이 있다면 사용해 보시길 권장합니다.

• 1. /clear와 /compact는 습관처럼 이용하길 권장합니다.
• - 세션 관리가 습관화되어야 클로드 코드가 길을 헤매는 확률을 줄일 수 있습니다.
• 작업 중단이 필요하면 ‘컨트롤 & C’키를 눌러서 중단할 수 있습니다.
• - 일단 중단시킨 후, 프롬프트를 수정하여 작업을 수정하거나 추가하여 진행합니다.
• 클로드 코드 시작 전, 앞서 알려드린 형태로 옵션을 적용해서 실행하면 작업 효율성에 도움이 됩니다.
• - 자주 쓰는 모델을 디폴트로 설정되도록 할 수 있고, 잦은 확인 요청에서 해방될 수 있습니다.

마치며

2회에 걸쳐 제가 처음으로 바이브 코딩을 시작하면서 느꼈던 부분과 나름의 팁이라고 생각되는 부분에 대해 크게 8가지로 정리해보았습니다. 이전 글에서도 말씀드렸지만 저보다 클로드 코드 또는 다른 서비스를 통해 바이브 코딩을 하시는 분들이 너무나도 많습니다.

다만 저와 같은 비 개발자 입장에서 바이브 코딩을 시작하기 위한 심리적 허들을 조금 해소하고 싶었고, 바이브 코딩을 반복 수행함에 있어 접하게 되는 낯선 부분들에 대해서 조금이나마 도움이 되고자 했습니다. (잘 전달 되었을지 모르겠습니다.)

바이브 코딩에 대해 관심이 있지만 선뜻 시작하지 못하고 계시다면, 부디 이 글이 바이브 코딩의 시발점이 되면 좋겠습니다.

▣ 직접 경험한 바이브 코딩 팁 8가지

• 바이브 코딩으로 개발할 첫 프로덕트는 가급적 가볍고 볼륨이 적은 것으로 선정
• 바이브 코딩을 하기 위한 환경 설정은 클로드 코드와 질의응답 형태로 진행
• 스킬과 에이전트를 적극 활용
• 프로덕트 개발 계획을 먼저 수립하여 검토 후 개발 진행
• 실제 작업 수행은 클로드 코드의 CLI를 활용하여 직접 수행하도록 요청
• 이해되지 않는 내용은 쉽게 풀어서 설명 요청하고, 복잡한 내용은 HTML 등의 파일로 추출 요청
• 이슈가 있거나 막히는 부분은 파일로 정리하여 클로드 코드에게 확인 요청 후 진행
• 바이브 코딩에 도움이 되는 명령어 및 단축키 사용

현재 FDE로 일하시거나, 최근 1년 내 일하셨던 분들은

“국내 FDE 현황 조사 2026” 참여하고, 리포트 & 네이버페이 포인트 받아가세요!

ⓒ요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.