광주 비엔날레 전시회 AR 도슨트

2024년 7월 - 2024년 9월 (컬쳐 커넥션)

프로젝트 개요

광주 비엔날레 전시회의 미술 작품에 대한 설명을 온라인으로 간편하게 들을 수 있는 AR 도슨트 서비스입니다.

기여도: 서비스 섹션 100%
서비스 링크: https://playar.syrup.co.kr/culture/index.html#/ready
소속: 컬쳐 커넥션
성과: 10,000+ 뷰 달성

기술 스택

Vue.js - 프론트엔드 프레임워크
JavaScript - 개발 언어
Naver Map API - 지도 및 길찾기

주요 기능 및 구현

1. 작품 설명 오디오 가이드

QR 코드 스캔 또는 작품 번호 입력으로 즉시 도슨트를 들을 수 있습니다.

// 작품 도슨트 재생
export const playArtGuide = async (artworkId) => {
  try {
    const audioData = await fetchAudioGuide(artworkId);

    // 오디오 플레이어 초기화
    const player = new AudioPlayer({
      src: audioData.url,
      onEnded: () => {
        showNextArtworkSuggestion();
      }
    });

    player.play();
  } catch (error) {
    handleError(error);
  }
};

2. 작품 정보 표시

각 작품의 상세 정보를 직관적으로 표시합니다.

<template>
  <div class="artwork-detail">
    <img :src="artwork.imageUrl" :alt="artwork.title" />
    <h2>{{ artwork.title }}</h2>
    <p class="artist">{{ artwork.artist }}</p>
    <p class="description">{{ artwork.description }}</p>

    <button @click="playGuide" class="play-btn">
      오디오 가이드 듣기
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      artwork: null
    };
  },
  async mounted() {
    this.artwork = await fetchArtwork(this.$route.params.id);
  },
  methods: {
    playGuide() {
      playArtGuide(this.artwork.id);
    }
  }
};
</script>

3. 전시회장 길찾기

Naver Map API를 활용하여 전시회장까지의 경로를 안내합니다.

// Naver Map 통합
const initMap = () => {
  const { naver } = window;

  const map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(35.1595, 126.9072), // 광주 비엔날레
    zoom: 16
  });

  // 마커 추가
  new naver.maps.Marker({
    position: new naver.maps.LatLng(35.1595, 126.9072),
    map: map,
    title: '광주 비엔날레 전시관'
  });

  // 길찾기 버튼
  document.getElementById('navigate-btn').addEventListener('click', () => {
    openNavigation(35.1595, 126.9072);
  });
};

const openNavigation = (lat, lng) => {
  const url = `nmap://route/car?dlat=${lat}&dlng=${lng}&dname=광주비엔날레`;
  window.location.href = url;
};

모듈화 개발로 생산성 향상

재사용 가능한 컴포넌트 설계

유사 서비스를 동시에 개발하면서 모듈식 개발을 진행하여 생산성을 약 50% 향상시켰습니다.

// 공통 오디오 플레이어 모듈
// modules/AudioPlayer.js
export class AudioPlayer {
  constructor(options) {
    this.audio = new Audio(options.src);
    this.onEnded = options.onEnded;
    this.setupEvents();
  }

  setupEvents() {
    this.audio.addEventListener('ended', this.onEnded);
  }

  play() {
    return this.audio.play();
  }

  pause() {
    this.audio.pause();
  }

  setVolume(volume) {
    this.audio.volume = volume;
  }
}

// 공통 QR 스캐너 모듈
// modules/QRScanner.js
export class QRScanner {
  constructor(callback) {
    this.onScan = callback;
  }

  async start() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    // QR 스캔 로직
  }

  stop() {
    // 스캐너 정리
  }
}

컴포저블 패턴 활용

Vue 3 Composition API를 활용하여 로직을 재사용 가능하게 만들었습니다.

// composables/useArtwork.js
import { ref, onMounted } from 'vue';

export const useArtwork = (artworkId) => {
  const artwork = ref(null);
  const loading = ref(true);
  const error = ref(null);

  const fetchArtwork = async () => {
    try {
      loading.value = true;
      const response = await fetch(`/api/artworks/${artworkId}`);
      artwork.value = await response.json();
    } catch (e) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    fetchArtwork();
  });

  return {
    artwork,
    loading,
    error,
    fetchArtwork
  };
};

// 컴포넌트에서 사용
export default {
  setup() {
    const { artwork, loading } = useArtwork(props.id);
    return { artwork, loading };
  }
};

사용자 경험 개선

디자이너/기획자와의 협업

사용자 피드백을 반영하여 지속적으로 UX를 개선했습니다.

개선 사항들:

직관적인 네비게이션

// 작품 번호 입력 간소화
const quickAccess = {
  // 숫자 키패드로 빠른 입력
  handleInput(number) {
    if (number.length === 3) {
      this.navigateToArtwork(number);
    }
  }
};

로딩 상태 표시

<template>
  <div v-if="loading" class="loading-spinner">
    <span>작품 정보를 불러오는 중...</span>
  </div>
  <div v-else>
    <!-- 컨텐츠 -->
  </div>
</template>

에러 핸들링

// 친절한 에러 메시지
const handleError = (error) => {
  const messages = {
    'NETWORK_ERROR': '네트워크 연결을 확인해주세요.',
    'NOT_FOUND': '작품을 찾을 수 없습니다.',
    'AUDIO_ERROR': '오디오를 재생할 수 없습니다.'
  };

  showToast(messages[error.code] || '오류가 발생했습니다.');
};

성과 및 배운 점

성과

✅ 10,000+ 뷰 달성
✅ 생산성 50% 향상 (모듈화 개발)
✅ 유사 서비스 동시 개발 가능

주요 지표

방문자 수: 10,000+
평균 체류 시간: 8분
오디오 가이드 완주율: 75%
재방문율: 35%

배운 점

1. 모듈화의 중요성

컴포넌트 재사용으로 개발 속도 향상
유지보수성 증대

2. 협업 프로세스

// 디자이너/기획자와의 소통
const feedbackLoop = {
  // 1주차: 초기 버전 개발
  week1: 'MVP 개발',

  // 2주차: 피드백 수렴
  week2: '사용자 테스트 & 피드백',

  // 3주차: 개선 사항 적용
  week3: 'UX 개선 반영',

  // 4주차: 최종 배포
  week4: '서비스 론칭'
};

3. 성능 모니터링

// Google Analytics 통합
const trackEvent = (category, action, label) => {
  if (window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label
    });
  }
};

// 사용 예시
trackEvent('Audio', 'play', artwork.id);
trackEvent('Navigation', 'get_directions', 'gwangju_biennale');

향후 개선 방향

다국어 지원 (영어, 중국어, 일본어)
작품 북마크 기능
AR 기능 추가 (작품 위에 추가 정보 오버레이)
사용자 리뷰 시스템

모듈화된 개발 방식과 사용자 중심 개선으로 성공적인 서비스를 만들 수 있었습니다.

메뉴