Letsee : WebAR 프로젝트 목록

제가 현재 직장인 Letsee를 다니며 제가 직접 개발을 했던 간단한 WebAR 프로젝트들을 정리해보았습니다.

 

아래 데모들은 Letsee의 public github에 공개 되어 있습니다.

 

Letsee Public Github 주소

• https://github.com/letsee

 

추가적으로 WebAR에 관심이 있으신분은 Letsee SDK를 살펴봐 주시기 바랍니다. 

모바일 웹브라우저에서 AR에 대한 깊은 지식이 없어도 쉽게 AR 컨텐츠를 제작할수 있도록 도와줍니다. :)

• https://www.letsee.io/ko/

HOME :: 웹AR SDK - Letsee

 

 

닥터 자르트 (dr-jart)

 

데모 소개

 

화장품 표지 전면을 비췄을때 화장품의 성분과 어떤 제품인지에 대한 동영상 등의 컨텐츠를 증강현실로 보여주는 WebAR 데모

 

사용 기술

• HTML 
• Saas
• Animation CSS

설명

• HTML과 CSS(Sass)를 이용하여 모바일 웹 페이지를 제작
• 증강현실을 구현하는 부분에서 Animation CSS를 이용하여 애니메이션 효과를 주어 생동감있게 표현

 

 

스티커 (sticker)

 

데모 소개

 

연예인의 굿즈나 포장이 되어있는 상품의 이미지 등에 자신이 만든 Text메세지나 Emoticon을 넣어 증강현실로 예쁘게 꾸며볼두 있도록 도와주는 WebAR 데모

 

사용 기술

• React
• Redux
• Styled Component
• Firebase

 

설명

• React와 Redux를 이용하여 컴포넌트로 화면 분할
• Firebase를 통해 각각의 증강 Content의 좌표정보 및 내용을 Firebase로 저장하여 다른 사용자와 공유
• Window의 Touch이벤트를 이용하여 Drag Event 발생 시에 증강 컨텐츠가 움직이도록 구현
• 부모 자식 컴포넌트간 리렌더링 최적화, 배포 번들링

 

 

이끼 타워 (Moss-tower)

 

 

데모 소개

 

마곡에 설치된 이끼타워(이산화탄소 배출절감)에 대해서 설명하고 있는 포스터를 비추면,  유용한 정보를 제공해줄 수 있는 WEBAR 데모로 모션 그래픽을 이용하여 제작됨

 

 

사용 기술

• HTML
• SCSS

 

설명

• HTML / CSS를 이용한 모바일 프론트 페이지 구현
• 시간 순서에 따라 여러장에 이미지를 1장씩 짧은 간격으로 보여주어 애니메이션 효과 구현