'Uizard' 인공지능으로 서비스 조사하기
Uizard연습 + 리서치
텍스트만 입력하면 자동으로 UI를 만들어주는 생성형 AI 서비스 'UI Zard' 간단한 키워드 기반 프롬프팅을 진행하면 다음과 같이 디자인을 도출해 준다. 해당 이미지는 구글 머티리얼 디자인 스타일을 토대로 제작된 템플릿으로, 내가 만들고 싶은 서비스를 어떤 느낌이 나도록 하고 싶은지 키워드만 적으면 간단하게 디자인을 해준다.
하지만, Zard에서 만들어진 파일을 피그마 파일로 불러오는 것은 불가능하고, Zard 내에서 디자인을 수정하고, 디자인의 완성도를 높이기에는 UI, 기타 기능들이 피그마에 비하면 압도적으로 불편하여, 디자이너가 사용하기에는 조금 힘들겠다 느꼈다. 하지만 'Focus Predictor'라는 기능을 써보고 앞으로 이 AI를 어떻게 사용할지 감을 잡을 수 있었다.
지금부터 해당 기능을 어떻게 사용할 수 있을지에 대한 내용을 소개해보려 한다.
가정을 해보자
나는 음악·오디오 스트리밍 관련 서비스를 개발해야 하는 신입 디자이너다
디자인을 진행하기 앞서, 데스크 리서치 과정을 통해 경쟁·유사 서비스 서칭을 진행하기로 팀과 합의를 했다. 우리 팀이 선정한 서비스는 다음과 같다.
오디오와 음악을 스트리밍 해주는 우리의 경쟁(유사) 서비스들은 얼핏 보면 비슷하게 디자인이 구성되어 있지만, 서비스의 특성과 사용자의 행동 및 니즈에 따라 폰트, 레이아웃, 컴포넌트 등의 차이를 보이고 있다.
우리 팀은 직접 해당 서비스들을 사용해 보면서 서비스의 플로우를 경험해 보고 차별화 포인트를 분석하며 사용자가 이 서비스를 사용할 만한 특징이 있는지 리서치를 진행하기로 했다.
여기서 나는 최근에 알게 된 UI Zard의 'Focus Predictor' 기능을 활용해 단순 리서치로 얻기 힘든 자료와 더 많은 정보를 가져갈 수 있을 거라는 생각을 하게 된다.
멜론의 특정 페이지 스크린샷을 찍은 후 UI Zard에 업로드하고 'Focus Predictor' 버튼을 누르면 인공지능이 히트맵을 예측하여 우리에게 시각적인 이미지 정보를 제공해 준다. 이를 통해 사용자가 해당 스크린에 들어왔을 때 어떤 요소, 그래픽에 시선이 가장 많이 향하는지 자료를 수집할 수 있다.
멜론 서비스 외에도 다른 오디오 스트리밍 서비스 히트맵을 분석해 봤다. 확실히 음악 서비스와 다르게 앨범커버나 가사가 보여야 하는 것이 아니다 보니, 상단에 큰 헤드라인과 Fill 아이콘 버튼을 활용해 조금 더 사용자가 다른 부분에서 상호작용하기 쉽게 앱서비스를 개발한 것을 밴치마킹할 수 있었다.
(스포티파이는 무료 이용제 개수 제한으로 진행하지 못했습니다.)
그렇게 내가 조사한 서비스와 자료들을 팀장님에게 보내드리니, 어떻게 이런 조사를 해왔냐며 칭찬을 받았다.
하지만... 실장님이 이건 명확한 데이터가 아닌 AI가 분석한 건데 신뢰할 수 있겠냐 하면서 나의 해당 자료는 보류하기로 했다.
-이상 망상 놀이 끝-
실제로 망상놀이 중 실장님의 말처럼 해당 자료를 참고해 사용자의 행동 메커니즘을 정의 내릴 수 없지만, 어느 정도 길잡이 역할을 해서 레이아웃이나, 컴포넌트의 종류를 어떻게 사용해야겠다 등의 가설을 세울 수 있을 거 같다. 또 해당 자료가 메인 가설이 되어서 검증하기 위해 사용자 인터뷰까지도 이어질 수 있을만한 자료라고 생각한다.
단순히 UI만을 그려주는 인공지능이라 어떻게 활용해야 할지 감을 못 잡고 있었는데, 리서치 단계에서도 충분히 사용할 수 있고, 또 피그마로 디자인한 나의 작업물이 히트맵으로 보이면 어떨지에 대해 확인해 보고 디벨롭까지 시킬 수 있을 거라는 생각이 든다.
다음번에는 A4지에 그린 Lo-Fi 와이어 프레임을 UIUX 디자인으로 만드는 기능을 소개해보려 한다.
직접 해본 결과해당 기능은 간단한 그림을 매우 잘 인식한다. 물결표는 텍스트, 박스는 텍스트 인풋, 아이콘 인식 등 아직까진 해당 기능을 어떻게 효율적으로 사용할 수 있을지는 모르겠지만, 생각이 나면 바로 글로 작성하고 실제로도 많이 사용해 보면서 토대되지 않는 디자이너가 되도록 노력해 보겠다.
