스터디 신청 계기
인터랙션 디자인에 대한 갈증은 항상 있었다. 토스나 디스코드를 사용하면서 "와, 나도 이런 거 해보고 싶다"고 생각하지 않는 프로덕트 디자이너가 어디 있을까. 또 토스나 듀오링고 등 디자이너 채용 공고를 보면 인터랙션을 굉장히 중요시하는데, 그런 부분들을 보고 앞으로의 디자이너가 가야 할 방향 중 하나가 '인터랙션' 이라고 생각했다.
다만 회사 업무, 사이드 프로젝트, 건강관리 등 다른 우선순위에 밀려 항상 뒤로 밀려 있었다. 그러던 중 keem님의 스터디 모집 글을 보고, 이건 너무 좋은 기회다 싶어 바로 신청했다. 스터디는 3주 동안, 일요일마다 5시간씩 만나 원하는 작업을 진행하고, 작업에 대해 자유롭게 이야기하고 피드백을 주고받는 방식으로 운영됐다.
툴은 Framer를 쓰게 되었는데, 처음에 생각해왔던 rive나 lottie는 내가 생각해온 인터랙션과 약간 타겟이 달랐고, 참가자 분들이 Framer를 많이 아셔서 배우기 쉬울 것 같아 Framer를 골랐다.
해결하려고 한 문제
현재 진행중인 사이드프로젝트의 핵심 기능은 '중고거래'인데, 그 중 탐색과 온보딩 경험을 좀 더 몰입감 있게 만들고 싶었다.
1. 상품을 "좋아요"했을 때 명확하고 재밌는 피드백 주기
"좋아요"의 하트 인터랙션은 타 거래 플랫폼에서도 가장 자주 만나는 인터랙션이었고, 감정적인 피드백을 직접 구현해보고 싶었다. Heart Animation 레퍼런스 를 참고했다.
구글에 검색해보니 좋은 리소스가 이미 존재해서 ◠‿◠ 제작자님께 감사해하며 copy & paste하여 적용했다. 다만 뜻밖의 문제가 생겼는데, 레이어 구조 때문에 바깥의 구슬들이 보이지 않았다.
스터디 참가자인 진용님께 여쭈어봤는데 (감사합니다..), 구조를 수정하면 되는 문제였다. 피그마->프레이머 copy&paste가 완전하지는 않아서 거기서 꼬인 모양이었다. 부모 레이어의 overflow를 visible로 변경해서 해결할 수 있었다.
하트 애니메이션만으로는 피드백이 명확하지 않은 것 같아 토스트 메시지도 추가했다. 컴포넌트 안에서 해결하려고 엄청 헤맸는데, 페이지/레이어 단에서 처리해야 함을 깨달았다. 오버레이를 적용해서 임시로 해결했다.
2. 온보딩에서 매끄러운 카테고리 선택 경험 주기
온보딩에서 카테고리 선택은 필수가 아니지만, 제대로 입력하면 사용자 경험에 큰 영향을 주는 부분이라, 자연스럽게 유도하고 싶었다. 처음엔 디자인 화면에서 인터랙션을 추가하려고 시도했는데, 세부적인 요소가 많아 코드 기반 컴포넌트로 전환했다.
1. chatGPT에 "framer에서 다중 선택 가능한 드롭다운 select 구현" 등 맥락 + 요구사항 제시
2. Cursor에서 세부 사항 수정 및 추가 요청
3. 1-2를 반복
ChatGPT, Cursor의 도움을 받았다. "프레이머에 맞는 코딩"은 chatGPT가 잘 하고, 그걸 수정하는건 Cursor가 잘하는 것 같아서 번갈아 사용했다. 다만 세부적인 부분들을 수정하려면 React/JS에 대한 지식을 더 쌓을 필요가 있어보인다.
3. 온보딩 완료 후 소소한 재미 전달하기
온보딩은 필수지만 지루할 수밖에 없는 과정이다. 사용자에게 이 과정이 끝났을 때 "수고했다"는 감정을 주고 싶어 마지막 페이지에 Confetti 애니메이션을 추가했다.
어김없이 새로운 문제가 생겼는데, Confetti는 잘 작동하지만 버튼이 눌리지 않았다. 컨페티 리소스의 영역이 텍스트/버튼을 덮기 때문이었다. 임시로 버튼을 영역 바깥으로 빼고, absolute로 위치 조정해 해결했다.
결과물
위에 적은 내용들 이외에도 인터랙션을 조금씩 넣었다. 버튼을 눌렀을 때의 느낌이나, 페이지 전환 등..!
작업 공유 & 강의
작업 공유
스터디다보니 다른 분들의 작업도 함께 보고, 문제 해결 과정을 함께 나눌 수 있었다. 나는 평소에 "실용적이고 써먹을 수 있는" 디자인에 집중하는 편인데, 다른 분들은 실험적이거나 창의적인 인터랙션을 많이 시도하셔서 자극을 많이 받았다.
강의
이미 인터랙션에 대한 지식이 많으셨던 keem님, 진용님, 먹바님께서는 참가자분들을 위해 따로 시간을 내서 강의도 해주셨다. 이 부분은 어디까지 공유 가능한 부분인지 모르겠어 간단하게만 작성한다.
- keem님의 인터랙션 강의
인터랙션의 개념적 이해부터, 실제 핸드오프할 때 고려해야 할 팁까지 알려주셨다. 인터랙션을 "동적인 상호작용"정도로만 이해하고 있던 나에게 큰 도움이 됐다.
- 진용님의 Variable 활용 사례 공유
Framer에서 언어 설정을 variable로 관리하는 방법 등 실제 프로덕트에서 사용한 사례를 공유해주셨다. 문제 해결 방법에 다양한 접근이 가능함을 새롭게 느꼈다.
- 먹바님의 Framer 기능 강의
단순 기능 소개가 아니라, "이 기능은 이런 맥락에서 유용하고, 저 기능은 추천하지 않는다"는 식으로 실제 사용 방법까지 알려주셔서 추후 활용하기에 유용한 기능들을 배웠다.
스터디를 통해 얻은 것
- 배운 것
인터랙션은 단순한 시각적 애니메이션이 아니라, 사용자가 상호작용하는 경험을 다루는 일이다.
깊게 들어갈수록 개발과의 연결이 필요한데, 이 과정이 매우 재미있었다. (코딩을 조금 알기에..!)
- 아쉬운 것
항상 "현실 가능한 목표"만 잡는 습관 때문에 스스로 한계를 만든 것은 아닌가 하는 반성도 했다.
인터랙션으로만 줄 수 있는 경험을 더 깊게 고민해보고 싶다.
앱에서도 인터랙션을 넣어보려면 ProtoPie를 고려할 필요성을 느꼈다.
- 앞으로 도전할 것
시야를 확장하려고 계속 노력할 것. (특히 이번 스터디에서 다른 분들의 과제를 보며 강하게 느꼈다.)
ProtoPie 도전하기.
JS/React 읽을 수 있을 정도의 지식 쌓기.
+ 다음 스터디도 모집 예정이라고 하시니 그 부분은 keem님 계정을 따라가면 좋을 것 같다. 정말정말 만족도 높은 스터디였습니다 ~
