클로저를 간과했다.
호되게 당해버렸다.
모던자바스크립트 딥다이브 책을 읽을 때만 해도 당장 쓸 일이 없을 것만 같았다.
아니었다.
그는 생각보다 가까이에 있었다.
오늘의 실패
▸setTimeOut 함수는 클로저로 써야한다.
실패 원인
기획팀의 커뮤니케이션 오류로 인해, ios에서 연결될 수 있는 디퍼드 딥링크(설명은 링크 참조)를 만들어야만 했다. '디퍼드 딥링크를 왜 내가...? 그걸 만들 수 있었으면 다른 회사에 있지 않았을까...?'하는 생각이 들었지만, 별 수 있나? 이미 기획팀은 그걸 하겠다고 했고, 그렇게 안된다고 팀장과 내가 얘기했는데 엎질러져버린 물이었다. 일단 레퍼런스부터 찾아보기로 했다. 레퍼런스는 대부분 setTimeOut 함수를 활용해 앱 스킴 링크와 앱스토어를 순차적으로 열리게 하는 방법들이었다. 찾은 레퍼런스를 활용해 코드를 짜고 샘플을 공유했는데, 기획팀에서 QA 후 문제점으로 두 가지를 전달했다.
- 앱스토어만 열린다.
- 앱이 열렸다가 앱스토어가 열린다.
문제점 확인
처음 작성했던 코드는 이렇다.
document.getElemetById('DOM ID').addEventListener('click', function() {
const clickTime = new Date().getTime()
setTimeout(function(){
if (new Date().getTime() - clickTime < 3000) {
location.href = '앱스토어 링크 URL'
}
}, 2500)
setTimeout(function(){
location.href = '앱 스킴://'
}, 0)
});로직은 간단했다.
제일 먼저 버튼을 클릭하면 앱이 있는지 확인하기 위해 스킴 링크부터 실행한다. 그리고 앱이 없을 경우에는 스킴 링크가 열리지 않기 때문에 현재 시간과 클릭한 시간을 비교해 앱스토어 링크를 열어준다.
2번 오류의 경우, 발생 원인이 비교적 명확했다. 앱스토어를 열어주는 setTimeOut 함수가 이미 실행이 되었기 때문에 이미 앱이 실행되었음에도 함수가 동작하는 것 같았다.
1번 오류는 파악하기가 어려웠다. 앱이 분명히 있음에도 기기에 따라 앱스토어로만 이동하고 앱 스킴 링크는 작동하지 않았다. 그래서 모든 개발자의 친구, 구글을 뒤져보니 Branch 라는 MMP에서 아래와 같이 설명하고 있었다.
중앙 등록 시스템이 없어서 URI 충돌이 발생할 수 있습니다 (애플의 공식적인 입장은 현재로는 처리 절차가 없다는 것입니다) 많은 개발자가 복잡한 자바스크립트 재설정을 사용하여 첫 번째 문제의 회피 방법을 개발하였지만, 매번 새로운 iOS가 출시될 때마다 동작을 멈추는 경향이 있습니다.
게다가 ios 자체에서 이런 트릭성 코드가 작동하지 않도록 보안 상 막아놓았다는 글도 왕왕 찾을 수 있었다. 점점 미간이 좁아져만 갔다.
해결 방법
코드 자체는 document.hidden 같은 객체를 써서 웹이 일정 시간이 지나도 여전히 열려있다면 앱스토어로 이동하도록 setTimeOut 함수를 수정했지만 여전히 기기별, os 버전별로 구동 차이가 났다. 당장 며칠 내로 이벤트를 오픈해야하는 상황이어서 점점 문제 상황은 심각해졌고, 팀장님에게 코드 리뷰를 받았다.
그제서야 팀장님은 setTimeOut 함수는 클로저를 활용해 다른 함수로 한 번 더 감싸줘야한다는 피드백을 받았다. 그래서 부랴부랴 코드를 수정하고 QA를 진행했으나 이번에는 또 "유효하지 않은 URL"이라는 팝업창이 뜨는 것이 문제가 되었다.
하지만 그건 어딜 찾아봐도 앱이 없을 때, 해당 앱을 여는 스킴 링크를 작동시킬 경우 ios 보안 상 뜨는 팝업창이므로 없앨 방법을 찾을 수는 없었다. 결국 대면회의를 통해 ios에서는 웹에서 이런 처리를 통해 딥링크 구현이 불가능하다는 걸 모두가 확인하고 앱 자체에서 MMP 측 sdk를 심어 개발하기로 하고 나서야 해결되었다.
한줄 회고
기획팀 커뮤니케이션에 이상이 생겨, 기획팀이나 나나 안 먹어도 될 욕 먹어가면서 작업했지만, 클로저를 이렇게 써먹을 기회가 생겼다. 아직도 이해는 완벽히 안됐지만... 커뮤니케이션의 중요성과 클로저의 중요성을 동시에 깨달은 트러블이었다.
