오라, 궁
외국인 관광객을 위한 서울 4대 궁궐 AR 스탬프 미션 투어 서비스
계원예술대학교 디지털미디어디자인과 졸업전시에서 한정된 여행 일정을 가진 외국인 관광객들이 서울 4대 궁궐을 깊이 있게 체험할 수 있도록 하는 '오라 궁' 서비스의 소개 웹사이트 개발을 담당했습니다. GSAP 라이브러리를 활용한 부드러운 가로 스크롤 애니메이션과 Transform, Intersection Observer API를 활용한 인터랙티브 3D 캐러셀을 구현했습니다. 개발 과정의 협업을 주도 했으며 Git flow 전략을 활용한 Git 버전 관리와 Pull Request를 통한 코드 리뷰로 팀 협업을 진행했습니다.
상세 내용
사용자 참여형 스탬프 커스터마이징 기능 개발
•HTML5 Canvas API와 Drag & Drop을 활용하여 사용자가 스탬프를 자유롭게 배치할 수 있는 페이지를 개발했습니다. jQuery 기반의 드래그 앤 드롭, 크기 조절, 회전 기능을 구현했으며, 각 스탬프 객체에 대해 독립적인 컨트롤 핸들을 추가했습니다. 회전 각도 계산과 CSS Transform을 통한 실시간 변형 효과를 구현했습니다.
html2canvas 라이브러리를 활용하여 완성된 작품을 PNG 이미지로 다운로드할 수 있는 기능을 구현했으며, 저장 시 컨트롤 요소들을 자동으로 숨기는 로직을 적용했습니다.
크로스 브라우저 호환성 문제 해결
•Safari와 iOS 환경에서의 WebM 비디오 재생 제한 문제를 해결하기 위해 브라우저/기기 감지를 통한 브라우저별로 비디오 형식이 전황되도록 구현했습니다.
정규표현식을 활용한 브라우저 식별 로직을 통해 Safari/iOS에서는 GIF 이미지로, 다른 브라우저에서는 WebM 비디오로 자동 전환되도록 하여 모든 플랫폼에서 일관된 사용자 경험을 제공했습니다.
Git Flow 전략과 Pull Request 기반 협업 시스템 구축을 통한 팀 개발 효율성 향상
•저 포함 2명의 개발팀원들과 개발을 효과적으로 진행하기 위해 Git Flow 전략을 통해 모든 코드 변경사항이 Pull Request와 코드 리뷰를 거치도록 했습니다.
또한 협업 룰 문서(rule.md)를 작성하여 팀 전체가 일관된 개발 방식을 따를 수 있도록 했으며, BEM 방법론과 CSS 변수 활용 등의 코딩 컨벤션을 도입하여 전체적인 코드의 일관성을 유지할 수 있도록 했습니다.