GPT로 동작하는 디자인 프로토타입 제작하기
Figma보다 좋은 프로토타입 툴 사용기
생성형 AI의 시대가 다가왔습니다. 업무를 진행하는데 생성형 AI가 필수 도구가 될 것이고, UX/UI 분야에서도 마찬가지 일 것입니다. 제가 일하고 있는 회사에서도 GPT와 Copilot을 적극적으로 사용중이며, 사내 이사분들께서도 생성형 AI를 활용하여 생산성 향상을 적극적으로 권장하고 계십니다. 앞으로 AI가 발전할 수록 더사용할 수 있는 디자이너와 아닌 사람간의 격차가 엄청나게 벌어지겠지요. OpenAI의 GPT는 2023년 기준 월간 1억 명 이상의 활성 사용자를 기록하고 있습니다. 아직 GPT 도입기임에도 불구하고 엄청난 사용자를 기록하는걸 보면 대단한 기술이라 생각합니다. 잠깐 반짝이고 큰 가치를 만들지 못하고 있는 3D printing과 같은 기술에 비해 생성형 AI는 그 가치가 증명되는 것 같습니다.
인터넷에 GPT 활용 방법등을 검색하면 다양한 아티클을 찾아볼 수 있습니다. 그런 글들에서 GPT를 UX/UI 디자인에서 다양한 방식으로 활용하는 예시를 찾아보면 이런 예를 찾을 수 있습니다.
사용자 조사: 사용자 인터뷰 대본 작성 및 설문지 작성
아이디어 발상: 디자인 아이디어 브레인스토밍 및 컨셉 생성
콘텐츠 생성: 사용자 지침서, FAQ, 도움말 문서 작성
프로토타입 제작: 초기 디자인 프로토타입 생성 및 사용자 피드백 반영
피드백 분석: 사용자 피드백을 분석하여 개선점 도출
디자인 과정에서 GPT는 반복적인 작업을 자동화하여 디자이너들이 더 창의적이고 전략적인 작업에 집중할 수 있도록 도와줍니다. 또한, GPT는 실시간으로 디자인 피드백을 제공하고, 빠른 프로토타입 제작을 지원하며, 사용자가 원하는 기능과 디자인 요소를 신속하게 반영할 수 있도록 합니다. 특히, AI 도구를 활용한 디자인 프로세스는 디자인 품질을 크게 향상시킬 수 있는 잠재력을 가지고 있습니다. 그러나 아직 AI가 완벽하지 않기 때문에 GPT에게 올바른 명령을 주입하고 생성해준 컨텐츠의 진실성, 정보 퀄리티 등에 대한 판별은 오롯이 사용자가 책임져야 합니다. 이는 사용자의 지적 활동의 중요성이 더욱 강조되며, 포토샵 다루는 법과 같은 단순한 기술보다는 디렉팅 적 측면의 능력을 키워야 한다는 것을 알 수 있습니다.
이번 글에서는 제가 현업에서 GPT를 활용해 실제 프로토타입을 만든 경험을 공유하고자 합니다. 기초적인 HTML, CSS 지식만 가진 상태로 GPT가 생성해준 코드들을 이해, 내가 원하는 것을 만들도록 명령하는 과정은 다소 답답한 면이 있었지만, 그와 함께 굉장히 신선한 경험이었습니다. GPT 없이 스스로 학습해서 코드를 작성하는 것보다 이 '학습'에 드는 시간이 비약적으로 감소하며 생기는 생산성 향상은 진지하게 앞으로도 프로젝트에 사용 가능할 것 같은 가능성을 보게 하였습니다. 기획 단계부터 핸드오프까지 어떠한 과정과 배움이 있었는지 이야기 해보겠습니다.
기능 기획의 시작
제가 만들어가고 있는 서비스는 디지털 뷰어 서비스 입니다. 아날로그 현미경을 대체하는 디지털 현미경으로 최근 많은 사용자가 슬라이드 이미지를 확대하고 축소하는 Zoom 작동 방식에 혼란을 일으키고 있었죠. 기존 방식은 현 배율에 1.2배로 줌 하는 방식으로 동작하여 사용자가 익숙하지 않은 불편을 초래했고, 정확한 배율 조정이 어려웠습니다. 따라서 사용자에게 더 직관적이고 효율적인 Zoom 관련 정책을 수립하여야 한다 판단했습니다.
프로젝트에서 달성해야 하는 주요 목표
성능 최적화: 제공하는 줌 배율을 특정하여 사용자가 원활하게 확대/축소 기능을 사용할 수 있도록 성능을 개선했습니다.
현미경과의 유사성: 현미경에서 사용하는 배율과 디지털 배율을 유사하게 만들어 사용자 경험을 향상시켰습니다.
타사 시스템과의 일치: 타사 디지털 시스템의 줌 배율 정책과 인터랙션 정책을 같게 하여, 사용자가 우리 제품을 사용할 때 혼란을 줄였습니다.
GPT를 활용한 프로토타입 제작
모든 기획과 디자인을 마친 후, 저는 GPT를 활용하여 프로토타입을 만들었습니다. 사용한 첫 번째 프롬프트는 다음과 같습니다.
"우리는 디지털 소프트웨어를 만들고 있어. 디지털 뷰어에서 줌 작동방식을 자유롭게 줌인 줌아웃 하는 방식에서 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 40 배율만 제공하고 그 안에서 동작하게 바꾸려고 해. 이에 따라 영향을 받을 UI 요소와 줌 슬라이더 UIUX 개선안을 html로 작성해줘."
GPT는 프롬프트를 인식해 가장 기초적인 UI 코드를 제안해주었습니다. HTML playground 사용하여 Html 문서를 열어보니 줌 배율을 조정할 수 있는 기본 UI가 생성된 것을 확인할 수 있었습니다. 그러나 이정도로는 아직 많이 부족했죠. 그래서 추가 프롬프트를 입력하였습니다.
"이미지가 300ms 걸쳐 천천히 줌 아웃되는 html 페이지를 만들어줘"
이제 이미지가 추가되었고, 줌이 작동되게 되었습니다. 사람은 자신이 생각하고 있는 아이디어를 한번에 정확히 설명하기 어렵죠. GPT에서도 마찬가지입니다. 제가 어떤 것을 입력하면 부족한 것을 발견하고 또 다른 명령을 내려서 계속 내 아이디어에 근접하게 만들어가야 합니다. 공예를 하는 것 같은 느낌이 들지요. 이 과정에서 GPT는 가끔 거짓말을 하거나 이전에 주었던 내용, 내가 입력했던 내용들을 무시하거나 왜곡하는 일도 발생합니다. 이럴 때 오류를 찾아내고 내가 원하는 방향으로 갈 수 있도록 프롬프트를 조정하는 작업이 필요하죠. 그래서 추가로 많은 프롬프트들을 입력하였습니다.
"화면 안에서 이미지 패닝이 가능하게 해줘"
"줌 슬라이더가 버튼의 집합이고, 왼쪽 하단에 위치하게 해줘. 각 버튼의 크기는 48px x 48px이야."
이 조정작업에 꽤나 시간을 소모하였습니다. 그러나 html, css, javascript를 학습하고 내가 처음부터 만들어가는 것에 비하면 비교 불가할 정도로 빠르게 원하는 것을 만들 수 있었죠. 또한, 내 생각과 같은 결과물을 만들고 싶다면 '48px', 'button을 사용해줘' 와 같이 명확한 프롬프트가 도움이 되었습니다.
https://codepen.io/Jinhyuk-Kwon/pen/RwOzLdo에서 프로토타입을 확인할 수 있습니다.
꽤나 만족스러운 Zoom slider prototype을 만들 수 있었습니다. Zoom slider를 통해 사용자는 이미지를 확대하거나 축소할 수 있고, 확대된 상태에서도 드래그 앤 드롭으로 패닝 기능을 통해 원하는 부분을 탐색할 수 있었습니다. 마우스 휠으로 줌을 동작할 수 있었죠. 처음 사용자의 요구를 충족시키는 UX 개선안 내용, 프로젝트 목표에 부합한 '작동하는 UI'가 만들어졌습니다.
핸드오프 과정
프로토타입이 완성된 후, 개발자 분들에게 실제 제품에 이 기능을 구현하기 위한 핸드오프 과정을 진행했습니다. 저는 기획서와 함께 위 링크를 개발자에게 전달했습니다. 개발자분들은 웹페이지를 보면서 Figma만 보는 것 보다 명확한 가이드라인과 필요한 코드를 기반으로 효율적으로 작업을 진행할 수 있었습니다.
GPT가 만능은 아니었습니다. 제가 작성한 코드는 회사 내부의 기술스텍과 일치하지 않아 개발 구현이 어려운 몇가지 사례들이 존재하였으며, 프로토타입에서 고려하지 못한 몇가지 UX 실수들도 발견되었습니다. 그러나 이 시도로 인해 함께 일하는 개발자 동려들에게 보다 명확한 이해가 가능했다, 도움이 된다는 피드백을 받을 수 있었습니다. Figma로 프로토타입 제작하는 것 보다 편하기도 했구요.
이 일련의 과정은 단순히 시간을 절약하는 것을 넘어, 더 나은 협업 사용자 경험을 제공하는 데 큰 기여를 했습니다. 개발자와 협업, 핸드오프 또한 신경써야할 사용자 경험 중 하나입니다. GPT의 코드를 이해하고 수정하는 과정을 통해 개발자와 디자이너 간에 기술적인 역량을 한층 더 발전시킬 수 있었습니다. '왜 이 디자인을 적용하기 힘든지'와 같은 대화를 할 때 직접 보여주고, 해보고 하는게 훨씬 이해가 잘 되니까요.
그리고 빠른 시간에 작동하는 프로토타입을 제작하여 개발자와 소통한 경험과, GPT가 만들어주는 코드를 어느 정도 이해할 수 있는 기초 지식이 있어야 올바른 프로토타입을 만들 수 있다는 사실, 기획 내용이나 디자인 기능 정책 중 빠지거나 잘못된 부분을 잘 캐치할 수 있다는 점 이런 부분들에 생각도 할 수 있었습니다. 앞으로도 GPT 적극 활용하여 디자인을 해 나갈 것이기에, 더 열심히 공부해봐야겠습니다.
같은 분야에서 고생하고 있는 많은 분들에게 도움이 되었으면 좋겠습니다. 읽어주셔서 감사합니다.
