·약 29분 읽기
안녕하세요. 모두의바이브코딩입니다.
지난 Lovable 편과 Bolt.new 편에 이어, 오늘은 다양한 바이브 코딩 도구 시리즈의 세 번째 주자, v0.app을 다룹니다.
지금까지 만나본 두 도구가 ‘앱 한 채를 통째로 짓는’ 종합 시공업자였다면, 오늘 소개할 v0.app은 결이 조금 다릅니다. 한 마디로 표현하면 이렇습니다.
앱 한 채는 못 짓지만, 인테리어 한 공간만큼은 끝내주게 잘 꾸미는 디자인 마스터.
오늘은 이 도구로 약 20분 만에 ‘내 이름이 박힌 포트폴리오 페이지’를 만들어 진짜로 인터넷에 띄워보겠습니다. 이번에도 코드는 한 줄도 직접 쓰지 않습니다. 저만 따라오세요!
v0.app은 Vercel(버셀)이라는 회사가 만든 바이브 코딩 도구입니다. 채팅창에 만들고 싶은 화면을 한국어로 설명하면 그럴듯한 웹페이지 한 장 또는 화면 부품을 만들어 줍니다.
Vercel은 ‘만든 웹사이트를 인터넷에 올려서 운영해 주는 회사’예요. 비유하자면, 부동산 임대업체와 비슷합니다. 우리가 가게 하나를 차리려면 건물(서버)이 필요한데, Vercel이 그 건물을 빌려주는 셈이에요. 그래서 v0.app으로 만든 페이지는 자연스럽게 Vercel의 건물에 입주하게 되는데, 입문자에게는 오히려 편한 구조입니다. 만들고 → 클릭 한 번이면 → 인터넷 주소가 생긴다는 뜻입니다.
Lovable과 Bolt.new는 *‘회원가입, 데이터 저장, 결과 계산’*까지 다 되는 앱 전체를 만들 수 있는 도구였어요. 반면 v0.app은 그런 기능들은 없고, 대신 ‘예쁜 화면’ 을 만드는 데 모든 힘을 쏟는 도구입니다.
| Lovable | Bolt.new | v0.app | |
|---|---|---|---|
| 회원가입·데이터 저장 가능? | O | O | X |
| 화면 디자인 퀄리티 | 좋음 | 좋음 | 압도적으로 좋음 |
| 추천 용도 | 작동하는 앱 | 작동하는 앱 + 코드 학습 | 포트폴리오·소개 페이지 |
처음 보면 ‘기능이 적은 게 단점 아닌가?’ 싶지만, 거꾸로 생각하면 됩니다. 욕심을 한 가지로 좁힌 도구가 그 한 가지에 가장 뛰어납니다. v0.app으로 만든 페이지를 보면 대부분의 사람이 ‘이거 진짜 AI가 만든 거예요?’ 하고 한 번씩 의심합니다. 그만큼 결과물이 디자이너가 정성껏 만든 사이트처럼 정돈되어 있습니다.
오늘 우리가 만들 포트폴리오 페이지는 이 도구의 강점이 가장 잘 드러나는 주제입니다. 꼭 디자이너가 아니어도 괜찮습니다. 직장인의 이력서, 작가의 작품집, 사이드 프로젝트 모음, 강사의 자기소개 페이지 - 모두 같은 방식으로 만들 수 있습니다.
첫 화면 중앙에 이미 입력창이 보입니다. 결과물을 저장하고 인터넷에 올리려면 회원 가입이 필요하니, 우측 상단의 [Sign Up] 버튼부터 누르겠습니다.
회원 가입 화면에서 Google 계정 또는 GitHub 계정으로 가입합니다. 이메일 가입도 가능한데, 가장 편한 건 Google입니다.
무료 플랜 안내: v0.app은 가입하면 매달 $5 상당의 크레딧을 무료로 줍니다. 오늘 우리가 만들 포트폴리오 페이지 한 개 정도는 이 무료 크레딧으로 충분히 만들 수 있어요. 카드 등록도 필요 없습니다.
여기까지 2~3분이면 끝납니다. 이제 본격적으로 페이지를 만들어 봅시다.
가운데 입력창에 아래 문장을 그대로 복사해 붙여 넣어 보세요. 본인 정보로 바꾸기 전에 일단 그대로 시작하는 게 더 빠릅니다. (마음에 들면 그다음에 본인 이름과 경력으로 바꾸면 됩니다.)
프리랜서 디자이너 김지윤의 1인 포트폴리오 페이지를 만들어줘.
전체 톤: 미니멀한 화이트 배경에, 따뜻한 파스텔 베이지를 포인트 컬러로. 폰트는 산세리프 계열로 깔끔하게.
섹션 구성:
1) 첫 화면(히어로): 큼지막한 이름과 한 줄 소개(예: "브랜드 정체성을 디자인하는 사람"), 옆에는 동그란 프로필 이미지 자리.
2) About: 200자 정도의 짧은 자기 소개와 핵심 키워드 3개(예: 브랜딩, 타이포그래피, 일러스트).
3) Projects: 대표 프로젝트 4개를 카드 그리드로. 각 카드에는 이미지 자리, 프로젝트명, 한 줄 설명, 연도. 마우스를 올리면 살짝 떠오르는 호버 효과.
4) Contact: 이메일과 인스타그램, 링크드인 아이콘 링크.
전체적으로 여백이 넉넉하고, 스크롤할 때 각 섹션이 부드럽게 등장하면 좋겠어.
본 포스팅은 코딩 기술 구현에 초점을 맞춘 가이드이며, 위 인물 정보와 프로젝트는 모두 가상의 예시입니다. 실제로 사용하실 때는 본인의 진짜 정보로 바꿔서 입력해 주세요.
Enter를 누르면 v0.app이 작업을 시작합니다.
작업이 시작되면 화면이 두 영역으로 나뉩니다. 왼쪽은 채팅, 오른쪽은 만들어지는 페이지의 미리보기입니다. (Bolt.new에서 봤던 *‘파일 목록’*은 v0에서는 평소엔 숨겨져 있고, 보고 싶을 때만 볼 수 있습니다.)
작업이 끝나는 데 보통 1~3분 정도 걸립니다. Lovable이나 Bolt보다 훨씬 빠른데, 이유는 단순해요. ‘한 페이지’만 만드니까 그런 겁니다. 완성되면 오른쪽에 결과 페이지가 뜹니다.
저는 작업이 끝났는데, 전체적으로 레이아웃만 만들어지고 내용이 들어가지 않아서 “내용이 전혀 들어가지 않았는데 다시 작업해”라고 추가로 요청했습니다.
어떠신가요? 이게 정말 한 줄짜리 주문서로 나온 결과물이라는 게 조금 비현실적으로 느껴지실 겁니다. 여백, 정렬, 폰트 크기, 색깔 조합 같은 ‘디자이너의 감각’이 필요한 부분들이 그냥 잘 잡혀서 나오는 게 v0.app의 진짜 매력이에요.
이제 결과물을 본인 것으로 만들어 봅시다. 채팅창에 한국어로 추가 요청만 하면 됩니다.
요청할 때마다 v0.app은 새로운 버전을 따로 저장해 줍니다. ‘세 번 전 버전이 더 마음에 들었는데…’ 싶을 때 클릭 한 번이면 되돌아갈 수 있어요. 실수해도 안전하다는 뜻이라, 부담 없이 이것저것 시도해 보세요.
같은 바이브 코딩 도구지만, 같은 문제를 풀려고 만들어진 도구가 아닙니다. 시리즈를 따라오신 분들이라면 이쯤에서 ‘그래서 셋 중에 뭘 골라야 하지?’ 싶으실 텐데, 기준은 의외로 간단합니다.
v0.app이 빛나는 순간은 결과물 자체가 ‘예뻐야’ 의미 있는 종류의 페이지를 만들 때입니다. 포트폴리오, 가게 소개, 모임 안내, 출시 예정 제품의 티저 페이지 같은 것들요. ‘기능은 단순하지만 첫인상은 멋져야 하는’ 페이지에 한 정거장 차이로 앞서 있습니다.
또 한 가지, v0.app은 기능을 욕심내지 않은 만큼 ‘튕기는 일’이 적습니다. 풀스택 도구들은 회원가입·데이터베이스·결제까지 한꺼번에 시도하다 보니 가끔 중간에 꼬이는 일이 생기는데, v0는 *‘한 페이지를 잘 만든다’*에만 집중하니 결과가 안정적이에요. 입문자 입장에서 *‘AI한테 시켰는데 결과가 영 시원치 않다’*는 경험을 가장 적게 하게 됩니다.
v0.app에는 다른 도구에 없는 재미있는 기능이 하나 있습니다. 참고하고 싶은 화면의 이미지를 채팅창에 직접 끌어다 놓으면 그 분위기를 따라서 페이지를 만들어 줍니다.
예를 들어, 마음에 드는 다른 사람의 포트폴리오 사이트나 잡지 레이아웃을 스크린샷으로 캡처해서 첨부한 뒤, “이런 분위기로 내 정보를 넣어 다시 만들어줘” 하고 시키면 됩니다.
주의: 다른 사람의 디자인을 그대로 복제하는 건 저작권 문제가 생깁니다. *‘분위기·색감·배치 정도를 참고’*하는 선에서 활용하시고, 결과물은 본인의 콘텐츠로 충분히 다르게 채워서 사용하세요. “한 화면 그대로 베껴줘” 같은 요청은 피하시는 게 좋습니다.
이 기능은 ‘내가 원하는 느낌을 글로 설명하기 어려울 때’ 정말 유용합니다. 디자인 용어를 모를수록 오히려 효과가 큽니다. 입으로는 ‘뭔가 따뜻하고 종이 느낌 나는…’ 정도밖에 못 설명해도, 이미지 한 장이면 v0가 알아듣거든요.
페이지가 마음에 들게 다듬어졌다면 이제 인터넷에 주소를 붙이는(배포) 단계입니다.
v0.app의 가장 큰 장점이 여기서 빛납니다. 만든 사람이 Vercel이니까, Vercel에 올리는 건 정말 클릭 한 번입니다. 별도 계정도 필요 없어요. v0 가입할 때 이미 Vercel 계정이 함께 만들어졌거든요.
PC와 모바일에서 한 번씩 열어 보고, 모든 섹션이 잘 보이는지, 호버 효과가 작동하는지, 링크들이 정상인지 확인해 보세요. 이상이 없다면 **여러분도 이제 진짜로 '인터넷에 자기 페이지를 가진 사람'**이 되신 겁니다.
Tip — 본인 도메인 붙이기:
seoyeon.com같은 본인 소유 주소를 붙이고 싶다면, Vercel 설정에서 Custom Domain(커스텀 도메인) 을 추가하면 됩니다. 도메인은 가비아·후이즈·나무 같은 도메인 판매 사이트에서 연 1만 원대에 살 수 있어요. (이 부분은 별도 가이드가 필요할 만큼의 분량이라, 다른 포스팅에 따로 다루겠습니다.)
오늘 v0.app으로 개인 포트폴리오 페이지를 만들어 보셨는데, 어떠셨나요?
지금까지 시리즈에서 만나본 세 도구를 정리하면 이렇습니다.
세 도구 모두 *‘한국어로 주문하면 결과물이 나온다’*는 점에서는 같지만, 각자 잘하는 일이 다릅니다. 그래서 *“어떤 게 가장 좋아요?”*는 잘못된 질문이에요. *“내가 지금 만들고 싶은 게 뭐예요?”*가 먼저 정해지면, 도구는 자동으로 결정됩니다.
오늘 만든 포트폴리오 페이지에 *‘방문자가 메시지를 남길 수 있는 기능’*이나 *‘내 글을 모아두는 블로그’*까지 붙이고 싶어진다면 그때는 다시 Lovable이나 Bolt.new를 이용해야 합니다.
여러분은 v0.app으로 어떤 페이지를 가장 먼저 만들어 보고 싶으신가요? 작은 카페의 메뉴 소개, 결혼식 초대장, 동아리 모집 페이지, 사이드 프로젝트 출시 페이지, 그게 뭐든 ‘사람들에게 보여주고 싶은 한 화면’이 머릿속에 있다면 오늘이 그걸 인터넷에 띄울 가장 빠른 날입니다.
도전해 보세요!
주의: 본 포스팅에서 제작한 포트폴리오 페이지는 v0.app의 기능을 체험하기 위한 예시이며, 모든 인물·프로젝트 정보는 가상입니다. 실제 사용 시에는 본인의 정보를 정확히 입력하시기 바랍니다.
Bolt.new로 여행 짐싸기 체크리스트 앱을 만드는 전 과정. Lovable과의 차이(파일·프리뷰), 회원가입·프롬프트·배포(bolt.host)까지 풀스택 바이브 코딩 가이드.
Lovable로 15분 만에 영양제 추천 웹앱을 만드는 전 과정(회원가입·프롬프트·배포)을 단계별로 정리한다. 풀스택형 바이브 코딩 툴의 특징과 Supabase 연동 이점, 면책·주의사항까지.
코딩에 익숙하지 않은 상태에서 Claude Pro, Cursor AI, Vercel만으로 워들 스타일의 데일리 국기 맞히기 게임(Flaglette)을 만든 과정, itch.io 배포 시행착오, ‘돌아가는 것’과 ‘재미’의 차이를 정리했다.