탐구하는 취르미

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 iPhone 15 Pro Max와 같은 최신 디바이스에서, 버튼을 눌렀을 때 터치 하이라이트가 엉뚱한 위치에 표시되는 문제를 겪은 적 없으신가요?이번 포스팅에서는 그런 문제를 겪었을 때, CSS 속성 touch-action: manipulation;이 어떻게 해결책이 되었는지 공유해 보려 합니다.어떤 문제에 효과적인가?1. 더블탭 확대 방지모바일 Safari 등에서 버튼이나 링크를 두 번 탭할 때 화면이 자동으로 확대되는 현상을 막습니다.2. 터치 반응 지연 제거 (300ms 딜레이)과거 모바일 브라우저는 더블탭 확대를 구분하기 위해 클릭 반응에 300ms 지연을 뒀습니다. touch-action: manipulation;으로 즉시..

overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보겠습니다. 웹에서 팝업을 띄울 때, 배경 스크롤을 막는 것은 흔한 UX 요구사항입니다. 이를 위해 보통 overflow: hidden을 사용하지만, 이 방식은 스크롤바를 숨기고 강제로 스크롤을 차단하는 방식이라 사용자 경험에 영향을 줄 수 있습니다. 특히, 모바일 환경에서는 더 섬세한 조작이 필요합니다.AOS와 iOS 환경에서의 팝업 스크롤 결함1. AOS 환경에서의 문제팝업이 열릴 때 overflow: hidden으로 인해 dim 뒤로 보이는 배경이 scrollTop: 0 위치로 초기화되는 이슈가 발생했습니다. 2. iOS에서의 문제overflow: hidden이 적..

SVG는 웹 디자인과 개발에서 매우 유용한 포맷으로, 화면 해상도와 크기 조절에 유연하고 고품질의 이미지를 제공합니다. 그러나 때로는 SVG가 다양한 환경에서 제대로 랜더링 되지 않을 수 있습니다. 특히 iOS Safari와 같은 플랫폼에서는 SVG 렌더링 문제가 발생할 가능성이 높습니다. 이 문제를 해결한 방법에 대해서 공유드리겠습니다. SVG 렌더링 문제를 해결하기 위해 추가적으로 체크해 볼 수 있는 몇 가지 방법 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. SVG의 width, height, viewBox 들의 값 확인해보기 이들 값이 일치하지 않으면 SVG가 원하는 대로 화면에 표시되지 않을 수 있습니다. XML 네임스페이스 (XMLNS) 선언 확인해 ..

웹 개발에서 Swiper를 사용하면 간편하게 슬라이드 기능을 구현할 수 있지만, 브라우저 리사이징 중에 Swiper가 제대로 동작하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위해 아래와 같은 방법을 통해 Swiper를 안정적으로 유지할 수 있습니다. let eventSwiper; function initializeSwiper() { //Swiper 초기화 함수 const eventSwiper = new Swiper('.swiper', { loop: true, slidesPerView: 1, // spaceBetween: 10, pagination: { el: '.swiper-pagination', clickable: true, type: 'fraction', renderFraction: func..