프론트엔드
인터랙션으로 만드는 몰입 경험 | Simplicity 4 제작기 #3
두줄요약
온라인 컨퍼런스에서 이탈을 줄이기 위해 몰입형 인터랙션 흐름을 설계했습니다.모바일 우선 구조, 템플릿 시스템화, 자막·전환 효과로 시청 경험을 다듬었습니다.
문제 상황
- 온라인 컨퍼런스에서 중간 이탈률이 높아 콘텐츠 집중 유지가 어려운 상황
- 오프라인 요소 없이 화면과 소리만으로 몰입을 이어가야 하는 과제
- 모바일과 데스크탑에서 서로 다른 사용 흐름을 함께 만족시켜야 하는 제약
구조와 흐름
- 홈 진입부터 세션 전환까지 이어지는 몰입형 흐름 설계
- 카드 확대, 배경 그래픽 확장, 제목·연사자·AI 디스크립션 순차 노출
- 세션 포커싱, 자동 재생, 전환 효과로 끊김 없는 시청 경험 구성
선택 이유
- 모바일 시청 비중 증가를 반영한 모바일 우선 설계
- 가로 스크롤 기반 포커싱으로 한눈에 보이는 정보와 시선 집중의 균형 확보
- 12개 템플릿으로 콘텐츠 제작을 시스템화하고 재사용 가능 구조 마련
주의할 점
- 호버 중심 인터랙션의 과도한 복잡함과 세로 스크롤의 답답함
- 자막이 한꺼번에 노출될 때 생기는 읽기 부담
- 디바이스별 조작 방식 차이로 인한 불편함