Vercel V0 : 글로 요청만 하면 인공지능이 UI와 개발도 해준다고?
안녕하세요! aloveu입니다.
23년 9월 15일에 Vercel이 실시간 AI 프롬프트로 디자인과 리엑트 컴포넌트를 빠르게 만들 수 있는 v0.dev를 공개했었죠.
이제야 글을 쓰는 건 살짝 늦은 감이 있긴 한데 그래도 한번 다뤄보겠습니다.
| Vercel V0를 사용하는 방법
v0.dev 는 최근까지 Private Beta 단계였고 대기자 명단에 등록해 컴펌이 되어야 사용을 할 수 있었는데 지금은 Beta단계로 회원가입만 하면 바로 사용할 수 있어서 저도 한번 테스트를 해봤습니다.
V0의 가격 정책은 아래 이미지와 같습니다. 무료로 사용이 가능한데 월에 200 Credits을 주네요.
V0 사이트 바로가기 : https://v0.dev/
| 주요 기능
V0는 생성형 AI로 원하는 컴포넌트나 사이트의 특징을 프롬프트에 입력하면 이를 기반으로 디자인화면을 최대 4개까지 제공해 줍니다.
tailwind css 를 사용하여 스타일을 지정해 주기 때문에, 깔끔한 UI로 만들어줍니다.
저는 v0 첫페이지에 있는 프롬프트에 agreement modal이라고 한번 작성해 봤습니다.
그러자 로딩이 조금 걸리더니 네 개의 화면을 만들어주는데 여기에서 화면을 고르고 또 원하는 작업을 하단 프롬프트에 적어 디벨롭하실 수 있습니다.
여기까지 보다 보면 뭐야.. 이런 건 많잖아 하실 텐데 v0는 화면만 만들어주는 건 아닙니다.
버튼을 클릭하면 모달이 뜬다거나 토글버튼이 작동한다거나 하는 상호작용이 가능하다는 점입니다.
거기에 더해 바로 리엑트에서 가져다 쓸 수 있도록 코드를 제공해 주죠.
그냥 가져다가 쓰시면 됩니다.
영어울렁증이 있는 저로써는 영어로 프롬프트를 작성하는 거에 있어서 이게 정확하게 전달이 될까 하는 두려움이 있었습니다. 하지만 생각보다 한글도 잘 이해해서 제너레이트 해줍니다.
인스타를 생각하면서 "카드형식의 사진 피드"를 요청했봤는데요 생각보다 깔끔한 디자인이 만들어졌어요.
그리고, 이미지도 인식합니다. 저는 그냥 네이버 스크린샷을 넣어서 바로 만들었기 때문에 이렇게 부족하게 보이지만 이미지와 함께 프롬프트를 잘 작성한다면 훨씬 퀄리티 있는 결과물이 나올 거예요.
처음에는 프롬프트를 어떻게 써야 하는지 감이 안 잡힙니다. 이럴 때는 우측 상단 메뉴에 Explore 메뉴를 클릭해 보면 유저들이 만들어 둔 샘플들을 구경하실 수 있습니다.
프롬프트를 어떻게 작성했는지도 볼 수 있고 그 이후에 어떤식으로 베리에이션 했는지도 한눈에 볼수 있어서 조금만 훑어보면 금방 익히실 수 있을 거예요.
그중에 하나인 뮤직플레이어 ui를 가져와봤어요.
첫 번째 UI가 나온걸 보면 당연히 내 생각대로 되지 않습니다.
그 UI에 계속 이야기를 주고받으면서 몇번이고 수정을 해야 내가 원하는 UI를 도출할 수 있어요.
꽤 깔끔하게 나오지 않나요??
| 결론
부족한 점도 보이긴 하지만 이 정도만 돼도 생산성에 큰 도움이 될 것 같습니다.
디자인이 고픈 1일 개발자에게는 더없이 좋은 도구가 될것 같아요.
굳이 프로토타입을 프런트앤드단에서 만들지 않아도 디자이너분들이 뚝딱 프롬프트 작성해서 원하는 화면 만드시고 공유해주셔도 될 정도의 퀄리티가 머지않아 오겠죠.
요즘 이렇게 생성형 AI로 만든 도구들이 쏟아져 나와서 하나하나 살펴보는 것도 시간이 부족한 느낌입니다.
도태되지 않으려면 꾸준히 공부하고 트렌드를 놓치지 않아야 할 것 같아요.
오늘도 읽어주셔서 감사합니다. ^___^
'IT > AI' 카테고리의 다른 글
AI, 당신의 삶을 더욱 풍요롭게 해줘요. (20) | 2024.03.08 |
---|---|
5분 만에 배우는 허깅페이스: 빠르고 쉬운 시작 가이드 (1) | 2024.02.21 |
ChatGPT:Bing Chat (Copilot) 알아보기 (1) | 2024.01.07 |
ChatGPT-4 무료로 사용하기 (4) | 2024.01.04 |
초보자를 위한 ChatGPT 이해하기 (1) | 2024.01.03 |