Vercel V0 : 글로 요청만 하면 인공지능이 UI와 개발도 해준다고?

 

안녕하세요! aloveu입니다.

23년 9월 15일에 Vercel이 실시간 AI 프롬프트로 디자인과 리엑트 컴포넌트를 빠르게 만들 수 있는 v0.dev를 공개했었죠.

이제야 글을 쓰는 건 살짝 늦은 감이 있긴 한데 그래도 한번 다뤄보겠습니다.

---

 

| Vercel V0를 사용하는 방법

v0.dev 는 최근까지 Private Beta 단계였고 대기자 명단에 등록해 컴펌이 되어야 사용을 할 수 있었는데 지금은 Beta단계로 회원가입만 하면 바로 사용할 수 있어서 저도 한번 테스트를 해봤습니다.

V0의 가격 정책은 아래 이미지와 같습니다. 무료로 사용이 가능한데 월에 200 Credits을 주네요.

V0의 가격정책

V0 사이트 바로가기 : https://v0.dev/

v0 by Vercel

 

 

| 주요 기능

V0는 생성형 AI로 원하는 컴포넌트나 사이트의 특징을 프롬프트에 입력하면 이를 기반으로 디자인화면을 최대 4개까지 제공해 줍니다. 

tailwind css 를 사용하여 스타일을 지정해 주기 때문에, 깔끔한 UI로 만들어줍니다.

저는 v0 첫페이지에 있는 프롬프트에 agreement modal이라고 한번 작성해 봤습니다.

V0 프롬프트

 

그러자 로딩이 조금 걸리더니 네 개의 화면을 만들어주는데 여기에서 화면을 고르고 또 원하는 작업을 하단 프롬프트에 적어 디벨롭하실 수 있습니다. 

여기까지 보다 보면 뭐야.. 이런 건 많잖아 하실 텐데 v0는 화면만 만들어주는 건 아닙니다.

버튼을 클릭하면 모달이 뜬다거나 토글버튼이 작동한다거나 하는 상호작용이 가능하다는 점입니다. 

agreement 모달 컴포넌트

 

거기에 더해 바로 리엑트에서 가져다 쓸 수 있도록 코드를 제공해 주죠.

그냥 가져다가 쓰시면 됩니다. 

Code view

 

영어울렁증이 있는 저로써는 영어로 프롬프트를 작성하는 거에 있어서 이게 정확하게 전달이 될까 하는 두려움이 있었습니다. 하지만 생각보다 한글도 잘 이해해서 제너레이트 해줍니다.

 

인스타를 생각하면서 "카드형식의 사진 피드"를 요청했봤는데요 생각보다 깔끔한 디자인이 만들어졌어요.

카드형식의 사진 피드

 

그리고, 이미지도 인식합니다. 저는 그냥 네이버 스크린샷을 넣어서 바로 만들었기 때문에 이렇게 부족하게 보이지만 이미지와 함께 프롬프트를 잘 작성한다면 훨씬 퀄리티 있는 결과물이 나올 거예요.

네이버 스크린샷으로 제너레이트

 

처음에는 프롬프트를 어떻게 써야 하는지 감이 안 잡힙니다. 이럴 때는 우측 상단 메뉴에 Explore 메뉴를 클릭해 보면 유저들이 만들어 둔 샘플들을 구경하실 수 있습니다.

프롬프트를 어떻게 작성했는지도 볼 수 있고 그 이후에 어떤식으로 베리에이션 했는지도 한눈에 볼수 있어서 조금만 훑어보면 금방 익히실 수 있을 거예요.

 

그중에 하나인 뮤직플레이어 ui를 가져와봤어요. 

초기 Music player UI

 

첫 번째 UI가 나온걸 보면 당연히 내 생각대로 되지 않습니다. 

그 UI에 계속 이야기를 주고받으면서 몇번이고 수정을 해야 내가 원하는 UI를 도출할 수 있어요.

꽤 깔끔하게 나오지 않나요??

UI develop

 

| 결론

부족한 점도 보이긴 하지만 이 정도만 돼도 생산성에 큰 도움이 될 것 같습니다.

디자인이 고픈 1일 개발자에게는 더없이 좋은 도구가 될것 같아요.

굳이 프로토타입을 프런트앤드단에서 만들지 않아도 디자이너분들이 뚝딱 프롬프트 작성해서 원하는 화면 만드시고 공유해주셔도 될 정도의 퀄리티가 머지않아 오겠죠.
요즘 이렇게 생성형 AI로 만든 도구들이 쏟아져 나와서 하나하나 살펴보는 것도 시간이 부족한 느낌입니다. 

도태되지 않으려면 꾸준히 공부하고 트렌드를 놓치지 않아야 할 것 같아요.

 

오늘도 읽어주셔서 감사합니다. ^___^