[삼성청년SW아카데미] 드라마영화지도

프로젝트 개요

• 개발 완료 이후 GitLab을 미러링한 Github이어서, Merge Request 및 코드리뷰 기록이 없는 상태입니다.

프로젝트 환경 및 조건

• “빅데이터 - 분산” 기술 사용이 과제였습니다. 저희 팀은 한국의 영상물과 관계자(출연 배우 및 감독, PD, 작가, 직원 등)를 분석해 관계를 도출하는 것이 목표였습니다.

• 1차 목표는 아카이브를 만들어 검색 기능을 만드는 것이었고, 2차 목표는 관계 도출을 성공시켜 영상물간의 지도를 그리는 것이었습니다.

• 프론트엔드 2명, SPARK(분산처리) 담당 1명, 백엔드 담당 1명, API 스크래핑 및 ELK 관련 담당 1명, 인프라 담당 1명, 구성된 팀이었습니다.

• 저는 프론트엔드 리드를 맡았습니다.

주요 기능 및 작동 화면

• 통합 검색 기능을 제공합니다.

• 드라마 및 영화의 경우 제목, 장르, 출연진, 키워드, 줄거리, 개봉(방영) 시기, 채널, OTT, 시청등급, 배급사로 검색할 수 있습니다.

• 인물의 경우 이름, 대표분야, 성별, 연령, 활동연대로 필터해 검색할 수 있습니다.

+_+

+_+

+_+

• 5분마다 랜덤으로 한국의 드라마/영화/TV 프로그램 하나를 중심으로, 관련 작품의 그래프를 제공합니다.

+_+

프로젝트 목표

• 큰 데이터를 한 번에 처리할 때 오는 병목현상을 백엔드와 프론트엔드 각각에서 어떻게 처리할지를 고민해보는 시간을 가지고 싶었습니다.

• 처음부터 Next.js 사용을 고려한 것은 아니었으나, 페이지 렌더링을 고민하다 ISR 및 Module Federation을 고려하게 되었습니다.

• 당초 기획은 구글 지도처럼 완벽한 하나의 지도를 완성해내는 것이었지만, 기술의 한계로 랜덤한 지도의 한 조각을 보여주는 것으로 선회했습니다.

• Module Federation을 구축해 프로젝트를 시연하는 것 자체는 성공했지만, Next.js와 Module Federation에 대한 이해 부족으로 제대로 사용하는 데는 실패했습니다.

  • ISR로 생성된 페이지는 Module Federation으로 Expose할 수 없었기 때문입니다.

프로젝트 기여

• 그래프를 어떻게 표현해야 할지 아이디어를 잡고, 그래프 개형을 설계했습니다.

• Framer로 와이어프레임을 그렸습니다.

• 와이어프레임을 분해해 주요 컴포넌트를 구현했습니다.

• Module Federation을 통해 프로젝트 아키텍처를 구축했습니다.

• 프로젝트의 지도 부분을 D3.js를 사용해 구현했습니다.

러닝 포인트

• Next.js를 처음 사용해 보며, Hydrated SSR과 ISR에 대해 익히고 어떤 곳에서 어떤 렌더링 방식이 적합한지 고민해볼 수 있었습니다.

• 프론트엔드에서 서버를 사용할 수 있을 때 더 능동적으로 문제를 해결할 수 있게 된다는 사실을 알았습니다.

• 프론트엔드 또한 시스템과 도메인을 반영하기 위해 아키텍처를 선택할 수 있다는 것을 알게 됐습니다.

• 해결해야 하는 문제가 있을 때 결과를 예측할 수 없다면 주저하지 말고 빠르게 실험해 보는 것이 좋은 방법이라는 생각을 하게 되었습니다.