2025
Sempio Micro Site
샘표 캠페인을 위한 반응형 마이크로 사이트 제작 프로젝트로, YouTube API 연동과 관리자 기능 개발까지 퍼블리싱 범위를 넘어 담당했습니다.
사이트 방문하기Background
샘표는 대한민국 대표 식품 브랜드로, 특정 캠페인·제품 홍보를 위한 마이크로 사이트 제작을 진행했습니다. 단순 반응형 마크업에서 나아가, 이번 프로젝트에서는 YouTube IFrame API를 활용한 영상 연동과 관리자 계정 목록 등 간단한 관리자 기능 개발까지 담당하며 퍼블리셔 영역을 처음으로 확장한 경험이었습니다.
Responsibilities
- 전 페이지 반응형 HTML · CSS 마크업 (모바일 퍼스트)
- YouTube IFrame API를 활용한 영상 삽입 및 재생 제어 구현
- 스크롤 진입 시 영상 자동 재생 로직 구현 (IntersectionObserver 활용)
- 관리자 계정 목록 페이지 UI 및 기능 구현
- 모바일·태블릿·데스크탑 크로스 디바이스 대응 및 QA
Key Challenge
YouTube IFrame API의 autoplay 정책이 브라우저별로 달라, 특정 환경에서 영상이 자동 재생되지 않거나 음소거 없이 재생이 차단되는 문제가 발생했습니다.
autoplay 속성 대신 IntersectionObserver로 영상 영역 진입을 감지하고, YouTube IFrame API의 playVideo()를 호출하는 방식으로 브라우저 정책을 우회하며 자연스러운 재생을 구현했습니다.
Chrome · Safari · Firefox 주요 브라우저 및 iOS · Android 모바일 환경에서 영상 재생 정상 작동 확인. 불필요한 데이터 소모 없이 뷰포트 진입 시 재생되는 UX 개선.
Retrospective
퍼블리셔로서 처음으로 관리자 기능 개발까지 담당하며, UI와 데이터가 연결되는 흐름을 직접 경험했습니다. 단순히 화면을 그리는 것을 넘어, 데이터가 어떻게 관리되고 표시되는지 이해하게 되면서 개발팀과의 소통 방식도 달라졌습니다. 퍼블리셔의 역할 범위를 스스로 넓혀나갈 수 있다는 자신감을 얻은 프로젝트였습니다.