판문점, 우주라이킷, 빨대, three.Js
지난 4월 제작한 ‘그곳 판문점’이나 9월 28일에 오픈한 우주여행 콘텐츠 ‘우주라이킷’에 3D 효과를 많이 사용했습니다. 콘텐츠에 왜 이렇게 자주 3D를 사용하는지 간단하게 정리해봤습니다.
3D로 콘텐츠를 만드는 게 쉽다고 할 수는 없지만 three.js라는 javascript 라이브러리로 웹브라우저에서 비교적 쉽게 3D 세상을 만들어볼 수 있습니다. (three.js 아니었으면 안해 못해~)
https://www.joongang.co.kr/DigitalSpecial/295
https://www.joongang.co.kr/digitalspecial/316
곧 오픈할 ‘깊은 바닷속 빨대(가제)’ 페이지에서도 3D를 사용할 예정입니다.
(빨대가 바다로 스르르륵 잠기는데 스크롤을 하면 점점 깊은 바다로 들어가고...뭐 그런 거)
2D보다 제작 기간도 더 늘어날 것 같은데 말이지.
그런데 사실~ 3D가 가성비가 좋습니다. 들인 시간 대비 퀄리티가 더 높게 느껴진달까?
그리고 쉽게 가볼 수 없는 곳 일 때 3D를 사용합니다. 판문점, 우주, 깊은 바닷속
2D로 어느 정도 표현이 가능하지만 3D가 주는 맛이 있죠. 화면을 돌려서 반대편도 보고.
모바일에서도 휙휙 돌아가는 3D를 보면 ‘와~’ 소리가 나오기도 합니다.
요즘 스마트폰은 화면도 거대하고 워낙 고사양이 되어서 노트북이나 오래된 컴퓨터보다 3D가 훨씬 잘 돌아갑니다. 생각해보니 몇 년 전만 해도 모바일 웹에서 3D 돌리는 게 무리였겠네요. 화면도 코딱지 만하고.
PC와 Mobile 두벌을 만들기 싫어서 무조건 반응형 웹으로 제작하고 있습니다. 3D를 사용해도 반응형으로 제작하죠. 터치 이벤트도 잘 먹어요. (우주선을 돌려보시라)
사실 이번에 오픈한 ‘우주라이킷’은 3D가 주는 아닙니다.
우주선과 우주는 3D로 표현하여 잔재미를 줬지만 사실 2D로 제작된 부분이 더 재미있어요.
(다 재미있다는 거잖아~! ㅋㅋ)
평소 우주에 관심이 없더라도 재미있는 콘텐츠입니다.
클릭하셔서 체험해 보시기를 바랍니다아~ (이게 본심...)
https://www.joongang.co.kr/digitalspecial/316
자매품 빨대를 들고 다시 돌아오겠습니다.
three.js 제작 노하우 등은 기회가 되면 따로 포스팅을 하도록 할게요.
(하아 계속 미룬다...)