컨트롤 배치와 숨기기
영상을 가리지 않도록 컨트롤은 화면을 한 번 탭하면 나타났다가 몇 초 뒤 사라지는 방식이 흔해요(Apple, n.d.). 재생 버튼은 가운데 크게, 탐색 막대는 아래에 두고, 버튼과 손잡이는 터치 타깃 크기(Parhi et al., 2006)를 지켜요. 김과 동료들(2014)은 시청자가 특정 구간에서 되감고 건너뛴다고 보였어요. 그래서 왼쪽·오른쪽 두 번 탭으로 10초 이동하거나, 탐색 중 미리보기 썸네일을 보여주면 원하는 장면을 쉽게 찾아요.
빠른 시작과 자동 재생
크리슈난과 시타라만(2013)은 재생 시작이 늦어질수록 시청자가 떠난다는 것을 대규모 데이터로 보였어요. 첫 장면을 빨리 띄우고, 버퍼링 중엔 진행 표시를 보여줘요. 브라우저는 소리 있는 자동 재생을 막는 경우가 많아서(Chrome for Developers, n.d.) 피드 영상은 음소거로 시작하고 소리 켜기 버튼을 분명히 둬요. iOS 웹에서 전체 화면으로 튀지 않게 하려면 playsinline 속성을 써요(MDN, n.d.).
전체 화면, 제스처, 자막
전체 화면에서는 가로 회전을 지원하고, 노치와 홈 표시줄을 피해 세이프 에어리어 안에 컨트롤을 둬요. 영상 위 스와이프가 밝기·음량 조절인지 시스템 제스처 내비게이션인지 겹치지 않게 해요. WCAG 2.2(W3C, 2023)는 자막(1.2.2), 자동 소리를 끌 방법(1.4.2), 움직이는 콘텐츠의 일시정지(2.2.2)를 요구해요. 자막은 track 요소(MDN, n.d.)로 넣고 크기 조절도 가능하게 해요.
자주 묻는 질문
- 자동 재생은 써도 되나요?
- 피드 미리보기 정도라면 음소거로 시작하고, 소리와 정지 버튼을 분명히 둬요.
- 컨트롤은 언제 숨기나요?
- 재생 중 몇 초간 조작이 없으면 숨기고, 탭하면 다시 보이게 해요. 일시정지 중엔 계속 보여줘요.
출처 검토일: 2026-10-27
참고문헌
- Apple. (n.d.). Playing video. Human Interface Guidelines. 시스템 플레이어 컨트롤과 전체 화면 전환을 다뤄, 기본 플레이어를 쓸지 정할 때 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.). <video>: The Video Embed element. playsinline, muted, track 같은 속성을 설명해, 모바일 웹 동영상과 자막을 다룰 때 참고하면 도움이 돼요.
- Chrome for Developers. (n.d.). Autoplay policy in Chrome. 소리 있는 자동 재생이 막히는 정책을 설명해, 음소거 자동 재생을 설계할 때 참고하면 도움이 돼요.
- Kim, J., Guo, P. J., Seaton, D. T., Mitros, P., Gajos, K. Z., & Miller, R. C. (2014). Understanding in-video dropouts and interaction peaks in online lecture videos. In Proceedings of the First ACM Conference on Learning @ Scale (pp. 31–40). ACM. 사람들이 영상 어디서 되감고 떠나는지 분석해, 탐색 막대와 구간 표시를 설계할 때 참고하면 도움이 돼요.
- Krishnan, S. S., & Sitaraman, R. K. (2013). Video stream quality impacts viewer behavior: Inferring causality using quasi-experimental designs. IEEE/ACM Transactions on Networking, 21(6), 2001–2014. 시작 지연이 늘면 시청자가 떠난다는 연구라, 빠른 첫 재생과 로딩 표시가 중요한 이유로 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 재생·탐색 버튼과 탐색 막대 손잡이 크기를 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 자막(1.2.2), 오디오 제어(1.4.2), 일시정지(2.2.2) 기준이 있어, 플레이어 접근성을 점검할 때 참고하면 도움이 돼요.