---

✨✨🏅✨✨
🏆 2023 캡스톤디자인과창업프로젝트 최우수상 (주관: 이화여자대학교 컴퓨터공학전공)
🏆 2023 캡스톤디자인 경진대회 은상 (주관: 이화여자대학교 공학교육혁신센터)

---

목차

• 📌 프로젝트 소개
• ✏️ 주요 기능
• 📜 ERD
• 📄 API 모아보기
• 🖥️ 기술 스택
• 📁 파일 구조
• 🚩 시작 가이드
• 🚦프로젝트 관리
• 📦 프로젝트 문서

프로젝트 소개

미술관에 갔을 때 작품을 잘 감상하려면 어떻게 해야 할까요?
국립중앙박물관을 간다는 외국인 친구에게 무엇을 추천하면 좋을까요?

1️⃣ 너무 긴 도슨트의 설명, 내가 원하는 부분만 듣고 싶다면
2️⃣ 줄글로 된 해설보단 해설과 그림을 함께 보고 싶다면
3️⃣ 어두운 곳에서 긴 글을 읽기보다 핵심 요소마다 나뉜 해설을 음성으로 편하게 듣고 싶다면

아트 헌터와 함께 미술관에 방문해 보세요!

걸려있는 그림들과 해설을 눈으로 훑으며 지나가기 보다는 직접 부분들을 찾고, 해설을 모으면서 작품을 마주한 순간을 기록해 보세요. 보다 즐겁고 자세하게 작품을 이해하고 있는 여러분을 발견하게 될 거예요.

개발 동기 및 목적

한국의 문화와 역사에 친숙하지 않은 사용자도 인터렉션을 통해 쉽고 재미있게 한국미술을 감상하도록 합니다.

서비스 소개

1. 🎨 OCR을 통해 작품 캡션 촬영만으로 작품 검색

• 직접 작품명을 정확하게 타이핑하거나 검색할 필요 없이 간단하게 사진 촬영만으로 원하는 작품의 해설을 감상할 수 있습니다.

2. 🔎 YOLO를 이용한 작품 요소 인식

• 한 작품에서 주목하면 좋을 부분들을 표시해둔 뒤 사용자가 해당 부분을 찾으며 더 자세히 살펴보도록 유도합니다. 유저가 작품의 부분을 직접 촬영해 수집하는 인터렉션을 제공합니다!

3. 🧩 부분 해설

• 작품의 긴 해설을 여러 부분으로 나누어 소제목별로 해설을 제공합니다. 다국어 해설, 오디오 해설, 배속 기능도 제공합니다!

4. 🤔 GPT로 궁금한 부분 해설 보기

• 한 작품에서 원하는 부분의 해설만 빠르게 볼 수 있습니다. 메인 화면에서 카메라를 켜 그림의 궁금한 부분을 찍으면 GPT를 통해 해당 부분의 해설을 바로 얻어볼 수 있습니다.

User Flow

팀원

Member	공지나	유승연	최예원
Role	Backend 개발	Frontend 개발, UI/UX 디자인	Backend 개발

주요 기능

• 🎨OCR을 통한 작품 검색
• 🔎 YOLO 작품 요소 인식
• 🧩부분 해설
• 🤔 GPT로 궁금한 부분 해설 보기

분류	기능1	기능2
OCR로 작품 검색
	• 작품 캡션 촬영을 모바일 카메라로 촬영 시 OCR로 작품을 인식	• 작품명 외 다른 텍스트가 함께 인식되어도 Jaro Winkler 알고리즘으로 유사한 작품명 탐색해 제공
YOLO로 작품 요소 인식
	• YOLOv8 모델로 국내 미술품 dataset 학습 • 모바일 카메라로 요소 촬영	• 요소 인식 성공 시 수집하기 버튼으로 도감에 등록 • 도감에서 뱃지와 경험치, 수집한 작품 확인
부분 해설
	• 작품의 긴 해설을 여러 부분으로 나누어 소제목별로 해설 제공 • 국내 주요 미술관 작품들의 정보 제공	• 다국어 해설 지원: i18next로 언어 감지 후 한국어일 경우 캐시된 해설 표시. 그 외 언어의 경우 Translate API에 캐싱된 해설을 보내 번역된 해설 표시 • 오디오 해설과 배속 기능: 해설 텍스트를 TTS API에 보내 음성 데이터를 받아와 Audio 객체로 오디오 재생 상태관리를 통해 일시정지, 배속 기능 제공
GPT로 궁금한 부분 해설 보기
	• 홈 화면에서 카메라로 작품의 궁금한 부분을 촬영 • YOLO로 인식한 후 어느 작품의 부분인지 판단 후 서버에 전송	• 서버에서 DB에 작품이 있는지 검증한 후, 전체 해설 context를 GPT에 프롬포트로 전송해 최적의 파라미터로 커스터마이징한 gpt-3.5 모델에 해설 요청

ERD

API

파일 디렉토리

FrontEnd Repo.

└───📂src
    ├───📂api
    ├───📂assets
    │   ├───📂icon
    │   │               ├───📁bottomBar
    │   │               ├───📁common
    │   │               ├───📁detection
    │   │               ├───📁login
    │   │               ├───📁mainPage
    │   │               └───📁search
    │   ├───📂image
    │   │               └───📁badge
    │   └───📂logo
    ├───📂components
    │   ├───📂Collection
    │   ├───📂Common
    │   ├───📂Detection
    │   │               └───📁Button
    │   ├───📂Layout
    │   ├───📂MainPage
    │   ├───📂Search
    │   ├───📂Docent
    │   ├───📂Mypage
    ├───📂pages
    │   ├───📂docent
    │   └───📂setting
    └───📂style

기술스택

📱 Built With

FE :

BE :  

CI/CD:

Infra Management:

시스템 아키텍처

시작 가이드

ArtHunter 환경 변수 설정을 완료해야 프로젝트가 실행됩니다. 환경 변수 세팅이 되어있지 않으면 How to test 섹션으로 가주세요.

How to build & install

1. 프로젝트 클론

git clone https://github.com/CAPSTONE-ARTHUNTER/EIGHT_CLIENT.git
cd eight

2. .env 파일 추가 프로젝트 루트 디렉토리에 .env 파일을 생성하고 아래와 같이 설정해주세요.

# .env 파일 구조는 key-value 형식으로 입력해주세요. 
# 예시 
OPENAI_API_KEY=Open111Ai085&key 

3. 실행

npm start

How to test

• 배포된 Art Hunter 사이트 에 접속합니다.
• Google 계정 로그인만 진행하면 모든 서비스가 이용 가능합니다.

오픈 소스

• 공공데이터: 문화체육관광부 국립중앙박물관_전국 박물관 유물정보
  • 전국 주요 박물관의 소장품 관련 정보를 데이터로 제공받았습니다.
• 해설 데이터: 국립중앙박물관
  • 소장품 해설을 데이터로 제공받았습니다.

Project Management

• GitHub Project
  • ⭐ FrontEnd
  • 🌙 BackEnd
• GitHub Issues

Project Documents & Links

• 사용 설명서
• 포스터
• 데모 동영상