세계 각국의 전시물 정보를 확인하려면 일일이 각 나라의 페이지를 찾아 들어가야 합니다. 여러 국가의 정보를 확인하고 싶은 사람들에겐 굉장히 불편한 상황입니다. 이들을 위해 각 국가의 전시 정보들을 크롤링하여 한 곳에 모아왔습니다. 또한 애니메이션을 넣어 시각적인 재미 요소를 주었고 필터링 기능을 넣어 사용자가 보고 싶은 정보들만 추려볼 수 있도록 제작했습니다.

파이썬 Selenium을 이용해 Robot 배제 프로토콜 허용 범위안에서 전시 데이터를 모았으며 이 데이터를 카드 형식으로 디자인하여 페이지에 로드합니다. 사용자 인터랙션과 애니메이션 구현, 퍼블리싱에 집중한 프로젝트입니다. 컨트롤러에서 사용자가 페이지를 요청하면 셔플 된 MongoDB 데이터를 불러와서 객체로 전송해줍니다. Pug에서 전달받은 데이터를 페이지에 렌더링합니다.

스크롤 애니메이션, 카드 소팅 애니메이션, 전시명/전시관/전시국 검색 필터링, 박물관/미술관 필터링, 카드 클릭 애니메이션, 반응형 웹 스크린

카드 클릭 시 카드별 위치에서 천천히 확대되며 중앙 배치, 닫기 클릭 시 원위치로 조정해야 하는 문제를 구현해야 했습니다. 사용자 브라우저의 Viewport 크기를 계산하여, 클릭한 카드의 좌푯값(X, Y)을 감산하여 해결했습니다.

JavaScript, JQuery, Pug, SCSS

Express, MongoDB, Python

Flyio