オラ、宮
外国人観光客のためのソウル四大宮殿ARスタンプミッションツアーサービス
啓元芸術大学デジタルメディアデザイン学科卒業展示で、限られた旅行日程を持つ外国人観光客がソウル四大宮殿を深く体験できるようにする「オラ宮」サービスの紹介ウェブサイト開発を担当しました。 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変数活用などのコーディング規約を導入して全体的なコードの一貫性を維持できるようにしました。