MUG(Museum Union Gallery)는 전시 정보를 한 페이지에서 쉽게 확인할 수 있는 인터랙티브 웹 서비스입니다. https://mug-lab.fly.dev
이곳 저곳 찾아보지 말고 한 페이지에서 확인하자! 서비스 소개 자세히 - WIKI
- 전시명, 전시장, 전시국으로 구분되어 정보가 담긴 카드를 로드합니다.
- 카드에 마우스를 올리면 전시에 관한 간단한 정보를 마우스 커서에 올려줍니다.
- 카드를 클릭하면 전시의 상세 정보를 보여줍니다.
- 동적 애니메이션을 이용한 카드 필터링 기능을 제공합니다.
- infoCrawler를 통해 원하는 url과 원하는 정보의 selector만 넣고 selenium으로 데이터를 불러와 JavaScript에서 텍스트 가공을 수행합니다.
- MongoDB에 저장한 후 저장된 데이터를 가져와 템플릿으로 전송합니다.
- 전시정보를 가져올 python 파일 생성 후 파일에 필요한 정보들의 selector 저장
- makeInfo.js에 객체와 파일 정보 입력하여 정보 객체 생성 및 DB저장
- DB에서 데이터 불러와서 템플릿에 출력
- 페이지에서 출력 확인
- /
인트로-서비스 소개 - /main
메인 정보 페이지
| 인트로-서비스 소개 | 메인 화면 |
|---|---|
 |
 |
서비스 소개
- 루트 페이지는 서비스의 사용 방법을 영상과 텍스트로 간단히 안내합니다. 사용자의 마우스 스크롤링에 따라 변화하는 입체적인 애니메이션 요소를 표현합니다.
전시 슬라이드
- 메인 페이지의 상단에는 무작위 전시 5개를 슬라이더로 보여줍니다. 전시는 일정시간마다 변경되고 컨트롤러로 움직일 수 있습니다.
- 클릭 시 해당 전시의 실제 페이지로 이동합니다.
메인 카드 호버링
- 스크롤을 아래로 내리면 전시 카드들이 나타나고 마우스를 올리면 해당 전시의 간단한 정보를 커서에 표시합니다.
- 카드에는 분류(박물관 전시/미술관 전시), 전시국가가 아이콘으로 표시됩니다.
메인 카드 클릭 (구현부 확인)
- 클릭 시 카드가 팝업되며 상세 정보를 표시합니다.
- 카드의 상세 정보에는 전시의 제목, 전시관, 국가와 국기, 전시 내용 텍스트가 표시되며 해당 전시 페이지로 이동할 수 있는 링크를 제공합니다.
🪄 카드 필터링 옵션 (구현부 확인)
분류(박물관 전시 / 미술관 전시)로 필터링하기
타이틀, 전시관, 전시국으로 필터링하기
- 타이틀
- 전시관
- 전시국
MUG 0.0.3 / Latest
