먼저 써 본 Visily의 text to UI 기능
웹사이트와 앱을 디자인 해 주는 AI 서비스 Visily
요약 및 인사이트
Visily의 text to UI 기능은 아직 보완이 많이 필요한 것 같습니다. 특히 대부분이 카드형 UI 혹은 텍스트 기반 UI로 결과물이 나오는 것 어쩔 수 없다 치더라도 버튼끼리 붙어있거나 그리드가 맞지 않는 부분, 다크 모드와 화이트 모드를 넘나드는 모습 등은 완성도가 떨어져 보이게 합니다.
다만 기존에 사람들이 특정 웹사이트에 대해 가지고 있는 멘탈 모델을 살펴보는데 활용될 수 있을 것 같습니다. 예를 들어 '여행 웹사이트를 디자인해 줘'라고 했을 때와 '뉴스 사이트를 디자인해 줘'라고 했을 때의 UI 결과물이 달랐는데요. 여행 사이트에는 추천 여행지를, 뉴스 사이트에는 인기 있는 토픽을 보여주는 섹션이 있었습니다. 내가 가진 아이디어를 넣어 본다면 어떤 UI가 일반적일지 파악하기에는 유용하겠습니다.
본문
일을 하면서 Visily를 종종 쓰곤 했는데요. Text to UI 기능은 아직까지 지원되지 않던 중 미리 오픈 알림을 신청해 놓은 덕분에 얼리 액세스를 얻을 수 있었습니다!
마침 곧 출시 예정인 서비스의 홈 화면을 디자인해야 해서 Visily의 Text to Ui 기능을 적극 활용해 보기로 했습니다.
신규 기능이다 보니 어떻게 써야 할지 몰라 예시를 살펴보기로 했습니다. '/'를 입력하면 예시가 나옵니다. 첫 번째 예시인 'A home screen of a news website'를 클릭해 봅니다.
다음과 같은 홈 화면을 뽑아주었습니다. 다소 단조롭고 일부 수정이 필요한 부분도 보이지만 기본적으로 홈페이지로써 구색은 갖춘 모습입니다.
다른 예시를 시도해 봅니다. 'A job listing page for a career website with filters, sorting options, and a grid view of job openings'
한번 이미지를 뽑고 나면 같은 프롬프트로 다시 뽑아보겠냐고 묻기 때문에 두 번에 걸쳐 UI를 뽑아보았습니다. 앞서 뽑아준 것과 같은 레이아웃을 유지하면서 카드에 썸네일을 추가한 형태로 살짝 바뀐 UI를 뽑아주는 것을 알 수 있습니다.
이번에는 제가 원하는 홈 화면을 뽑기 위해 아래와 같이 프롬프트를 작성해 보았습니다. 현재 500자 글자 제한이 있어서 최대한 간추려 필요한 섹션들 위주로 작성했습니다.
Prompt
A landing page, dark theme, key color of #00C4B4
1)Header
2)Hero: Title of 'Fornerds is the new standard for developers to work' and CTA button below
3)Introducing main 3 pages of the service: World map page that users can explore projects, Quest details page that users can decide if he wants to solve the coding test, Solution page that users can view others' solution and leave comment
4)About service: Provide real projects, Growing coding skills, Connect with other developers
5)Footer
일단 요청한 대로 히어로 섹션에 텍스트를 알맞게 넣어줍니다. 히어로 하단의 작은 서브타이틀까지 알아서 내용을 넣어 줬습니다.
서비스의 다른 화면을 소개하는 섹션은 더 크게 소개되었으면 했지만 카드형 UI로 뽑혔습니다. 제한된 정보만 가지고 화면을 구성해야 하는 AI 입장에서는 어쩔 수 없는 부분이긴 할 것 같습니다. 또, 다크 모드로 뽑고 싶었지만 일부만 다크 모드로 뽑히는 점도 눈에 띕니다.
가이드 영상을 참고해 보니, 구체적으로 내가 그리고자 하는 화면이 머릿속에 있을 때보다 핵심 기능만 명확한 상태에서 프롬프트를 넣었을 때 활용도가 더 높은 듯합니다. 예를 들어 "반려동물이 하는 말을 해석해 주는 앱을 디자인해 줘"나 "여행 웹사이트의 홈페이지와 로그인 화면을 디자인해 줘"같은 프롬프트입니다.
다만 일일 퀄리티 높게 나올 수 있는 토큰이 한정되어 있는 걸까요? 위와 똑같은 프롬프트를 작성해 보았는데도 영상에서와 같이 다양한 UI는 잘 나오지 않았습니다.
홈 화면과 로그인 화면, 여행지 추천 화면을 따로 만들어주기를 바랐는데 한 화면에 이어서 붙여주었습니다. 그래도 헤더로 구분이 되긴 하지만 그 외에도 로그인과 회원 가입 버튼이 서로 붙어있는 등 바로 사용하기 어려운 모습을 보여줍니다.
갈릴레오 AI와 비교해보았을 때 아직까지 Visily는 완성도 측면에서 떨어지는 부분이 눈에 보입니다. 하지만 무료 서비스라는 강점과 함께 본인이 가지고 있는 아이디어를 UI로 어떻게 표현하면 좋을지 아이디어를 얻고, 사용자들의 일반적인 멘탈 모델을 파악하는데 있어서 도움이 될 것 같습니다.
