사용자에게 시각적 만족을 주기 위한 여러 시도들

2024년 겨울, 예비창업 겸 졸업 프로젝트를 위해 감정에 맞는 음악을 생성해주는 플랫폼을 제작했었습니다. 당시 저는 프로덕트 디자이너로서 서비스 내의 중요정보를 시각화하기 위해 3D 에셋을 제작한 경험이 있는데요, 프로덕트의 퍼포먼스를 위해 그래픽 에셋을 다듬은 과정을 작성해보았습니다.

1. 프로젝트 배경 및 아이디어 구상

서비스의 핵심 감정 맵

기존 서비스는 다양한 음악이 지닌 감정을 텍스트와 색상으로만 제공하고 있었습니다. 문제는 색상과 단어만으로는 이 감정이 현재 어떤 상태인지 알기 쉽지 않다는 것이었습니다.

영감을 얻었던 무인양품의 CDP와 3D 그래픽의 방향을 잡아준 미드저니 시안

이를 직관적이고 시각적인 그래픽으로 개선하기 위해 무인양품의 벽걸이 CD 플레이어에서 영감을 얻었습니다.

CD를 교체할때마다 달라지는 곡과 분위기를 보며, CD의 디자인으로 음악에 있는 여러 감정을 표시할 수 있겠다고 생각했습니다. 덤으로 CD가 돌아가면서 느낄 수 있는 감성적 만족도도 챙기려고 했습니다.

미드저니(Midjourney)를 활용해 CD의 질감과 무드보드를 빠르게 추출하며 시안을 도출했습니다.

2. 3D 에셋 제작과 브라우저 렌더링 이슈

추출한 이미지를 바탕으로 본격적인 3D 에셋 제작에 돌입했습니다. Blender를 활용해 3D 모델링을 진행하고, 미드저니로 생성한 타일 형태의 이미지를 텍스처로 매핑했습니다.

Blender로 빠르게 3D 디자인을 제작 후 웹에서 테스트

동료 개발자 친구가 3D 에셋의 텍스쳐 및 모델링을 테스트해볼 수 있는 사이트를 제작해주었다.

프론트엔드 동료가 구축해 준 테스트베드 사이트를 활용해 3D 에셋을 실시간으로 올려보며 디자인 미감을 완성해 나갔습니다.

호기롭게 완성한 디자인 시안

하지만 서비스에 적용하면 멈춰버린다. 8,000 ~ 12,000개의 폴리곤이 여러개있을때 모바일 웹 환경에서는 버틸 수 없다.

하지만 서비스의 three.js 웹 환경에 최종 glb 파일을 업로드하자 브라우저가 멈추는 현상이 발생했습니다. 과도한 폴리곤과 고해상도 텍스처로 인한 용량 초과가 원인이었습니다.

뭔가 수상해보이는 최적화 관련 글

새롭게 제작한 모델링, AO를 이용해 깊이있는 텍스쳐링이 가능했다. 자세히보면 모델링이 로우폴리로 되어있다.

이를 해결하기 위해 폴리곤 리모델링, 이미지 텍스처 포맷 변경, AO 베이킹 등 기본적인 최적화를 진행하였습니다.

3. 포맷 전환: 3D 모델링에서 영상 포맷으로

같은 장면이 반복되는 애니메이션은 굳이 3D 파일을 넣을 필요가 없다.

운영해보니 최적화 효과는 있었으나, 특정 페이지에서는 굳이 3D 모델링이 필요없다는 것을 알게되었습니다. 필요한 것은 CD가 회전하는 정면 모션뿐이었으므로, 굳이 무거운 3D 파일을 실시간으로 렌더링할 필요가 없다고 판단하여 영상 포맷으로 방향을 전환했습니다.

mp4 포맷은 알파채널을 지원하지 않는다. 이에 대한 대안으로 프레임 루프 기능 및 알파채널을 지원하는 WebP를 채택했다.

먼저 압축률이 높은 h.264 기반의 mp4 포맷을 테스트했으나, 알파 채널을 지원하지 않아 투명한 배경으로 UI 위에 자연스럽게 배치할 수 없는 문제가 발생했습니다. 이에 따라 알파 채널을 완벽하게 지원하면서도 프레임 루프 기능을 통해 용량을 효과적으로 절약할 수 있는 WebP 포맷을 최종적으로 채택하게 되었습니다.

4. 트러블슈팅: iOS Safari 프레임 중첩 버그 해결

특정 WebP 파일은 iOS Safari 환경에서는 이전 프레임이 중첩되는 문제가 발생했다.

Processing할때 void draw안하면 자주 보는 익숙한 장면

WebP 포맷 적용 후 최적화가 완료된 듯했으나, iOS Safari 환경에서 이전 프레임의 잔상이 지워지지 않고 겹쳐서 렌더링되는 버그를 발견했습니다.

이 프레임 중첩 현상을 해결하기 위해 CLI 기반 이미지 처리 도구인 Image Magick을 도입했습니다. 터미널 환경에서 배경 제거 명령어를 사용하여 프레임이 넘어갈 때마다 이전 배경이 깔끔하게 지워지도록 수정함으로써 렌더링 버그를 해결하고 최적화를 마칠 수 있었습니다.

5. DesignOps: 팀을 위한 최적화 프로세스 자동화

Image Magick은 CLI 기반의 툴이라 디자이너에게는 진입장벽이 매우매우매우 높다.

기술적인 문제는 해결했지만, UI가 없는 터미널 기반의 Image Magick은 다른 디자이너들이 사용하기에 진입 장벽이 매우 높았습니다.

향후 발생할 유사 작업의 병목을 막기 위해 변환 과정을 시스템화하는 작업에 착수했습니다.

먼저 사용자가 영상 변환 시 겪을 수 있는 모든 경우의 수를 맵핑하여 플로우 차트를 설계했습니다.

이전에 작성한 사용 플로우를 바탕으로 AI 지침과, 상황에 맞는 JSON 프롬프트를 작성해두었다.

GPTs로 Image Magick 명령어를 알려주는 봇을 만들었다.

이를 바탕으로 OpenAI의 GPTs를 활용해 mp4 파일을 WebP로 자동 변환해 주는 봇을 제작했습니다.

그 결과, 복잡한 CLI 명령어 없이도 팀원 누구나 영상 파일을 업로드하기만 하면 즉시 최적화된 WebP 에셋을 추출할 수 있는 효율적인 업무 환경이 구축되었습니다.

6. 마무리하며

단순히 시각적으로 아름다운 3D 에셋을 만드는 것을 넘어, 실제 서비스 환경에서의 성능을 고려하고 최종적으로는 동료들의 작업 환경까지 개선한 의미 있는 경험이었습니다. 프로덕트 디자인의 완성도는 픽셀 단위의 미감뿐만 아니라, 가벼운 퍼포먼스와 효율적인 워크플로우가 뒷받침될 때 비로소 완성된다는 점을 실무를 통해 검증할 수 있었습니다.

(하지만 나는 그래픽 디자이너가 아닌데…)