3D GUI
3D Interaction
TV
LG WebOS 25/26 3D Graphics
UX 시나리오의 직관적 시각화와 템플릿 기반의 생산성 극대화
client
LG
timeline
2024.05 ~ 2025.08
tools
C4D, AE, APNG
Contribution
80%
❶ 클라이언트 기획서 분석
기반의 UX 시나리오 시각화
단순한 2D 이미지의 3D 변환을 넘어, 클라이언트의 UX 기획서를 직접 분석하여 기능의 본질적인 의도를 선제적으로 파악했습니다. 시니어를 위한 화면 확대나 음성 AI 사용법 등 디테일한 시나리오를 바탕으로, 예쁜 배치보다는 시선의 흐름이 자연스럽게 읽히도록 요소를 단순화하여 정보 전달력을 극대화했습니다.
❷ 300여 종을 소화한
3단 모듈화 시스템
팀장과 저, 단 2명으로 구성된 파트에서 300여 종에 달하는 방대한 에셋의 변환과 관리를 전담했습니다. 물리적인 인력 한계를 극복하기 위해 전체 에셋을 배경, 3D, 2D 효과의 3단 레이어로 철저히 표준화하여 최소 인력으로도 일관된 퀄리티의 이미지를 대량 조합할 수 있는 시스템을 구축했습니다.
❸ 피그마 연동 및 템플릿으로 대량 생산 구조 세팅
AE 템플릿으로 모션 파트의 생산성을 높인 것에 그치지 않고, 변환된 300여 종의 에셋 전체를 Figma 컴포넌트로 세팅하여 라이브러리 가이드를 제작했습니다. 이를 통해 내부의 UI 디자인 부서에서도 별도의 요청 없이 개발 환경에서 즉각적으로 3D 에셋을 꺼내어 실무에 활용할 수 있는 전사적 협업 파이프라인을 완성했습니다.
01
3단 모듈화 시스템 구축
300종에 달하는 2D 이미지를 3D로 전환하는 대규모 프로젝트의 효율성을 높이기 위해, 최적화된 제작 가이드를 구축했습니다.
배경, 3D 에셋, 2D 효과의 3단 레이어 구조로 작업 방식을 표준화하여 비디자이너도 쉽게 이미지를 조합하고 수정할 수 있는 시스템을 마련했습니다.
3D Asset Source
LG webOS 가이드에 사용될 제품 및 부품 3D 에셋을 제작했습니다.
각 개체를 모델링한 후 전체 비주얼 시스템의 톤앤무드에 맞춰 일관되게 렌더링했습니다.
Connection Devices
Smart Devices
2D Effect Source
제품 간의 연결이나 사운드 효과처럼 보이지 않는 정보를 시각화하는 2D 이펙트를 제작했습니다.
음파의 형태를 디자인하고 단계별로 변화하는 과정을 인터랙티브 모션으로 구현했습니다.
Effect design
Sound Wave
02
직관적 정보 전달을 위한 3D 시각화
기존의 평면적인 2D 가이드를 사용자 경험중심의 3D 그래픽으로 전면 개편하여 정보 전달력을 극대화했습니다.
Before
After
Final GUI
앞서 구축한 3단 레이어(BG, 3D Asset, 2D Effect) 제작 가이드에 따라 각 소스를 조합하여 LG webos 25의 최종 이미지를 완성했습니다.
이 시스템을 통해 다양한 상황을 표현하는 그래픽을 일관된 퀄리티로 제작했습니다.
03
WebOS Home Theme Design
LG ThinQ 캐릭터를 활용해 LG TV WebOS에 걸맞은 통합 홈 테마 이미지를 구축했습니다.
각 기능의 UX 흐름과 사용 시나리오를 먼저 분석하고,
사용자가 어떤 상황에서 이 화면을 보게 되는지를 캐릭터의 자세와 시선, 공간 구성을 상황에 맞게 연출했습니다.
같은 캐릭터도 상황마다 다른 자세와 공간으로 기능의 맥락이 이미지 안에 담기도록 설계했습니다.
