비개발자를 위한 Claude Code 바이브 코딩 워크숍 — 설치부터 앱 배포까지

TL;DR

비개발자를 대상으로 Claude Code 바이브 코딩 워크숍을 열었어요. 각자 노트북에 개발 환경을 설치하고, 말로 앱을 수정한 뒤 Vercel 배포와 Supabase 연결까지 시도했어요. 회사가 제공한 Max 플랜과 개발팀의 현장 지원이 있었고, 결과물은 당일 밤부터 다음 날까지 공유됐어요. 그 뒤로 집이나 업무에서 앱을 더 만들어 본 참가자들의 이야기도 함께 정리했어요.

온보딩 세션에서 나온 질문 하나

8월에 사업팀을 대상으로 AI 온보딩 세션을 했어요. AI가 클라우드와 로컬에서 어떻게 일하는지, 에이전트가 도구와 스킬을 어떻게 쓰는지, Claude Code가 무엇인지 같은 기본 개념을 다뤘어요. 끝날 때 "다음은 직접 만들어 보는 편"이라고 예고해 뒀는데, 그 뒤로 "바이브 코딩을 해보고 싶다"는 문의가 왔어요.

다들 AI는 이미 업무에 쓰고 있었어요. 견적서와 제안서를 만들고 데이터를 정리하는 일도 맡겼고요. 다만 직접 애플리케이션을 만들어 본 경험은 서로 달랐어요. 이번에는 필요한 기능을 자연어로 설명하고, AI가 만든 코드를 실행해 보면서 자기 앱을 만드는 경험을 해보기로 했어요.

노트북 밖에도 준비가 필요했다

워크숍은 퇴근 후 두 시간 일정으로 잡았어요. 저녁을 함께 먹고 각자 노트북에서 Claude Code를 켜는 방식이었어요. 다음 주에 혼자 다시 열어볼 때도 그날 쓴 환경이 남아 있으면 좋겠다고 생각했어요.

Claude는 회사가 제공한 Max 플랜으로 썼어요. 노트북 외에도 유료 이용 환경과 외부 서비스 계정, 설치를 도와줄 개발팀의 지원을 준비한 셈이에요. 이 조건을 빼고 누구나 노트북만 가져오면 같은 시간 안에 배포할 수 있다고 말하기는 어려워요.

GitHub, Vercel, Supabase 계정은 미리 만들어 달라고 채널에 안내했어요. GitHub는 코드를 보관하고, Vercel은 앱을 인터넷에 배포하고, Supabase는 데이터를 저장하는 데 쓰기로 했어요.

제일 오래 걸린 건 설치였다

시간이 많이 든 건 노트북의 개발 환경을 맞추는 일이었어요. 이번 실습에서는 Claude Code와 함께 git, bash, uv 같은 도구도 준비했어요. 이 목록은 워크숍에서 선택한 작업 환경에 필요한 것이었고, 모두가 모든 환경에서 Claude Code를 쓰기 위한 공통 필수 조건은 아니에요.

특히 Windows에서 경로 문제로 명령을 찾지 못하는 경우가 있었어요. 개발팀에서 도우러 온 조교들이 해당 노트북의 설정을 함께 확인하며 넘어갔어요.

끝나고 받은 후기에서도 이 구간 이야기가 가장 많았어요. 터미널을 처음 연 분들에게는 어디를 눌러야 다음으로 가는지부터 잘 보이지 않았고, 명령을 넣을 때마다 올라오는 붉은 글씨가 부담이었다고 해요. 한 참가자는 "견습 마법사라 빨간 글자가 많이 떴다"고 적었고, 옆자리 동료가 차근차근 알려준 덕분에 세팅을 마쳤다는 이야기도 있었어요. 그 구간을 넘긴 뒤에는 크게 막히는 부분이 없었다는 반응이 여럿이었고요. 다음 회차에는 설치를 사전 세팅 스크립트로 옮기고, 진행 화면을 미리 공유받아 당일 전에 확인해 보려고 해요.

폴더 하나에서 시작하기

첫 실습은 빈 폴더를 만들고 터미널에서 그 폴더를 열어 Claude Code를 실행하는 일이었어요. 앱을 구성하는 파일을 그 안에 모으고, 수정한 결과를 실행해 보는 방식으로 설명했어요. "내 앱이 어디에 있는 거예요?"라는 질문에 폴더를 가리키며 답할 수 있었어요.

처음부터 각자 다른 앱을 만들게 하지는 않았어요. 할 일을 적고 완료를 체크하는 보드를 공통 과제로 잡았어요. 같은 기능을 만들고 있어야 옆 사람 화면과 비교하기 쉽고, 막힌 부분도 함께 설명할 수 있으니까요.

스킬을 넣으면 무엇이 달라질까?

스킬은 에이전트에게 주는 작업 설명서예요. 리액트 화면을 짤 때 참고할 방식이나 버튼과 여백을 다루는 규칙을 파일로 담아둘 수 있어요. 온보딩 때는 개념만 설명했지만 이번에는 화면을 만드는 과정에 넣어봤어요.

시연에서는 같은 요청을 스킬을 넣기 전과 후에 다시 해봤어요. 공개된 디자인 스킬 모음인 recent.design/skills에서 리액트와 디자인 스킬을 골라 사용했어요. 여백과 글꼴, 색을 어떻게 다루는지 함께 봤어요. 특정 스킬을 넣으면 늘 같은 품질이 나온다는 뜻은 아니에요. 참가자가 직접 코드를 짜지 않아도 작업 지침을 바꿔 결과를 조정해 볼 수 있다는 점을 보여주려 했어요.

화면, 서버, 데이터베이스

앱의 구성은 사람이 보는 화면, 요청을 처리하는 서버, 데이터를 담는 데이터베이스로 나눠 설명했어요. 개발자가 프론트엔드·백엔드·DB라고 부르는 역할이에요. 실제 앱에서는 역할이 겹치거나 일부가 필요 없기도 하지만, 처음 구조를 이해하기에는 이 구분이 편했어요.

할 일 보드라면 목록을 보여주는 부분이 화면이에요. 저장 요청을 처리하는 부분과 내용을 보관하는 곳이 연결돼야 다음에 열었을 때도 이전 할 일이 남아요. 가족이 함께 쓰는 캘린더라면 다른 사람의 기기에서도 같은 내용을 볼 수 있도록 저장과 공유를 생각해야 하고요.

어떤 기능이 필요한지 알면 다음 요청을 구체적으로 말할 수 있어요. 저장이 유지되게 해달라고 요청하고 Supabase 연결을 진행하거나, 다른 사람도 주소로 접속하게 해달라고 요청하며 Vercel에 배포하는 식이에요. 서비스 계정에 로그인하고 필요한 설정을 확인하는 과정도 함께 진행했어요.

만들기 전에 무엇을 정해두면 좋을까

후기에서 같은 질문이 여러 번 나왔어요. 한 참가자는 "주문을 외워서 원하는 것을 만들어내는 마법사 같은데, 주문을 잘 외워야 결과가 좋아지는 것도 비슷하다"고 적으면서, 앱을 만들기 전 기초 단계에서 무엇을 구상해 두면 좋은지 물었어요.

그날 관찰한 범위에서 정리해 보면, 화면이 머릿속에 한 장 그려져 있던 분들이 요청을 이어가기 수월해 보였어요. 첫 화면을 열었을 때 무엇이 보이는지 말로 묘사해 보는 것, 그 앱을 나 혼자 쓰는지 다른 사람도 쓰는지 정해두는 것, 닫았다 다시 열었을 때 남아 있어야 하는 내용을 한 줄로 적어두는 것, 예시로 쓸 가짜 데이터를 몇 개 함께 주는 것 정도예요. 이렇게 시작하면 되묻는 과정이 줄어드는 편이었지만, 모든 경우에 같은 결과를 보장하는 절차는 아니에요.

만들고 나서 고쳐가는 과정도 비슷한 비중이었어요. 옷 추천 앱을 만든 참가자는 첫 화면에서 상·하의와 함께 속옷까지 추천되자 그 부분만 빼달라고 요청해 정리했다고 해요. 처음부터 완성된 요청을 준비하기보다, 나온 화면을 보고 한 번에 한 가지씩 고쳐 나가는 방식으로 진행한 분들이 많았어요.

에러와 권한은 어떻게 설명했나

모르는 것이 생기면 Claude에게 먼저 질문해 보라고 안내했어요. 에러 메시지도 그대로 전달하고 원인과 다음 조치를 설명해 달라고 요청하게 했어요. 처음 보는 용어를 혼자 해석하려고 멈춰 있기보다, 설명을 받아보고 해결되지 않으면 조교와 함께 확인하는 연습이었어요. 스크린샷을 공유할 때는 계정 정보나 비밀값이 보이지 않는지도 살펴야 해요. 후기에서도 중간에 작은 오류가 떴을 때 "이거 해결해줘"라고 요청하니 이어서 진행할 수 있었다는 이야기가 여러 번 나왔어요.

권한 안내는 돌아볼 부분이 있어요. 당시에는 개인 프로젝트 실습이라는 전제에서 승인 질문을 줄이도록 권한을 넓혀 쓰라고 안내했어요. 다만 개인 프로젝트여도 같은 노트북에 다른 파일이나 로그인 정보가 있을 수 있어요. 그날의 안내를 일반적인 사용 권장으로 옮기면 안 되겠다고 봤어요.

앞으로의 실습에서는 작업 폴더와 사용할 계정의 범위를 먼저 정하고, 파일 삭제나 외부 전송, 배포처럼 영향이 큰 동작은 내용을 확인한 뒤 승인하는 방향이 적절해요. 이는 다음 실습을 위한 보완 방향이고, 당시 이미 이런 통제를 모두 적용했다는 뜻은 아니에요.

채널에 올라온 앱들

실습 후반부터 채널에 앱 주소가 올라오기 시작했어요. 당일 밤에 공유된 결과물도 있고, 다음 날 이어서 올라온 앱도 있었어요. 조교로 참여한 개발자가 만든 결과물도 포함돼요. 이들을 모두 참가자가 세션 안에 완성한 앱으로 묶지는 않았어요.

옷 추천 앱은 지역의 날씨와 사용자가 고른 성별·연령대·스타일을 바탕으로 상품 조합과 가격을 보여줬어요. 외부 날씨 정보와 상품 데이터를 연결한 사례였어요. 만든 참가자는 현재 상황이 얼마나 세밀하게 반영되는지 궁금해 지역별 날씨를 넣어봤고, 상품 수가 많은 자료에서 조건에 맞는 항목을 얼마나 잘 골라 오는지도 함께 확인해 보려 했다고 해요.

PDF 편집기도 나왔어요. PDF 합치기와 페이지 삭제·추출, 이미지 변환 기능을 화면에 담았어요. 브라우저 안에서 파일을 처리하는 방식으로 만든 앱이라, 앞서 설명한 앱 구성 요소가 모두 필요한 것은 아니라는 예로 이야기했어요.

초보 디자이너의 성장 일기를 담은 페이지도 공유됐어요. 아래는 그 결과물 화면이에요. 앞서 진행한 디자인 스킬 시연의 전후 비교 화면은 아니에요. 만든 참가자는 원래 이 연재를 노션으로 쓰고 외부 도구로 발행해 왔는데, 다음 회차로 이동하는 버튼이나 공유 버튼을 붙이기 어렵고 방문 지표를 확인하는 데도 제약이 있었다고 해요. 직접 웹으로 만들어 배포해 보는 일을 미뤄 두었다가 이번 실습에서 시도했고, 다음 단계로 화면을 더 다듬고 도메인을 사서 정식으로 여는 것을 생각하고 있어요.

그 밖에 가족 캘린더, 팩트챗 문의 메일 처리판, 아이 성장 앨범, 떡볶이집 안내 페이지, 휴대폰에 설치해 쓰는 할 일 앱도 나왔어요. 공통 과제였던 보드에서 출발해 각자 평소 아쉬웠던 기능으로 옮겨간 점이 기억에 남아요.

워크숍 다음 주에 이어진 것들

며칠 뒤에 받은 이야기들이 이번 회차에서 가장 남는 부분이었어요.

옷 추천 앱을 만든 참가자는 노트북을 집에 가져가 계속 만들어 봤다고 해요. 쓰던 유료 서비스와 비슷한 정리 앱을 자기에게 필요한 기능만 남겨 다시 만들었고, 업무 중에 레퍼런스 영상이나 이미지를 받아야 할 때 쓰려고 다운로더도 만들어 쓰고 있어요. 필요한 것을 직접 만들어 쓰게 되면서 생활이 편해진 느낌이라고 적었어요.

사업팀의 한 참가자는 고객사에 보내는 문서를 만들어 주는 발급기를 만들었어요. 결과가 마음에 들어 팀 동료들과 함께 써볼 계획이라고 해요. 될까 싶었던 것까지 만들어지는 점이 신기했고, 품질을 더 끌어올릴 요령이 있으면 좋겠다는 이야기도 함께 전해 주셨어요. 개인 실습만 다룬 회차였는데 업무용 도구가 먼저 나온 셈이라, 사내 데이터와 공유 범위를 어떻게 다룰지는 다음 회차에서 같이 정리하려고 해요.

PDF 편집기를 만든 참가자는 간단한 조작으로 즐기는 퍼즐 게임을 만들어 보려고 AI와 상의하는 중이에요. 배경지식이 없어도 원하는 도구가 만들어지는 과정이 재미있었다고 해요.

다음은 업무로 이어가기

이번에는 앱을 처음 만드는 사람도 설치와 수정, 배포를 직접 경험해 보는 데 초점을 맞췄어요. 진행 속도는 달랐지만, 공유된 앱에서 자기 필요를 기능으로 바꿔본 흔적을 볼 수 있었어요. 만든 앱을 계속 고쳐보고 막힌 지점을 다음 회차에 가져오라는 숙제도 냈어요.

다음 회차에는 업무 대시보드와 제안서 초안, 교육 교안, 외부 공고 알림처럼 신청서에 나온 업무 과제를 다룰 생각이에요. 회사 데이터를 어디까지 읽게 할지, 결과물을 누구에게 공유할지부터 정해야 해요. 개인 실습과 업무 환경의 차이는 사내 AI 에이전트 권한 설계와도 이어져요. 다음 워크숍에서는 앱을 만드는 과정에 이 판단을 함께 넣으려고 해요.