인터랙션으로 만드는 몰입 경험 | Simplicity 4 제작기 #3
백송은 · 토스 · 토스 기술 블로그
소개
끝까지 보고 싶게 만드는 온라인 컨퍼런스는 어떻게 만들 수 있을까? Simplicity 인터랙션은 이 질문에서 출발했어요. 몰입을 설계한 인터랙션 제작기, 지금 들려드릴게요.
AI 핵심 요약
온라인 컨퍼런스의 중간 이탈을 줄이기 위해, 한 화면의 정보 과밀·모바일 불편·긴 세션·한꺼번에 노출되는 자막을 개선하는 몰입형 시청 흐름을 설계했다. 모바일은 가로·세로 스크롤과 자동 재생을 활용하고, 데스크탑은 가로 스크롤 포커싱과 별도 조작 방식을 적용하는 등 기기별 경험을 프로토타입으로 비교해 다듬었다. 세션 진입 애니메이션, 12개의 재사용 가능한 템플릿, 음성에 맞춰 한 줄씩 채워지는 자막으로 콘텐츠의 리듬과 제작 효율을 함께 고려했다. 핵심은 화면을 꾸미는 데 그치지 않고 사용자가 콘텐츠를 따라가는 방식까지 설계하며, 테스트와 협업을 통해 인터랙션을 완성하는 것이다.
- 기기별 사용 맥락을 고려해 모바일과 데스크탑의 탐색·재생 인터랙션을 따로 설계하세요.
- 모바일 우선 설계는 실제 프로토타입 테스트를 통해 데스크탑 조작 방식까지 조정해야 합니다.
- 세션 템플릿을 정보 구조와 인터랙션까지 포함한 재사용 단위로 만들면 콘텐츠 제작을 시스템화할 수 있습니다.
- 자막은 음성과 타이밍을 맞춰 한 줄씩 보여주고, 멈춤이나 전환의 어색함도 반복 테스트로 다듬으세요.
비슷한 학습 자료
뒤에 개발자 있어요 | Simplicity 4 제작기 #2
박은식 / 이예서 · 토스 기술 블로그
아름답고 이해하기 쉬운 세션 자료 만들기 | Simplicity 4 제작기 #5
윤가빈 · 토스 기술 블로그
세션을 대표하는 키비주얼 그래픽 | Simplicity 4 제작기 #4
김경태 / 김영하 · 토스 기술 블로그
Simplicity 4 제작기 #1 | AI 아바타가 발표하는 온라인 컨퍼런스
윤지영 · 토스 기술 블로그
Simplicity 4 : 한 번쯤 이상을 꿈꿔본 모두에게
유아란 · 토스 기술 블로그
인터랙션, 꼭 넣어야 해요?
박연주/김지혜 · 토스 기술 블로그