AR Earth SAVERS | ① 앱 제작기
AR 콘텐츠로 친환경 메시지 전달하는 방법 | HC 브랜딩 연구소
브랜딩 연구소의 두 번째 프로젝트를 시작하며
하이퍼클라우드 브랜딩 연구소의 첫 번째 프로젝트 ‘브랜드 세계관캐릭터 활용 AR 게임 제작 스토리’에 이은 두 번째 사내 프로젝트! 바로 AR 콘텐츠를 통한 친환경 인식 개선 캠페인 <AR Earth SAVERS> 프로젝트입니다.
<AR Earth SAVERS>는 하이퍼클라우드 회사 내, 외부의 특정 스팟의 마커를 인식하면 3D 아트웍과 함께 친환경 메시지가 나타나는 AR 콘텐츠 앱인데요. 환경 관련 콘텐츠이다 보니 지난 3월에 시작하여 6월 5일 환경의 날에 릴리즈하는 것을 목표로 했어요. 아이데이션, 콘셉트, 기획, 디자인, 개발까지 멤버 모두 착착 진행해 주어 무사히 목표일에 맞춰 릴리즈할 수 있게 되었습니다.
그렇다면 <AR Earth SAVERS> 앱이 만들어지기까지 어떠한 일이 있었을까요? 지금 바로 AR 콘텐츠 제작의 모든 과정을 보여드릴게요!
AR 콘텐츠 탄생의 출발점 : 뭐부터 하지? (아이데이션 및 캠페인 기획)
이번 브랜딩연구소의 두 번째 프로젝트에서는 하이퍼클라우드의 메인 기술을 잘 보여줄 수 있으면서도 의미있는 메시지를 전달하는 콘텐츠를 만들고자 했어요. 이에 따라 멤버들이 주기적으로(머리를 쥐어뜯으며) 의견을 주고 받다 보니 아이데이션 보드가 가득 채워졌습니다.
휘황찬란한 우리의 아이디어 ... ✨마침 하이퍼클라우드 내부적으로는 ESG 경영의 필요성을 느끼고 실천 방법을 고민하고 있었는데요. 하이퍼클라우드의 AR 기술을 통해 친환경 메시지를 전달하자는 데 아이디어가 모였습니다.
콘텐츠의 주제가 정해지고 나서 BX팀에서 캠페인 기획을 시작했습니다. 전달하고자 하는 내용의 콘셉트, 슬로건, 전달 방법 등을 구체화하는데요. ‘일상에서 환경을 생각할 수 있는 기회를 마련한다’는 콘셉트를 바탕으로 다양한 슬로건 후보가 나왔어요.
그중 최종 결정된 캠페인 슬로건은 <AR Earth SAVERS > ! AR기술을 접목한 시각적 효과를 이용해 되살아나는 지구를 표현하고 세 가지 실천 방법을 제안하기로 했어요.
자 다들 연장 챙겨! : 콘텐츠구성, 유저플로우, 와이어프레임
전달하고자 하는 내용이 뚜렷해졌으니 본격적으로 콘텐츠 제작에 돌입했습니다.
여러 가지 실천 방법들 중 AR을 이용해 표현할 메시지 세 가지를 골랐어요. 텀블러를 사용하고, 일주일에 하루는 채식을 해보고, 쓰레기가 바다로 흘러들어가지 않도록 잘 버리기!
사용자 입장에서의 서비스 진행 순서를 도식화한 유저플로우BX팀에서 핵심적인 내용을 추려주셨는데요. 간단해 보이지만 앞으로 프로젝트 끝까지 끌고 갈 내용이라 다들 굉장히 고민을 많이 하셨답니다! 이제 이렇게 구성된 내용과 진행 순서를 바탕으로 디자인과 개발의 뼈대가 될 와이어프레임 및 화면 설계서를 작성합니다.
와이어프레임
화면 설계서뼈대에 살을 붙여주는 디자이너의 손길 : Visual Directing, UIUX 디자인, 3D
이제 와이어프레임이라는 뼈대에 살을 붙여주실 디자이너 분들을 모셔볼까요!
디자인 파트에서는 프로젝트의 비주얼 톤 앤 매너를 구상하고 콘텐츠의 최종적인 시각적 스타일을 결정했는데요. AR 콘텐츠이다 보니, 적용될 기술과 UI를 고려해서 디자인이 이루어져야 했어요.
따라서 전반적인 Visual Directing을 담당해 주신 Bona는 작업 과정에서 AR 마커 인식을 위한 디자인과 3D 콘텐츠의 퀄리티에 신경을 많이 쓰셨다고 해요.
보나가 잡아준 콘텐츠 가이드를 보며 Technical Artist인 마리아와 함께 모델링, 연출 등 더욱 구체적인 의논 과정을 거치게 되는데요. 그렇게 해서 더 디테일하고 완성도 높은 최종 3D 작업물이 나오게 된답니다.
동선, 연출, 효과 등 고려할 것이 많았던 3D 콘텐츠 가이드UIUX 디자인 파트를 맡고 계신 Liam은 AR 앱이 구동되는 동안 나타나는 화면과 인터페이스를 디자인 해주셨어요. 특히 BX팀에서 고심해서 기획한 그래픽 스타일이 돋보이면서도, 기존 UI 스타일과 이질감이 들지 않도록 디테일하게 체크하셨대요.
UI 디자인 초안정말로 뼈대에 살을 붙이는 과정 같죠? 이렇게 디자이너 분들의 손길을 거치고 나니 콘텐츠의 정체성이 시각적으로 나타나면서 우리가 만들고 있는 앱과 더 친밀감이 생기기 시작했습니다!
앱을 살아 움직이게 하는 개발자의 손길
콘텐츠라는 영혼에 뼈와 살을 붙였으니 이제 살아 움직이게 해주실 분들은 누구일까요? 바로 XR 개발자분들입니다. XR팀에서는 앱에서 AR 기능이 구현되도록 화룡점정을 찍어주십니다.
백문이 불여일견. XR팀에서 어떤 작업을 해주셨는지는 아래 영상으로 확인해 봅시다!
실외에서 하이퍼클라우드 회사 건물을 인식하면 환경오염으로 인해 망가진 지구가 먼저 나타납니다. 하지만 환경을 지키는 작은 실천들로 인해 곧 푸릇푸릇 한 지구로 변하는 모습, 트윙이가 우주선을 타고 나타나 실내로 연결되는 AR 콘텐츠 체험으로 안내해 주는 모습을 보실 수 있답니다.
트윙이가 만들어준 포탈을 타고 실내로 이동하면 세 가지 AR 마커를 찾아갑니다. 나무를 지키는 마커, 물을 절약하는 마커, 해양을 지키는 마커 총 세 가지인데요. AR 카메라로 마커를 인식하면 우리의 작은 실천으로 푸르러진 자연의 모습과 함께 친환경 메시지가 나타납니다!
하이퍼클라우드의 AR기술이 궁금하신 분들을 위해 잠깐! 간략하게 설명해 드릴게요.
이번 <AR Earth SAVERS> 앱에서는 크게 두 가지 AR 콘텐츠 기술을 사용했어요.
먼저 실외에서 건물을 인식하여 콘텐츠가 나올 때는 VPS라는 3D 객체를 학습시키는 기능을 이용해 특정 장소에서 AR 콘텐츠가 구동되도록 만들었어요. VPS는 Visual Positioning System의 약자로, 3D 정보를 미리 Mapping 후 이미지 정보를 학습시키는 과정이에요. ‘Meshing’ 작업이라고도 불려요.
다음으로 실내에서는 Unity를 이용한 마커 인식 기술을 적용했는데요. 사전에 마커 이미지를 학습시켜 AR 카메라 모드에서 이미지를 비출 시 AR 콘텐츠가 구동되는 방식이에요.
정말 끝일까? : <AR Earth SAVERS> 제작을 마무리하며
자! AR 콘텐츠와 앱이 만들어지는 전반적인 과정을 보여드렸는데요.
이렇게 완성된 <AR Earth SAVERS>, 어떤가요?
현재까지도 QA를 통해 버전업되고 있는 끝날 때까지 끝난 게 아닌 AR 앱 제작기.
생략된 부분들이 많지만 (멤버들의 노고…수많은 미팅과 피드백…수정 수정…! ) 오늘의 콘텐츠를 통해 AR 앱 제작 과정을 이해하는 데 도움이 되었으면 합니다.
<AR Earth SAVERS> 시리즈는 4편까지 있습니다! 다음 편에서는 하이퍼클라우드 구성원들이 직접 앱을 체험한 후기를 들고 올게요.
AR 콘텐츠 제작에 대해 더 궁금한 점이 있으시다면 언제든 편하게 댓글 주세요!
다른 흥미로운 콘텐츠 살펴보기 >>
► "메타버스 전문 기획자될 분, 하이퍼클라우드로 오세요" - 기획자 알렉스 인터뷰
► 하이퍼클라우드 조직문화 - 메타버스 스타트업 첫 출근한 에디터의 아침
► '3D 기업 홍보영상' 제작기, 영상 콘텐츠 제작 가이드 활용 Tip까지
► 하이퍼클라우드 YEAR-END Party! 한 해를 마무리하는 하클러 방식 ✌️
► 하이퍼클라우드 웰컴 키트, 진심을 담은 인터널 브랜딩
► [인턴일기 1탄] 첫 출근했습니다! - 사회 초년생의 우당탕탕 회사 적응기
► 2023 ver 온보딩 - 하이퍼클라우드가 신규 멤버를 맞이하는 법
하이퍼클라우드에 대해 더 자세히 알고 싶다면, 아래 홈페이지를 방문해 보세요.
▼하이퍼클라우드 노션 페이지 바로가기 ▼
▼ 하이퍼클라우드 홈페이지 바로가기 ▼
