[프로젝트 커.크.] AR 가상 착장 서비스를 도입해보자
프로젝트 커.크.(커머스 크리에이터)는 쇼핑몰 초짜가 쇼핑몰 디자인에 도전하는 프로젝트입니다. 연재 마지막에는 크리에이터의 소품샵을 만듭니다.
쇼핑몰은 IT기업에 준하는 데이터를 보유한 기업이다. 따라서 쇼핑몰은 유통 기업으로 보기도 하고, IT 기업으로 보기도 한다. 주로 쇼핑몰 초창기에는 물건을 직접 떼다 판매하는 소규모 유통 기업으로 활동하지만, 기업 규모가 점차 커지면 피벗에 가까운 두번째 선택을 해야 한다. IT 기업이 될 것인가, 브랜드를 갖춘 자체 제작 위주의 제조업체가 될 것인가. 이 선택의 기로에서 스타일난다, 임블리 등 국내 유명 쇼핑몰들은 주로 제조 및 유통업체로 변신하는 방법을 선택했다. 어쨌든 쇼핑몰은 기술보다는 상품이 우선이기 때문이다.
따라서 기술력을 갖출 여력이 부족한 쇼핑몰들은 기술을 갖추는 것보다는 상품 소싱에 집중하게 된다. 이 흐름이 잘못됐다는 건 아니지만 소비자 입장에서는 각종 기술을 통해 편리하게 쇼핑하고자 하는 욕구가 발생할 것이다.
최근 가장 주목해야 할 커머스 관련 기술은 물류를 제외하면 AR, 콘텐츠 등이 있다. 콘텐츠 작성의 경우 쇼핑몰들도 충분히 잘 하고 있으므로 AR을 통한 가상 착장에 대한 요구가 존재할 것이다. 해외에서는 와비파커, 국내에서는 라운즈 등이 자체 기술을 통해 안경 AR 착장 서비스를 선보이고 있는데, 이 기술을 소규모 기업도 다른 방향에서 적용할 수 있다면, 소비자의 구매 만족도가 높아질 것을 쉽게 예상할 수 있다.
로로룩스는 기술을 기반으로 가상 착장을 제공하는 서비스다. 귀걸이, 목걸이, 안경 등 액세서리와 화분, 소파 등 인테리어 소품 등을 서비스 중이다. 로로룩스는 크게 두가지로 나뉘는데, 로로룩스가 직접 제휴해 3D 모델 AR 착장을 3D 서비스와, 간단히 웹플러그인을 통해 사진 위에 덧입히는 웹플러그인 방식이 있다. 3D 서비스는 브랜드가 사용할 수 있는 상품이므로, 이번 기사에서는 소호몰이 사용할 수 있는 웹플러그인 방식만 체험해보기로 한다.
대다수 쇼핑몰이 사용하고 있는 카페24 스토어에 로로룩스가 있으므로 스토어에서 설치한다.
스토어에 설치하면 별도로 로로룩스의 CMS에 가입을 해야 하는데, 카페24 계정과 일치하지 않아도 된다. 현재 귀걸이만 서비스 중이므로 귀걸이를 업로드해보기로 한다. 상품 등록을 위해 브랜드가 없는 상품 이미지를 구해 업로드해보았다.
AR 툴 상품을 등록할 때는 카페24 상품 등록 시 사용했던 고유 ID를 등록하고, 상품 상세페이지 URL도 입력해야 한다. 이 부분이 어렵다면 로로룩스가 제공하는 가이드를 참조하면 된다. 노션으로 작성해놓아서 왠지 있어 보인다.
이때 제품의 고유 ID와 상세페이지 링크를 정확하게 입력하지 않아도 등록은 되지만, 이후 플러그인을 설치하고 AR 툴 발행을 요청할 때 오류가 생길 수 있으므로 정해진 서식은 지켜주는 것이 좋다.
제품 등록 시 상품의 대표 이미지와, 배경 제거 이미지를 꼭 준비해야 한다. 배경 제거 이미지는 포토샵 CC 2021의 개체 찾기 도구 혹은 배경 제거 사이트를 사용하면 된다. 애초에 직접 촬영을 하는 경우에는 촬영 가이드를 참조하는 게 좋다.
제품을 등록하고 나면 AR 테스트가 가능하다. 그런데 무언가 잘못됐다는 생각이 들기 시작한다. 해당 기능은 사람 이미지에서 귀를 자동으로 찾아서 귀걸이를 장착해주는 시스템이다. 따라서 1. 귀가 정확하게 보여야 하며, 2. 좋은 품질의 배경 제거 이미지가 있어야 한다.
원점으로 돌아가 제품을 촬영하거나, 애초부터 배경 제거가 돼 있는 귀걸이 이미지로 테스트해보기로 한다.
배경 제거가 확실히 될만한 이미지를 찾아 테스트해봤다. 배경제거 이미지의 경우 핀 위치를 클릭해 지정하고, 귀걸이 크기는 직접 입력한다. 잘 보이게 하게 위해 가로 10cm, 세로 30cm를 입력했더니 실물 사이즈 바나나맛 우유 귀걸이가 탄생했다. 바나나맛 우유에 크게 감동한 추장 같은 느낌이다. 잘 보이지 않더라도 정확한 사이즈를 입력하도록 하자.
무료 PNG 귀걸이 이미지 두개를 찾았다. 귀걸이 두개를 상세하게 살펴보면, 하나는 좌우가 동일한 상품, 하나는 좌우 각도가 약간 다른 상품이다. 로로룩스에서는 왼쪽과 오른쪽을 별도로 등록할 수 있으므로, 1번 제품은 반으로 잘라 그대로, 2번 제품은 좌우파일을 따로 등록했다.
파일을 제대로 등록하고 침 위치와 수치를 제대로 입력하면 제대로 된 AR 착장이 된다.
목걸이 좌우 크기가 충분히 큰 경우 얼굴을 자동 인식해 귀걸이를 살짝 보여주고, 그렇지 않은 경우는 한쪽 귀걸이를 자동으로 숨겨주고 있음을 알 수 있다.
꼭 사람 이미지가 아니라도 귀가 정확하게 인식되는 이미지면 귀걸이를 적당한 곳에 위치시켜 준다.
제품등록을 마치고 노출로 설정한 이후에는 상품 등록 요청서를 엑셀로 작성해 로로룩스에 상품 등록 요청을 해야 한다. 파일명과 사이즈, 고유 ID를 입력하고 로로룩스에 요청한다. 요청 이후에는 플러그인을 스마트 에디터에 입력하면 된다. 본 리뷰에서는 실제로 사업자 등록을 한 것은 아니니 등록 요청은 하지 않기로 한다.
웹 플러그인 적용 및 발행 후에는 쇼핑몰 제품 이미지 위에 플로팅 버튼이 생성돼 플로팅 버튼을 누르면 AR 착장이 가능하게 된다.
비즈니스 플랜에 가입할 경우 플로팅 버튼과 배너 등을 조정할 수 있으며 쇼핑몰 톤앤매너에 맞춰 플로팅 버튼을 설정할 수 있다.
로로룩스의 장점은 크게 어려운 과정을 거치지 않고서도 AR 서비스를 쉽게 적용할 수 있다는 점이다. 로로룩스 AR 툴 적용은 쇼핑몰 상품 등록 수준으로 간단하다. 아쉬운 점은 플러그인 코드를 입력해야 한다는 점이다. 발행에 어려움을 겪는 사용자들이 있을 것으로 예상되므로, 카페24와의 연동을 강화해 등록 요청 및 발행하는 과정 없이 버튼 하나로 바로 발행할 수 있다면 많은 쇼핑몰들이 사용할 수 있을 것이다. 귀걸이 외에도 많은 영역에 적용되기를 기대한다.
By바이라인네트워크
※외부 필진의 기고는 카페24의 의견과 다를 수 있습니다.