프로젝트 배경
1) 프로젝트 개요
월드컵 기간동안 손흥민을 광고모델로 프로모션을 수행하고자 하며, 새로운 경험을 메가커피 각 매장에서 체험할 수 있는 솔루션 수립 필요. 특히 모바일웹 환경에서 높은 품질의 캐릭터 애니메이션을 AR형태로 운영하기 위한 솔루션 개발이 필요함.
2) 주요 이슈 및 문제점
- 3차원 표현된 캐릭터의 품질 : 일반적으로 모바일웹에서 구현되는 품질로는 역효과가 있어, 해당 부분에 대한 우려가 가장 큼
- 전국 매장에서 불특정 다수에게 안정적으로 서비스할 수 있는 안정성과 신뢰성 확보 필요
- 기존 운영 중인 전용앱에 웹 형태로 확장되어 운영되어야 함
3) 해결 방안
- 자체 보유한 3D / 4D 스캐닝 장비 및 솔루션 기반으로 사실적이고 자연스러운 다양한 포즈와 얼굴 표정 확보
- WebGL환경에서 처리 가능한 수준의 캐릭터 애니메이션 최적화 및 솔루션 구축
- 지오펜스를 활용하여 메가커피 매장에서 체험할 수 있도록 하고 스케일러블한 인프라 구축
특히, 모바일웹이라는 한정된 리소스 환경에서 포토리얼한 품질을 성능이슈 없이 적용할 수 있는 최적화 및 본 프로젝트를 위해 개발한 솔루션을 적극 적용하여 품질 및 성능을 모두 만족시키는 파이프라인을 구축하게 됨
월드컵 기간동안 손흥민을 광고모델로 프로모션을 수행하고자 하며, 새로운 경험을 메가커피 각 매장에서 체험할 수 있는 솔루션 수립 필요. 특히 모바일웹 환경에서 높은 품질의 캐릭터 애니메이션을 AR형태로 운영하기 위한 솔루션 개발이 필요함.
2) 주요 이슈 및 문제점
- 3차원 표현된 캐릭터의 품질 : 일반적으로 모바일웹에서 구현되는 품질로는 역효과가 있어, 해당 부분에 대한 우려가 가장 큼
- 전국 매장에서 불특정 다수에게 안정적으로 서비스할 수 있는 안정성과 신뢰성 확보 필요
- 기존 운영 중인 전용앱에 웹 형태로 확장되어 운영되어야 함
3) 해결 방안
- 자체 보유한 3D / 4D 스캐닝 장비 및 솔루션 기반으로 사실적이고 자연스러운 다양한 포즈와 얼굴 표정 확보
- WebGL환경에서 처리 가능한 수준의 캐릭터 애니메이션 최적화 및 솔루션 구축
- 지오펜스를 활용하여 메가커피 매장에서 체험할 수 있도록 하고 스케일러블한 인프라 구축
특히, 모바일웹이라는 한정된 리소스 환경에서 포토리얼한 품질을 성능이슈 없이 적용할 수 있는 최적화 및 본 프로젝트를 위해 개발한 솔루션을 적극 적용하여 품질 및 성능을 모두 만족시키는 파이프라인을 구축하게 됨
프로젝트 성과
WebGL 환경에서 고품질 캐릭터 애니메이션 수행
모바일 Web환경으로 구축 및 운영되어야 하는 상황(별도 앱 다운로드없이, 기존 메가커피에서 운영하는 앱과 연계를 위하여)에서 여러 포즈를 사실적이고 자연스럽게 표현할 수 있도록 최적화 진행
WebGL 환경에서의 포토리얼 얼굴 애니메이션 구현
손힁민의 시그니쳐 포즈와 윙크를 자연스럽게 연출할 수 있도록, 정적인 애셋이 아닌, dynamic texture를 적용하여 모바일웹환경에서 높은 품질의 인물 표현을 진행함
핵심 기능


4D스캔 기반의 고품질 인물 캐릭터 표현
멀티뷰 시스템기반의 얼굴 스캐닝 및 전신 스캐닝을 통한 다양한 표정 및 전신 포즈에 대한 3차원 애셋 확보하여 이를 웹환경을 위한 최적화 진행
진행 단계
기획 > 디자인 > 개발 > 필드 테스트 > 런칭
2022.09.
기획 : 손흥민 캐릭터를 어떠한 방식으로 적용할지 UX 맟 전체 시나리오 수립
디자인 : 세부 키스크린 및 워크플로우 제작, 스캐닝을 위한 애셋 범위 및 스캔현장 진행 시나리오 수립
개발 : 스캔된 데이터 최적화
디자인 : 세부 키스크린 및 워크플로우 제작, 스캐닝을 위한 애셋 범위 및 스캔현장 진행 시나리오 수립
개발 : 스캔된 데이터 최적화
프로젝트 상세
1) 포트폴리오 소개 : 메가커피 메인모델인 손흥민을 2022월드컵 기간 프로모션을 위한 프로젝트임.
새로운 경험을 메가커피 각 매장에서 체험할 수 있는 솔루션 수립 필요. 특히 모바일웹 환경에서 높은 품질의 캐릭터 애니메이션을 AR형태로 운영하기 위한 솔루션 개발이 필요함.
2) 작업 범위 : 개발에 참여한 범위 및 지원환경
- 기획(UX시나리오 및 현장 운영을 위한 제약 등을 고려한 연출 구체화)
- 디자인(최종 적용될 메뉴트리 및 연출될 애니메이션 제작)
-갸벌 : 웹환경을 고려한 캐릭터 최적화
3) 주요 업무 : 3D/4D스캔 진행 및 데이터 가공, 웹환경을 고려한 최적화 코딩 적용
4) 주안점 : 캐릭터의 자연스러운 표정 및 움직임 표현. 모바일웹환경에서 운영가능한 최적화 작업
새로운 경험을 메가커피 각 매장에서 체험할 수 있는 솔루션 수립 필요. 특히 모바일웹 환경에서 높은 품질의 캐릭터 애니메이션을 AR형태로 운영하기 위한 솔루션 개발이 필요함.
2) 작업 범위 : 개발에 참여한 범위 및 지원환경
- 기획(UX시나리오 및 현장 운영을 위한 제약 등을 고려한 연출 구체화)
- 디자인(최종 적용될 메뉴트리 및 연출될 애니메이션 제작)
-갸벌 : 웹환경을 고려한 캐릭터 최적화
3) 주요 업무 : 3D/4D스캔 진행 및 데이터 가공, 웹환경을 고려한 최적화 코딩 적용
4) 주안점 : 캐릭터의 자연스러운 표정 및 움직임 표현. 모바일웹환경에서 운영가능한 최적화 작업

3차원 캐릭터 제작을 위한 3D/4D 스캔 및 리깅/스키닝 과정

mobile web환경에서 미리 생성한 여러 포즈를 선택하면 자연스럽게 애니메이션되는 결과 생성

전국 메가커피 매장에서 2022월드컵 기간에 시연 가능한 다양한 AR 결과


