3D 인터랙티브 활용한 서비스
한 번 맛보면 빠져 나올 수 없는 three.js
게임 분야와 달리 웹, 앱에는 비교적 3D 가 많이 쓰이지 않았었다. 주로 삼성 갤럭시 스마트폰이나 LG 가전 프로모션 페이지 등 대기업 신제품 사이트에 사용되고 있는데, 이유를 생각해보면 간단하다.
3D 개발은 비싸다!
Three.js 같은 3D 라이브러리를 다뤄본 인력이 별로 없어서 사람 찾기도 힘들고, 퀄리티 높은 3D 모델링도 있어야 하니 전체 개발 비용이 꽤 많이 든다. 언젠가 대기업 가전 쪽 3D 콘텐츠 개발을 의뢰받은 적이 있었는데, 업무량 대비 상당한 개발 비용에 깜짝 놀랐다. 결국 안 했지만, 당시에는 진심으로 퇴사하고 프리랜서나 할까 고민을 했었다.
그렇게 돈이 많이 드니 대기업이 아니라면 돈과 시간을 들여 3D로 개발하기보다는 이미지를 이용해서 갤러리를 만들던가 영상 하나 만들어서 SNS에도 쓰고 웹에 붙여 넣는 것 같다. (물론 이게 효율적이다)
아직은 3D가 마케팅, 인터랙티브 콘텐츠에 많이 사용되고 있지만, 국내 서비스에도 3D 요소가 점점 많아지고 있고, 앞으로도 점점 많아질 것 같아서 눈에 띄는 몇 가지 서비스를 기록해본다.
(VR, 메타버스 등 3D 사용이 당연한 서비스는 제외)
점점 많아지고 있는 3D 서비스
개인적으로 3D를 가장 효과적으로 사용하고 있다고 생각하는 서비스는 바로 '직방'이다.
단순히 평면도를 입체로 보여주는 수준이 아닌 아파트 전체를 3D로 올려서 각 집의 채광을 시각적으로 보여준다. 같은 평수의 아파트라도 층이나 동의 위치에 따라 채광이 다를 텐데, 그걸 또 시간대 별로도 볼 수 있게 해 놓았다. 처음 보고 정말 놀랐다. '아파트 단지들을 하나하나 다 만들었다고?!?'
직방 개발자님 블로그 펌유저에게 꼭 필요한 정보를 3D를 이용해서 만들어 냈다. 2D로는 절대 구현이 불가능한 기능! (그림자를 하나하나 그릴 수도 없고) 실제로 사용해 보시라.
threejs, 언리얼, 유니티 중 고민하다 유니티로 개발했다고 하는데, 어떻게 개발을 했는지 궁금하신 분들은 이 글을 참고하시면 될 것 같다.
오늘의 집도 3D로 가전과 가구 배치 및 벽지와 바닥재 등 인테리어까지 해볼 수 있는 서비스를 론칭했다. 직접 해보니 아직은 좀 불편하지만 의지(?)를 갖고 하나하나 해본다면 괜찮을 것 같다. 시중에 판매 중인 가전과 가구들이 3D로 제공되고 있어서 이사 갈 집, 혹은 우리 집에 알맞는 제품을 고를 때 도움이 될 것 같다.
불편한 UX는 점점 개선이 되겠지!이런 기능이 기존에 아예 없던 것은 아니다. 가구 회사 사이트에서 종종 시도를 하고 있지만 실제로 존재하는 아무 집(?)이나 다 골라서 배치해볼 수 있는 서비스는 없었던 것 같다.
(서울 기준) 거의 모든 아파트의 평면도를 3D로 구현해 놓았고, 직방처럼 채광도 볼 수 있다. 진짜 열심히 하네 다들. 어휴. 링크
토스 뱅크도 카드를 만들 때 실물 카드처럼 돌려 볼 수 있게 개발을 해놓았다. 빙긍 빙글 돌려보며 카드의 옆면까지 볼 수 있게 해 놓았다. 앞, 뒷면 컬러를 자세히 보고 선택을 할 수 있게 해 줬다.
왼쪽은 3D로 구현한 영상, 오른쪽은 3D 인터랙티브토스 앱 내에서도 똑같이 구현해 놓았다. 모바일에서는 터치로 카드를 돌려볼 수 있다. 영상을 만들려면 카드 3D 모델링을 만들었을 것이고, 모델링이 있다면 위의 기능을 개발하는 시간은 오래 걸리지 않았을 것이다.
three.js 를 할 수 있는 개발자면 몇 시간이면 개발 가능한 수준의 기능이지만 유저 입장에서는 재밌고 유용하기까지 하니 정말 가성비 좋은 개발요소가 아닌가! three.js 로 링크
예전 카카오 뱅크였나... 페이였나 프로모션에서 three.js를 이용해서 저금통에 동전이 떨어지는 효과를 사용했었던 것 같은데 못 찾겠다. ㅋ 혹시 스샷이라도 볼 수 있는 곳이 있다면 제보 좀...
마지막으로 명품 사이트에서 three.js를 이용해서 개발한 페이지도 첨부한다. 돈 많은 회사에서 이렇게 투자를 시원~하게 해 주면 눈도 호강하고 좋지 말입니다.
그리고 이런 3D 인터랙티브 개발을 배울 수 있는 강의도 있다. 진입 장벽이 생각보다 높진 않다.
https://www.inflearn.com/course/threejs-3d-인터랙티브?inst=fc9ce2d7
