brunch

이번에도 3D로 만든겨?!

판문점, 우주라이킷, 빨대, three.Js

by 전기환


지난 4월 제작한 ‘그곳 판문점’이나 9월 28일에 오픈한 우주여행 콘텐츠 ‘우주라이킷’에 3D 효과를 많이 사용했습니다. 콘텐츠에 왜 이렇게 자주 3D를 사용하는지 간단하게 정리해봤습니다.


3D로 콘텐츠를 만드는 게 쉽다고 할 수는 없지만 three.js라는 javascript 라이브러리로 웹브라우저에서 비교적 쉽게 3D 세상을 만들어볼 수 있습니다. (three.js 아니었으면 안해 못해~)


https://www.joongang.co.kr/DigitalSpecial/295

06.jpg 장안의 화제(!) 판문점 3d


https://www.joongang.co.kr/digitalspecial/316

titlebg1.jpg 우주의 기운을 담은 우주라이킷


곧 오픈할 ‘깊은 바닷속 빨대(가제)’ 페이지에서도 3D를 사용할 예정입니다.

(빨대가 바다로 스르르륵 잠기는데 스크롤을 하면 점점 깊은 바다로 들어가고...뭐 그런 거)



왜 계속 3D로 만드는가!


2D보다 제작 기간도 더 늘어날 것 같은데 말이지.

그런데 사실~ 3D가 가성비가 좋습니다. 들인 시간 대비 퀄리티가 더 높게 느껴진달까?


그리고 쉽게 가볼 수 없는 곳 일 때 3D를 사용합니다. 판문점, 우주, 깊은 바닷속

2D로 어느 정도 표현이 가능하지만 3D가 주는 맛이 있죠. 화면을 돌려서 반대편도 보고.


모바일에서도 휙휙 돌아가는 3D를 보면 ‘와~’ 소리가 나오기도 합니다.


아재0005.png three.js 아이가


요즘 스마트폰은 화면도 거대하고 워낙 고사양이 되어서 노트북이나 오래된 컴퓨터보다 3D가 훨씬 잘 돌아갑니다. 생각해보니 몇 년 전만 해도 모바일 웹에서 3D 돌리는 게 무리였겠네요. 화면도 코딱지 만하고.


PC와 Mobile 두벌을 만들기 싫어서 무조건 반응형 웹으로 제작하고 있습니다. 3D를 사용해도 반응형으로 제작하죠. 터치 이벤트도 잘 먹어요. (우주선을 돌려보시라)

titlebgm.jpg 왼쪽 PC, 오른쪽 Mobile


사실 이번에 오픈한 ‘우주라이킷’은 3D가 주는 아닙니다.

우주선과 우주는 3D로 표현하여 잔재미를 줬지만 사실 2D로 제작된 부분이 더 재미있어요.

(다 재미있다는 거잖아~! ㅋㅋ)


titlebg2.jpg
titlebg3.jpg 지구에서 우주까지 날아가는 경험(?)을 할 수 있다



평소 우주에 관심이 없더라도 재미있는 콘텐츠입니다.

클릭하셔서 체험해 보시기를 바랍니다아~ (이게 본심...)


https://www.joongang.co.kr/digitalspecial/316








자매품 빨대를 들고 다시 돌아오겠습니다.

titlebg5.jpg 거북이가 막 헤엄치고 있음 좋겠...


three.js 제작 노하우 등은 기회가 되면 따로 포스팅을 하도록 할게요.

(하아 계속 미룬다...)










keyword
매거진의 이전글거북이, 흉기 빨대 3D 제작 후기