내가 여행 동반자 앱에 추가한 'Recap Reel' 기능의 UI는 어떻게 생겼나요?
How does the UI for a "Recap Reel" feature that I added to my travel companion app look?
배경 및 소개
SubQuester가 여행 순간을 짧은 하이라이트로 묶는 Recap Reel 기능 데모를 공개했고, 영상은 Streamable에 게시되었다. 커뮤니티에서는 초기 UI/UX에 대한 피드백이 집중적으로 논의되었는데, 핵심은 모바일에서 가볍게 편집을 가능하게 하겠다는 목표와 달리 정보 구조와 제스처 안내, 용어 선택의 일관성이 부족해 사용성을 해칠 수 있다는 지점이었다. 특히 NLE에 익숙한 사용자가 기대하는 상호작용 관성, 처음 쓰는 사용자의 진입 장벽을 동시에 만족시켜야 한다는 요구가 부각됐다. 정보 계층이 산만해 보인다는 첫인상, 타임라인과 미디어 뷰의 상대적 배치, 내보내기 버튼 위치 같은 기본 레이아웃 선택이 경험의 흐름을 좌우한다는 지적이 이어졌고, 작은 화면에서 섹션 구획과 요소 간 시각적 분리가 충분한지도 주요 쟁점으로 떠올랐다.
주요 내용
가장 강한 비판은 정보 계층과 레이아웃이 산만해 조작 우선순위를 파악하기 어렵다는 것이었다. 내보내기 기능은 최상단이나 최하단처럼 예측 가능한 고정 위치에 두어야 빠른 완료 경로가 확보된다는 의견이 제시됐다. 타임라인과 스크러빙 컨트롤은 영상 화면 아래에 배치하는 것이 NLE 관례에 부합해 학습 비용을 줄인다는 비교도 나왔다. 제스처와 팁 배치는 일관성이 부족하다는 지적이 반복되었는데, 오른쪽은 스와이프, 왼쪽은 드래그, 중앙은 또 다른 스와이프 등 서로 다른 지시가 뒤섞여 있어 사용자의 정신적 모델을 혼란스럽게 만든다는 것이다. 용어 선택에서도 pan이라는 시네마토그래피 용어는 실제 동작을 정확히 설명하지 못하므로, swipe to see more 같은 직관적 문구나 애니메이션 아이콘으로 대체하라는 제안이 있었다. 상단의 postcard와 recap reel 토글은 시각적으로 구분이 잘 되지만, 하단 패널의 서브 섹션 버튼은 비활성 상태가 일반 텍스트와 크게 다르지 않아 탭이라는 정체성이 약하다는 피드백도 있었다. 상·하단 패턴을 맞추고 활성/비활성 상태를 명확히 드러내는 시각 체계를 도입하면 인지 부하를 줄일 수 있다는 제안이다. 한편 기능 자체에 대한 평가는 전반적으로 호의적이었다. 여행 순간을 자동으로 리캡하는 아이디어는 매력적이고, 전체 UX 흐름도 대체로 이해하기 쉽다는 평가가 있었지만, 트리밍과 재정렬 같은 핵심 편집 기능의 discoverability는 초보 사용자에게 혼란을 줄 수 있어 usability testing이 필요하다는 의견이 나왔다. 또한 리캡 기능은 lightweighted하고 선택적으로 느껴질 때 수용도가 높아지므로, 언제 어떻게 노출되어 사용자가 알아차리는지의 진입 경로 설계가 중요하다는 지적이 있었다. 마지막으로 작은 화면에서는 요소 간 간격과 섹션 경계가 충분히 드러나야 인지 과부하를 막을 수 있으니, 시각적 분리와 구획의 명확화가 요구되었다. 요약하면, 제품의 뼈대는 갖춰졌지만, 정보 구조 정리, 제스처·용어의 일관화, 표준 상호작용 패턴 준수, 시각적 위계 강화라는 네 가지 축에서 다듬기가 필요하다는 집단적 합의가 형성되었다.
결론 및 시사점
커뮤니티의 합의는 명확하다. Recap Reel의 컨셉은 강력하지만, 기본 정보 구조와 상호작용의 일관성, 표준 컨벤션 존중이 뒷받침되지 않으면 경량 편집이라는 약속이 무너진다. 내보내기와 타임라인 같은 핵심 컨트롤은 예측 가능한 위치에 고정해 완료 경로를 단순화하고, 제스처와 마이크로카피, 아이콘은 하나의 어휘 체계로 통일해야 한다. 전문 용어 대신 동작을 직접 설명하는 언어와 애니메이션 피드백을 활용하면 학습 비용을 줄일 수 있다. 또한 작은 화면에서 시각적 분리를 강화하고 섹션 경계를 또렷하게 만들어 인지 부하를 낮춰야 한다. 한계로는 공개된 정보가 데모 수준이라 실제 사용자 데이터가 부족하다는 점이 남는다. 다음 단계로는 첫 사용 시나리오를 중심으로 트리밍·재정렬의 discoverability를 검증하는 usability testing, 내보내기·타임라인 위치의 A/B 테스트, 비활성/활성 상태 인지율 측정 등 정량·정성 검증이 요구된다. 이 과정을 통해 가볍고 선택적인 경험이라는 제품 의도를 실제 사용성으로 연결할 수 있다.
💡 정보 구조를 단순화하고 제스처·용어·아이콘을 일관화하라; NLE의 익숙한 패턴을 채택하되 작은 화면에서는 시각적 분리를 강화하라. 트리밍·재정렬의 발견 가능성과 진입 경로는 usability testing으로 반드시 검증하라.
뉴스레터 구독
매주 금요일, 주간 HCI 하이라이트를 이메일로 받아보세요.