ChatGpt로 젠틀몬스터 UX/UI리디자인 하기 2탄
Genertive AI, 디자이너가 AI를 활용하는 현실적인 활용방법.
지난 글(https://brunch.co.kr/@31ef4a61fc4447c/22)에 이어 유저플로우와 페인포인트, 와이어프레임을 ChatGPT로 기획한 뒤 Midjourney로 간단한 UI를 구성해 봤습니다.
USERFLOW
젠틀몬스터 웹사이트의 전반적인 사용자 경험을 개선하고 올리비아와 같은 캘리포니아 주민들이 제품을 더 쉽게 찾고 구매할 수 있도록 인사이트를 요청했습니다. 생각해보지 못한 방향으로 아이디어 디벨롭에 용이했습니다. 물론 고쳐 써야 했지만...
질문 : Please make ui userflow based on this content.
다양한 플로우 중에서도 랜딩 페이지, 프로덕트 AR 페이지, 그리고 플래그쉽 360을 리디자인하기로 결정하였습니다. 하지만 이 아이디어는 누구나 생각할 수 있는 방법입니다. 아주 초보적인 생각이죠. 이런 방법에만 머물러 있다면, 저는 3류 디자이너로 남아있을 것입니다. "지피티 다시 일해주셔야겠어요"
WIREFRAME
유저플로우만으론 부족하여 각 페이지의 디테일과 와이어 프레임을 요청했습니다. 먼저 핵심 기능인 360도 가상공간으로 테스팅을 진행했죠.
질문 : Got an idea for a Flagship Store Tour? / Suggest wireframe layout for 'flagship store tour' on gentlemonster
아이디어 도출 과정에서 GPT의 능력을 많이 활용하게 되었습니다. 이 스토어의 디자인 철학과 역사를 제공하는 등의 특징과, 온라인 공간과는 달리 개인에게 맞춤화된 제품을 추천한다는 점 등이 도움이 되었습니다. (핵심 아이디어를 추가하고 와이어프레임을 요청하면 더 나은 결과를 예상할 수 있습니다.) 와이어프레임에서는 유저가 클릭 시 다른 지역/에어리어를 보여주는 기능, 디스플레이 뷰의 CTA, 공유 옵션에 대한 인사이트를 얻었습니다. 이러한 기능들이 이전에 조사한 문제점들에 대한 해결책으로 적절했습니다.
WORKFLOW TEST
본격적인 과정에 들어가기 앞서 MIDJOURNEY로 시안을 뽑아서 인간 디자이너인 저와 AI의 협업점을 찾고자 했습니다.
미드저니가 추천해 준 UI는 좋았지만 실제로 활용하기 어려웠습니다. 설계한 프로덕트의 복잡성 때문일 수도 있고 제 프롬프트가 잘못됐을 수도... 이미지 자료만 활용하여 피그마로 360도 스토어 화면을 스케치해봤습니다.
오늘은 본격적인 작업에 들어가기 전 가벼운 테스트를 진행했습니다. "ChatGPT와 MIDJOURNEY, 그리고 인간 디자이너의 워크플로우가 구축가능할까?"의 질문에 대한 답을 내려야 했거든요. 결론적으로 충분히 가능하다는 것입니다. 다음 시간엔 실제 이 방식으로 만든 포트폴리오를 가져오겠습니다. 테스트는 끝났습니다.
