브라우저마다 다르게 보이는 이유
크롬과 사파리는 같은 코드를 각자의 방식으로 해석해요. 그래서 내 폰에서 멀쩡한 화면이 손님 폰에서는 글자가 잘리거나 버튼이 어긋나 보일 수 있어요.
쉽게 말하면
전단지 원본 파일 하나를 인쇄소 세 곳에 맡겨 보면 알아요. 같은 파일인데 한 곳은 색이 진하고, 한 곳은 여백이 조금 다르고, 한 곳은 글자가 아래로 밀려 나와요. 종이도 잉크도 기계도 다르니까요. 브라우저가 그 인쇄소예요. 내가 만든 코드는 원본 파일이고, 손님이 보는 화면은 인쇄된 결과물이에요. 원본이 하나여도 결과물은 인쇄소 수만큼 나와요.
그래서 "제 폰에서는 잘 되는데요"는 만드는 사람들 사이에서 가장 자주 나오는 말이에요. 사장님이 거짓말하는 것도, 손님이 잘못 본 것도 아니에요. 둘 다 진짜로 그렇게 보이고 있어요.
손님 열 명 중 몇 명이 깨진 화면을 보고 있는지 알 방법이 없어요.
이 네 가지만 봐도 실제로 생기는 깨짐의 대부분이 걸려요.
브라우저는 사실 세 종류예요
브라우저 이름은 많아요. 크롬, 사파리, 엣지, 웨일, 삼성 인터넷, 파이어폭스. 그런데 코드를 읽어서 화면을 그리는 속 부분은 세 가지로 모여요. 이 속 부분을 엔진이라고 불러요. 확인해야 할 것은 브라우저 이름 개수가 아니라 이 세 가지예요.
| 브라우저 | 속에 든 엔진 | 사장님이 알아야 할 점 |
|---|---|---|
| 크롬 | 블링크 | 안드로이드 폰과 회사 컴퓨터의 기본이에요. 손님 대다수가 여기로 들어와요 |
| 엣지 · 웨일 · 삼성 인터넷 | 블링크(크롬과 같은 계열) | 겉모습과 부가 기능만 다르고, 화면을 그리는 방식은 크롬과 거의 같아요 |
| 사파리 | 웹킷 | 아이폰과 맥의 기본이에요. 깨짐 제보의 절반 이상이 여기서 나와요 |
| 파이어폭스 | 게코 | 국내 손님 비중은 작지만 남아 있어요. 마지막에 한 번 보면 충분해요 |
아이폰은 예외가 없어요
아이폰에서 크롬을 깔아도 속은 사파리와 같은 웹킷이에요. 애플이 그렇게 정해 뒀기 때문이에요. 그래서 "아이폰 손님한테 크롬으로 열어 보라고 하세요"는 해결책이 못 돼요. 겉옷만 바뀌고 결과는 똑같아요. 아이폰에서 깨지면 사파리 문제로 보고 고쳐야 해요.
왜 하필 내 폰에서는 멀쩡한가
사장님 폰이 특별해서가 아니에요. 사장님 폰이 가장 유리한 조건이라서 그래요. 조건이 네 가지나 다릅니다.
- 1사장님은 자기 서비스를 가장 많이 열어 본 사람이에요. 브라우저가 예전에 받아 둔 옛 그림과 옛 글자 모양을 보관하고 있어서, 처음 오는 손님과 다른 화면을 보고 있을 수 있어요.
- 2사장님 폰은 보통 비교적 최신 기종에 최신 브라우저예요. 손님 중에는 3년 전 폰에 업데이트를 미뤄 둔 사람이 많아요.
- 3사장님 컴퓨터에는 작업하다 설치해 둔 글꼴이 있어요. 그 글꼴이 없는 손님 화면에서는 다른 글꼴로 대체되면서 줄 길이가 달라지고, 버튼이 밀려요.
- 4사장님은 주소를 직접 쳐서 들어가요. 손님은 카톡이나 인스타 링크를 눌러서 앱 안에 들어 있는 브라우저로 들어와요. 이 차이가 가장 커요.
30초면 되는 확인
제보를 받으면 코드를 열기 전에 사장님 브라우저의 저장된 기록을 지우고 다시 접속해 보세요. 옛 화면이 남아 있던 것뿐이었다면 그 자리에서 사장님도 같은 깨짐을 보게 돼요. 고칠 것이 있는지 없는지가 여기서 갈려요.
특히 잘 깨지는 다섯 자리
차이가 아무 데서나 생기지는 않아요. 늘 같은 자리에서 나요. 이 다섯 곳만 알아 두면 제보를 받았을 때 어디를 볼지 바로 짚을 수 있어요.
| 깨지는 자리 | 무슨 일이 나는가 | 왜 그런가 |
|---|---|---|
| 글꼴 | 글자가 더 굵거나 커 보이고, 한 줄이 두 줄이 되면서 아래 버튼을 밀어내요 | 브라우저마다 글자를 그리는 방식이 조금씩 달라요. 없는 글꼴은 다른 글꼴로 대체돼요 |
| 날짜·시간 고르는 칸 | 아이폰에서는 아래에서 돌림판이 올라오고, 컴퓨터에서는 작은 달력이 떠요 | 이 칸은 코드가 그리는 게 아니라 폰과 컴퓨터가 자기 방식으로 그려요 |
| 동영상 자동 재생 | 첫 화면 배경 영상이 사파리에서만 멈춘 채 검게 남아요 | 소리가 켜진 영상을 자동으로 재생할지 말지 정한 규칙이 브라우저마다 달라요 |
| 화면을 꽉 채운 영역 | 아이폰에서 맨 아래 버튼이 주소창에 가려서 안 눌려요 | 폰 사파리는 주소창이 접히고 펴지면서 쓸 수 있는 화면 높이가 실시간으로 변해요 |
| 흐림·그림자 같은 새 효과 | 어떤 브라우저에서는 그냥 회색 판으로 보여요 | 새로 나온 표현은 브라우저마다 지원을 시작한 시점이 달라요 |
공통점이 하나 있어요. 전부 새로 나온 것, 화려한 것, 폰이 직접 그리는 것에서 나요. 평범한 글과 버튼은 어디서나 잘 나와요. 화면 폭에 따라 배치가 바뀌는 문제는 조금 다른 이야기라 화면 크기별로 맞추기에서 따로 다뤄요.
카톡 링크로 들어온 손님
손님 다수는 주소를 치지 않아요. 카톡방이나 인스타 프로필의 링크를 눌러서 들어와요. 그러면 크롬도 사파리도 아니라 그 앱 안에 들어 있는 작은 브라우저가 열려요.
이 안쪽 브라우저는 판이 조금 옛것이거나 일부 기능이 잠겨 있어요. 그래서 카톡에서 열면 결제창이 안 뜨거나, 파일 내려받기가 막히거나, 로그인이 자꾸 풀리는 일이 생겨요. 사장님 잘못이 아니라 그 앱이 정한 울타리예요.
장면 1 · 손님이 카톡으로 알려줬다
“링크 눌렀는데 결제 화면에서 하얗게 멈춰요. 주소 복사해서 크롬으로 열면 되긴 하는데요.”
손님이 원인까지 말해 준 거예요. 앱 안쪽 브라우저에서만 막힌 것이니 서비스가 통째로 고장 난 게 아니에요. 이럴 때는 결제 같은 중요한 단계에 기본 브라우저로 열기 안내를 붙이는 쪽이 정답이에요.
이건 버그가 아니라 환경이에요
앱 안쪽 브라우저는 사장님이 바꿀 수 없어요. 그래서 고치는 방향이 달라요. 코드를 고치는 게 아니라 안내와 순서를 바꿔요. 결제나 파일 업로드처럼 실패하면 손해가 큰 단계는 특히 그래요.
사장님이 실제로 겪는 장면
장면 2 · 외주 개발자가 말했다
“그건 웹킷 이슈예요. 사파리에서만 그렇게 나와요.”
핑계가 아니라 진단이에요. 웹킷은 아이폰과 맥이 쓰는 해석 장치 이름이니까요. 이 말을 들으면 물어볼 것은 하나예요. "사파리에서도 되게 고칠 수 있나요, 아니면 그 효과를 다른 모양으로 바꿔야 하나요?" 대개 둘 중 하나로 정리돼요. 답을 못 하면 그게 신호예요.
장면 3 · 아이폰 쓰는 직원이 말했다
“사장님, 예약 날짜 고르는 게 제 폰에서는 완전 다르게 생겼는데요.”
고장이 아니에요. 날짜 칸은 폰이 자기 방식으로 그려서 그래요. 오히려 손님에게는 자기 폰에서 늘 보던 모양이라 더 쓰기 편해요. 모양을 억지로 통일하려다 오히려 불편해지는 경우가 많아요. 통일할 것과 놔둘 것을 가르는 게 실력이에요.
깨졌다는 제보를 받으면, 순서대로
- 1기종과 경로를 물어봐요. "아이폰인가요 안드로이드인가요", "카톡에서 눌러 들어오셨나요" 두 마디면 범위가 크게 좁혀져요.
- 2화면 사진을 받아요. 말로 들은 깨짐과 실제 깨짐은 다를 때가 많아요. 사진 한 장이 설명 열 줄보다 정확해요.
- 3같은 조건으로 재현해요. 같은 계열 폰으로, 같은 경로로 들어가 봐요. 재현되면 절반은 해결된 거예요.
- 4한 명인지 여러 명인지 세요. 한 명뿐이면 그 사람 브라우저에 남은 옛 화면일 수 있어요. 여러 명이면 코드에서 고칠 일이에요.
- 5고칠 것과 받아들일 것을 나눠요. 버튼이 안 눌리거나 글자가 잘리는 건 고쳐야 해요. 날짜 칸 모양이 폰마다 다른 건 그냥 그런 거예요.
화면에 빨간 글씨나 알 수 없는 문구가 같이 떴다면 그건 다른 종류의 단서예요. 그때는 에러 메시지 읽기를 같이 보세요.
자주 묻는 것
- Q. 브라우저를 종류별로 다 사서 확인해야 하나요?
- 아니에요. 아이폰 하나, 안드로이드 하나, 노트북 하나면 실제 깨짐의 대부분이 걸려요. 주변 사람 폰을 잠깐 빌려서 열어 보는 것도 충분한 방법이에요. 여기에 카톡 링크로 한 번 들어가 보기를 더하면 네 가지가 돼요.
- Q. 그럼 어느 브라우저를 기준으로 만들어야 해요?
- 기준은 브라우저가 아니라 손님이에요. 방문 기록을 보면 어느 브라우저로 얼마나 들어오는지 나와요. 아이폰 손님이 절반이면 사파리가 기준이에요. 방문자 통계에서 확인할 수 있어요.
- Q. 옛 인터넷 익스플로러도 챙겨야 하나요?
- 아니에요. 만든 회사가 지원을 끝냈고 지금은 엣지가 그 자리를 대신해요. 아주 오래된 브라우저까지 맞추면 만드는 비용이 크게 올라가는데, 그 손님은 이제 거의 없어요.
- Q. 화면이 깨지면 손님이 알려 주나요?
- 대부분 알려 주지 않고 그냥 나가요. 그래서 제보 한 건이 들어왔다면 말없이 나간 사람이 여러 명 있었다고 보는 게 맞아요. 제보해 준 손님은 고마운 손님이에요.
- Q. AI에게 만들라고 하면 알아서 다 맞춰 주나요?
- 많은 부분은 알아서 맞춰 줘요. 요즘 만드는 방식 자체가 브라우저 차이를 상당히 흡수해요. 그래도 새로 나온 화려한 효과나 폰이 직접 그리는 칸은 여전히 다르게 나올 수 있어요. 확인은 사람이 눈으로 해야 해요.
- Q. 고쳐 달라고 어떻게 말하면 되나요?
- 기종, 들어온 경로, 증상 세 가지를 한 문장에 붙이면 돼요. "아이폰 사파리에서 카톡 링크로 들어오면 결제 버튼이 화면 아래에 가려요" 이렇게요. 이 한 문장이면 개발자든 AI든 바로 찾아 들어가요.
확인해 보세요
아이폰 쓰는 손님이 "화면이 깨져요"라고 했어요. 가장 먼저 할 일은?
하나 더
같은 코드인데 브라우저마다 화면이 조금씩 다른 이유는?
직접 해보기
미리보기를 폰 폭으로 좁혀서 보세요
만든 화면을 좁은 폭으로 보면 글자가 잘리는 자리와 버튼이 겹치는 자리가 먼저 드러나요. 브라우저 차이를 전부 잡아 주지는 않지만, 가장 흔한 깨짐은 여기서 걸려요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
엔진이라는 말 · 브라우저 안에서 코드를 읽어 화면을 그리는 부분을 엔진이라고 불러요. 블링크(크롬 계열), 웹킷(사파리), 게코(파이어폭스) 셋이에요. 브라우저 이름은 앞으로도 늘어나지만 엔진은 이 셋으로 모여요. 그래서 할 일은 "브라우저 열 개 확인"이 아니라 "엔진 세 개 확인"이에요.
같은 브라우저도 나이마다 달라요 · 종류만 문제가 아니라 나이도 문제예요. 브라우저는 몇 주에 한 번씩 새 판이 나오고, 그때마다 그릴 수 있는 게 조금씩 늘어요. 손님 폰의 브라우저가 2년 전 판이면 그 사이에 생긴 표현은 못 그려요. 업데이트를 미루는 손님이 생각보다 많아서, 새 기능을 쓸 때는 늘 이 사람들을 계산에 넣어야 해요.
차이를 메우는 방법이 있어요 · 새 효과를 못 쓰는 브라우저에게 대신 보여줄 평범한 모양을 미리 정해 두는 방식이 있어요. 흐림 효과가 안 되면 옅은 회색 판을 보여주는 식이에요. 화려함을 포기하는 게 아니라, 최악의 경우에도 글이 읽히고 버튼이 눌리게 만드는 안전장치예요. 개발자에게 "안 되는 브라우저에서는 어떻게 보이나요"라고 물으면 이 준비가 됐는지 알 수 있어요.
이것만 기억하세요
- ·같은 코드라도 브라우저마다 해석이 조금씩 달라요. 원본은 하나, 결과물은 여러 개예요
- ·브라우저는 많아도 해석 장치는 세 종류예요. 아이폰은 무엇을 깔아도 사파리예요
- ·내 폰에서 멀쩡한 건 내 폰이 가장 유리한 조건이라 그래요
- ·카톡·인스타 링크로 온 손님은 앱 안쪽 브라우저를 써요. 결제 단계에서 특히 조심해요
- ·제보를 받으면 기종·들어온 경로·화면 사진 세 가지를 먼저 모아요