[web] Safari에서 Universal Link와 서버 리다이렉션의 작동 원리 분석

# 이슈

Universal Link를 통해 iOS에서 특정 앱으로 이동시키기 위해, 여러 방법을 시도했습니다. 특히, sample.com/bb.html 페이지에서 버튼을 눌러 같은 도메인의 /aa 경로로 이동하려 했지만, 예상대로 동작하지 않는 문제를 겪었습니다. 참고로, https://sample.com/aa 경로는 Universal Link로 설정이 완료된 상태입니다. 그러나 다양한 방법을 시도한 결과, 클라이언트 측에서의 모든 리다이렉션은 Universal Link가 정상적으로 작동하지 않았고, 서버 측 리다이렉션을 사용할 때만 Universal Link가 제대로 작동했습니다. 특히, 서버 측 리다이렉션에서도 window.open을 사용해야만 Universal Link가 트리거되었습니다.

 

# 실패 사례: 클라이언트 측 리다이렉션(Javascript)

1-1. window.open을 사용한 경우

window.onload = function() {
     document.getElementById("myButton").addEventListener("click", function() {
          const redirectUrl = "https://sample.com/aa";
          window.open(redirectUrl, "_blank");
     });
};

 

1-2. window.location.href를 사용한 경우

window.onload = function() {
     document.getElementById("myButton").addEventListener("click", function() {
          const redirectUrl = "https://sample.com/aa";
          window.location.href = redirectUrl;
     });
};

 

2. 결과

두 경우 모두 Universal Link가 트리거되지 않고, 앱이 열리지 않으며 웹 페이지가 그대로 열립니다. 클라이언트 측에서의 모든 리다이렉션 시도는 실패했습니다.

 

3. 원인 분석

클라이언트 측에서 같은 도메인 내의 경로로 이동할 때, iOS의 Safari는 Universal Link와 관련된 Apple App Site Association (AASA) 파일을 다시 확인하지 않습니다. 따라서, sample.com/bb.html에서 같은 도메인의 /aa 경로로 window.open이나 window.location.href를 통해 이동해도 Universal Link가 작동하지 않습니다. 이는 Safari가 내부 탐색으로 간주하여, Universal Link를 트리거하지 않기 때문입니다.

 

# 성공 사례: 서버 측 리다이렉션 + window.open

// java
@GetMapping("/redirect")
public ResponseEntity<Void> redirectToApp () {
     HttpHeaders headers = new HttpHeaders();
     headers.add("Location","https://sample.com/aa");
     return new ResponseEntity<>(headers, HttpStatus.FOUND);
}

// javascript
window.onload = function() {
     document.getElementById("myButton").addEventListener("click", function() {
          const redirectUrl = "https://sample.com/aa";
          window.open(redirectUrl, "_blank");
     });
};

 

1. 결과

이 경우 window.open을 사용하여 새로운 탭에서 https://sample.com/redirect로 이동하면, 서버 측에서 https://sample.com/aa로 리다이렉트가 발생하며 Universal Link가 정상적으로 작동하여 앱이 열리게 됩니다.

 

2. 원인 분석

서버 측에서 HTTP 302 리다이렉션을 사용하면, 브라우저는 새로운 HTTP 요청을 생성하게 됩니다. 이 요청은 Safari에서 새로운 요청으로 간주되며, AASA 파일을 다시 확인하게 됩니다. 그러나 이 과정이 window.open으로 새로운 탭에서 실행될 때만 Universal Link가 트리거됩니다. window.location.href를 사용한 기존 탭에서의 이동은 Universal Link가 작동하지 않으며, 브라우저는 내부 탐색으로 간주합니다.

 

# 결론

iOS의 Safari에서 Universal Link를 확실하게 작동시키기 위해서는 서버 측에서 HTTP 리다이렉션을 설정하고, 클라이언트 측에서는 window.open을 사용하여 새 탭에서 링크를 여는 것이 가장 효과적입니다. 클라이언트 측에서의 모든 리다이렉션(window.open, window.location.href)은 Universal Link가 작동하지 않으므로, 반드시 서버 측 리다이렉션과 window.open을 결합해야 합니다.