전업 아빠, AI를 만나다: 비개발자의 Claude Code 가이드 제작기

우연한 시작

지난 5월 중순 나는 공개적으로 새로운 연결을 찾는다는 글을 공개했다. 2020년 팬데믹 이후 지금까지 육아를 해왔고, 올해 아이가 초등학교에 입학했다. 지금이 비즈니스 현장으로 복귀할 좋은 시점이라고 판단하여 소셜미디어에 글을 공유했다.

전 세계를 연결하여 Forbes에 선정된 창업자, 새로운 연결을 찾습니다. 커피챗 어떠신가요?

저에게 연결의 힘을 빌려주세요. 창업자에서 전업 아빠로, 그리고 다시 새로운 시작을 준비하는 과정에서 만나는 의미 있는 연결과 기회를 찾고 있습니다.

Jongjin ChoiJin

운 좋게도 커피챗을 진행하였다. 모 스타트업의 사무실을 방문하기도 했고, 우주인 이소연님과의 커피챗을 포함하여 다양한 커피챗을 진행했다. 언제나 새로운 인연을 알게 되는 일은 즐겁다. 한편 커피챗을 진행할수록 나 스스로 살짝 아쉬움이 들었다. 눈에 보이는 무언가로 이야기를 나눌 수 있다면 더 적극적인 대화가 이뤄지지 않았을까?하는 아쉬움이 있었다.

해당 글에 담겨있는 짧은 프로젝트 형태로 일한 회사들의 나에 대한 평가, 주변 지인들의 평가가 담겨있지만, 확실히 보고 이야기할 무언가? 아마도 포트폴리오가 아닐까 싶다. 팬데믹 이후의 시간(분명 나는 쉬지 않았다. 그 누구보다도 힘든 팬데믹 시기의 육아에 전념했다. 말이 통하지 않는 아기와 2년 넘게 24시간을 함께 보내는 것은 쉬운 일이 아니다.)을 설명하기에는 뭔가 아쉬움이 있다는, 설명하기 어려운 묘한 느낌이 있었다.

포트폴리오의 필요성을 느꼈지만 어떻게 만들어야할지 막막했다. 그러던 찰나에 배우자로부터 '바이브 코딩(Vibe Coding)' 개념을 전해들었다. 솔직히 해당 단어를 처음 접했을 때 AI가 얼마나 잘하겠냐는 생각이 있었다. 그 수준을 높게 평가하지 않았다.

바이브 코딩의 시작

우연한 기회에, 배우자의 지인이 진행하는 바이브 코딩 모임에 참여했다. 소규모 형태였고, 맥주를 마시면서 들을 수 있었다. 해당 강연에 관심을 가진 이유는 당시 클로드Claude를 쓰고 있었기 때문이다. ChatGPT는 그냥 나랑 맞지 않는다고 여겼고, 나는 유일하게 Claude를 유료로 쓰고 있었다. Anthropic 사에서 마침 클로드 코드(Claude Code)를 출시한 상황이었다.

모임 주최자는 모임에서 Claude Code를 통해 간단한 랜딩 페이지를 만드는 모습을 보여줬다. 실제 동작하는 모습을 보고 바로 든 생각은

자연어(일상 대화)로 저렇게 간단한 사이트를 만들 수 있다고? 정말?

물론 Lovable, Replit이라는 또 다른 서비스들이 있다고 듣기는 했지만, 그저 내 취향이 아니다. 모임에서 클로드 코드가 작동하는 것을 보면서, 한편으로는 이런 생각이 들었다.

터미널에 설치를 해야하는데, 초보자들이 쓰기에는 힘들겠다. 개발자들 혹은 테크 산업 종사자들이라면 쓰겠지만, 아무것도 모르는 초보자들이 쓰기에는 진입장벽이 꽤 높겠는데.

다음 날, 클로드 코드(Claude Code)를 설치했다. 공식 문서를 살펴보고 설치하거나, 그 외 검색을 통해 방법을 찾아서 설치하면 된다. 나는 조금 다르게 접근했다.

터미널에 대해 아무것도 모르는 사람의 입장이 되어, 설치과정에서 막히는 부분이 발생할때마다 Claude에게 스크린샷을 공유했다. 그리고 클로드가 입력하라는 명령어를 그대로 입력하고, 결과를 다시 공유하는 형태로 설치를 완료했다.

의외로 그 과정이 내 예상보다 쉬웠다. 잘 설명해주기도 했고, 이 정도라면 터미널을 모르는 사람들도 쉽게 설치할 수 있겠다고 느꼈다. 도와주는 AI가 없다면, 초보자들은 설치를 위해서 관련 지식이 있는 지인들에게 물어보거나, 검색에 많은 시간을 썼을 것이다.

그래서 나름대로의 가설을 만들었다.

1. 쉽고 간단한 설명과 함께, 복사/붙여넣기 방식으로 클로드 코드(Claude Code)를 설치할 수 있다면, 사람들의 접근이 쉬워지지 않을까?
2. 가이드가 따라하기 쉽다면 쉽게 설치하지 않을까? 중도 포기하지 않고 최소 50% 이상은 설치할 수 있지 않을까?

프로젝트의 시작

6월 26일, Claude Code Guide라는 폴더를 만들어, 내가 정리한 내용들을 바탕으로 첫 index.html 페이지를 만들었다. 바이브 코딩을 통해 처음 만든 index.html이다. 구체적인 계획은 없었고, 가설 검증을 해보기 위해 간단한 사이트를 만들자 정도였다. 그래서 한 페이지만 있으면 되겠다 싶었다. 아래 이미지는 당시 만들었던 모습으로 HTML, CSS, JavaScript로만 구성하였다. 그냥 기능을 더하기만 했을뿐 최적화를 시도하지 않았다. JavaScript 파일의 경우에는 3000줄 이상의 코드가 있었다.

가설을 세우기는 했으나, 구체적인 계획은 수립하지 않은 상황이었다. 우선 만드는 것에 집중했다. Claude Code에게 요구사항을 전달하니까 바로 만들어주는데 그 재미가 너무 쏠쏠했다. 5년만에 뭔가를 새롭게 만들었다. 얼마나 재미있는지 그 기분을 쉽게 알 수 없을거다.

만들다보니 좀 욕심이 났다. 이왕 만든 거 외부에 공개해볼까? 그저 혼자서 감상할때는 괜찮았는데, 공개하려니 생각이 바뀌었다. 우선 나는 개발자는 아니다. 다만, 워드프레스 같은 툴을 이용해 사이트를 구축해본 경험이 있었다.

계획을 변경하기 위해 Claude Code에게 개선 방안을 요구했다. 제시받은 개선책 중에서, Frontend에는 Vite를 도입했다. Index.html 하나의 문서에 기록되어 있는 코드의 분류와 최적화가 필요했다. 사이트의 속도가 빨라져야했으니까. 그래서 그에 맞는 방법으로 Vite를 선택했다.

그와 더불어 데이터를 측정, 저장하고 싶었다. 심각하게 생각했던 것은 아니다. 최대한 부담없이, 가볍게 가자는 마음이 있었다. 그래서 Backend로는 구글 시트를 생각했다. 구글 앱 스크립트를 이용하여 데이터를 구글 시트에 저장하는 방식이다.

• Frontend: HTML, CSS, Vanilla JavaScript, Vite
• Backend: Google Sheets + Google Apps Script API
• Hosting: Vercel

구조도 변경했다. Index, About, Guide, Faq 이렇게 4개의 페이지로 나눴다. 그렇게 나온 결과물은 아래 공유한 사이트이다.

7월 17일, 늦은 밤에 런칭했다. 그리고 지인과 대화를 나누던 중, 아예 커스텀 도메인을 붙이는 것이 좋지 않겠냐는 제안을 받아 고민 끝에 'getclaudecode.com'이라는 도메인을 구입했다.

7월 21일 커스텀 도메인을 연결하고 나니, CORS 문제를 인지했다. 내 글을 읽으시는 분들을 위해 쉽게 설명하자면, 브라우저의 보안 정책이다. Frontend와 Backend의 도메인 주소가 불일치하니 브라우저에서 차단하는 것이다. 처음부터 존재했지만, 당시 Claude Code가 우회하는 방법을 이미 런칭 당시에 구현했던 것이다. 그래서 인지하지 못했다. 관련 전공자가 아닌 나로서는 알 길이 없었다. 도메인을 연결한 후, 데이터를 체크해보다가 서버 응답이 없다는 것을 발견하면서 해당 문제를 인지했다.

다시 정리하면, 백엔드는 "데이터 잘 받았어, DB에 저장했어"라고 말했고, 전달하는 브라우저는 "도메인이 다르네. 도메인이 불일치하니 응답 못 보여줘", 그러니 프론트엔드는 "저장됐는지 안 됐는지 모르겠네..."인 상황이었던 것이다.

다행히 빨리 발견했고, 해당 문제를 해결할 수 있는 Supabase를 신속하게 도입했다. 다행히 런칭 초기 시점이라 데이터 양이 많지 않아 중복 데이터들을 비교적 손쉽게 제거할 수 있었다.

Nextjs의 도입

Nextjs를 도입하게 된 이유는 간단하다. 초창기 거대한 양의 Index.html를 vite를 도입하며 4개의 파일로 나누었지만, 각각의 파일이 독립된 구조이다보니 유지/보수 측면에서 관리가 어려웠다. 그리고 페이지 간의 이동이 부자연스러웠다. 깜빡임이 있고, 때로는 느리게 전환되었다.

홈페이지를 구성하는 여러 요소들을 컴포넌트로 만들어 레고 블럭처럼 필요한 부분에 재사용할 수 있다면 유지/보수가 쉬워진다. 그리고 페이지 간의 이동이 자연스럽고, 빠르게 전환된다면 좋다.

그렇기에 Nextjs로의 전환을 시도했다. 쉽게 성공한 것은 아니다. Claude Code와의 Vibe Coding을 통해 몇 번을 시도했지만 실패했다. 기억상으로는 4번 정도 실패했다. 약 일주일 간의 시간이 걸렸고 8월 1일 Nextjs 버전을 배포했다. Supabase 테이블의 불필요한 데이터는 정리했다.

그리고 404 페이지와 대시보드 페이지를 구성했다. 내가 데이터를 편하게 보기 위해서 만들었다. 대시보드 페이지의 경우에는 나만 로그인이 가능하지만, 이메일 인증을 통해 가능하도록 설계했다. 404 페이지는 터미널 느낌이 나도록 디자인했다.

소셜미디어에 공유시 쓰이는 썸네일 파일은 하나의 웹페이지로 구성했고, 그 페이지를 이미지로 만들었다.

다국어 사이트 도입

8월 5일 새벽, 다국어 시스템을 도입했다. 도입하게 된 배경에는 영어 사용자들을 어떻게 쓰는지 보고 싶어서이다. 영어 번역의 경우에는 Claude Code의 도움을 받았다. 테크 산업에서 일하는 비개발자들에게 맞추어 컨텐츠를 수정했다.

영어와 한국어, 2개의 언어를 페이지가 구성된다. 자동으로 Claude Code에게 맡겨보니 임의대로 컨텐츠를 생성 혹은 수정하는 오류가 계속 발생하여, 먼저 번역 파일을 만들었다. 그리고 해당 파일을 도입하는 형태로 작업을 진행했다.

참고로 Claude Code는 최신 버전인 Nextjs 15에 대해서는 잘 모른다. 그러니 공식 문서 확인을 꼭 요청해야한다. 라우팅 방식이 변했는데, Claude Code가 기존에 알고 있는 방식으로 진행하면서, 특히 언어별 구조를 만들 때 2~3시간을 반복작업에 허비한다. 같은 곳을 돌아가며 수차례 고치다가 Nextjs 15에서 바뀐 부분을 체크하고 나니 바로 고쳤다. 한 번 바보가 되기 시작하면 공식 문서 확인하자는 요청도 무시한다. 이 때 허탈함이란...

만드는 김에 외부에서 데이터를 쉽게 볼 수 있도록 Stats 페이지를 만들었다. 공개 데이터이다. 사이트의 총 방문자, 가이드 페이지를 방문한 사람, 가이드를 시작한 사람, 가이드를 완료한 사람들에 대한 데이터를 볼 수 있다. 프로젝트를 시작할 때에는 무료 사용자들도 테스트삼아 쓸 수 있었지만, 현재는 Claude Pro, 유료고객만이 쓸 수 있다. 유료 멤버십이 있어야만 쓸 수 있다는 부분이 일종의 허들로 작용한다.

• 한국어버전
• 영어버전

글을 맺으며..

Claude Code를 처음 써 보며 시행착오가 꽤 많았다. Claude Code Guide 사이트를 만들며 느낀 점을 적자면, 나의 경우에는 모든 과정을 Claude Code에서 시작했다. 오로지 자연어 대화를 통해서만 만들겠다는 생각으로 임했지만, 다소 답답한 부분이 많다. 내가 볼 때는 특정 부분만 바꾸면 될거 같은데, Claude Code는 그 부분을 제외한 다른 부분들을 계속 수정하거나 테스트를 반복한다.

한 에피소드를 적자면, Nextjs로 변경 이후 갑자기 가이드의 5단계에서 6단계로 넘어가는 비율이 현저하게 떨어지기 시작했다. 왜 떨어지는 거지? 혹시 데이터 분석에서 놓치는 부분이 있나?라는 생각에 점검했다. 원인을 찾아보니, Claude Code가 6단계 컨텐츠를 아예 바꿔버렸다. Claude Code를 설치하고 터미널에서 Claude를 입력하면 보안 관련 질문이 나오며 시작한다. 나는 이 부분을 사이트에 그대로 구현해 놓았었다. 그런데 Claude Code가 임의로 바꾼 부분에서는 그 과정이 생략되어 있었다.

즉, 사용자들이 터미널에서 실제 접한 화면과 사이트에서 보여주는 화면이 다르니, 전환율이 떨어진 것이다. Claude Code에게 물어보니 임의로 변경했다고 했는데, 그저 답답할 뿐이었다. 서둘러 원래의 컨텐츠로 바꾸고, 다시 배포하니 다음 날부터 전환율이 올라오기 시작했다.

진행과정에서 프로젝트에 맞는 하나의 룰을 만들어 사용하고 있지만, 다시 프로젝트를 시작한다면 Claude AI 혹은 ChatGPT등을 통해 만들고 싶는 제품의 요구사항, UI, 데이터 구조 등까지 구성하여 시작할 것이다. 지금은 여러 시행착오를 겪으며 얻은 경험이 있기 때문에, 비슷한 시행착오는 반복하지 않을 것 같다.

바이브 코딩을 시작해보려는 분에게 이야기를 전한다면, 작게라도 우선 시작해보기를 추천한다. 그리고 시행착오를 꼭 겪으셨으면 한다. 어차피 완벽하게는 만들 수 없고, 노력한다면 해당 상황에서 최선의 상황으로 개선은 가능하다. 다만, 관련 지식과 경험이 있다면 시행착오를 대폭 줄일 수 있는 것은 분명하다. 코드는 AI가 만든다고 하지만, 본인 스스로 해야하는 부분이 정말 많다. 왜 이렇게 만들었지? 의문을 가져야 하고 질문을 계속 해야한다. 그리고 질문을 하려면 관련 지식이 있어야 한다.(관련 지식도 시행착오 혹은 AI를 통한 학습으로 과거보다는 빠르게 얻을 수 있다.)

비개발자분들에게 작게라도 무언가를 시작해보기를 추천한다.