AI에게 “포트폴리오 웹사이트 만들어줘”라고 입력하면 몇 분 안에 화면이 나올 수 있습니다. 하지만 화면이 보이는 것과 실제로 운영 가능한 웹사이트를 만드는 것 사이에는 몇 단계가 더 있습니다.
바이브코딩으로 시작하더라도 전체 흐름을 알면 AI가 무엇을 하고 있는지 훨씬 쉽게 판단할 수 있습니다.
웹사이트는 보통 이런 흐름을 거칩니다
- 무엇을 보여줄지 정합니다.
- 화면 구조와 디자인을 만듭니다.
- 필요한 기능을 구현합니다.
- 로컬에서 확인하고 수정합니다.
- Git으로 변경 이력을 관리합니다.
- 서버나 플랫폼에 배포합니다.
AI는 각 단계를 빠르게 도와줄 수 있지만 단계 자체가 사라지는 것은 아닙니다.
Next.js는 무엇인가요?
Next.js는 React 기반 웹 프레임워크입니다. 페이지 구성, 라우팅, 서버 기능, 최적화 등 웹서비스에 필요한 여러 기능을 제공합니다.
AI가 코드를 생성해주더라도 “페이지”, “컴포넌트”, “API” 같은 기본 구조를 조금씩 이해하면 수정 요청을 훨씬 정확하게 할 수 있습니다.
배포까지 해봐야 웹 개발 흐름이 완성됩니다
내 컴퓨터에서만 실행되는 사이트와 인터넷 주소로 접속할 수 있는 사이트는 다릅니다. Vercel이나 Cloudflare Pages 같은 배포 플랫폼을 사용하면 개인 프로젝트도 비교적 쉽게 공개할 수 있습니다.
이 과정에서 환경변수, 빌드 오류, 도메인 같은 현실적인 문제를 만나게 됩니다.
Git은 AI 시대에도 필요합니다
AI가 여러 파일을 한꺼번에 수정할수록 “무엇이 바뀌었는지” 확인하고 문제가 생겼을 때 돌아갈 수 있는 버전 관리가 더 중요해집니다. Git 실무 입문 글도 함께 보면 좋습니다.
첫 사이트는 작게 만들어 공개해보세요
완벽한 서비스보다 자기소개 페이지, 링크 모음, 작은 대시보드처럼 하루 안에 구조를 이해할 수 있는 프로젝트가 좋습니다.
바이브코딩의 장점은 개발을 건너뛰게 해주는 것이 아니라, 아이디어에서 동작하는 결과물까지 가는 피드백 주기를 짧게 만드는 것입니다.