웹사이트에는 브라우저에서는 유용하지만 앱 내부에서는 표시하지 않아야 하는 요소가 있을 수 있어요. 일반적인 예로는 사용자에게 앱 다운로드를 요청하는 배너, Apple 심사 담당자에게 혼란을 줄 수 있는 쿠키 배너, 앱 심사 중의 결제 버튼 또는 앱 메뉴로 대체되는 웹사이트 탐색 메뉴가 있어요.
앱 전용 동작을 웹사이트에 직접 구현하려면 방문자가 앱을 사용 중인지 감지할 수도 있어요. 웹사이트 사용자와 앱 사용자를 구분하는 방법에 관한 가이드를 읽어보세요.
다음 섹션에서는 "웹사이트 맞춤 설정"에서 조정할 수 있는 다양한 설정을 설명해요. 여기에서 앱의 웹사이트 맞춤 설정을 열 수 있어요.
요소 숨기기 선택자
특정 요소를 앱 내부에 절대 표시하지 않아야 할 때 요소 숨기기 선택자를 사용하세요. 숨기려는 요소의 CSS 선택자를 입력하면 웹사이트가 앱 내부에 표시될 때 앱에서 일치하는 모든 요소를 숨겨요.
앱 다운로드 안내, 중복되는 웹사이트 탐색 메뉴 또는 웹사이트에서는 유용하지만 앱에서는 불필요한 기타 요소에 적합해요.
삽입할 CSS
일반적으로 요소 숨기기 선택자는 더 빠르게 작동하므로(CSS가 적용되기 전에 깜박임이 없음) 사용하는 것이 좋아요. 하지만 단순한 숨기기 선택자로 충분하지 않고 앱 내부에서 페이지 스타일을 조정하려는 경우에는 삽입할 CSS를 사용할 수도 있어요. CSS는 표시되는 웹사이트에 삽입되며 style 태그로 감쌀 필요가 없어요.
.website-only-banner {
display: none !important;
}삽입할 JavaScript
요소를 숨기거나 변경하는 데 로직이 필요하거나 적절한 CSS 선택자를 찾을 수 없을 때 삽입할 JavaScript를 사용하세요. JavaScript는 DOMContentLoaded 이벤트 후 페이지가 로드될 때마다 한 번 실행되며 script 태그로 감쌀 필요가 없어요.
다음은 Apple에서 허용하지 않는 동적으로 로드되는 소셜 로그인 버튼을 반복문을 사용해 숨기는 예시예요.
setInterval(() => {
if (window.location.href.toLowerCase().includes("login")) {
document.querySelectorAll("button").forEach(btn => {
const text = btn.textContent.toLowerCase().trim();
if (
text.includes("sign in with google") ||
text.includes("continue with google") ||
text.includes("sign in with microsoft") ||
text.includes("continue with microsoft") ||
text.includes("sign in with facebook") ||
text.includes("continue with facebook")
) {
btn.style.display = "none";
}
});
}
}, 200);AI로 제작한 웹사이트용 프롬프트
웹사이트를 AI 도구로 제작했다면 해당 도구를 사용해 요소를 숨기는 데 도움을 받을 수 있어요. 예를 들어 앱에서 모든 결제 관련 요소를 쉽게 숨길 방법이 필요하다면 다음 프롬프트를 입력할 수 있어요.
웹사이트에서 모든 결제 관련 요소를 쉽게 숨길 방법이 필요해요. 이를 위해 결제와 관련된 모든 UI 요소에 "payment" HTML 클래스를 지정해 주세요. 상위 요소에 payment 클래스가 있으면 상위 요소를 숨길 때 하위 요소도 자동으로 숨겨지므로 하위 요소에는 클래스를 추가하지 않아도 돼요. 숨기는 로직은 웹사이트 외부에서 처리되므로 구현하지 마세요.
그런 다음 요소 숨기기 선택자에 CSS 선택자 .payment를 추가하면 모든 결제 관련 요소가 더 이상 앱에 표시되지 않아요.