Chat GPT로 스낵바 인터랙션 가이드 제작하기
프로덕트 디자인에 생성형 AI 활용하기
완성도 높은 프로덕트는 단순한 UI 구성뿐만 아니라, UI의 동작 표현과 이를 감싸는 브랜딩 요소 등 다양한 감각적 요소들이 조화를 이루어야 합니다. 최근 개발 속도를 중시하는 추세 속에서 인터랙션은 부수적인 요소로 취급되기 쉽지만, 제품이 사용자에게 좋은 인상을 남기기 위해서는 일정 수준의 감각적 요소도 반드시 충족되어야 한다는 점을 간과할 수 없습니다.
인터랙션과 모션 등 동작 요소는 설계가 잘 이루어질수록 제품의 만족도와 사용성을 크게 향상시킵니다. 이는 디지털 프로덕트뿐 아니라 실제 제품에서도 동일하게 적용됩니다. 예를 들어, 엘리베이터 버튼을 눌렀을 때 아무런 반응이 없다면 사용자는 혼란을 느끼고 고장났다고 느낄 수 있습니다.
https://realty.chosun.com/site/data/html_dir/2022/01/20/2022012002018.html간략하게 도널드 노먼이 정의한 행동유도성인 ‘어포던스’를 참고하면, 사람은 과거의 경험을 통해 사물이 어떤 작동을 할 것인가를 이미 지각하고 기대합니다. 사물이 기대한 바와 다른 행동을 하게 된다면, 잘못된 것으로 인지하며 원하는 행동이 이루어지지 않았을 것이라 생각하게 됩니다. 그래서 세상에 이미 존재하는 보편적인 사물의 동작방식을 따르거나 이해가능할 수준을 유지하는 것은 사용성에 큰 영향을 끼칩니다.
https://post.naver.com/viewer/postView.nhn?volumeNo=12852723&memberNo=34719116디지털 프로덕트는 평면적인 공간에서 제공되기 때문에, 실제 세계의 동작을 모방할수록 현실감이 증대되고 사용자가 인지하기 쉬워집니다. 버튼을 눌렀을 때 눌렸다는 느낌이나, 눌렀다가 원래 위치로 돌아오는 인상이 전달된다면 사용자는 보다 명확하게 상황을 이해할 수 있습니다. 대표적으로 CSS의 Hover, Active, Focus와 같은 인터랙션은 또 하나의 시각적 언어로 작용하여 사용자에게 추가 정보를 제공하여 인지를 돕습니다.
우리는 시각, 청각 등 다양한 감각 기관을 통해 정보를 수집하고, 이를 뇌에서 분석하여 판단합니다. 연속된 정보의 흐름은 시간 정보를 구성하며, 인터랙션은 이러한 시간적 요소를 기반으로 합니다. 평면 정보 외에 시간 정보를 기반으로 하는 동적인 요소가 함께 전달될 때, 사용자는 보다 쉽게 정보를 인지할 수 있습니다.
특히 시스템이 사용자에게 전달하는 경고나 안내와 같은 알림에서는 인터랙션이 필수적입니다. 사용자는 움직이는 요소에 민감하게 반응하기 때문에, 동적 표현을 통해 정보를 전달하면 인지 효과가 크게 높아집니다. 초기 인지 후 정보의 중요도에 따라 해당 요소가 사라지거나 유지될 수 있도록 하는 것이 바람직합니다.
주의해야 할 점은 과도한 인터랙션이 오히려 이해를 방해할 수 있다는 점입니다. 모든 정보는 사용자가 쉽게 이해할 수 있도록 적절히 함축되어야 하고, 필요한 정보량을 신중히 고려하여 적절한 전달 수단을 선택하는 것이 중요합니다. 즉, 무작정 많은 정보를 제공하기보다는 핵심적인 정보만을 선별하고, 부수적인 정보는 특정 상황에서만 노출하는 방식이 효과적입니다.
이만큼 인터렉션은 프로덕트에 매우 중요하며 특히, 의료 서비스와 같이 정보 누락이나 오류가 생명에 직결될 수 있는 분야에서는 적절한 정보 전달 수단 선택이 더욱 중요합니다. 그래서 오늘은 제가 담당하는 프로덕트에 사용자가 메세지를 명확하게 인지할 수 있도록 스낵바 인터렉션을 추가하며 인터렉션 가이드를 만들었던 경험을 소개하려 합니다.
왜 인터렉션이 필요하였나
시스템의 메세지를 전달하기 위해 모달과 스낵바 두가지 컴포넌트를 사용하고 있었습니다.
스낵바 : 한 줄 정도의 짧은 메시지를 전달해야 할 때 사용
모달 : 긴 메시지와 사용자 의사결정이 필요한 경우 사용
두 컴포넌트 모두 빈 공간에 갑자기 나타났다 사라지는 방식으로 구현되어 있었고, 모달은 크기와 중앙 배치 덕분에 인터랙션이 없어도 사용자에게 명확하게 전달되었습니다. 그러나 스낵바는 작은 크기와 한쪽에 몰려 있어 사용자가 쉽게 놓칠 위험이 있었습니다. 이러한 문제점을 인식하고 개선안을 찾기 위해 여러 시도를 해보았습니다.
우선 인터랙션 요소 없이 평면적인 디자인으로 정보를 전달하려고 시도했습니다. 두꺼운 그림자와 테두리 선을 추가하여 시각적 강조를 주었으나, 이 방법만으로는 부족해 배경 색상을 어두운 계열로 변경했습니다. 서비스 전체가 밝은 톤으로 디자인되어 있었기 때문에, 어두운 스낵바가 더욱 두드러졌습니다. 하지만 Figma나 실제 개발된 화면에서는 스낵바가 비교적 인지되었으나, 제품을 처음부터 끝까지 사용하는 과정에서는 다른 요소와 혼재되어 인지하기 어려운 문제가 발생했습니다.
정적인 스낵바 초안이 문제를 해결하기 위해 “무언가 살아 움직여 나를 봐주세요!”라는 인상을 주고자 했습니다. 단순히 보이는 것에 그치지 않고 사용자에게 추가 정보를 전달할 수 있는 수단이 필요했기에, CSS를 활용해 인터랙션 요소를 추가하기로 결정했습니다. Chat GPT는 디자인 업무에 혁신적인 변화를 가져왔습니다. 부족한 Figma의 인터랙션 기능을 보완하기 위해 동작하는 HTML/CSS 페이지를 제작하여 프론트엔드 팀에게 상세한 동작 가이드를 제공할 수 있게 되었기 때문입니다. 이번 스낵바를 비롯해 Zoom 동작 방식이나 Slider 표현 방식 등 여러 요소에 대해 Chat GPT를 활용했고, 그 결과 실제로 동작하는 컴포넌트를 제작하는 데 큰 도움이 되었습니다. 비록 Chat GPT가 제품 전체를 완벽하게 만들어주지는 않지만, 부분적으로 활용할 때는 충분히 신뢰할 만한 결과를 얻을 수 있습니다.
Chat GPT를 사용하여 인터렉션 만들기
프로토타입 제작 과정에서는 먼저 Figma에서 복사 가능한 CSS 속성을 추출해 Chat GPT에 입력하고 사용 가능한 코드로 변환해 달라고 요청했습니다. 그러나 Figma에서 제공하는 CSS 코드는 제한적인 내용만 포함되어 있어 원하는 컴포넌트 모양을 완성하기에 부족했습니다.
이에 직접 제작한 스낵바 이미지를 첨부하여 다시 요청했고, 의도한 형태가 나오지 않자 여러 차례 보정 프롬프트를 입력하면서 Html Playground에서 코드를 확인, 수정해 나갔습니다.
여러 차례 시행착오를 겪었지만, 그래도 만족할 만한 스낵바 형태와 추가한 인터랙션 요소를 구현할 수 있었고, 트리거를 포함한 인터랙션 가이드 문서를 만들 수 있었습니다.
직접 확인 가능한 프로토타입 예시
https://2279565.playcode.io/
이렇게 완성된 문서를 바탕으로 프론트엔드 팀과 소통하며 구현에 착수했습니다. 처음 인터랙션이 필요하다는 문제를 인식한 후, 프론트엔드 측에서도 동작 가이드를 요청한 바 있어 Figma 프로토타입으로는 원하는 동작을 구현하기 어렵다는 판단 하에 HTML/CSS 활용 방안을 선택하게 되었습니다. 물론 처음부터 원하는 결과가 완벽하게 나오지는 않았고, 보정 작업과 코드 수정이 여러 번 필요했지만 점차 적절한 수준의 프로토타입으로 발전해나갈 수 있었습니다. 이 과정은 마치 정성을 들여 공예품을 완성하는 느낌이었습니다.
간단한 실험 결과, 정적인 안내보다 동적인 안내가 사용자의 인지에 훨씬 효과적임을 확인할 수 있었습니다. 동적인 안내는 안내 문구의 포착을 도와주며, 필요한 정보를 효과적으로 전달하여 전체적인 만족도를 높이는 데 기여했습니다.
UX/UI 및 제품 디자이너가 Web과 App의 구조를 이해하는 것은 큰 장점이 됩니다. 이번 프로토타입 제작도 기초적인 HTML/CSS 지식 덕분에 가능했으며, 이는 다른 프로토타입 툴을 배우는 것과 유사한 학습 난이도를 가진다고 생각합니다. 따라서 다른 디자이너 분들도 이러한 방식을 적극 활용해보길 권합니다. 현재는 간단한 인터랙션 표현에 그치지만, 생성형 AI의 발전 속도를 고려하면 머지않아 제품의 일부 또는 전체 기능을 AI가 제작할 수 있을 것으로 기대됩니다. 그 전에 미리 사용법을 익히고 연습해두면, 그 시점에 누구보다 빠르게 실행해볼 수 있을 것입니다.
긴 글 읽어주셔서 감사합니다.
참고자료
