사용자 인터페이스 생성형 AI, Uizard

DALL·E는 이제 우리에게 너무 익숙한 이미지 생성형 AI이다. 프롬프트를 통해 텍스트를 입력하면 AI가 자연어를 이해하여 이미지를 생성한다. DALL·E 뿐만 아니라 다양한 생성형 AI 서비스가 출시되어 누구든 쉽게 접근하여 사용할 수 있게 되었다.

그중에서도 오늘은 웹 디자이너들이 유용하게 사용할 수 있는 AI를 소개하려고 한다.

Uizard _ UI Design

< Uizard.io >

사용자 인터페이스를 디자인하는 일은 간단해 보이지만 고민해야 할 점들이 매우 많다. 예를 들어 모바일 쇼핑 웹 사이트를 디자인하려고 하는데 랜딩 페이지에 어떤 콘텐츠를 넣어야 할지부터 시작하여 구매 버튼은 어떤 디자인과 어떤 크기로 어디에 배치해야 할지, 레이아웃부터 컴포넌트까지 모두 디자이너의 고민을 거친다.

Uizard는 덴마크 스타트업에서 제작한 사용자 인터페이스(UI)를 생성하는 AI 디자인 도구다. 프롬프트 입력을 통해 인터페이스를 생성해 주는 기능, 손으로 그린 와이어프레임 스케치를 스캔하여 인터페이스로 만들어주는 기능, 이미 완성된 인터페이스 스크린샷을 스캔 후 수정 가능한 파일로 만들어주는 기능 등 기존 디자인 툴에서 경험해 보지 못한 기능들을 다양하게 제공하고 있다.

1) 프롬프트를 통한 인터페이스 생성 기능

<직접 사용해 본 결과>

다시 돌아가 모바일 쇼핑 웹사이트를 디자인한다고 가정해 보자. 이때 Uizard 프롬프트에 "A landing page that sells the product" 문구를 입력하면 한 번에 5개의 디자인 시안을 생성해 준다. 이 중에서 만들고자 하는 디자인에 가까운 시안을 골라 필요에 따라 수정하여서 사용하면 된다.

2) 와이어프레임 스캔 기능

<직접 사용해 본 결과>

디자인 또는 개발 단계 초기에는 페이퍼 프로토타입을 통해 서로 소통하는 경우가 있다. 머릿속 아이디어를 와이어프레임으로 그려 표현할 때 많이 쓰이곤 한다. 이 기능은 손으로 그린 화면 와이어프레임을 업로드하면 AI가 자동으로 스캔하여 UI 화면으로 만들어준다. 모바일 쇼핑 웹사이트의 와이어프레임을 그려 직접 사용해 본 결과 간단한 스케치는 충분히 인식하여 반영된다. 하지만 스케치를 100% 반영하는 것은 한계가 있고 또 아이콘의 통일성, 폰트의 간격 등 디테일한 부분은 다시 직접 수정해야 하는 부분들이다.

3) 스크린샷 스캔 기능

<직접 사용해 본 결과>

모바일 무신사 웹사이트의 페이지를 캡처하여 Uizard에 업로드하여 스캔해 보았다. 처음 사용했을 때 거의 비슷하게 스캔하는 듯 싶었지만, 아직 폰트 스타일, 크기 또는 컬러를 똑같이 스캔하여 만드는 데 한계가 있다. 새로운 화면을 디자인할 때 레퍼런스 참고 또는 활용할 때 사용하면 좋은 기능처럼 보이긴 하나 아직 활용하기에는 부족한 점들이 많아 보인다.

그 외 'Focus Predictor' 기능도 제공하고 있다. 레퍼런스 화면 또는 내가 디자인한 화면을 업로드하여 'Focus Predictor' 버튼을 누르면 아래 이미지처럼 화면 위에 히트맵을 그려준다. 화면 중 어떤 요소에 사용자의 시선이 향하는지 로그를 예측하여 주기 때문에 이 기능을 잘 활용하여 인터페이스를 디자인할 때 중요한 콘텐츠 디자인이 강조되었는지 미리 테스트할 수 있다. 혹은 디자인 전에 레퍼런스 화면을 활용해 사용자가 어떤 콘텐츠에 시선이 가는지를 미리 알 수 있다.

<직접 사용해 본 결과>

Uizard 서비스를 알아보기 위해 직접 제공하는 기능들을 사용해 본 결과 사용자 인터페이스 생성형 인공지능이라는 점에서는 새롭게 느껴졌다. 페이퍼 프로토타입을 스캔하여 파일로 변환해 주는 서비스로 시작하여 지금은 프롬프트 입력 기능과 스크린샷 스캔하는 기능을 제공하면서 누구나 쉽게 UI를 만들 수 있는 인공지능 어시스턴트 역할을 제공한다.

하지만 아직 본격적인 사용자 인터페이스 디자인에 활용하기에는 많이 개선되어야 할 한계점들이 보인다. Uizard 내에서 디테일한 디자인 수정까지는 어려움이 있고 Adobe XD, Figma, Zeplin과 연동되어 화면을 가져올 수 있지만 Uizard에서 생성한 화면은 아직 XD나 Figma로 내보낼 수 없다.

그럼에도 디자인 초기 아이디어 발산, 레퍼런스 리서치 단계에서는 활용해볼만한 것 같다.

다음에는 Figma에서 제공하는 AI 어시스턴트 Genius에 대해 소개해보려고 한다.