웹사이트에서 짧은 페이지와 긴 페이지를 번갈아 열거나 팝업을 띄웠다가 닫을 때, 화면 전체가 좌우로 조금씩 움직이는 현상이 생길 수 있습니다. 가운데 정렬한 제목이나 카드의 위치가 달라지는 문제라면 CSS 레이아웃을 전부 수정하기 전에 스크롤바부터 확인할 필요가 있습니다. 일반적인 스크롤바는 화면의 가로 공간을 차지하기 때문에 스크롤바가 나타나거나 사라지면 콘텐츠를 배치할 수 있는 너비가 달라집니다. 이 문제는 CSS의 scrollbar-gutter 속성으로 해결할 수 있습니다. 빠른 해결: 웹사이트의 공통 CSS에 html { scrollbar-gutter: stable; }을 추가하세요. 일반 스크롤바가 사용하는 공간을 미리 확보해 페이지 길이나 스크롤 상태가 바뀌어도 콘텐츠의 가로 배치가 달라지는 ..

PC 크롬에서는 자연스럽게 재생되던 웹사이트 배경 영상이 아이폰 Safari에서는 멈춰 있거나, 재생을 누르는 순간 전체 화면으로 바뀌는 경우가 있습니다. 같은 MP4 파일을 사용하더라도 브라우저의 자동재생 정책과 HTML video 속성에 따라 결과가 달라집니다. 이 문제는 영상 파일을 무조건 다시 인코딩하기보다 두 가지를 구별하는 것이 중요합니다. 영상이 전체 화면으로 전환되는 문제라면 playsinline을, 영상이 자동으로 시작되지 않는 문제라면 muted·autoplay와 브라우저 정책을 확인합니다. Chrome과 Apple WebKit의 공식 문서를 기준으로, 증상별 점검 순서부터 바로 적용할 수 있는 HTML·JavaScript 예제까지 살펴보겠습니다. 증상에 따라 확인할 설정이 다릅니다 우..

PC에서는 선명했던 웹사이트 이미지가 스마트폰에서만 흐릿하게 보인다면, 무조건 더 큰 이미지를 업로드할 필요는 없습니다. 원본 이미지의 해상도가 부족할 수도 있지만, 브라우저가 작은 이미지 파일을 선택했거나 HTML의 srcset·sizes 설정이 실제 화면 크기와 맞지 않는 경우도 있기 때문입니다. 특히 스마트폰은 화면의 CSS 픽셀 수와 실제 화면 픽셀 수가 다를 수 있습니다. 이미지가 화면에서 360px 너비로 표시되더라도 기기 픽셀 비율(DPR)이 2라면, 선명도를 유지하기 위해 약 720px 너비의 이미지가 필요할 수 있습니다. 이번 글에서는 Chrome 개발자 도구로 실제 표시 크기와 선택된 이미지 URL을 확인하고, 원인에 따라 HTML 설정을 수정하는 방법을 살펴봅니다. 이미지가 잘리거나 ..

회원가입 약관에 동의하거나 알림 수신 체크박스를 선택했는데, 서버에서는 선택한 값이 없다고 표시될 때가 있습니다. 화면에는 분명히 체크 표시가 있지만 실제 제출 데이터에는 해당 항목이 빠져 있을 수 있습니다.이 문제를 해결할 때 핵심은 HTML의 체크 상태와 서버가 받은 값을 구분하는 것입니다. 체크박스의 name, checked, value, disabled 속성을 확인하고 Chrome 개발자 도구의 Network Payload에서 실제 요청 데이터를 비교하면 원인을 좁힐 수 있습니다.가장 중요한 판단 기준은 Network 요청에 체크박스의 name=value 데이터가 존재하는지입니다. 요청 데이터에 없다면 HTML 선택 상태나 JavaScript 전송 처리를 확인하고, 요청에는 있는데 서버에서 읽지 ..

웹사이트에 만든 '복사' 버튼을 누르면 복사 완료 메시지는 뜨는데, 메모장에 붙여넣으면 이전에 복사한 문장이 그대로 나오는 경우가 있습니다. 개발 환경에서는 정상적으로 동작했던 복사 기능이 실제 웹사이트에 배포한 뒤 작동하지 않거나, 같은 페이지를 다른 웹사이트의 iframe에 넣었을 때만 실패하기도 합니다. 이 문제는 버튼의 클릭 이벤트가 실행되지 않는 경우와 브라우저가 클립보드 쓰기를 거부하는 경우를 구분해야 해결할 수 있습니다. 특히 navigator.clipboard.writeText()를 사용하는 웹사이트라면 HTTPS 보안 컨텍스트, 브라우저의 사용자 활성화 조건, 창의 포커스, iframe 권한 정책을 서로 다른 원인으로 살펴봐야 합니다. 핵심은 복사 버튼을 클릭했다는 사실과 텍스트가 실제로..

웹사이트에서 돋보기 아이콘을 누르면 검색창이 열리고, X 아이콘을 누르면 창이 닫힙니다. 눈으로 보면 기능을 짐작할 수 있지만 스크린리더에서는 버튼의 이름이 제대로 전달되지 않을 수 있습니다. 화면에는 아이콘이 있는데 보조 기술에는 단순히 '버튼'이라고만 알려지는 상황입니다. 이때 버튼의 크기나 색상을 바꾸는 것만으로는 문제가 해결되지 않습니다. 스크린리더에 전달되는 '접근 가능한 이름(Accessible Name)'을 확인해야 합니다. HTML 코드에서 이름을 제공하는 방법과 Chrome 개발자 도구로 수정 전후를 점검하는 절차를 살펴보겠습니다. 핵심은 모든 아이콘 버튼에 aria-label을 추가하는 것이 아닙니다. 이미 의미 있는 텍스트가 있다면 이를 활용하는 것이 좋고, 다른 요소의 텍스트를 참조..

모바일 웹사이트에서 검색 아이콘을 눌렀는데 옆의 메뉴가 열리거나, 페이지 번호를 누르려다 다른 번호가 선택되는 문제가 있습니다. 버튼이 화면에 잘 보이더라도 실제 손가락으로 누를 수 있는 영역이 너무 작거나 인접한 버튼과 붙어 있으면 잘못 누르기 쉽습니다. 해결할 때는 아이콘을 무조건 크게 만드는 것보다 실제 클릭 영역의 크기, 주변 버튼과의 간격, 적용하려는 접근성 기준을 구분해야 합니다. WCAG 2.2에서는 기본 최소 기준으로 24×24 CSS 픽셀을 제시하고, 더 엄격한 강화 기준에서는 44×44 CSS 픽셀을 사용합니다. 이번 글에서는 두 숫자의 차이를 살펴보고 Chrome 개발자 도구에서 실제 버튼 크기를 확인한 다음, CSS로 클릭 영역을 늘리는 방법과 버튼을 키우기 어려울 때 간격을 조정하..

PC에서는 정상적으로 보이던 웹사이트 배너가 휴대폰에서 양옆이 잘리거나, 카드 썸네일 속 인물이 지나치게 확대되어 보이는 경우가 있습니다. 반대로 이미지는 전부 나타나지만 위아래에 빈 공간이 생기거나, 사진 속 사람이 가로로 늘어나 보이기도 합니다. 이미지 파일이 손상된 것이 아니라 원본 사진과 화면에 표시할 영역의 가로세로 비율이 서로 달라 발생하는 현상일 수 있습니다. 이때 CSS를 무작정 바꾸면 잘림은 해결되더라도 여백이나 왜곡이라는 다른 문제가 생깁니다. 해결의 핵심은 세 가지를 구별하는 것입니다. object-fit은 사진을 표시 영역에 어떻게 맞출지, object-position은 사진의 어느 부분을 중심으로 보여줄지, aspect-ratio는 요소의 가로세로 비율을 어떻게 정할지 결정합니다...

CSS에서 선택자를 더 구체적으로 작성했는데도 버튼 색상이 바뀌지 않거나, 스타일시트 아래쪽에 추가한 규칙이 적용되지 않는 일이 있습니다. 특히 @layer를 도입한 뒤 이런 현상이 생겼다면 CSS 코드의 작성 순서보다 캐스케이드 레이어의 우선순위를 먼저 살펴볼 필요가 있습니다. @layer는 스타일 충돌을 체계적으로 관리하기 위한 CSS 기능입니다. 그러나 일반 CSS 선언과!important 선언에서 레이어 우선순위가 서로 반대로 적용되기 때문에 기존 CSS의 선택자 규칙만 생각하면 결과를 잘못 판단하기 쉽습니다. 핵심은 세 가지입니다. 일반 선언은 나중에 생성된 레이어가 우선합니다. 레이어 밖에 있는 일반 선언은 레이어 내부의 일반 선언보다 우선합니다. 하지만!important가 붙으면 레이어 순서..

웹사이트에 웹폰트를 설정했는데 글자가 여전히 기본 글꼴로 보인다면 CSS 파일부터 수정하기 쉽습니다. 하지만 글꼴 파일을 찾지 못한 경우와 파일은 정상적으로 다운로드했지만 실제 텍스트에 적용되지 않은 경우는 해결 방법이 다릅니다. 크롬 개발자 도구에서 실제로 사용된 글꼴과 네트워크 요청을 구분하면 불필요하게 CSS를 수정하거나 CORS 설정을 변경하지 않고도 문제의 범위를 좁힐 수 있습니다. 특히 404 오류, CORS 차단, 글꼴 이름 불일치, 로컬 설치 글꼴의 영향은 서로 다른 증거로 판단해야 합니다. CSS에 적힌 글꼴과 화면에 사용된 글꼴은 다를 수 있습니다 font-family에 원하는 글꼴 이름이 표시된다고 해서 브라우저가 반드시 그 글꼴 파일로 문자를 그렸다는 뜻은 아닙니다. 해당 파일을 불..