비개발자도 풀스택 웹서비스를 만들 수 있을까
저는 비개발자입니다. 코딩을 직업으로 해본 적이 없습니다. 그래서 바이브코딩이라는 단어를 처음 들었을 때 가장 궁금했던 건 한 가지였습니다. '코딩을 모르는 사람이 진짜로 풀스택 웹서비스를 처음부터 끝까지 혼자 만들 수 있을까.'
얼마 전 함께 shipped를 운영하는 시현 님이 유튜브에 올린 영상을 봤습니다. URL을 한 줄 입력하면 그 회사를 자동으로 분석해서 제안서를 만들어주는 웹서비스를, 처음부터 끝까지 만들어냅니다. 코딩 한 줄도 직접 타이핑하지 않습니다.
답은 예스였습니다. 비개발자도 만들 수 있습니다. 다만 흐름을 모르면 어디서부터 손대야 할지 막막합니다. 그래서 비개발자가 알아두면 좋을 다섯 단계로 정리해드리려 합니다.
비개발자가 알아둘 다섯 단계
전체 흐름을 굵게 묶으면 이렇습니다.
- 도구 고르고 깔기
- 만들 것을 정하기
- AI에게 설계도 그리게 하기
- AI 모델과 데이터베이스 연결하기
- 인터넷에 올리기
각 단계마다 비개발자가 챙겨야 할 디테일이 있습니다. 하나씩 풀어보겠습니다.
1단계 — 도구 고르고 깔기
가장 먼저 깔아야 하는 건 Claude Code입니다. 설치는 터미널이라는 검은 창에 명령어 한 줄을 붙여넣으면 끝납니다.
여기서 한 가지 짚고 넘어가야 할 게 있습니다. AI 코딩 도구는 한 개로 끝나지 않습니다. 메인은 Claude Code로 가되, 빠른 작업에는 Codex, UI 디자인에는 Gemini를 보조로 씁니다. 처음 시작하는 비개발자라면 Claude Code 하나에 익숙해지고, 필요할 때 하나씩 붙이면 됩니다.
2단계 — 만들 것을 정하기
이 단계에서 두 가지를 꼭 정해야 합니다.
첫째는 만들 페이지가 어떤 종류인지입니다. 포트폴리오나 회사 소개 같은 랜딩 페이지는 화면만 있으면 되지만, 회원가입이나 데이터 저장이 들어가는 서비스는 백엔드와 데이터베이스가 함께 따라옵니다.
둘째는 디자인 레퍼런스를 미리 준비해두는 것입니다. Dribbble, Awwwards, 21st.dev 같은 사이트에서 마음에 드는 디자인의 스크린샷을 찍거나 컴포넌트 코드를 복사해 AI에게 보여주세요. '예쁘게 만들어줘'보다 '이 화면처럼 만들어줘'가 결과물이 훨씬 좋습니다.
3단계 — AI에게 설계도 그리게 하기
이 단계가 사실상 가장 중요합니다. Plan Mode라는 모드가 있습니다. 코드를 바로 짜지 않고, 먼저 어떻게 만들지 계획부터 세우는 모드입니다.
Plan Mode를 켜면 AI가 기술 스택, 디자인 컨셉, 폴더 구조, 데이터베이스 스키마까지 그려서 보여줍니다. 여기서 가장 자주 하는 실수가 '계획을 안 읽고 진행 버튼부터 누르는 것'입니다.
특히 데이터베이스 스키마는 꼭 봐야 합니다. 데이터베이스의 목차 같은 거라서, 여기서 뭐가 빠지면 나중에 기능 하나가 통째로 빠진 채로 만들어집니다.
4단계 — AI 모델과 데이터베이스 연결하기
여기부터 비개발자가 가장 많이 막히는 구간입니다. 외부 서비스 두 개를 붙여야 하기 때문입니다.
첫 번째는 OpenRouter입니다. Claude, ChatGPT, Gemini 같은 AI 모델을 한 군데서 모아 쓸 수 있게 해주는 서비스입니다. API 키라는 걸 발급받아 .env.local이라는 숨겨진 파일에 넣어둬야 합니다.
두 번째는 Supabase입니다. 데이터를 저장하는 곳입니다. 한국 사용자라면 Seoul 리전을 선택해야 속도가 빠릅니다.
이 단계에서 가장 자주 보는 에러가 401입니다. 보통 API 키 만료 시간을 1시간으로 짧게 잡아두고 까먹는 경우입니다. 혼자 만나면 한 시간 헤맬 만한 에러지만, 옆에서 누가 알려주면 1분 만에 해결됩니다.
5단계 — 인터넷에 올리기
마지막은 배포입니다. 배포에는 GitHub와 Vercel을 씁니다. AI에게 'GitHub에 올려줘'라고 말하면 알아서 저장소를 만들고 코드를 올립니다.
여기서 꼭 챙겨야 하는 게 하나 있습니다. .env.local이 GitHub에 안 올라가는 건 좋은데, 그러면 Vercel도 그 비밀 정보를 모릅니다. Vercel에 환경 변수를 따로 입력해줘야 서비스가 정상 작동합니다.
흐름은 매끄러워도, 혼자 하면 막힙니다
이 다섯 단계를 따라가면 비개발자도 풀스택 웹서비스를 처음부터 끝까지 만들 수 있습니다. 다만 혼자 따라 하면 어딘가에서 반드시 막힙니다. API 키 만료, 환경 변수 누락, 마크다운 렌더링 깨짐. 옆에서 누가 라이브로 풀어내는 자리에서는 1분이면 되는 일이, 혼자 만나면 한두 시간씩 잡아먹습니다.
그래서 매달 한 번 같이 모여 함께 만드는 자리를 만들었습니다.
5월 31일, 첫 Ship Day
첫 모임 안내
첫 모임은 2026년 5월 31일 일요일, 데스커 라운지 홍대에서 열립니다. 13시부터 18시까지 다섯 시간 동안 함께 만듭니다. 처음 오시는 분도 따라올 수 있게 바이브코딩 기초 워크플로우부터 짚어드리고 그날 안에 셋업부터 배포까지 가는 게 목표입니다.
만약 아짓 첫 서비스를 만들지 못했다면, Shipped에서 시현님과 함께 같이 하루 동안 바이브코딩 함께 해보시면 어떨까요?