인터랙션으로 만드는 몰입 경험 | Simplicity 4 제작기 #3

안녕하세요, Simplicity 4에서 인터랙션 디자인을 맡은 Interaction Designer 백송은입니다. 이번 심플리시티를 디자인하면서 고민한 것들을 인터랙션 디자이너의 시선에서 하나씩 나눠보려고 해요.

사실 저는 2023년 첫 온라인 심플리시티 프로젝트에 어시스턴트로 참여했었어요. 그때는 단순히 QA를 돕는 역할 정도였는데, 입사 두 달 만에 메인 인터랙션 디자이너로 전사 프로젝트에 참여하게 됐어요. 인터랙션 전반의 방향을 직접 이끌어야 하는 상황이었는데, 가장 먼저 이런 생각이 들었어요.

이번 시즌의 인터랙션은 이런 고민에서 시작했죠.

Simplicity 4의 핵심, 인터랙션

온라인 컨퍼런스에서 가장 중요한 건 무엇일까요? 저는 지루하지 않게 끝까지 볼 수 있는 환경을 만드는 것이라고 생각해요. 오프라인 공간도, 연사자 얼굴도 없이 오직 화면과 소리만으로 몰입을 유지해야 하니까요.

사실 지난 Simplicity에서는 중간 이탈률이 높았는데요. 그건 곧 사용자가 콘텐츠에 집중하지 못했다는 의미였어요. 4가지가 원인이라고 생각했죠.

Simplicity 4에서 가장 중요했던 과제는 이 문제들을 해결해 ‘몰입감 있는 시청 흐름’을 만드는 것이었어요. 단순히 콘텐츠의 내용을 바꾸는 것이 아니라, 사용자가 콘텐츠를 어떻게 따라가게 할지를 설계하는 ‘인터랙션 디자인’이 핵심이었죠.

이렇게 디자인했어요

1) 모바일과 데스크탑, 각각의 경험을 고려한 인터랙션

같은 콘텐츠라도 어떤 디바이스에서 보느냐에 따라 사용자 흐름이 달라질 수 있다는 점을 반영했어요.

홈 화면

• 모바일 초기에는 세로 스크롤, 그리드 레이아웃 등 여러 가지 시안을 테스트해봤어요. 직접 프로토타입까지 만들어보면서 비교해보니, 가로와 세로 스크롤을 조합해 프리뷰 영상을 보여주는 방식이 숏폼처럼 짧고 빠르게 넘기며 훑어보는 감성과 가장 잘 맞더라고요. 그래서 최종적으로는 가로 · 세로 스크롤을 조합하고, 세션이 포커스되면 프리뷰 영상이 자동 재생되는 구조로 구성했어요.

• 데스크탑 데스크탑에서는 모바일의 가로 · 세로 스크롤을 그대로 가져가기엔 활용할 수 있는 화면 면적이 너무 넓다는 고민이 있었어요.

  그래서 여러 시도를 해봤죠. 리스트를 한 번에 다 보여주고, 호버하면 정보가 뜨게 하기도 했고, 세로스크롤만 사용해서 큰 화면에 세션 하나하나를 자세히 보여주는 시안도 그려봤어요. 막상 직접 그려보니, 호버 액션은 너무 정신없고, 세로 스크롤 방식은 세션이 하나씩만 보여서 오히려 답답하게 느껴졌어요.

  그래서 시도해본 게 가로 스크롤 기반의 포커싱 구조였어요.

  여러 세션 썸네일이 한눈에 보이면서도, 스크롤할 때마다 세션 하나하나에 자연스럽게 시선이 머무는 흐름이 만들어졌고, 덕분에 한 번에 하나의 정보 흐름에 집중하면서도 시야가 확 트인 개방감을 유지할 수 있었어요.

세션 UI

• 모바일 세션 콘텐츠에 완전히 몰입할 수 있도록, 목차와 사운드 버튼, 홈 버튼, 재생바 등 주요 기능을 모두 상단에 배치했어요. 화면 중앙은 콘텐츠에만 집중할 수 있게 설계한 거죠.
• 데스크탑 데스크탑에서도 모바일과 동일한 기능은 유지하되, 터치이펙트, 호버 액션등 데스크탑 환경에 맞는 인터랙션을 별도로 디자인했어요.

세션 전환

• 모바일 숏폼 콘텐츠처럼 다음 세션으로 자연스럽게 스크롤되면서 자동 재생되도록 구성했어요. 사용자는 별도의 조작 없이도 끊김 없는 흐름으로 콘텐츠를 이어볼 수 있어요.
• 데스크탑 넓은 화면에서는 모바일처럼 스크롤로 전환하면 시선이 분산되는 느낌이 있었어요. 그래서 세션이 전활될 때 그라디언트를 활용한 전환 효과를 더해, 몰입감을 유지하면서 자연그럽게 다음 콘텐츠로 넘어갈 수 있도록 설계했어요.

2) 모바일 기준 설계

이번 시즌은 모바일 기준으로 먼저 설계하고 데스크탑는 그에 맞춰 최적화했어요. 지난 시즌 데이터를 봤을 때, 모바일 시청자가 점차 늘어났거든요. 가장 큰 변화는 화면을 좌우·중앙 3분할해 터치 위치에 따라 장면을 빠르게 넘길 수 있게 한 점이에요.

초기에는 데스크탑에서도 모바일과 마찬가지로, 화면을 클릭해서 씬을 넘기는 방식으로 프로토타입을 만들어봤어요. 그런데 막상 사용해보니, 마우스 커서를 왼쪽과 오른쪽으로 계속 움직여야 하는 게 생각보다 불편하더라고요. 그래서 하단에 버튼을 배치하고, 키보드로도 조작할 수 있게 인터랙션을 수정했어요.

3) 첫 화면 몰입 설계

사용자가 이야기에 완전히 빠져들면 좋겠다고 생각했어요. 그래서 세션에 진입하는 순간부터 몰입이 시작될 수 있도록 세심하게 구성했어요. 홈에서 세션 카드를 클릭하면, 카드가 확대되고 배경 그래픽이 점점 커지며 화면을 꽉 채워요. 이어서 제목과 연사자 정보, AI 디스크립션이 순차적으로 등장해요. 이 흐름을 자연스럽게 이어지도록 해서, ‘이제 집중할 차례야’라는 감정적 전환을 유도하고자 했어요.

4) 12개의 세션 템플릿

총 16개의 템플릿을 기획하고, 실제 사용성과 개발 공수를 고려해 12개로 구성했어요. 단순한 콘텐츠 프레임이 아니라, 정보 구조와 인터랙션의 방식까지 함께 정해진 설계 단위였죠.

각 템플릿마다 텍스트 등장 방식과 배경 전환 효과를 다르게 구성했어요. 영상 전체가 하나의 패턴으로 반복되지 않고, ‘다음은 뭘까?’ 하는 기대감을 불러일으키고 싶었거든요. 같은 템플릿이라도 옵션에 따라 다르게 활용할 수 도록, 내용에 맞게 UI를 디자인하고 자연스럽게 연결되는 인터랙션도 함께 설계했어요. 씬마다 다른 템플릿을 적용해서 지루함 없이 몰입감을 유지할 수 있었죠.

무엇보다 중요한 건, 이 12개의 템플릿이 Simplicity의 콘텐츠 제작을 ‘시스템화’했다는 점이에요. 누구나 이 템플릿을 조합해 세션을 만들 수 있게 되었고, 다음 시즌에도 그대로 활용 가능한 구조가 된 거죠.

Simplicity는 매 시즌 새로운 콘텐츠를 만드는데요. 처음부터 디자인하고 개발하는 방식은 리소스가 너무 많이 들고, 지속 가능하지 않았어요. 이번 시즌은 재사용이 가능한 구조적인 전환이 이뤄졌다는 점에서, 콘텐츠 제작 방식의 큰 전환점이었어요.

5) 슬릭한 자막효과

이전 시즌에서는 자막이 한꺼번에 너무 많이 노출되는 게 아쉬웠거든요. 그래서 이번 시즌에서는 연사의 음성과 타이밍을 맞춰 자막이 한 줄씩 점진적으로 채워지는 방식을 적용했어요. 정보를 강제로 읽게 만드는 대신, 자연스럽게 따라가는 리듬감 있는 흐름을 만들고 싶었어요.

자막이 채워지는 효과에도 작은 디테일이 숨어있어요. 초기 시안에서는 문장이 채워질 때 마지막 부분이 딱 끊기듯이 멈춰서 조금 어색한 느낌이 있었어요. 팀 안에서 여러 방식으로 테스트하는 과정을 거치면서 지금처럼 자연스럽고 완성도 높은 형태로 다듬을 수 있었어요.

마무리하며

사실, 처음엔 부담이 정말 컸어요. ‘내가 심플리시티를 디자인한다고..?’ 하는 마음에 스스로도 얼떨떨했죠.

메인 인터랙션 디자이너로 프로젝트를 이끌면서 느낀 점은, 단순히 디자인 방향을 잡고 시안을 만드는 일만이 다가 아니라는 거예요. 여러 시안을 직접 프로토타입해보고 최종안을 결정하는 과정, 동료들과의 커뮤니케이션, 일정 조율까지 디자인 외적인 프로젝트 리딩 역량도 정말 많이 필요하더라고요.

초반엔 어디서부터 시작해야 할지, 또 어떻게 팀을 리드하며 조율해나가야 할지 감이 안 잡혀서 ‘내가 정말 이걸 해낼 수 있을까?’ 싶은 막막함과 불안감도 있었어요.

하지만 저 역시 심플리시티를 보고 토스에 입사를 결심했던 사람이거든요. 이번 시즌을 계기로 또 다른 누군가가 입사를 결심할 수 있다면, 그 결심의 순간이 좋은 기억으로 남길 바라는 마음으로 책임감을 갖고 디자인에 몰입했어요.

이번 시즌은 저에게도 큰 도전이자 배움의 시간이었어요. 저의 고민과 몰입이 담긴 이번 심플리시티가 여러분에게 작은 시작점이 되어줬다면, 그보다 더 기쁜 일은 없을 것 같아요.