brunch

You can make anything
by writing

C.S.Lewis

by 전기환 Sep 28. 2018

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

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


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


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


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

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


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

우주의 기운을 담은 우주라이킷


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

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



왜 계속 3D로 만드는가! 


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

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


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

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


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


three.js 아이가


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


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

왼쪽 PC, 오른쪽 Mobile


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

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

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


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



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

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


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








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

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


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

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










브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari