No 5. 지옥의 크로스 브라우징을 경험해보자

예전 이야기에서 생각하지 못했던 문제점이 존재했었다.. 그거슨 바로 크로스 브라우징~ (10년 늙은듯 👩‍🦳) Safari에서 캐릭터가 보이지 않는 문제 였는데, 생각지도 못했었고 크리티컬 했다. 프로젝트가 오픈된 상황이였다면.. 진땀 꽤 흘렸을것같다 ;ㅅ;..
여튼 어떻게 해결했는지는 천천히 풀어나가겠다!

왜 캐릭터가 보이지 않는것인가?에 대한 고찰 🤯

예전 이야기에서 svg와 foreignObject를 잠깐 언급했었는데, 간단히 설명하자면 svg는 벡터 그래픽을 보여주는 div, foreignObject는 html을 처리해주는 div 같은 느낌이라 보면된다. Chrome에서 예시 코드 블럭과 같은 구조가 되더라도 캐릭터가 잘 나타났었기 때문에 'ㅋㅋ 다른 로직 수정해야지~'하고 잊고있었는데.. 대표님이 아이폰에서 캐릭터가 안 보인다고 제보 주셔서 해당 이슈를 알게 되었다. 확인해보니 아이폰 Chrome에서는 잘 보였지만, 사파리에서만 보이지 않았다. 구현한 jsx 구조를 살펴보니 svg안에 foreignObject를 넣기만 하면 캐릭터가 홀라당 사라지는 것이였다. 진짜 그냥 깨끗하게 사라졌다. ✨
(사파리에서 어떻게 보고 수정했는지는 밑에서 설명하겠다.)

{/* 그때 당시 구조 */}

<svg>
  <foreignObject/>
</svg>

처음은 이 상황을 이해하지 못해서 macOS 나 iOS면 예시 코드 블럭과 같이 jsx 구조를 설계했다. (사실 iOS 구조처럼 설계하고 window에서 잘 나타나는지 확인을 하면 됐었는데, 그때 당시엔 너무 당황해서 삼항연산자로 나눴었다.)

{/* iOS일때 */}

<div>
    <svg>
        <path/>
        <followPath/>
    </svg>
    <div>
        <div>
            <div/>
        </div>
    </div>
</div>

{/* 아닐때 */}

<svg>
    <path/>
    <followPath/>

    <foreignObject>
        <div/>
    </foreignObject>
</svg>

그렇게 여러 번 삽질을 하고 난 뒤 iOS 구조로 최종적으로 구현하고, 맥북 / 아이폰 사이즈에서 캐릭터가 잘 보이는지? 크기는 괜찮은지? 확인을 하는 시간이 다가왔다.

어떻게 Safari에서 확인하지?

설명 전 전제 조건이 필요한게 몇 가지 있는데, 이게 귀찮은 방법이라 생각되면 과감하게 내용을 생략해도 된다. (이 방법말고 다른 방법이 있는지는 모르겠다. 🙄)

1. 아이폰이 있어야한다.
2. 맥북이 있어야한다.
3. 맥북에 Xcode가 설치되어있어야한다.
4. 아이폰과 맥북을 연결하는 케이블이 필요하다.
   4-1. 충전만 되는 케이블을 사용하면 안된다.
   4-2. 연결해도 안나오면 정품 케이블이나 다른 케이블을 이용하자.
5. 아이폰과 맥북이 같은 공유기(와이파이)에 연결되는 상황이여야한다.

그 때 당시의 내 기기들은 다음과 같다.

1. iphone 15 pro / iphone 15 pro max
2. 

🌏 아이피 주소를 알아보기 위해선 맥북의 터미널에 ipconfig를 통해 보아야하고 아이피 주소는 환경마다 다르니 자신의 아이피 주소를 확인 후 들어갈것

📱 아이폰에 케이블을 연결하면 개발자 모드가 바로 활성화 되지 않는다. (보안 이슈 때문인것 같다.) 이때를 위해 Xcode가 필요하다.
(개발자 모드는 이 블로그를 통해 해결했다.)

🎊 그리고 맥북에서 프로젝트 환경을 실행 후 아이폰의 Safari에서 아이피 주소를 입력하면 맥북과 같은 화면이 나오게 된다~

이렇게 맥북과 아이폰에서 캐릭터 크기를 미디어 쿼리로 세세하게 맞추고 끝낼 수 있었다.

🤔 Safari로 들어가니 캐릭터의 이동이 조금씩 끊기는데, 구글링하니 translate3d(x, y, z)로 해결 하라고 나왔다. 하지만 나에겐 소용이 없었다.. 추후 이 과정을 해결할 시간이 있다면 다시 기록할 예정이다.(현재는 다른 이슈들이 쌓여있어서 집중적으로 보기엔 힘들다 😥)