기가막힌 디자인/개발 툴 소개(v0.dev)

개요

Vercel에서 몇 년 전부터 개발해온 웹 디자인 및 개발 도구인 v0.dev이라는 제품이 있다.

 

처음 출시되었을 때는 크게 눈에 띄지 않았지만, 최근 사용성이 크게 향상되었다는 소식을 듣고 테스트용으로 사용해보니 놀랄 정도로 훌륭하다는 생각이 들어 이렇게 소개하게 되었다.

 

사용법은 매우 간단하다. 첫 페이지에 접속하면 ChatGPT처럼 채팅 형식으로 원하는 요청을 입력할 수 있게 되어 있어 누구나 쉽게 사용할 수 있다.

 

 

단순하게 채팅으로 요구사항을 요청해도 잘 동작하지만 간단한 그림과 함께 요청한다면 정말 알아서 페이지를 다 만들어준다. 아래는 실제로 테스트한 내용이다.

실제 사용 모습

요청 사항

딜리버리 메이트라는 회사에서 점심, 저녁에 배달을 같이 시켜먹을 파티원을 모집하는 웹 프로젝트를 만들거야

아래는 로그인페이지 초안이야 디테일하게 만들어줘

 

결과물

 

코드

import { useState } from 'react'
import { Eye, EyeOff, Facebook, Twitter } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle login logic here
    console.log('Login attempt with:', { email, password })
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-md w-96">
        <div className="text-center mb-8">
          <h1 className="text-2xl font-bold">딜리버리 메이트</h1>
          <p className="text-sm text-gray-600">함께 주문하고 배달받아요!</p>
        </div>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Input
              type="email"
              placeholder="이메일"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="relative">
            <Input
              type={showPassword ? "text" : "password"}
              placeholder="비밀번호"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-3 top-1/2 transform -translate-y-1/2"
            >
              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
            </button>
          </div>
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <Checkbox id="remember" />
              <label htmlFor="remember" className="ml-2 text-sm text-gray-600">
                로그인 상태 유지
              </label>
            </div>
            <a href="#" className="text-sm text-blue-600 hover:underline">
              비밀번호 찾기
            </a>
          </div>
          <Button type="submit" className="w-full">
            로그인
          </Button>
        </form>
        
        <div className="mt-6">
          <p className="text-center text-sm text-gray-600">또는</p>
          <div className="mt-3 flex justify-center space-x-4">
            <Button variant="outline" size="icon">
              <Facebook className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon">
              <Twitter className="h-4 w-4" />
            </Button>
          </div>
        </div>
        
        <div className="mt-8 text-center">
          <p className="text-sm text-gray-600">
            계정이 없으신가요?{' '}
            <a href="#" className="text-blue-600 hover:underline">
              회원가입
            </a>
          </p>
        </div>
      </div>
    </div>
  )
}

 

결과물은 이미지로 보이는 것 처럼 실제로 사용 가능한 수준의 높은 퀄리티의 디자인을 제공하며, React와 TailwindCSS를 사용하여, 실제 상태 관리(state)를 통해 사용자 입력을 처리할 수 있도록 구현되어있다. 과거에는 기능적으로 다소 미흡한 프로덕트였지만, 최근 핫한 shadcn/ui를 도입함으로써 코드와 디자인이 매우 깔끔하고 완성도 높은 프로덕트가 되었다.

 

조금 더 이것저것 테스트를 진행해보았으며 그 결과물들을 공유해보도록 하겠다.

 

요청사항

이거 메인페이지인데 이거도 개선해줘

 

결과물

 

요청사항

파티에 참여했을때 상세 페이지도 만들어줘 페이지 상단에는 파티 이름, 멤버, 남은시간, 시간 등이 있고 중단에는 배달 상세 내용 ex)음식점 사진, 이름, 메뉴 참고사항 등 하단에는 다른 방을 간단하게 보여주는 정도가 있으면 좋겠어

 

결과물

 

요청사항

해당 방이 완료되었을 때의 페이지도 그려줘

정산 기능이 있어야해 파티장의 계좌 정보, 파티원의 정산 완료 유무정도만 있어야하고

상세 내용같은건 접어놓으면 될거같아

 

결과물

 

 

요청사항

마이페이지도 만들어줘

닉네임 변경, 프로필 변경, 개인정보 수정 등 마이페이지에는 총 배달 횟수, 배달 횟수에 따른 등급 나의 주문내역 페이지로 가는 링크 피드백, 버그 제보 사용법 페이지로 가는 링크정도가 있어

 

결과물

 

 

추가

 

결론

웹에서의 UI/UX는 이론적인 부분이 매우 중요하기 때문에 어느 정도 한정된 틀 안에서 결과물이 나온다고 생각한다. Tailwind 팀의 디자인 가이드북에서도 이러한 이론적 내용의 중요성을 강조하고 있으며, 그들의 제품에서도 이러한 생각이 반영된 디자인을 볼 수 있다.

 

v0.dev는 무에서 유를 창조하는 제품이라기보다는, 웹의 이론적인 부분들을 기반으로 학습하여, 사용자가 원하는 디자인을 이미 만들어진 컴포넌트와 잘 알려진 이론을 활용해 적재적소에 배치해주는 제품이라고 할 수 있다.

 

실제로, 규모가 작은 기업에서는 이 제품을 채택하여 제품 디자인을 진행하는 것이 충분히 가능하다는 생각이 들었다. 디자인 지식이 있는 개발자라면 디자이너 없이도 이 제품 하나만으로 완성도 높은 제품을 만들 수 있을 것이며, 나 또한 진행 중인 사이드 프로젝트의 디자인에 이 제품을 활용할 계획이다.

최근 AI 제품들 중 딱히 눈에 띄는 것은 없었지만, 이 제품을 처음 봤을 때 올해 들어 가장 신선한 충격을 받았다. AI 기술이 어디까지 발전할지 기대하게 만드는 경험이었다.