Vol. 09 - 커뮤니티 3D 배지 제작기

안녕하세요, 제로백데브 임재균입니다.
이번 랩실에서는 전북은행 외국인 커뮤니티 앱의 활동 배지를, 손가락으로 돌려 볼 수 있는 3D 금속 배지로 만든 이야기를 소개해볼까 합니다.

시작은 디자이너의 SVG 한 장

처음에는 3D 배지 이미지를 사용하려고 했지만 좀더 임팩트를 주고자 실제 3D 배지로 적용을 해보기로 하였습니다.
디자이너분이 배지에 대한 평면 SVG를 만들어주셨고. 이 SVG를 그대로 Blender에 불러와 입체로 올렸습니다.
테두리 선은 은색 금속 프레임으로, 안쪽 색 면은 에나멜로 나눠 층층이 쌓았습니다.
디자인은 그대로 지키면서 진짜 에나멜 핀 배지처럼 보이게 하는 게 목표였습니다.

처음엔 밋밋했다

첫 모델은 SVG를 두께만 주어 뽑아낸 느낌이라, 돌려 봐도 딱히 감흥이 없었습니다. 그래서 디자이너와 화면을 같이 보면서 모델링과 질감을 하나씩 손봤습니다.

• 모양: 윗면은 평평하게, 프레임 모서리는 둥글게. 옆면은 이음선 없이 매끄하게, 뒷면에는 진짜 배지 같은 홈을 파냈습니다.

• 질감: 프레임은 금속, 색 면은 광택 코팅이 입힌 에나멜. 반사가 울퉁불퉁해 보이는 부분을 찾아 면을 다시 정리했습니다.

이렇게 한 번 정한 값은 모두 스크립트에 담아, 나머지 배지 30종도 같은 품질로 만들었습니다.

앱에는 이렇게 붙였다

웹에서 가장 많이 쓰는 3D 라이브러리인 three.js를 사용했습니다. Blender에서 내보낸 GLB 파일을 획득 배지 상세 화면에서 불러와, 자동으로 돌게 하고 손가락으로도 돌려 볼 수 있게 했습니다.

모델만 잘 만든다고 끝이 아니었습니다. 금속은 비칠 주변이 없으면 회색 덩어리로 보이기 때문에, 디테일이 필요한 부분은 앱 쪽에서 따로 손봤습니다.

• 카메라: 시야각을 좁게 잡아 왜곡을 줄이고, 배지가 화면에서 항상 지름 200px로 보이게 맞췄습니다.

• 조명: 배지가 돌아도 앞면이 어두워지지 않도록 카메라를 따라다니는 조명을 뒤고, 그림자가 지는 조명을 더했습니다.

• 환경: 금속에 비칠 스튜디오 조명판과 그라디언트 배경을 깔고, 영화에서 쓰는 톤매핑으로 색을 다듬었습니다.

• 질감: 불러올 때 재질에 코팅층(clearcoat)을 입혀 에나멜에 막을 하나 더 씌운 듯한 윤기를 냈습니다.

이 값들은 개발 화면에서만 열리는 조절 패널로 디자이너와 같이 실시간으로 맞추고, 정한 값을 프리셋으로 고정했습니다. 파일은 압축(Draco)해서 배지 하나에 100~270KB로 가볍게 만들었습니다.

뒷면에 새긴 나만의 기록

배지를 뒤집으면, 뒷면 홈 안에 사용자의 닉네임과 배지를 받은 날짜가 새겨져 있습니다. 같은 배지라도 뒷면은 사람마다 다릅니다.
글자는 배지를 불러올 때 앱에서 바로 그려 넣습니다.
배지 아래에서 위로 광선을 쏴 홈 바닥 높이를 찾기 때문에, 배지마다 홈 깊이가 달라도 글자가 정확히 바닥에 붙습니다.

완성된 배지

그렇게 해서 완성된 배지입니다. 빛을 받으면 프레임은 금속처럼, 에나멜은 코팅처럼 반짝입니다.

마치며

이번 작업이 쉽지만은 않았습니다.
밋밋한 첫 모델을 보고 디자이너와 "이건 좀 아닌데" 하며 웃기도 했고,
모서리 하나, 빛 반사 하나를 두고 몇 번씩 다시 만들었습니다.

그래도 그 과정이 정말 재밌었습니다.
앞으로도 더욱 다양한 방식으로 이어나가 보겠습니다.
읽어주셔서 감사합니다