naver-fe

문제기존 슬라이더 UI 라이브러리들이 수평과 수직 방향을 동시에 지원하기 어렵고 복잡한 구성이 필요.

접근Flicking 컴포넌트에 CrossFlicking Preset 추가. dragThreshold 옵션으로 드래그 방향 감지, data-cross-groupkey 어트리뷰트로 패널 그룹화.

결과@egjs/flicking 4.12.0 릴리즈, 연간 150만 다운로드. 다방향 UI 구현 간소화.

문제기존 슬라이더 라이브러리들은 가로 또는 세로 한 방향만 지원해 다방향 UI 구현이 복잡함.

접근CrossFlicking 프리셋 추가. dragThreshold 옵션 제스처 인식, data-cross-groupkey 어트리뷰트로 패널 그룹화, mainIndex/sideIndex 이벤트 확장.

결과@egjs/flicking 4.12.0 릴리즈, 연간 다운로드 150만 돌파, JSWeekly 소개.

문제NAVER 검색은 사용자 환경과 페이지 레이아웃이 매우 다양해 실험실 기반 Lighthouse 만으로는 실제 사용자 경험을 반영하기 어려웠다. 필드 데이터 수집이 필요했다.

접근web-vitals 라이브러리로 LCP 등 핵심 지표를 브라우저에서 측정하고, Beacon API 의 `sendBeacon()` 으로 페이지 가시성 변화 시점에 로그를 일괄 전송한다. 중복 수집을 막고 네트워크 비용을 줄였다.

결과구글 가이드라인보다 엄격한 p95 LCP 2.5초 이하 기준을 세우고, 실시간 모니터링 대시보드와 상세 분석 페이지로 성능 저하 원인을 체계적으로 파악할 기반을 마련했다.

문제NAVER 검색에서 JavaScript 파일이 onLoad 이후에 로드돼 LCP 점수가 악화됐고, 리소스 로딩 지연이 JS 실행을 미루며 사용성을 떨어뜨렸다. 성능 변화의 실시간 감지도 어려웠다.

접근주간·월간 자동 보고서와 실시간 알림을 갖춘 모니터링을 구축하고, 변화 감지를 분단위 비교에서 최근 3분 vs 이전 5분 구간 비교로 바꿨다. JS 로드 타이밍을 onLoad 에서 DOMContentLoaded(DCL) 기반으로 옮기고 약 한 달간 A/B 테스트로 검증했다.

결과2023년 8월 31일 배포 이후 전체 p95 LCP 가 2700ms 에서 2550ms 로 150ms 개선됐다. LCP 2.5초 이하 사용자 비율도 연말까지 93%에서 95%로 회복됐고, 클릭 수와 품질도 함께 올랐다.

문제iOS 17.0과 17.1에서 화면 최상단에 놓인 video 요소가 터치 이벤트를 가로채 드래그와 스크롤이 동작하지 않았다.

접근WebKit 버그 트래커와 Apple 개발자 포럼을 참고하고 개발자 도구로 실제 터치 대상 요소를 추적해 원인을 좁혔다.

결과video 위에 투명 div를 덮거나 래퍼에 ::after 의사 요소를 더해 터치 대상을 바꾸는 두 가지 마크업 우회로 문제를 해결했다.