이젠 AI가 UI디자인까지 자동으로 만들어준다고? (디자인, 개발 몰라도 가능)
안녕하세요, AI를 활용해 웹 에이전시를 운영하고 있는 브랜더 키 입니다 :)
이번에 소개해드릴 AI툴은 자동으로 UI 디자인을 생성해주는
‘V0 by Vercel’ 이라는 툴입니다!
Vercel은 개발자 세계에선 마이크로소프트같이 모르는 사람이 없을 정도인 회사이고,
그런 회사에서 만든 개발한 AI이니 성능도 상당합니다ㅎㅎ
그럼 바로 사용방법으로 넘어가보죠!
0. 사이트 접속 및 회원가입
사이트 링크 -> v0 by Vercel
💡 간편 로그인이 개발자들에게 익숙할 Github 간편로그인으로 되어있어서 디자이너 분들은 익숙치 않으실 수 있는데요,
당황하지 마시고 이메일로 회원가입을 눌러서 회원가입을 해줍니다!
1. 프롬프트 입력
AI를 통해 만들고자 하는 UI 화면에 대한 설명을 입력해줍니다
이때 프롬프트는
- 길지 않아야 하고,
- 명료한 의미를 갖고있는 단어를 활용해야 하며,
- 되도록 영어로 입력하시는 편이 유리합니다
(영어가 편하지 않으시다면 AI 번역기 최강자 DeepL 활용!)
DeepL Translate: The world's most accurate translator
(트래픽이 몰려 생성 시간이 꽤 지연될 수 있습니다)
생성이 정상적으로 완료되었다면, V0가 3가지 UI 화면 레이아웃을 보여줄 것입니다
2. UI 상세 수정
처음에 만들어진 UI들은 별로 마음에 들지 않을 확률이 높습니다.
원했던 화면이 아닐 수도 있고, 레이아웃이 틀어져있는 요소들이 꽤 보일 수 있어요
이때 우리는 화면 하단의 프롬프트 입력창을 통해 수정 명령을 입력합니다
예를 들면 이런게 있겠죠?
폰트 사이즈를 크게 만들어줘
배경 색상을 Black으로 바꿔줘
이미지 사이즈를 50vh로 바꿔줘
그리고 프롬프트 입력창의 오른쪽에 보이는 마우스 커서 버튼을 누르면, 세부 요소들을 선택하여 수정 명령을 입력할 수 있습니다
이런 식으로요
3. 사용하기
마지막으로 중요한건 어떻게 사용할지에 대한 문제일 것입니다.
여기에 대해선 제가 생각하는 몇가지 방법들을 적어보았습니다.
우선 디자이너의 입장에서 살펴볼게요
- 한 가지 주제에 대한 다양한 레이아웃 아이디어를 뽑아내고, 상세 수정을 통해 디테일을 발전시키는 데에 활용할 수 있을 것입니다
- 생성된 UI에 대해 html 코드를 생성해주기 때문에, 개발자의 없이도 UI를 살아 움직도록 만들 수 있을 것입니다
- (코딩을 아예 모르더라도, 생성된 코드를 챗지피티에게 어떻게 활용할 수 있는지 물어보면 충분히 가능할 것입니다)
다음은 개발자의 입장에서 살펴보겠습니다
- 디자인을 모르는 개발자여도, 컨셉과 아이디어만 있다면 AI를 통해 필요한 UI 디자인을 생성해낼 수 있습니다
- 생성된 코드를 바탕으로 본인이 직접 커스터마이징하여 업무에 활용한다면, 생산성이 크게 향상될 것입니다.
마지막은 기획자의 입장입니다
- 디자인과 개발 양쪽에 익숙지 않더라도 최소한의 기능구현을 통해 시장검증을 하는 MVP(Minimum Viable Product)를 손쉽게 만들어낼 수 있게 되었습니다.
- explore 탭에서 다른 사람들이 생성한 UI 아이디어를 보며 기획을 구체화하고 새로운 영감을 얻을 수 있을 것입니다.
부록: 가격 정책
• Free: $0 per month includes 200 credits
→ 매달 200크레딧씩 무료로 제공됩니다.
그리고 최초 회원가입 시 추가 크레딧을 주는 것으로 추정됩니다.
사용하기에 적지는 않은 양인듯 합니다
저는 웹사이트를 제작해주는 웹 에이전시를 운영하며,
동시에 AI를 통해 어떻게 업무 효율을 높이고 새로운 가치를 창출할 수 있을지 매일같이 고민합니다.
앞으로 더 유익한 AI 꿀팁 정보 들고올테니 기대해주세요~!!!
그리고 혹시나 웹사이트 제작이 필요하신 분이 계시다면, 언제든지 편하게 연락주세요 😊
