홈페이지에 3D는 넣을 수 있습니다. 인코딩 Works 첫 화면의 분리형 시계처럼, 방문자가 직접 돌려 보는 장면을 만들 수 있습니다.
다만 보기 좋은 것만 생각하고 넣으면, 첫 화면이 늦게 뜨거나 휴대폰에서 버벅이거나 글을 읽다 스크롤이 막힐 수 있습니다. 이 시계를 예로, 3D로 무엇을 보여 줄 수 있는지와 같이 챙겨야 할 것을 정리합니다.
사진이 못 보여 주는 것
사진은 정해진 한 면만 보여 줍니다. 3D는 방문자가 원하는 쪽으로 돌려 봅니다.
시계를 펼치면 안쪽 부품이 한 장씩 벌어지고, 돌리면 뒷면 유리 너머로 움직이는 부품이 보입니다. 안쪽, 뒷면, 합쳐지는 순서처럼 사진 여러 장으로도 보여 주기 어려운 것을 한 화면에서 보여 줍니다.
회사 색에 맞춥니다
같은 모양이라도 재질과 색을 바꾸면 느낌이 달라집니다. 시계는 기본 배색 말고도, 인코딩 사이트의 색인 검정, 연한 회색, 포인트 파랑에 맞춘 배색을 따로 만들었습니다.
회사 홈페이지라면 로고 색이나 사이트 색에 맞춰 3D의 색을 정할 수 있습니다. 배색을 따로 정리해 두면 나중에 회사 색이 바뀌어도 모양은 그대로 두고 색만 바꿉니다.
AI 모델은 출발점입니다
3D를 띄우려면 모양을 담은 파일(3D 모델)이 있어야 합니다. 시계는 AI 3D 생성 도구(Tripo)로 만든 모델에서 시작했습니다. 다만 받은 그대로는 쓸 수 없었습니다.
- 부품이 맞지 않았습니다: 합쳐 보니 시계가 아니라 두꺼운 원기둥이 됐습니다. 판은 조금씩 기울어 있었고, 케이스는 동그랗지 않았습니다. 시·분·초침도 다이얼에 붙은 한 덩어리라 움직일 수 없어, 지우고 움직이는 바늘을 새로 달았습니다.
- 표면이 흐물거렸습니다: 표면 그림 안에 빛과 반사가 그려져 있어 금속처럼 보이지 않았습니다. 그림을 빼고 부품마다 재질을 새로 입혔습니다.
위 칸의 '다듬기 전' 버튼을 누르면 재질을 입히기 전 모양을 볼 수 있습니다. AI로 만든 모델은 실물을 그대로 옮긴 정밀한 모델이 아니라, 형태와 분위기를 보여 주는 장면에 맞습니다. 그대로 쓰지 말고 화면에서 보며 다듬는 일을 따로 잡아 두는 것이 좋습니다.
보이는 것 말고 챙길 것
3D를 넣기로 하면 보통 어떤 모양일지만 생각합니다. 실제로 넣어 보면 그 밖에도 챙길 것이 있습니다.
- 첫 화면을 기다리게 하지 않을까: 3D 파일은 그대로 넣으면 무겁습니다. 시계도 처음엔 61.6MB였습니다. 모양은 그대로 두고 PC 7.9MB, 휴대폰 2.29MB로 가볍게 했습니다.
- 휴대폰에서는 어떻게 보일까: PC와 같은 3D를 그대로 띄우면 휴대폰에선 무겁습니다. 시계는 휴대폰 화면에서 작게 보이는 부품만 줄인 휴대폰용을 따로 만들었습니다. 3D 대신 같은 모델로 만든 영상이나 이미지로 바꾸는 방법도 있습니다.
- 스크롤이 막히지 않을까: 3D를 만지다 페이지가 안 내려가면 글을 읽다 막힙니다. 휴대폰에서 시계를 가로로 끌면 돌아가고, 세로로 끌면 그대로 스크롤됩니다.
- 다른 움직임과 부딪히지 않을까: 시계가 나타나는 순간 제목이 써지는 효과가 끊겼습니다. 그래서 글이 다 나온 뒤에 시계가 나타나고, 화면 밖으로 나가거나 다른 페이지로 넘어갈 때는 멈춥니다.
- 움직임을 불편해하는 방문자: 기기에서 움직임 줄이기를 켠 방문자에게는 멈춘 장면을 보여 줍니다.
- 나중에 다시 쓸 수 있을까: 원본 모델을 따로 보관해 두면, 같은 모델로 짧은 소개 영상도 만들 수 있습니다. 시계로도 만들어 봤습니다.
이런 것들은 화면을 봐서는 잘 드러나지 않습니다. 휴대폰으로 열어 보고, 스크롤해 보고, 다른 페이지로 넘어가 보며 하나씩 확인해야 보입니다.
넣기 전에 정할 것
3D를 넣기로 했다면 만들기 전에 아래를 먼저 정해 두면 좋습니다.
- 3D가 맡을 역할: 첫 화면에서 눈길을 끄는 장면인지, 페이지 뒤에 깔리는 배경인지에 따라 크기와 움직임이 달라집니다.
- 휴대폰에서의 모습: 휴대폰에서도 3D로 돌릴지, 영상이나 이미지로 바꿀지 정합니다.
- 모델은 어디서: 회사에 이미 3D 파일이 있다면 웹에 맞게 가볍게 다듬어 쓸 수 있습니다. 없다면 AI 생성 모델처럼 형태를 잡는 방법부터 정합니다.
- 움직이는 범위: 저절로 움직일지, 방문자가 돌려 보게 할지, 어느 쪽까지 보여 줄지 정합니다. 보여 줄 쪽이 정해지면 안 보이는 쪽을 덜어 가볍게 만들 수 있습니다.
이 네 가지가 정해지면 어디에 공들이고 어디를 덜어 낼지 기준이 생깁니다.