1. 호기심의 시작 - 잠실 샤넬 아이스링크장 방문

안녕하세요! 얼마 전에 샤넬의 “Winter Tale Holiday Ice Link 2024” 잠실 팝업을 방문했다가 AR 카메라를 홍보하는 QR 코드를 발견했어요. QR 코드를 스캔해보니 꽤 신기했는데요, AR로 구현된 눈송이들의 퀄리티가 정말 인상적이었어요. 보통 보는 2D 화면 효과와는 달리, 눈송이들이 3D 공간에서 자연스럽게 움직이면서 완전히 몰입되는 경험을 제공했죠. 더 신기한 건 이 모든 게 웹 브라우저에서 이루어졌다는 거예요.

이걸 보고 나서 궁금해졌어요. 샤넬은 어떻게 이렇게 수준 높은 웹 기반 AR 카메라를 구현했을까? 그래서 집에가서 어떻게 이런 웹 기반 카메라를 구현 했는지 뜯어보고 싶었어요.

2. 웹사이트 분석

일단 브라우저 개발자 도구 부터 열어봤어요. 탭을 열고 백그라운드에서 로딩 되는 파일들과 스크립트들을 자세히 살펴봤죠. AR 경험을 만드는 여러 요소들이 어떻게 연결되어 있는지 보는 게 정말 흥미로웠어요. 복잡하게 파일이 얽혀있지는 않아서 어떤 파일들로 이루어져있는지 잘 보이더라고요.

특히 눈에 띈 것들이 있었어요:

• 눈송이 효과를 만드는 텍스처 파일, 이미지 파일들
• slam.js, face.js, hand.js 같은 고급 AR 기능을 암시하는 스크립트들
• 샤넬 눈송이 파일이 있는 .glb 파일

어떻게 작동하는지 더 자세히 알아보고 싶어서 wget이랑 httrack 같은 도구로 웹사이트를 오프라인에서 볼 수 있게 다운받아 보려고 했는데 성공하지는 못했어요. Timeout Error 가 계속 뜨더라고요. 그래서 그냥 브라우저에서 수동으로 파일들을 내려받았습니다.

3. 로컬에서 실행하려고 했을때 생긴 문제

다운받은 파일들로 로컬에서 실행해보려는데 문제에 부딪혔어요. Html파일조차 열리지 않더라고요. 에러 메세지만 떴어요.

“Domain Not Authorized. AppKey=…”

이 에러 덕분에(?) 중요한 걸 알게 됐는데, 이 웹사이트가 8thWall이라는 웹 AR 플랫폼으로 만들어졌더라고요. 8thWall은 보안 때문에 승인된 도메인(예: 샤넬 공식 사이트)에서만 작동하게 되어있어서 제가 로컬에서 실행하는 건 불가능했어요.

4. 사용된 기술들 파헤치기

완벽하게 따라 만들진 못했지만, 주요 기술들은 파악할 수 있었어요:

• 8th Wall: 웹 AR 플랫폼이에요. 공간 인식, 이미지 인식, 얼굴 효과 같은 기능들을 제공하는데, 특히 마커(AR 마커 스티커 같은 거) 없이도 AR이 가능한 게 특징이더라고요. 웹기반 AR SASS 서비스를 제공하는것 같더라고요. 성능은 좋은데 비싸서 좀 돈이 있는 고객사만 쓰는 것 같았어요.
• Three.js: 웹에서 3D 그래픽을 다룰 수 있게 해주는 자바스크립트 라이브러리예요. 눈송이 3D 모델이랑 파티클 효과를 이걸로 구현했을 것 같아요.
• WebRTC: 실시간으로 카메라나 오디오를 다룰 수 있게 해주는 기술이에요. AR 카메라 기능을 위해 쓴 것 같아요.

5. 다른 방법은 없었을까?

8thWall 말고도 비슷한 걸 만들 수 있는 방법이 있나 찾아봤어요:

• WebXR: 웹에서 AR/VR을 구현할 수 있는 표준이에요. 근데 브라우저마다 지원하는 게 달라서 아직은 불안정할 수 있을것 같아요.
• Mediapipe: 구글에서 만든 얼굴/손 인식 프레임워크인데, AR까지는 안 되는것 같은데 시도해보지는 않았어요.
• AR.js: 웹 AR 라이브러리에요. 이것도 사용해보지는 않았는데 성능이 좀 떨어진다고 하는것 같아요.

찾아보니까 이해가 되더라고요. 왜 샤넬이 8thWall을 선택했는지.

6. 샤넬은 왜 8thWall을 사용했을까?

다른 럭셔리 브랜드들도 8thWall을 많이 쓴다는 걸 알게 됐어요(에르메스에서 사용한 사례도 있더라고요). 이유가 있더라고요:

• 거의 모든 기기에서 잘 돌아가요 (아이폰이든 안드로이드든)
• 얼굴/손 인식이 정확하고 안정적이에요
• 럭셔리 브랜드에 걸맞은 고급스러운 퀄리티를 제공하고요

샤넬처럼 전세계 고객들에게 완벽한 경험을 제공해야 하는 브랜드한테는 최적의 선택이었을 것 같아요. 비용보다는 가장 최적화된 경험을 제공하는게 좋으니까요.

마무리하며

이번에 샤넬의 AR 기술을 분석하면서 웹 기반 AR의 성능이 이정도까지도 나오는 게 신기했어요. 그리고 단순히 예쁜 효과가 아니라, 실제 공간과 자연스럽게 어우러지는 경험을 만들 수 있다는 게 너무 신기했죠. 8thWall이라는 플랫폼도 알게 됐고, 웹기반 AR 과 SLAM을 구현하는게 꽤 난이도가 있다는 생각이 들었어요.

근데 한 가지 궁금한 게 생겼어요: 만약 제가 이런 시스템을 만들 수 있다면, 어떤 걸 만들어볼 수 있을까요? 어떤것을 만들기보다 어떻게 이 기술로 더 좋은 아니면 유용하고 편한 경험을 제공할 수 있을까요?