브라우저마다 페이지가 다르게 보일 때 원인과 점검법

Qorlize 팀 작성 · 마지막 검토 2026년 11월 11일

Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기

내 크롬에서는 완벽한데, 고객사 담당자가 회사 PC 화면을 캡처해 보내거나 지인이 갤럭시폰으로 열어 보면 제목 글꼴이 바뀌어 있고, 버튼이 회색 둥근 모양으로 변해 있고, 페이지 전체가 어둡게 보이기도 합니다. HTML 파일은 똑같습니다. 달라지는 것은 브라우저 엔진, 그 기기의 글꼴과 설정, 그리고 브라우저가 예전에 저장해 둔 사본을 보여 주고 있는지 여부입니다. 원인마다 남기는 흔적이 달라서 증상만 보고도 대부분 짐작할 수 있습니다.

내 컴퓨터에만 있는 글꼴

CSS에 font-family: "Pretendard" 라고 써 두면 브라우저는 페이지가 직접 불러오는 웹 폰트나, 방문자 컴퓨터에 설치된 글꼴에서 찾습니다. 내 PC에만 Pretendard가 깔려 있고 페이지에서는 불러오지 않는다면, 나한테만 제대로 보이고 다른 사람에게는 다른 글꼴로 보입니다.

대신 쓸 글꼴은 목록의 나머지에서 고르므로, 운영체제마다 무난한 후보를 적어 둡니다.

font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

Apple SD Gothic Neo는 macOS와 iOS에, 맑은 고딕은 Windows에 기본으로 들어 있고, 끝의 sans-serif는 "이 기기의 기본 고딕체"라는 뜻입니다. 일반 이름 없이 글꼴 이름 하나만 적었는데 그 글꼴이 없으면 브라우저 기본 글꼴, 흔히 바탕체 같은 명조 계열로 넘어가 한눈에 어색합니다. 특정 기기에서만 글자 모양이나 폭, 줄 높이가 다르다면 페이지에서 글꼴을 직접 불러오거나 목록 끝을 제대로 마무리하십시오. 방법은 웹페이지 글꼴의 원리와 바꾸는 법에 정리했습니다.

일부만 지원되는 CSS, 브라우저마다 다른 기본 스타일

새 CSS 기능은 브라우저마다 들어오는 시기가 다르고, iOS 사파리는 운영체제와 함께 업데이트됩니다. 업데이트를 미뤄 둔 아이폰에는 최근 기능이 없을 수 있다는 뜻입니다. 확인할 곳은 두 군데면 충분합니다.

caniuse.com: text-wrap: balance나 :has처럼 기능 이름을 검색합니다. "partial support" 칸에는 아래쪽에 번호 붙은 설명이 있으니 꼭 읽으십시오. 부분 지원은 "되긴 하는데 하필 지금 쓰는 방식은 안 된다"는 뜻일 때가 많습니다.
MDN: CSS 문서마다 Baseline 표시가 있습니다. "Widely available"은 크롬, 엣지, 파이어폭스, 사파리에서 2년 반 이상 지원된 기능, "Newly available"은 각 브라우저 최신 버전에서만 확실한 기능입니다.

레이아웃이 기대는 기능은 Widely available 쪽으로 고르고, 새 기능은 안 돼도 티가 덜 나는 곳에만 쓰는 것이 현실적입니다.

이와 별개로 모든 브라우저에는 내 CSS보다 먼저 적용되는 기본 스타일이 있습니다. 버튼의 글꼴, 안쪽 여백, 테두리, 배경을 정해 두지 않으면 <button>이나 <select>가 Windows에서는 납작하고 아이폰에서는 둥글게 보이며, 날짜 입력칸은 브라우저마다 완전히 다릅니다. 이 값들을 직접 지정하십시오. 어디서나 똑같아야 하는 버튼은 appearance: none으로 기본 모양을 지우고 처음부터 꾸미는 방식이 흔합니다.

캐시: 고쳤는데 고객은 옛날 화면을 볼 때

브라우저는 다음에 빨리 열려고 페이지, 스타일시트, 이미지 사본을 저장해 둡니다. 그래서 고친 파일을 올려도 어제 페이지를 연 사람은 어제의 CSS를 계속 받을 수 있습니다. 내 컴퓨터에서는 강력 새로고침으로 저장본을 건너뜁니다. Windows의 크롬·엣지는 Ctrl+Shift+R 또는 Shift+F5, Mac 크롬은 Cmd+Shift+R입니다.

남의 브라우저는 내가 새로고침할 수 없고, 휴대폰에는 마땅한 단축키도 없습니다. 대신 이렇게 합니다.

시크릿 창(비공개 창)으로 주소를 열어 달라고 부탁합니다.
스타일시트를 고칠 때 연결 주소를 style.css?v=2처럼 바꿉니다. 브라우저는 새 주소로 여기고 다시 받아 옵니다.
호스팅이 CDN을 거친다면 그쪽에도 옛 파일이 한동안 남아 있을 수 있습니다. 관리 화면에서 캐시 비우기(purge) 메뉴를 찾아보십시오.

다른 원인보다 이것부터 확인합니다. "사파리에서 깨져요"라는 연락이 알고 보면 옛 스타일시트 때문인 경우가 꽤 많습니다.

확대 배율, 디스플레이 배율, 글자 크기 설정

내 화면에서는 한 줄이던 제목이 남의 화면에서 두 줄로 넘어간다면 브라우저 확대 배율을 의심해 보십시오. 배율은 사이트별로 기억되어 몇 달 전 설정이 남아 있을 수 있습니다. 크롬은 Ctrl+0(Mac은 Cmd+0)으로 기본 크기로 돌아갑니다.

Windows 노트북은 디스플레이 배율이 125%나 150%인 경우가 많습니다. 폭 1920픽셀 화면을 150%로 쓰면 CSS 입장에서는 폭 1280픽셀 창과 같아서, 1440px 기준으로 만든 레이아웃이 평범한 노트북에서 태블릿용 배치로 바뀝니다. 휴대폰에서는 시스템 글자 크기나 브라우저 자체의 글자 크기 조절로 글씨가 커져 긴 제목이 세 줄이 되기도 합니다. 높이를 고정한 박스가 먼저 깨지므로, 박스는 내용에 따라 늘어나게 두십시오.

강제 다크 모드와 카카오톡 같은 인앱 브라우저

다크 디자인이 없는 페이지를 브라우저가 알아서 어둡게 바꾸기도 합니다. 삼성 인터넷의 다크 모드는 페이지 색을 바꿀 수 있고, 안드로이드 크롬에도 웹 콘텐츠를 자동으로 어둡게 하는 기능이 있었습니다. 배경이 뒤집히거나, 어두운 상자에 어두운 글씨가 놓이거나, 로고가 흰 네모에 갇히는 식입니다. <meta name="color-scheme" content="light">와 CSS color-scheme 속성으로 지원하는 색 구성을 밝힐 수 있고, MDN은 color-scheme: only light로 크롬의 자동 다크 테마를 끌 수 있다고 안내합니다. 다만 처리 방식이 버전마다 바뀌어 왔고 삼성 인터넷은 특히 그렇습니다. 다크 모드를 켠 실제 기기에서 확인하십시오.

카카오톡, 인스타그램, 페이스북에서 링크를 누르면 앱 안의 브라우저가 열립니다. 안드로이드에서는 시스템 웹뷰, iOS에서는 사파리와 같은 엔진을 쓰지만 캐시가 따로이고, 오래된 휴대폰에서는 엔진도 오래됐을 수 있습니다. MDN은 Baseline이 운영체제 웹뷰는 다루지 않는다고 밝히고 있습니다. 카톡으로 보낸 링크에서만 문제가 생긴다면 앱 메뉴에서 외부 브라우저로 여는 항목을 찾아 같은 주소를 열어 보십시오. 그쪽에서 멀쩡하면 인앱 브라우저가 원인이고, 현실적인 해결은 대개 레이아웃을 단순하게 하는 것입니다.

기기를 다 갖추지 않고 시험하는 법

PC에 크롬, 파이어폭스, 엣지를 설치합니다. 파이어폭스는 나머지 둘과 엔진이 달라 다른 문제를 잡아 줍니다.
사파리는 Windows에 설치할 수 없습니다. Mac이 있다면 사파리 설정의 고급 탭에서 웹 개발자용 기능을 보여 주는 항목(영문 Show features for web developers)을 켜면 개발자용 메뉴가 생깁니다. Mac이 없다면 아이폰을 5분만 빌려도 됩니다. 아이폰의 브라우저는 크롬을 포함해 대체로 사파리와 같은 엔진을 씁니다.
삼성 인터넷은 갤럭시가 아닌 안드로이드폰에도 무료로 설치할 수 있습니다.
Android Studio에는 무료 에뮬레이터가, Mac의 Xcode에는 아이폰 시뮬레이터가 들어 있습니다.
원격의 실제 기기로 페이지를 열어 보는 유료 클라우드 테스트 서비스도 있고, 대부분 제한된 체험판이 있습니다.

PC 크롬의 기기 모드(F12 다음 Ctrl+Shift+M)는 창 크기만 바꿀 뿐 엔진은 그대로라서 사파리에서만 생기는 문제는 재현되지 않습니다. 레이아웃 점검은 휴대폰에서 제대로 보이는지 확인하는 법에 더 자세히 있습니다.

짧은 점검 순서

화면 캡처와 함께 브라우저, 기기, 앱에서 링크를 열었는지 물어봅니다.
강력 새로고침이나 시크릿 창으로 열어 봅니다. 해결되면 캐시였습니다.
확대 배율을 되돌리고 디스플레이 배율이나 큰 글자 설정을 쓰는지 묻습니다.
글꼴만 다르다면 페이지가 불러오는지, 내 PC에만 깔려 있는지 확인합니다.
버튼이나 입력칸 모양이 다르면 스타일을 직접 지정합니다.
어둡게 보이면 기기의 다크 모드와 color-scheme 선언을 확인합니다.
레이아웃이 깨지면 최근에 쓴 CSS 기능을 caniuse.com이나 MDN에서 찾아봅니다.

버튼의 안쪽 여백, 배경, 테두리 같은 작은 수정은 Finipage에서 요소를 선택하고 속성을 바꾼 뒤 저장해 다시 올리면 됩니다. 글꼴 목록, appearance, color-scheme처럼 CSS나 <head>에 들어가는 부분은 VS Code 같은 텍스트 편집기로 고쳐야 합니다.

내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.