- Published on
Trying to use ThreeJS cross-platform leaves one drowning! (React Native & Three.js)
- Authors
- Name
- Easyoon
크로스 플랫폼과 ThreeJS를 함께 사용헸다가 환장할 뻔한 이야기.(React Native & Three.js)
시작
Javascript 하나로(!) 또 하나의 공통 로직으로(!) ios, aos, web 세 플랫폼 모두에서 개발할 수 있다니 이보다 더 효율적일 수 없는 것 같았다.
또한 expo라는 툴킷을 사용하면 개발 장비에서 돌아가고 있는 로컬 서버에 expo앱으로 붙을 수 있기 때문에, 기기와 개발장비간의 별도의 유선 연결 없이도 웹과 ios, aos 손 쉽게 디버깅을 할 수 있었다. 이 또한 엄청난 혁신으로 느껴졌다 !
첫 번째 현실, "어엇..;;;;" 환장의 연속
어...?
웹에서는 제대로 뜨는데 aos에서는 왜 빈 화면이...
어...?
이번에는 ios 화면이 ㅡㅡ
세 플랫폼이 한 로직을 공유하고 있기 때문에 수정할 때마다 세 화면을 열심히 비교해야 하는데, 원하는대로 동작 한 번을 쉽게 해주질 않았다...
두 번째 현실
아직 라이브러리 호환성이 좋지 않은 경우가 많다.
Three JS를 리엑트 컴포넌트 식으로 개발하기 위해 R3F를 같이 사용하는데,
이는 웹에서는 제대로 뜨지만 네이티브에서는 제대로 뜨지 않는 경우가 많았다. (예를 들면 네이티브로 접속 시 document를 찾을 수 없다는 등의 에러)
RN와 JS 라이브러리간의 호환성 문제를 RN 개발진들이 개선해서 최적화 하는 게 빠를까... 조용히 포기하는 게 빠를까.......
(비슷한 케이스가 생각났는데, 꽤 오래 전 Python 웹 개발 프레임워크 Django는 아파치 등의 웹서버 호환성이 여러 프로토콜을 경유해야 할 정도로 나빴다. 최근에 어떻게 됐는지는 관심이 없어서 잘 모르겠다.)
세 번째 현실
Aos, ios, web 모두를 디버깅할 수 있게 도와주는 툴킷 expo의 환경은 핫로더도 가능하며 여러모로 끝내주게 혁신적이나...
아직은 다소 느리다는 인상이 강하고 불안정하다.
또 에러가 발생했을 때 어느 레이어에서 에러가 나는지 명확하게 나오지 않는 경우가 꽤 있다.
디버깅을 추론하면서 해야하기 때문에 시간이 더 걸리는 것 같았다.
결론
세 플랫폼에서 일관된 동작 하나를 보기가 생각보다 쉽지 않았다.
매 순간 빠가사리 같은 스스로를 마주하게 되지만, (빠각...빠..각....)
그렇게 원하는 기능 하나를 완성하고 세 디바이스에서 모두 테스트 할 수 있다는 것은 여전히 아주 매력적이다 !
수 많은 빠가사리화의 끝에, 아직 ThreeJS는 온전히 RN에서 돌릴 수 없다는 걸 받아들였다.
따라서 네이티브 프로젝트를 기반으로, 3d를 사용해야 하는 부분은 웹뷰를 통해 렌더링 하기로 했다.
그래도 3d가 아닌 일반적인 웹 화면은 RN으로 충분히 개발 할 수 있어 보였다.