Go to Home

Ora, Gung

AR Stamp Mission Tour Service for Seoul's Four Major Palaces for Foreign Tourists

At Kaywon University of Art & Design's Digital Media Design graduation exhibition, I developed the introduction website for the 'Ora Palace' service, which enables foreign tourists with limited travel schedules to experience Seoul's four major palaces in depth. I implemented smooth horizontal scroll animations using the GSAP library and an interactive 3D carousel utilizing Transform and Intersection Observer API. I led the collaboration during the development process, managing Git version control with Git flow strategy and conducting team collaboration through code reviews via Pull Requests.

HTMLCSSJavaScriptGSAPjQueryGit
Team Size
6 people (PM 2 / UX/UI 2 / FE 2)
Period
09.2024 ~ 12.2024
Related Links
GitHubLive Site

Details

  • Developed User-Interactive Stamp Customization Feature

    •

    Developed a page where users can freely position stamps using HTML5 Canvas API and Drag & Drop. Implemented jQuery-based drag and drop, resizing, and rotation features, and added independent control handles for each stamp object. Implemented real-time transformation effects through rotation angle calculation and CSS Transform.

    Implemented a feature to download completed works as PNG images using the html2canvas library, and applied logic to automatically hide control elements during saving.

  • Resolved Cross-Browser Compatibility Issues

    •

    Resolved WebM video playback limitation issues in Safari and iOS environments by implementing browser/device detection to switch video formats based on the browser.

    Provided consistent user experience across all platforms by automatically switching to GIF images for Safari/iOS and WebM videos for other browsers through browser identification logic using regular expressions.

  • Enhanced Team Development Efficiency through Git Flow Strategy and Pull Request-based Collaboration System

    •

    Implemented Git Flow strategy to ensure all code changes go through Pull Requests and code reviews for effective development with 2 development team members including myself.

    Also created a collaboration rules document (rule.md) to ensure the entire team follows consistent development practices, and introduced coding conventions such as BEM methodology and CSS variable usage to maintain overall code consistency.