애플 공식 문서는 반응형 디자인 모드에서 화면 너비와 높이뿐 아니라 2배 화소 밀도까지 바꿔 볼 수 있다고 설명합니다. 그러나 이 기능은 실제 기기의 주소 표시줄, 화면 키보드, 입력 방식까지 그대로 재현하지 않습니다. 따라서 사파리 호환성 테스트 2026의 기본 순서는 실제 맥의 정식 사파리로 핵심 결제 흐름을 먼저 검수하고, 반응형 모드와 시뮬레이터로 범위를 넓힌 뒤 중요한 화면을 실제 기기로 확인하는 방식이어야 합니다. (애플 반응형 디자인 모드 공식 문서)
이 글은 윈도우를 주로 사용하는 해외 독립몰 운영자와 프로젝트 책임자를 위한 안내입니다. 사파리에서 화면이 어긋나거나 입력창이 작동하지 않는 문제를 확인해야 하는 팀, 반복 가능한 출시 전 검수 절차가 필요한 협업팀에 적합합니다.
[ SECTION_01 ] 크롬에서 정상이어도 사파리 검수는 따로 해야 합니다
해외 독립몰에서 자주 발생하는 실패는 첫 화면이 아닙니다. 상품을 고르고 주소를 입력한 뒤 결제 버튼을 눌렀을 때 문제가 드러납니다.
대표적인 문제는 다음과 같습니다.
- 고정된 결제 버튼이 화면 아래 가려집니다.
- 주소 입력 뒤 다음 단계로 넘어가지 않습니다.
- 할인 코드 적용 후 장바구니 금액이 갱신되지 않습니다.
- 결제 화면으로 이동했지만 돌아온 뒤 주문 상태가 사라집니다.
- 지역별 통화나 배송 안내가 이전 방문자의 상태로 남습니다.
- 외부 결제 창이나 본인 확인 창이 열리지 않습니다.
- 사진 업로드 또는 날짜 입력 기능이 사파리에서 다르게 작동합니다.
크롬에서 창의 크기만 줄이는 방식은 CSS 배치 확인에는 도움이 됩니다. 하지만 사파리의 입력 동작, 세션 유지, 쿠키 처리, 외부 결제 이동까지 증명하지는 못합니다. 이 차이 때문에 화면이 비슷하다는 이유만으로 출시 승인을 내리면 안 됩니다.
[ SECTION_02 ] 사파리 호환성 테스트 범위와 합격 기준을 먼저 정합니다
검수 전에 페이지와 상태를 나눠야 합니다. 첫 화면만 확인하면 재현 조건이 빠집니다.
우선 확인할 페이지
다음 순서로 검사 범위를 정합니다.
- 광고가 연결되는 지역별 도착 페이지
- 상품 상세 화면
- 장바구니와 할인 코드 화면
- 회원 가입과 로그인 화면
- 주소와 배송지 입력 화면
- 결제 전 확인 화면
- 결제 완료와 실패 결과 화면
- 주문 조회 또는 고객 문의 화면
사용자 상태도 나눠 기록합니다
같은 주소라도 사용자 상태에 따라 결과가 달라질 수 있습니다.
- 새 방문자: 저장된 쿠키와 이전 세션이 없는 상태입니다.
- 재방문자: 언어, 통화, 지역 선택값이 남아 있는 상태입니다.
- 로그인 사용자: 계정 정보와 배송지 자동 입력이 적용된 상태입니다.
- 해외 접속 상태: 네트워크 출구 지역에 따라 노출 조건을 확인하는 상태입니다.
미국 또는 해외 노드는 특정 지역에서 페이지가 어떻게 열리는지 재현하는 데 도움을 줍니다. 다만 인터넷 주소만으로 실제 사용자가 보는 모든 콘텐츠를 단정할 수는 없습니다. 플랫폼의 위험 판단이나 계정 심사를 우회한다고 약속해서도 안 됩니다.
문제 등급을 세 단계로 나눕니다
- 출시 차단: 상품 선택, 주소 입력, 결제 이동, 주문 완료가 되지 않습니다.
- 전환 영향: 쿠폰, 배송비, 통화, 지역 안내가 잘못 표시됩니다.
- 일반 표시 차이: 글자 간격이나 장식 위치가 다르지만 거래는 가능합니다.
핵심 거래 흐름이 끊기면 다른 문제가 없더라도 출시를 멈춰야 합니다. 작은 시각 차이는 담당자와 수정 기한을 정한 뒤 기록으로 남길 수 있습니다.
[ SECTION_03 ] 실제 맥, 반응형 모드, 시뮬레이터의 역할을 나눕니다
세 가지 환경은 같은 검수 도구가 아닙니다.
실제 맥의 정식 사파리
가장 먼저 사용해야 하는 기준 환경입니다. 데스크톱 화면, 키보드 입력, 저장된 세션, 팝업 이동, 결제 복귀를 실제 사용 흐름에 가깝게 확인할 수 있습니다.
맥에서 사파리의 개발자 기능을 켜려면 설정의 고급 항목에서 웹 개발자 기능 표시를 활성화합니다. 애플 공식 안내에도 개발 메뉴와 웹 검사기는 기본으로 꺼져 있다고 나옵니다. (애플 개발자 기능 공식 문서)
반응형 디자인 모드
화면 너비, 높이, 방향, 화소 밀도를 빠르게 비교하는 도구입니다. 데스크톱과 모바일 배치의 차이를 찾는 데 적합합니다. 애플은 미리 설정된 화면 크기가 실제 기기의 배치와 동작을 정확히 나타내지 않는다고 안내합니다. (애플 반응형 디자인 모드 공식 문서)
스크린샷 권장 위치는 다음과 같습니다.
- 사파리에서 개발 메뉴를 켜는 화면
- 반응형 디자인 모드에 들어가는 메뉴
- 세로와 가로 화면을 바꾸는 장면
- 화소 밀도를 바꾼 뒤 상품 이미지와 고정 버튼을 비교한 장면
시뮬레이터
실제 기기를 당장 준비하기 어려울 때 모바일 사파리의 화면과 상호작용을 더 가깝게 확인하는 단계입니다. 애플은 시뮬레이터가 실제 기기 없이 웹 페이지를 시험하는 데 사용될 수 있다고 설명합니다. 다만 실제 기기와 네트워크, 센서, 키보드 동작이 완전히 같다고 보아서는 안 됩니다. (애플 사파리 개발 도구 안내)
[ SECTION_04 ] 검수 환경 선택 결정 도구
아래 조건에서 해당되는 항목을 골라 검수 환경을 정합니다.
-
[ ] 화면 배치만 확인하면 됩니다.
반응형 디자인 모드를 선택합니다. 메뉴, 상품 이미지, 글자 줄바꿈, 고정 버튼의 위치를 먼저 확인합니다. -
[ ] 회원 가입, 주소 입력, 할인 코드, 결제 이동을 확인해야 합니다.
실제 맥의 정식 사파리를 선택합니다. 크롬 창 크기 조절만으로는 합격 처리하지 않습니다. -
[ ] 모바일 화면에서 키보드가 열릴 때 위치가 바뀝니다.
반응형 모드에서 끝내지 말고 시뮬레이터를 추가합니다. -
[ ] 파일 선택, 카메라 권한, 센서, 실제 결제 기기 동작이 포함됩니다.
시뮬레이터를 참고 자료로만 사용하고 실제 기기 검수를 추가합니다. -
[ ] 운영팀과 개발팀이 같은 환경에서 여러 번 재현해야 합니다.
독립된 원격 맥을 선택합니다. 사용자별 쿠키와 로그인 상태가 섞이지 않아야 합니다. -
[ ] 상품 선택부터 주문 완료까지 한 단계라도 실패합니다.
출시를 보류합니다. 문제를 수정한 뒤 같은 계정 상태와 같은 경로로 다시 검수합니다. -
[ ] 거래는 정상이고 글자 간격이나 장식 위치만 다릅니다.
출시 차단이 아닌 수정 목록으로 등록합니다. 담당자와 수정 기한을 함께 기록합니다.
이 조건표에서 실제 맥을 선택해야 하는 항목이 하나라도 있으면, 반응형 모드 결과만으로 출시를 승인하지 않는 것이 안전합니다.
[ SECTION_05 ] 해외 독립몰의 화면과 결제 흐름을 검수합니다
화면 배치에서 확인할 항목
다음 항목은 단순히 스크린샷을 나란히 놓는 것보다 실제 조작으로 확인해야 합니다.
- 상단 메뉴가 가로로 밀리지 않는지 확인합니다.
- 상품 사진이 잘리거나 흐려지지 않는지 확인합니다.
- 프로모션 팝업을 닫을 수 있는지 확인합니다.
- 글자 크기와 줄바꿈 때문에 가격이 가려지지 않는지 확인합니다.
- 화면 아래 고정된 구매 버튼이 입력창을 덮지 않는지 확인합니다.
- 가로 스크롤이 의도하지 않게 생기지 않는지 확인합니다.
- 세로와 가로 방향을 모두 바꾸어 확인합니다.
- 화소 밀도가 달라질 때 이미지와 얇은 테두리가 깨지지 않는지 확인합니다.
거래 흐름에서 확인할 항목
방문자가 실제로 밟는 순서대로 기록합니다.
- 지역별 도착 페이지를 엽니다.
- 언어와 통화가 사업 규칙에 맞는지 확인합니다.
- 상품을 선택하고 옵션을 바꿉니다.
- 장바구니에서 수량과 할인 코드를 바꿉니다.
- 회원 가입 또는 로그인을 진행합니다.
- 배송지와 연락처를 입력합니다.
- 자동 완성, 날짜 선택, 인증 코드 입력을 확인합니다.
- 결제 화면으로 이동합니다.
- 결제 성공 또는 실패 뒤 결과 페이지로 돌아옵니다.
- 새로 고침 뒤 주문 상태가 유지되는지 확인합니다.
파일 업로드, 권한 요청, 새 창, 뒤로 가기 뒤 입력값 유지도 별도 항목으로 남깁니다. “사파리에서 안 됨”이라고 적지 말고 “로그인 후 배송지 저장을 눌렀으나 다음 단계로 이동하지 않음”처럼 작성해야 개발자가 재현할 수 있습니다.
[ SECTION_06 ] 반응형 디자인 모드가 아이폰 실제 기기를 대신할 수 있습니까?
대신할 수 없습니다. 반응형 모드는 화면 크기와 화소 밀도에 따른 배치를 빠르게 확인하는 데 좋습니다. 하지만 주소 표시줄의 변화, 화면 키보드가 열린 뒤의 높이, 기기별 입력창 동작은 실제 기기 또는 시뮬레이터에서 다시 확인해야 합니다. (애플 반응형 디자인 모드 공식 문서)
따라서 다음 조건이면 시뮬레이터나 실제 기기 검수를 추가합니다.
- 결제 입력창이 화면 아래쪽에 있습니다.
- 주소 자동 완성에 의존합니다.
- 화면 키보드가 열릴 때 팝업이 함께 움직입니다.
- 파일 업로드나 카메라 권한을 사용합니다.
- 가로 방향 주문 화면을 제공합니다.
- 결제 뒤 외부 화면에서 다시 쇼핑몰로 돌아옵니다.
[ SECTION_07 ] 현지 맥이 없어도 사파리 검수는 가능합니다
현지에 맥이 없어도 검수 자체를 포기할 필요는 없습니다. 가장 현실적인 방법은 원격으로 연결한 실제 맥에서 사파리와 개발 도구를 사용하는 것입니다.
공유 환경보다 독립된 원격 맥이 적합한 이유는 세 가지입니다.
- 다른 사용자의 쿠키와 로그인 세션이 섞이지 않습니다.
- 같은 지역 노드와 같은 브라우저 상태로 재검수할 수 있습니다.
- 운영 담당자와 개발 담당자가 동일한 화면을 차례로 확인할 수 있습니다.
원격 환경을 고를 때는 연결 방식, 관리자 권한, 지역 노드, 재부팅 절차, 저장 공간 초기화 방법을 확인합니다. 단순히 해외 인터넷 주소만 제공하는 환경과 실제 맥오에스에 접속하는 환경은 다릅니다. 사파리의 메뉴와 웹 검사기를 직접 사용해야 한다면 실제 맥이 필요합니다.
해외 맥 환경의 구성 항목을 먼저 확인하려면 해외 맥 환경 구성과 점검 기준을 참고할 수 있습니다. 미국 방문자의 화면을 재현해야 한다면 미국 동부 맥 대여 안내에서 지역과 접속 방식을 확인한 뒤 시험하는 편이 안전합니다.
[ SECTION_08 ] 쇼핑몰 플랫폼에서 사파리가 열리지 않을 때 확인할 순서
쇼핑몰 플랫폼으로 만든 사이트가 사파리에서 열리지 않는다면 먼저 브라우저 전체 문제로 단정하지 않습니다.
다음 순서로 범위를 줄입니다.
- 새 개인 정보 보호 창에서 같은 주소를 엽니다.
- 특정 도착 페이지만 실패하는지 확인합니다.
- 로그인 전과 로그인 후 결과를 나눕니다.
- 광고 추적 매개 변수를 제거한 주소를 비교합니다.
- 결제나 인증 같은 외부 이동 직전에 멈추는지 확인합니다.
- 사파리의 웹 검사기에서 오류와 실패 요청을 저장합니다.
- 같은 계정과 같은 경로를 실제 맥에서 다시 실행합니다.
웹 검사기의 네트워크 항목은 스타일 파일, 자바스크립트, 문서뿐 아니라 주소 요청, 실시간 연결, 분석 전송 요청까지 보여 줍니다. 요청 상태, 이동 주소, 응답 헤더, 쿠키와 로딩 순서를 확인할 수 있습니다. (웹킷 웹 검사기 네트워크 항목 공식 문서)
운영 담당자는 코드를 고칠 필요가 없습니다. 다음 자료만 모아도 충분합니다.
- 오류가 난 시각
- 접속한 페이지 주소
- 사용자 상태
- 클릭한 순서
- 화면 녹화 또는 캡처
- 실패한 요청의 상태
- 성공했을 때의 기대 결과
[ SECTION_09 ] 출시 전 사파리 기능 검수 기준을 고정합니다
출시 전에 매번 같은 항목을 실행해야 결과가 비교됩니다.
핵심 기능 묶음
- 메뉴 열기와 닫기
- 상품 옵션 변경
- 장바구니 수량 변경
- 할인 코드 적용
- 로그인과 로그아웃
- 주소와 배송지 입력
- 자동 완성
- 파일 업로드
- 팝업과 권한 요청
- 외부 결제 이동
- 결제 복귀
- 주문 결과 표시
- 언어와 통화 변경
- 세금과 배송 안내 표시
- 새로 고침 뒤 상태 유지
증거 기록 형식
각 항목에는 다음 내용을 넣습니다.
- 페이지 이름
- 환경 이름
- 사용자 상태
- 실행 결과
- 문제 등급
- 재현 절차
- 캡처 또는 녹화 파일
- 담당자
- 수정 후 재검수 결과
웹 검사기는 페이지의 저장 데이터와 요청 활동을 확인하는 데 사용할 수 있습니다. 애플은 사파리 개발 도구가 웹 페이지의 저장 정보와 네트워크 활동을 살펴보는 데 활용된다고 안내합니다. (애플 사파리 개발 도구 공식 안내)
[ SECTION_10 ] 검수 결과에 따라 출시 여부를 결정합니다
현재 방식의 가장 큰 약점은 크롬 중심 검수에 머물기 쉽고, 담당자마다 다른 브라우저 상태를 사용하며, 결제 실패 증거를 남기기 어렵다는 점입니다. 실제 맥을 직접 구매하면 장비 관리와 원격 협업 부담이 생기고, 잠깐 필요한 검수를 위해 하드웨어 비용까지 부담해야 합니다.
이런 경우 NOVAKVM의 원격 맥을 사용하면 실제 맥오에스와 사파리에 접속해 핵심 결제 흐름을 먼저 시험하고, 같은 환경을 운영팀과 개발팀이 이어서 재현할 수 있습니다. 장기적인 고정 작업이나 물리 기기가 반드시 필요한 검수라면 직접 장비를 마련하는 편이 낫습니다. 반대로 출시 전 일회성 검수와 반복 재현이 목적이라면 원격 맥 접속 환경 확인하기부터 비교해 보는 것이 합리적입니다.