v0 서비스로 더 쉽게 웹사이트 만들기

v0 서비스를 사용해서 웹사이트를 만들어보겠습니다. v0는 버셀에서 만든 AI 기반 웹 페이지 디자인 생성 도구입니다. 무료로 5달러의 크레딧을 제공하므로 간단한 웹 사이트를 디자인하는데 유용합니다. 기업 소개 페이지를 v0을 통해 다시 한 번 구상해보겠습니다.

 

먼저 v0 홈페이지에 접속하여 [Sign Up]을 눌러 회원가입을 한 다음 로그인합니다.

v0 홈페이지: https://v0.app/

v0 by Vercel - Build Agents, Apps, and Websites with AI

 

 

로그인하면 챗GPT와 유사한 채팅 화면이 보입니다. 다음과 같이 채팅을 입력합니다. 그러면 채팅 내용이 왼쪽에 보이고 중앙의 주요 화면에는 [Preview], [Code] 탭이 표시됩니다. 화면이 생성될 때까지 잠시 기다려주세요.

기업 소개 웹사이트 화면을 만들고 싶어, 옷을 파는 쇼핑몰 기업에 어울리는 디자인으로 만들어줘.

 

 

화면 생성이 끝나면 세련된 디자인 형태의 쇼핑몰 웹사이트 화면이 나타납니다. 스크롤을 내려 보면 요청한 기업 소개 사이트 의 화면 구성이 잘되어 있음을 확인할 수 있습니다.

 

이제 v0가 만든 화면을 커서에게 수정해볼 차례입니다. 커서로 이동한 다음 적절한 위치에 프로젝트 폴더를 생성합니다. 그런 다음 v0 화면으로 이동해 오른쪽 위에 있는 다운로드 버튼을 누릅니다. 그런 다음 v0에서 복사한 프로젝트 생성 명령어를 입력하고 다시 커서로 돌아와 빈 폴더의 터미널 창에 복사한 명령어를 입력하여 실행합니다.

 

v0 명령어를 입력하면 프로젝트 이름을 묻는 메시지가 나옵니다. 프로젝트 이름을 자유롭게 입력합니다. base color 관련 질문이 나오는데, 아무 색상이나 선택해도 괜찮습니다. 이후 '...already exists'라는 메시지가 나오면 반드시 [y]를 입력해 진행합니다. 만약 다른 키를 누르면 처음부터 다시 이 과정을 진행해야 하니 주의하세요.

 

설정이 완료되면 폴더 안에 여러분이 입력한 이름의 프로젝트 폴더가 생깁니다. 이 상태에서 커서에게 다음과 같이 부탁합니다.

my-awesome-shoppingmall 프로젝트를 실행해줘.

 

서버가 실행되면 v0에서 만든 화면을 커서에서 그대로 확인할 수 있습니다. v0가 아닌 커서 환경에서 로컬 서버를 실행한 상태이며, 앞으로의 화면 수정과 기능 추가는 모두 커서에게 진행할 수 있습니다.

 

이제 이 화면에 간단한 기능을 하나씩 추가해보겠습니다. 여러분이 만든 화면에서 보이는 버튼을 눌러 실제로 기능이 동작하지 않는 버튼이 있는지 확인합니다. 여기서 만든 화면에서는 [채용정보]와 같은 세부 버튼이 동작하지 않았습니다. 이번에는 가상의 채용정보 내용을 만들고, 이 [채용정보] 버튼을 눌렀을 때 그 내용이 보이게끔 해당 페이지로 이동하도록 만들어보겠습니다.

 

my-awesome-shoppingmall 프로젝트에서 채용정보 버튼을 만들어 버튼을 누르면 채용정보 화면으로 이동해서 채용정보를 볼 수 있게 해줘, 채용정보에는 간단한 페이지 형태로 회사에서 필요로 하는 MD의 자격 요건을 입력해서 안내를 해줘.

 

커서가 채용정보 페이지에 필요한 내용을 입력하고 이 사이트로 이동할 수 있도록 버튼과 페이지를 연결하는 코드로 수정해줍니다.

 

이제 [채용정보] 버튼을 누르면 채용정보 페이지인 /careers로 이동하며, 커서가 기본으로 입력해준 내용이 보입니다. 이처럼 v0로 만든 디자인 틀에 커서를 이용하여 필요한 기능을 하나씩 추가하며 웹사이트를 완성할 수 있습니다.