kgoon-Log

자바스크립트 의존도를 낮추고 브라우저 네이티브 기능을 활용해 고성능 페이지 전환 효과를 구현하는 View Transitions API 실무 가이드입니다. SPA와 MPA 환경 모두에서 매끄러운 UX를 만드는 법을 확인하세요. 🚀 웹과 앱의 경계를 허무는 기술, View Transitions API의 등장우리가 모바일 앱을 사용할 때 느끼는 매끄러운 화면 전환은 웹에서는 늘 숙제와 같았습니다. 기존에는 이를 위해 Framer Motion이나 GSAP 같은 무거운 자바스크립트 라이브러리를 사용해야 했고, 이는 메인 스레드에 부담을 주어 성능 저하의 원인이 되기도 했죠.하지만 이제 View Transitions API가 등장하면서 상황이 바뀌었습니다. 이 API는 가변 폰트와 Popover API에 이어 '..

JS 라이브러리 없이 순수 CSS로만 고성능 스크롤 애니메이션을 구현해 보세요. scroll-timeline, view-timeline 핵심 개념과 함께 인디케이터, 페이드인 실무 예제와 웹 성능 최적화 비결까지 모두 담았습니다. 검색 엔진 상위 노출을 위한 완벽 가이드! 🚀 무거운 JS 라이브러리(GSAP)는 이제 안녕! CSS 스크롤 애니메이션의 시대과거에는 스크롤 위치에 따라 요소가 움직이거나 나타나는 복잡한 애니메이션을 구현하기 위해 ScrollMagic이나 GSAP 같은 거대한 자바스크립트 라이브러리에 의존해야만 했습니다.하지만 이제는 다릅니다. 모던 CSS가 제공하는 Scroll-driven Animations 덕분에 우리는 오직 CSS 코드 몇 줄만으로 이 모든 것을, 심지어 더 가볍고 부..

웹 성능 최적화의 핵심! WebP와 AVIF의 차이점부터 태그를 활용한 실무 퍼블리싱 기법까지 정리했습니다. 구글 코어 웹 바이탈 LCP 점수를 높이는 이미지 다이어트 전략을 지금 확인하세요. 🚀 웹 성능 다이어트 시리즈의 네 번째 주인공, 이미지 포맷우리는 지난 시간까지 가변 폰트와 서브셋 최적화, 그리고 clamp() 함수를 통해 텍스트와 레이아웃의 효율성을 극대화하는 방법을 살펴 보았습니다. 하지만 아무리 코드를 깎아내도, 고해상도 이미지 한 장이 수 메가바이트(MB)를 차지한다면 '웹 성능 다이어트'는 실패할 수밖에 없습니다.오늘날 웹 환경에서 이미지는 전체 페이지 용량의 60% 이상을 차지하곤 합니다. 따라서 WebP와 AVIF 같은 차세대 포맷을 이해하고 실무에 적용하는 것은 퍼블리셔와 프..