바이브코딩 시작 — 강의 없이 비전공자도 만드는 첫 웹페이지

직전 글을 올리고 나서 머릿속에 제일 많이 맴돈 질문이 하나 있었어요.

“근데 저도 진짜 만들 수 있나요?”

포트폴리오 페이지 한 장, 프로필 페이지, 1인 창업 랜딩 페이지.

만들고 싶은 건 있는데 어디서 시작해야 할지 막막한 분들 있죠.
결론부터 말하면, 됩니다. 예전이랑 비교가 안 되게 진입장벽이 낮아졌어요.

예전 로드맵 vs 지금 — 진입장벽이 진짜로 낮아졌어요

예전엔 개발을 시작하려면 일단 “다 배워야” 했어요.

국비교육·부트캠프 풀스택 과정을 기준으로 보면, 고용노동부 K-디지털 트레이닝 과정은 평균 훈련기간 약 6개월(900시간) 이상 수준이에요(고용노동부 보도자료).

실제 운영 중인 과정 중에는 120일, 950시간짜리도 있고요(work24 과정 상세).

기본기를 처음부터 다 쌓으면 단단하긴 해요. 다만 예전엔 그게 시작 조건이었어요. 지금은 다르죠.

AI가 코드를 짜주면서 옆에서 설명까지 해주거든요.
그래서 “다 배운 다음 시작”이 아니라 시작해놓고 막히는 데만 배우는 쪽이 가능해졌어요.

기본기를 안 배워도 된다는 얘긴 아니에요. 순서가 바뀐 거예요.
예전엔 배우고 시작, 지금은 시작하고 배움. 막힌 지점이 곧 다음 공부 주제가 돼요.

학습 방식 자체도 바뀐 것 같아요. 예전엔 문법·API를 머리에 넣어두고 손으로 쳐야 했어요.

지금은 다르죠.

외울 필요는 많이 줄고, 눈에 익히고 흐름을 따라가는 쪽이 더 중요해진 느낌이에요.

AI가 짜준 코드를 읽고 “여기가 데이터 받는 부분이고, 여기가 화면 그리는 부분이구나” 정도만 잡혀도 충분히 다음 단계로 넘어갈 수 있더라고요.

처음부터 쉽게 다 된다고 이야기하는 것은 아니에요.
예전보다는 훨씬 쉽고 비전공자인 제 친구들도 잘 하고 있어요.

우선 배포까지는 아니더라도 원하는 것을 내 PC 브라우저에 띄우는 것까지라도 먼저 해보세요.

첫 프로젝트는 웹 한 장 — 파일 더블클릭이면 끝나요

앱이 아니라 웹에서 시작하는 이유가 있어요. 웹은 파일 더블클릭이면 내 PC 브라우저에서 바로 보여요.

앱은 스토어 심사·기기 빌드 같은 장벽이 먼저 나와요.

웹은 기본기 자체가 강력하다고 생각해요.
HTML·CSS·JS 한 파일이면 화면 하나가 완성돼요. 추가 환경 설정 거의 없이요.

저도 현업에서 아이디어를 빠르게 공유할 때 이걸 자주 써요. 기획 회의 중에 “이런 느낌 어때요” 하면서 한 파일짜리 HTML로 프로토타입 만들어서 던지는 식이에요. 백 마디 설명보다 실제로 움직이는 화면 하나 가 훨씬 빨리 합의를 만들거든요.

바이브코딩이 이 쪽에서 특히 잘 통하는 것도 같은 이유예요. 결과물이 바로 눈에 보이니까 AI가 잘못 짜도 금방 알아채고 다시 시킬 수 있어요. AI가 없을 때보다 코딩하기에 포기하는 지점이 많이 없어졌다고 생각해요.

만만한 첫 프로젝트 후보를 보면요.

• 포트폴리오 한 장 — 이름·스킬·연락처 담은 정적 페이지
• 프로필 페이지 — 자기소개·링크 모음
• 1인 창업 랜딩 — 서비스 소개·연락처 CTA
• 카운트다운 — 날짜 하나 입력하면 D-day 계산
• 책 추천 리스트 — 읽은 책, 한 줄 감상 모아두기

공통점이 하나 있어요. 서버도 DB도 없이 파일 하나면 돼요.

알아야 할 최소 기본 — 4개면 시작할 수 있어요

코딩을 배운다는 게 막막하게 느껴지는 이유 중 하나가, 모르는 단어가 한꺼번에 쏟아진다는 거예요.

이 부분은 모든 분야가 처음에 시작하면 똑같지 않을까요?

근데 처음엔 이 정도만 잡아도 AI가 주는 코드를 읽을 수 있어요.

먼저 정적 페이지와 동적 페이지의 차이부터요.
정적은 인쇄된 메뉴판처럼 내용이 고정된 한 장이에요. 동적은 주문에 따라 화면이 바뀌는 키오스크고요. 첫 웹은 정적부터 시작하면 돼요. 서버도 DB도 필요 없거든요.

그 정적 한 장을 이루는 재료가 딱 세 가지예요.

HTML

글·버튼·이미지가 들어갈 자리를 잡는 뼈대예요. 집으로 치면 벽과 문의 위치를 정하는 단계죠.

CSS

색·여백·폰트 같은 꾸밈을 담당해요. 같은 뼈대 위에 인테리어를 입히는 셈이에요.

JS

버튼을 눌렀을 때 뭔가 바뀌게 만드는 동작 담당이에요. 스위치·자동문 같은 거죠.

이 4개면 AI가 짜준 코드를 봤을 때 “아, 이 부분이 색 바꾸는 거구나” 정도는 읽혀요.

다 이해할 필요 없어요. “이런 느낌이구나?”가 더 중요해진 요즘이 아닐까해요.

물론 코드를 읽을 수 있으면 좋아요. 다만 처음부터 읽히긴 어렵잖아요.

순서가 있더라고요. 일단 만들 수 있다가 1단계예요.

그다음에 코드가 조금씩 눈에 들어오기 시작하고, 효율·토큰 최적화·심화 같은 건 그 뒤에 자연스럽게 따라와요.

처음부터 다 챙기려다 시작 자체를 못 하는 게 제일 아쉽더라구요.
SNS보면서 안된다고 하는 부정적인 글보고 쫄지마세요.

저라면 — 시작 순서 4단계

모르는 단어는 메모만 해두세요

처음 시작하면 낯선 단어들이 쏟아져요. DB, 서버, 클라우드, 도메인, 배포 — 이런 것들이요.

근데 만만한 첫 웹은 이 중 어느 것도 필요 없어요. 파일 하나면 돼요.

그러니까 모르는 단어가 나오면 멈추지 말고 메모장에 한 줄만 적어두세요.

이게 전부예요. 처음엔 이 목록이 길어도 괜찮아요.

정적 한 장을 끝내고 나면 자연스럽게 다음 욕구가 생겨요.

“버튼 누르면 이 데이터가 저장됐으면 좋겠다”는 생각이 드는 순간, DB가 필요한 단어가 되거든요.
그때 찾아보면 훨씬 빨리 이해돼요. 필요해진 다음에 배우는 게 가장 빠른 학습이에요.

그걸 그대로 AI에게 물어보면 순서대로 하는 법까지 어느정도 다 알려줍니다.

주의점 3가지

다음 단계 — 내 페이지를 세상에 내놓기

내 PC 브라우저에 마음에 드는 페이지가 뜨고 나면, 자연스럽게 드는 생각이 있어요.
“이거 세상에 알리고 싶다.”

그때가 도메인 사고 호스팅 붙여볼 타이밍이에요.

저는 Cloudflare를 추천해요. 도메인 구매부터 정적 페이지 호스팅(Cloudflare Pages)까지 한 곳에서 끝나거든요. 웬만한 개인 페이지는 무료 범위 안에서 다 돌아가요.

물론 다른 선택지도 많아요.

• Cloudflare Pages — 도메인 + 호스팅 한 곳에서 처리, 정적 페이지는 거의 무료
• Vercel — Next 같은 프레임워크와 궁합 좋고, 무료 티어 넉넉
• Netlify — 폴더 드래그 앤 드롭이면 끝, 입문 친화적

뭐가 더 좋다 단정하기보단, 하나씩 AI에 물어보고 구글링도 같이 해보세요.
단계별로 짚어주는 글이 정말 많거든요. 해보면 진짜 어렵지 않더라고요.

제 주위 친구들한테도 시켜봤어요. 다 해내요.
조금씩 헤매긴 해도 결국 자기 페이지에 자기 도메인 붙여서 “이거 맞냐고” 링크 보내주더라고요.

개발이 본업이 아니어도 괜찮아요.
지금 본업에서 하고 계신 일들, 그것보다 어려운 것들이잖아요. 그것도 처음엔 다 막막했을 거고요.

이것도 똑같아요. 처음 한 번만 넘기면 돼요.

처음이 어렵지, 한 번 해보면 그다음부턴 일이 아니에요.

레스덕의 정리

진입장벽이 무너졌다는 게 제가 하고싶은 말이에요.

예전엔 풀세트를 다 배워야 첫 줄을 쓸 수 있었는데, 지금은 시작하면서 배우는 흐름이 가능해졌어요.

이 글을 쓰게 된 것도 비싼 강의로 화나신 분들 주위에 망설이는 친구들이 많아서 쓰게 됐어요.

만만한 웹 한 장을 끝내보면, 다음에 뭐가 필요한지 본인이 알게 돼요.
모르는 단어는 메모해두고, 필요해지면 그때 찾아보면 돼요.

직전 글에서 말한 것처럼, 막힌 지점이 가장 정확한 커리큘럼이에요.

저는 직업이라서 익숙한 분야이지만 올해 돈 공부를 시작했어요.
다른 분야에 대한 공부를 해보니 결국 중요한 것은 일단 해보기 인 것 같아요.

저도 ETF를 하나라도 사모으기 시작했듯, 여러분도 나만의 페이지를 하나 가져보는 게 어떨까요?

혹시 하다가 막히거나 도움이 필요하시면 메일이나 SNS로 편하게 연락주세요.
완벽한 답을 드릴 순 없어도, 같이 고민해보고 제 생각 정도는 나눠드릴 수 있을 것 같아요.