Samsung Software Academy For Youth 10기
도메인 : 빅데이터 - 분산
개발 기간 : 2024.02.19 ~ 2024.04.04

과거의 뉴스가 현재와 미래를 이해하는 데 얼마나 중요한 역할을 하는지 알고 계시나요? 우리의 서비스를 통해 역사적 순간들을 탐험하고, 그 당시의 흐름과 사건들을 되짚어 보는 데 도움이 될 거예요. 과거의 뉴스 기사들을 읽고, 그 당시의 사회적, 정치적 풍경을 살펴보며 역사적 지식을 테스트해 보세요. 연도별로 다른 퀴즈를 풀어보며 그해의 트렌드와 주요 사건들을 파악할 수 있어요. 과거로 떠나는 여행! 지금 시작해 보세요.

많은 현대인이 시청각 미디어를 통해 정보를 얻고 있어요. 또한 정보의 바다에서 살고 있는 지금. 우리는 정보를 얻기 위한 시간이 부족하기에 가능하면 빠르게! 필요한 부분만! 요약된 내용만으로 모든 정보를 흡수하려고 하고 있지요. 그러다 보니 정보를 흡수하는 데 오래 걸리는 글 자체를 멀리하고 있어요. 자연스레 멀어지는 글. 글을 읽어야 한다는 것을 알지만 읽기 싫은 것을 어떡해요. 그래서 조금이라도 글을 읽는 데 도움을 주고자, 그뿐만 아니라 정보도 제공하고자 해당 프로젝트로 기획하게 되었어요.

과거부터 현재까지 발행된 기사의 내용을 살펴보며, 글이 주는 재미와 흥미를 느끼고, 그 당시의 사회, 정치, 문화적 배경을 이해함으로써 정보 습득하는 방법을 터득하는데 도움이 될 수 있어요. 또한 그 당시의 사건으로 끝나는 것이 아니라 현재까지 이어져 오는 연결된 내용을 사용자에게 제공함으로써 지금은 어떻게 변화하고 있는지 파악할 수 있어요.

2005년부터 2024년 현재까지의 뉴스 데이터 80만 개를 관리하고 있습니다. 사용자는 연도를 선택하여 해당연도에 대표되는 기사를 퀴즈 형식으로 접하고 추세를 파악할 수 있습니다.

이상한 나라의 앨리스 컨셉을 통해 사용자들이 게임에 더 몰입할 수 있도록 하고자 하였습니다. 미로에서 탈출하는 재미도 있지만, 퀴즈를 하나하나 해결하며 자신의 역사적 지식을 테스트할 수 있습니다.

단순히 퀴즈로 그 당시를 이해하기는 어렵습니다. 게임이 끝난 후 해당연도를 대표하는 키워드를 통해 빠르게 정보를 얻을 수 있습니다.

지금까지 이어져 오는 관련 기사를 같이 살펴봄으로써 현재의 흐름은 어떠한지 파악하며, 현재와 비교할 수 있도록 하였습니다.

퀴즈를 통한 문제를 접하면서 자신이 중요하다고 생각하는 기사를 스크랩하고, 계속해서 볼 수 있습니다. 이렇게 쌓인 스크랩 기사는 나중에 모여서 자신의 관심 분야, 사건들을 파악하는데 도움이 됩니다.

퀴즈 형식의 게임은 금방 질릴 수 있습니다. 그런 점을 충분히 알기에 뱃지 요소를 활용하여 사용자의 수집 욕구를 불러일으키고자 하였습니다.

frontend	frontend	frontend
김수혁	정혜진	조은영

backend	backend	backend
강성범	신예지	이민우

• 뉴스 정보 크롤링
• Spark를 활용한 분산 전처리 자동화 코드 작성
• ELK 구축
• Elasticsearch 조회 쿼리 작성 및 최적화
• 스프링부트에서 ES NativeQuery를 활용한 쿼리 변환 작업
• tailwind를 활용한 CSS 적용

• Nginx와 Docker를 이용한 프론트엔드 배포
• 미로 모델에 Asset들과 Item들 배치 및 렌더링
• 아이템, Asset들과 Player 물리 엔진 상호작용 로직 작성
• 게임 설명 모달 구현
• 게임 시간 설정 및 게임 백그라운드 음악 구현
• 게임 종료 로직 구현
• 게임 결과 API를 백엔드에 전송

• Jenkins를 사용한 자동배포 파이프라인 구축
• Certbot을 사용한 TLS 프로토콜 설정, Nginx 연결
• 뉴스 기사 본문 요약 로직 구현
• 소셜로그인과 세션을 통한 인증/인가 구현
• 파인튜닝 모델을 사용한 뉴스 기사 관련 퀴즈 생성
• 백엔드 공통 코드 구축, API 처리 구현, JPA를 사용한 로직 구현

• 뉴스 정보 크롤링
• 뉴스 데이터를 활용하기 위한 전처리
• 카프카 구조 설계 및 데이터 적재
• Logstash를 활용한 카프카 -> Elasticsearch 파이프라인 구축
• 뉴스데이터를 활용하기 위한 Elasticsearch 쿼리 작성 및 최적화 설계
• 스프링부트에서 ES NativeQuery를 활용한 쿼리 변환 작업
• Airflow를 활용한 데이터 수집 자동화

• r3f를 사용하여 게임 환경을 초기 설정
• 플레이어와 미로 모델에 rapier 물리 엔진을 적용
• 플레이어의 상하좌우 점프 이동을 구현
• 결과페이지 및 마이페이지를 구현
• 커스텀 프로그래스 바를 통해 과거 기사에서부터 현재 기사까지의 흐름을 구현
• 워드 클라우드, 레이더 차트 등을 통해 데이터를 시각화
• 뱃지 컴포넌트 구현
• 로그인 여부에 따라 페이지 이동
• 로그인 전 상태를 전역 상태에 저장 및 복원
• 재사용 가능한 모달 및 상세 기사 컴포넌트를 개발하여 재사용성을 높이고 코드의 일관성을 유지
• 자주 쓰이는 스타일을 컴포넌트 혹은 전역 스타일로 관리하여 재사용성을 높이고 코드의 일관성을 유지
• 와이어 프레임을 사용하여 프로젝트 구조를 시각화

• gltf 파일 커스터마이징
• gltf 텍스쳐링 작업
• esLint 설정으로 프론트엔드 코드 리뷰 시간 단축
• 프론트엔드 초기 개발 환경 세팅
• 퀴즈 로직 개발 및 구현 - 애너그램, OX, 객관식, 단답식
• 다양한 훅을 이용하여 리렌더링을 최소화하여 사용자 경험 개선
• API 분리, 리소스 우선순위 설정 ,WebP, Draco 기술을 활용하여 로딩 시간을 1분 이상 단축
• 소셜 로그인 구현
• 단서, 쿠키, 맞은 개수, 카테고리 카운팅 로직 개발 및 구현

✨Front-end Stack✨

✨Data Stack✨

✨Back-end Stack✨

✨Infra Stack✨