[v0 by Vercel] 홈페이지를 디자인해주고 코딩까지 해주는 AI 를 사용해보았다

생성형 AI 의 발달로, 프론트엔드의 개발 과정의 많은 부분에 있어서 AI 의 도움을 받게 되었다. 실제로 React 와 같은 프레임워크를 이용해서 웹페이지를 개발할 때는 정형화된 코드를 작성할 때가 많은데, 이런 템플릿 코딩에 있어서는 생성형 AI 가 굉장히 강력한 도구가 될 수 있다. 이러한 트렌드를 증명하듯, Vecel 에서 프론트엔드 개발의 전체 플로우를 진행할 수 있는 AI 인 "v0" 를 발표했다. v0 은 유저로부터 텍스트로 만들고 싶은 웹페이지의 인풋을 받아서 웹 페이지 디자인을 생성해 주는 AI 서비스이고, 해당 디자인을 만들기 위한 코드까지 end to end 로 제공해준다고 한다. 몇 주 전, private beta 로만 제공된다고 해서 신청을 했는데, Beta 접근이 허용되어서 직접 사용해 보았다.

 

v0 by Vercel

v0 by Vercel

 

 

처음 v0 홈페이지에 접속하면 다음과 같이 텍스트 입력을 받는 칸을 볼 수 있고, 아래에는 v0 를 이용해서 다른 유저가 생성한 예시들을 볼 수 있다.

로그인 페이지 생성

먼저, 기본적인 로그인 페이지를 생성해 보도록 하자.

A simple login page with email and 6 digit one time passcode

 

이메일을 입력하고, 6자리의 코드를 입력해서 로그인을 할 수 있는 플로우를 만들고 싶어서, 위와 같이 프롬프트를 입력해 보았다.

v0 가 생성한 로그인 페이지

 

기본적으로 프롬트에 대해 3개의 후보를 생성해준다. 아주 마음에 들지는 않지만, 요구한 대로 이메일을 입력하는 필드와 OTP 입력 필드를 생성하고, 밑에 Sign In 버튼을 생성했다. 생성된 후보 중 한가지를 골라, 추가적으로 prompt 를 입력해서 수정을 할 수 있다. 구글 로그인 기능을 추가하고 싶다고 가정하고, Continue with Google 버튼을 추가해달라고 요청했다.

Add "Continue with Google" button below Sign in button

구글 로그인 버튼을 추가해줘

Continue with Google 버튼을 생성하기는 했다. 하지만 버튼들이 정렬이 잘 되지 않았고, Sign In 버튼 밑에 생성해 달라고 했음에도 불구하고 옆에 생성한 것을 볼 수 있다. 그래도 버튼에 Google 로고도 박혀있다.

 

One-Time passcode 는 저렇게 텍스트필드로 입력을 받지 않고 pin code 의 형식으로 받는 경우가 많다. v0 에는 Pick and Edit 이라고 해서 컴포넌트를 선택하고 수정하는 prompt 를 입력할 수 있게 되어 있다. OTP 필드를 선택해서 cell 형식으로 바꿔 달라고 요청해보자.

OTP should be 6 cells not a single textfield

 

pincode 입력창으로 바꿔줘

 

결과는 다음과 같다.

 

6자리 핀코드 입력 페이지

 

원하는 대로 6자리의 칸이 생긴 것을 확인할 수 있다. 하지만 One-Time Passcode 라는 라벨이 두개가 생겨버렸다.

귀여운 것은, 새로운 디자인을 생성할 때마다 version number 가 증가한다.

 

v0 코드 가져오기

v0 캔버스의 우측 상단에 있는 Code 버튼을 누르면, 해당 디자인을 만들기 위한 React 코드를 볼 수 있다.

코드를 볼 수 있다

Vercel 답게 Next.js 프로젝트로 생성된 컴포넌트를 가져올 수 있다고 한다. 코드를 바로 복사 붙여넣기 할 수도 있지만, v0 가 제공하는 기능을 사용해 보기 위해 Next.js 프로젝트를 생성한 후, v0 커맨드를 이용해서 컴포넌트를 가져와 보자.

Next.js 프로젝트 생성

원하는 디렉토리에서 프로젝트를 생성하기 위해 다음 커맨드를 실행한다.

npx create-next-app

커맨드창에 나오는 프롬프트대로 프로젝트를 생성한다.

What is your project named? v0-example
Would you like to use TypeScript? No
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No

 

생성된 프로젝트에서 v0 를 사용하기 위해 패키지를 설치한다. Vercel 에서 v0 라는 패키지를 이미 배포해서 npm 을 이용해 설치하면 된다.
v0 package

v0

cd v0-example
yarn add -D v0

v0 를 사용하기 위해서 다음 커맨드를 실행한다.

npx v0 init

프로젝트가 잘 설정되었다면 다음과 같은 메세지가 출력되고, components.json 파일이 생성된다.

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed. You can now starting adding components.

v0 초기화가 완료되었다면, v0 홈페이지에 나와 있는 대로 컴포넌트를 가져와 보자. v0 에서 컴포넌트를 생성하면, 생성된 컴포넌트를 프로젝트에서 사용하기 위해 실행해야 하는 커맨드를 표시해 준다.

디자인을 생성하면 v0 에서 관리되는 id 가 생성되고, id 를 기반으로 컴포넌트를 가져올 수 있는 것 같다. 위에서 생성한 Next.js 프로젝트로 가서 위의 커맨드를 실행하면, 다음과 같은 프롬프트를 통해 컴포넌트를 가져올 수 있다.

npx v0 add 4rOcRX42nzv

✔ What should we name the component? … LoginPage
✔ Done.

실행이 완료되면, src/components 디렉토리 안에 우리가 지은 이름대로 컴포넌트가 생성된다. 컴포넌트의 이름은 직접 설정할 수 있는데, 위에서 LoginPage 라는 이름으로 생성하도록 했기 때문에, src/components/login-page.jsx 라는 파일에 LoginPage 라는 컴포넌트가 생성된다.

이제, 가져온 컴포넌트를 직접 렌더링해 보자. src/app 디렉토리 밑에 login/page.jsx 라는 파일을 생성한 후, LoginPage 컴포넌트를 표시해 보자. 먼저, 페이지 파일을 생성한다.

mkdir src/app/login
touch src/app/login/page.jsx

 

page.jsx 파일 내에는 다음과 같이 작성한다.

import { LoginPage } from "@/components/login-page";

export default function Login() {
    return <LoginPage />;
}

이제 Next.js 를 실행해서 직접 브라우저에 렌더링된 컴포넌트를 확인할 수 있다.

yarn dev

$ next dev
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

이제 브라우저에서 http://localhost:3000/login 으로 접속하면, 렌더링된 컴포넌트를 확인할 수 있다.

스타일이 전부 깨졌지만, v0 에서 생성한 디자인이 잘 렌더링된 것을 확인할 수 있다.

결론

AI 가 생성한 디자인을 그대로 기존 프로젝트에 가져올 수 있는 프레임워크 자체는 굉장히 인상적이다. GPT 로 생성한 코드를 이용할 때는 복사-붙여넣기를 할 수 밖에 없고, dependecy 문제도 있는데, npm 환경에 맞추어 커맨드로 컴포넌트를 가져오는 방식은 굉장히 편리할 수 있고, 각각의 유저가 설정한 서로 다른 환경 (material ui, styled-component, tailwind)에 맞추어 컴포넌트를 생성하고 가져올 수 있다면, 훨씬 편리하게 개발 플로우 안으로 AI 를 가져올 수 있을 것으로 생각된다.

하지만 AI 가 생성해 준 코드의 수준을 아직까지는 애처로운 수준인데, v0 라는 이름이 시사하듯, Vercel 은 AI 로 기본적인 template 을 생성해서 코드를 가져오고, 그 위에서 개발자가 직접 컴포넌트를 수정하고 기능을 추가해 나가는 용도를 상정하고 서비스를 출시한 듯 하다. 아직까지 프로덕션에 사용하기에는 성능이 아쉽지만, AI 를 seamless 하게 기존의 개발 플로우에 가져오려는 시도를 보여주었고 앞으로의 발전 가능성을 보여주었다는 점에서 굉장히 고무적이다.

전체 코드는 Github: v0 example project 에서 확인 가능.

GitHub - k2sebeom/v0-example-project: Project that imports v0 generated design