코드 한 줄 없이 20분 만에 포트폴리오 웹사이트 만드는 방법

시작하며

개발자 개인 웹사이트, 이제는 꼭 있어야 할 필수 포트폴리오다. 그런데 매번 처음부터 코드를 짜려면 시간도 오래 걸리고, 디자인도 어렵다. 이런 고민을 덜어주는 새로운 방식이 있다. 최근 등장한 AI 기반 UI 프로토타이핑 도구 V0를 활용하면, 코드 한 줄 없이 20분 만에 완성도 가능하다. 이 글에서는 V0의 실제 사용 과정을 바탕으로, 프론트엔드 개발 없이도 포트폴리오와 블로그 사이트를 만드는 방법을 상세하게 소개한다.

 

1. V0가 뭔가요? 왜 주목받는 걸까

V0는 빠르게 UI를 생성할 수 있는 AI 기반 도구다. 특히 넥스트JS, Tailwind CSS, ShadCN 같은 최신 프론트엔드 스택에 최적화돼 있다. 사용자는 영어로 간단한 명령문만 입력하면 웹사이트 형태의 코드와 화면을 자동 생성해준다.

📑 V0의 핵심 특징 살펴보기

• 코드 없이 UI 생성: 개발자가 직접 HTML/CSS를 작성하지 않아도 UI 자동 완성
• 넥스트JS 기반: 구조화된 프로젝트 형태로 결과물을 받을 수 있어 확장성 높음
• 프롬프트 기반 설계: 명령어만 입력하면 화면과 기능 자동 구현
• ShadCN/Tailwind 사용: 현대적이고 반응형 UI를 기본 제공
• 버전 관리 지원: 프롬프트 입력에 따라 생성물 버전 자동 기록

이런 특징 덕분에 개발자뿐 아니라 기획자, 디자이너에게도 빠르게 프로토타입을 만드는 데 유용하다.

 

2. 실제로 어떻게 만들었나?

이 사례에서는 V0를 활용해 개인 블로그와 포트폴리오 웹사이트를 만드는 전 과정을 보여주었다. 코드 없이 입력한 프롬프트만으로 아래 기능들이 순식간에 만들어졌다.

📑 AI가 자동으로 구현한 기능들

• 홈 화면, 블로그 목록, 상세 페이지
• 포트폴리오 항목 정리 및 링크 제공
• 사용자 소개 페이지
• 연락처 폼 및 지도 삽입
• 로그인 및 회원가입 기능
• 다크모드/라이트모드 스위치
• 블로그 태그 필터 및 캐러셀 배너
• 댓글 기능까지 포함한 블로그 상세 페이지

여기서 중요한 점은, 전체 작업이 30분이 채 되지 않았고, 실제 코드 입력은 전혀 없었다는 점이다. 일부 원하는 색상이나 스타일을 지정해주는 식의 추가 지시만으로 결과물이 보완됐다.

 

3. 프롬프트는 어떻게 입력했을까?

초기에 입력된 프롬프트는 매우 단순했다. “개발자의 포트폴리오와 블로그를 통합한 개인 사이트를 만들어줘.” 이 정도 수준의 지시만으로도 기본적인 홈/소개/블로그/연락처 등 핵심 메뉴가 자동 생성됐다.

📑 V0에 활용된 주요 프롬프트 예시

• 다크모드 스위치를 네비게이션 바에 추가해줘
• 블로그 캐러셀을 최상단에 만들어줘
• 블로그에 썸네일 이미지가 보이도록 해줘
• 태그 필터 기능을 사이드바에 구현해줘
• 댓글 기능을 블로그 상세 페이지에 추가해줘
• 라우팅 이동 시 스크롤을 최상단으로 이동시켜줘
• 포트폴리오에 프로젝트 링크와 깃허브 버튼을 넣어줘

이처럼 세부 기능이나 스타일 요청도 자연어로 간단히 지시하면 반영된다.

 

4. 작업이 끝난 후에는?

AI가 만들어준 결과물을 확인하고 다운로드하면 된다. 생성된 프로젝트는 넥스트JS 기반 구조로 되어 있어, 직접 수정이나 추가 개발이 용이하다.

📑 후속 작업에서 할 수 있는 일

• 일부 디자인 수정 (색상, 폰트, 애니메이션 등)
• 기능 개선 (로그인 로직, 블로그 검색 등)
• 데이터 연동 (Supabase, Firebase 등 백엔드 연결)
• 배포 (Vercel, Netlify 등 클라우드 호스팅 활용)

예를 들어 로그인 기능은 ShadCN 스타일에 맞춰 구현됐고, 캐러셀 디자인 크기나 정렬 등은 나중에 사용자가 커스터마이징 가능했다.

 

5. 사용하면서 느꼈던 실제 장점과 한계

실제로 이 방식을 사용해보면 장점이 분명히 체감된다.

📑 사용자의 실제 경험 기준 정리

• 시간 절약 효과 확실: 코드를 직접 쓰지 않아도 기본 구조가 거의 자동 생성됨
• 디자인 퀄리티 무난: 기본 UI 구성은 생각보다 깔끔하고 실사용 가능 수준
• 처음엔 다소 낯설다: 프롬프트 설계에 익숙해지기까지 시간이 좀 걸림
• 코드 품질은 개선 필요: 내부 로직이나 스타일이 완벽하지 않아 후속 수정은 필요
• 프로젝트가 커지면 속도 느려짐: 페이지나 컴포넌트가 많아지면 처리 시간 증가

결론적으로 첫 번째 버전 만들기엔 정말 유용하고, 이후에는 로컬에서 코드를 다듬는 방식이 가장 효율적이다.

 

마치며

V0는 코드 없이 빠르게 UI를 만들 수 있는 도구로, 개발자나 디자이너가 MVP를 만드는 데 특히 강력한 도구다. 특히 블로그, 포트폴리오, 소개 페이지처럼 패턴이 정해져 있는 페이지는 반나절도 안 되는 시간에 완성할 수 있다. 실제 사용을 해 보면, 앞으로 초기 개발 방식이 확 바뀔 수 있겠다는 생각이 들 정도다. 단, 이후에는 코드 수준의 튜닝과 커스터마이징이 필요하므로, 프로토타입 이후에는 직접 손을 보는 작업은 여전히 필수다.