UI 디자인을 위한 생성형 AI 서비스(2) - Uizard

Uizard는 생성형 AI 서비스로 명령어 입력 시 적절한 Ui를 제안해주는 서비스다.

주요 기능은 명령어 입력을 기반으로 한 와이어프레임, ui 제안 뿐만 아니라 ai를 이용해 내가 설계한 화면의 히트맵 예측과 같은 설계 시 참고할 만한 기능들을 다수 제공하고 있다.

 

서비스 접속 및 로그인 시 아래와 같은 홈 화면을 볼 수 있다. 피그마처럼 다른 사용자가 올려놓은 템플릿을 이용할 수 있다.

Uizard - 홈

 

주요 기능

1) 검색을 이용한 쉽고 빠른 ui 생성

Uizard 작업 화면

위의 빨간색으로 표시한 검색창에 원하는 화면을 작성하고 클릭하면 오른쪽 작업 영역에 뿌려진다.
검색 영역 밑에 보면 세분화된 검색 필터가 있어 이를 활용할 수 있다. (컴포넌트 생성 및 검색에도 유용해 보인다.)

 

2) 와이어프레임을 디자인된 샘플 화면으로 변경
여기서 좋은 점은 와이어프레임 모드일 경우 위와 같이 손으로 그린 것과 같은 형태로 보이지만, 표시된 아이콘을 통해 목업 모드로 변경 시 디자인된 샘플 화면으로 볼 수 있다. 

샘플 화면은 ai를 통해 자동으로 작업된 화면이다. 버튼 클릭만으로 손쉽게 적용하여 볼 수 있다.

목업 모드 화면

 

3) 히트맵 예측

보통 A/B테스트, 사용자 인터뷰, 블랙 테스트 등을 통해 화면의 실제 사용성을 예측하여 개선 혹은 수정을 진행한다. 내가 업무하는 환경이 해당 구체적인 테스트들을 실행할 수 없는 환경이거나 시간적 여유가 없다면 이 기능을 활용해 보는 것도 좋을 것 같다.

설계한 화면에 대해 사용자가 가장 많이 보게 될 영역을 측정하는 히트맵을 제시하는 이 기능은 인공지능을 기반으로 한 데이터이기 때문에 참고 정도로만 활용하는 것이 좋을 것 같다.

위의 목업을 기준으로 히트맵 기능을 사용한 결과는 아래와 같다.

Focus Predictor 버튼

화면 상단에 위치한 Focus Predictor를 클릭하면

인공지능이 예측한 히트맵

붉은색이 강할수록 사용자의 시선이 어디로 많이 향하는지 예측할 수 있다.
실제 사용자들의 데이터를 기준으로 한 것이 아니기 때문에 어디까지나 참고로 사용하는 것이 좋을 것 같다.

 

4) 기타 기능

그 외 부가적인 기능들을 피그마에서도 익숙한 기능들이었다.

기타 기능

피그마와 같이 컴포넌트별 편집, 코멘트, 인터랙션 등 여러 부가 기능이 있다.
사용해 보면 피그마보다는 사용성이 떨어지고 세부적인 디자인 기능은 없지만 특화된 인공지능 기능과 기본적인 UI/UX 디자인 작업을 위한 기능들이 있어 충분히 활용할만 하다.

 

가격

최초 가입 시 무료 플랜으로도 충분히 사용할 수 있지만 유료 플랜도 아래와 같이 세분화되어 제공하고 있다.

Uizard 가격

 

 

 

피그마의 경우는 설계와 디자인에 특화된 툴이지만 Uizard의 경우는 설계 시 참고할 수 있는 아이디어 및 설계에 대한 시각화 및 히트맵 등을 쉽고 간편하게 확인할 수 있다.

인공지능 기능을 무료로 다양하게 활용해 볼 수 있는 서비스들이 이 외에도 많기 때문에 본인 업무에 도움이 되는 인공지능 서비스를 사용해 보는 것이 좋을 것 같다.