SmileJune/NEWSTUDY

🌍 난이도 맞춤형 해외 뉴스 기사를 통한 영어 공부 웹 서비스

📜 Contents

1. Overview
2. 서비스 화면
3. 주요 기능
4. 개발 환경
5. 시스템 아키텍처
6. 기술 특이점
7. 기획 및 설계 산출물
8. Conventions
9. 팀원 소개

📰 Overview

난이도 맞춤형 해외 뉴스 기사를 통한 영어 공부 웹 서비스

🏆 삼성 청년 SW 아카데미 7기 2학기 특화 프로젝트 대전 2반 최우수상 [발표영상]

🏆 삼성 청년 SW 아카데미 7기 2학기 특화 프로젝트 UCC경진대회 입상 [UCC]

✨ NEWSTUDY의 모토 - 폼생폼사, 간살간죽

👀 서비스 화면

✨ 모든 페이지 다크모드, 모바일(아이폰 12 Pro 기준 max-width:480px) 지원

온보딩

• fullpage를 적용한 온보딩
• 지구본 상호작용
• 모바일 버전에서는 클릭을 통한 fullpage 동작

회원가입 & 로그인 & 로그아웃

• 구글 메일 인증을 통한 유저 회원가입/로그인

마이페이지

• 프로필 이미지 변경
• 내가 스크랩한 기사, 나만의 단어장, 내가 획득한 뱃지, 내 관심 카테고리 표현

배지 획득

• 출석, 레벨, 게임, 단어장 추가, 기사 스크랩 에 대한 배지 부여

랜딩 (HOME)

• 사용자의 카테고리, 레벨에 따른 사용자 추천(USER FIT) 기사 제공
• 하루 중 가장 많은 조회수를 기록한 기사(HOT TOPIC) 제공
• 하루의 뉴스 기사에서 추출한 데일리 워드 클라우드 제공
  • 해당 워드 클라우드 기사들 함께 제공

레벨 테스트

• 6단계의 영단어 제시를 통해 나만의 영어 레벨 확인하기
• 유럽연합 공통언어 표준등급(CEFR)을 기준으로 영단어 레벨화

뉴스 기사 목록

• 선별된 난이도에 따른 기사 목록 제공
• 카테고리 대,소분류 필터를 통한 필터 기사 제공
• 모든 기사 목록 페이지에 더보기 구현

나라별 뉴스 기사 목록

• 대분류 나라별 기사들을 지구본 상의 마커와 리스트를 통해 시각화하여 제공
• 나라 선택시 해당 국가의 상위 언급 키워드를 오버레이와 해쉬태그 형태로 제공

기사 상세 페이지

• 번역, TTS, 스크랩 기능 제공
• 기사 내 최다 빈출 단어 제공 및 저장 기능
• 핵심 단어에서 TF-IDF 계산한 결과로 코사인 유사도 계산해 관련 기사 제공

영어 게임 - 스피드 퀴즈

• 한 문제당 10초의 제한시간을 두고 영단어 맞추기
• 처음 5초는 영어 설명으로 정답 유추
• 이후 5초는 한글 뜻 추가하여 유추
• 사용자 경험을 위해 엔터와 백스페이스를 통한 input 전환
• 해결 시간에 따른 뱃지 획득
• 게임 종료 후 입력 답안 비교, 해당 단어 추가 기능 제공

영어 게임 - 낱말 퍼즐

• 직접 구현한 낱말 퍼즐 생성 알고리즘을 통해 게임판 생성
• 영어 뜻으로 제공되는 힌트를 보고 가로와 세로 퍼즐 해결
• 사용자 경험을 위해 엔터와 백스페이스를 통한 input 전환
• 게임 종료 후 입력 답안 비교, 해당 단어 추가 기능 제공

검색

• 키워드, 카테고리 필터, 기간, 레벨에 따른 기사 검색 결과 제공
• 검색 키워드가 어느 카테고리에 많이 발생했는지 차트로 시각적 효과 제공

오늘의 단어

• 사용자가 오늘 하루 알면 좋은 10개의 단어
• 오늘 발행된 기사 중 최다 빈출된 단어 상위 10개를 뽑아 제공

✨ 주요 기능

• 다양한 뉴스 기사 목록 조회 및 검색 제공
  • 조회수가 높은 핫토픽 기사 목록 제공
  • 사용자의 관심 카테고리, 레벨에 맞는 기사 추천
  • 읽고있는 기사와 관련된 기사 추천
  • 나라별 기사 목록 (지구본을 통한 시각적 효과 제공)
  • 기사 목록 내 카테고리, 난이도별 필터 제공
  • 기사 검색 서비스
• 난이도에 맞는 뉴스 기사 제공
  • 레벨테스트를 통해 유저 레벨 측정
  • 기사별 포함 단어들의 난이도 분석을 통해 기사 레벨 부여
• 데일리 컨텐츠
  • 오늘의 단어
  • 오늘의 워드클라우드
• 영어 기사 정보 제공
  • 기사 내용과 가장 연관된 핵심단어 목록 제공
  • 기사 번역 & TTS 기능 & 스크랩 & 단어 저장 & 관련 기사 제공
  • 업적 달성을 통한 뱃지 수집으로 공부 흥미도 높임
• 영단어 활용한 게임 제공
  • 낱말 퍼즐
  • 스피드 퀴즈
• 사용자 친화적 UI
  • 다크 모드 지원
  • 모바일 뷰 지원

🖥️ 개발 환경

🔨 Management Tool

• 형상 관리 : Gitlab
• 이슈 관리 : Jira
• 커뮤니케이션 : Mattermost, Webex, Notion
• 디자인 : Figma, Adobe Illustrator, Adobe Photoshop, Adobe After Effect

🐳 Backend

• Java open-JDK zulu 8.33.0.1
• SpringBoot 2.7.3
• Gradle 7.5
• Lombok 1.18.24
• Mybatis 2.2.2
• Swagger
• Spring Security 2.4.5
• Python 3.7.10
• Jupyter notebook 6.4.12
• spark 3.2.1
• Scala 2.12.15

🦊 Frontend

• lang: HTML5, CSS3, JAVASCRIPT, Node.js 16.16.0
• framework: react 16.13.1
• style : Sass
• http: axios
• formatter : eslint + prettier
• router : react-router-dom 6.3.0
• state management tool : react-redux 8.0.2
• Libary

   "@fortawesome/fontawesome-svg-core": "^6.2.0",
   "@fortawesome/free-regular-svg-icons": "^6.2.0",
   "@fortawesome/free-solid-svg-icons": "^6.2.0",
   "@fortawesome/react-fontawesome": "^0.2.0",
   "@nivo/pie": "^0.80.0",
   "@testing-library/jest-dom": "^5.16.5",
   "@testing-library/react": "^10.0.0",
   "@testing-library/user-event": "^13.5.0",
   "aos": "^2.3.4",
   "axios": "^0.27.2",
   "install": "^0.13.0",
   "moment": "^2.29.4",
   "node-sass": "^7.0.1",
   "npm": "^8.19.2",
   "pageable": "^0.6.8",
   "rc-slider": "^9.3.0",
   "react": "^16.13.1",
   "react-calendar": "^3.9.0",
   "react-dom": "^16.13.1",
   "react-globe": "^5.0.2",
   "react-redux": "^8.0.2",
   "react-responsive": "^9.0.0-beta.10",
   "react-router-dom": "^6.3.0",
   "react-scripts": "5.0.1",
   "react-wordcloud": "^1.2.7",
   "redux": "^4.2.0",
   "redux-persist": "^6.0.0",
   "redux-promise": "^0.6.0",
   "redux-thunk": "^2.4.1",
   "sass-loader": "^13.0.2",
   "three": "^0.122.0",
   "web-vitals": "^2.1.4"

• API
  • react-globe
  • Web Speech API
  • react-wordcloud
  • Chart

🗂️ DB

• MySQL 8.0.30

🌐 Server

• https (TLS 1.0)
• Ubuntu 20.0.4
• Nginx 1.23
• PuTTY 0.77
• mobaXterm 22.1
• Docker 20.10.18
• Jenkins Jenkins/jenkins:lts-jdk11 (Docker image tag name)

🔨 IDE

• IntelliJ 2022.2
• MySQL Workbench 8.0.29
• VSCode 1.69.2

💫 시스템 아키텍처

✨ 기술 특이점

• 난이도별 뉴스 기사 제공
• 사용자 관심 카테고리 & 레벨 기반으로 맞춤 뉴스 제공
• 다크모드 & 모바일 지원
• 나라별 기사 목록 지구본 시각화
• CEFR을 통한 레벨테스트
• 게임 알고리즘 직접 구현
• 기사 난이도 분석
  • CEFR을 기반으로 난이도 계산해 지정
• 6개의 해외뉴스 사이트에서 매일 기사 수집
• 하둡을 사용한 분산 처리
  • 클러스터 서버에서 스파크를 사용하여 뉴스 기사들의 단어에 대한 TF-IDF를 계산
    • 4번의 맵핑과 3번의 리듀스 과정 진행
  • 데일리 컨텐츠
  • 오늘의 단어 : 당일 수집된 전체 기사 내용 워드카운트
  • 데일리 워드클라우드 & 나라별 핵심 키워드 : 카테고리별 빈도수 높은 k개 선정
  • 기사 상세 핵심 단어 : 기사별 워드 카운트 수행 -> TF-IDF 계산 후 선정
  • 관련 기사 목록 : 핵심단어 추출한 결과로 다른 기사와 코사인 유사도 계산

📂 기획 및 설계 산출물

💭 요구사항 정의 및 기능 명세

🎨 화면 설계서

✨ ER Diagram

✨ Conventions

NEWSTUDY 팀원들의 원활한 Gitlab, Jira 사용을 위한 ✨컨벤션✨ 입니다 :)

💞 팀원 소개

❤️‍🔥 NEWSTUDY를 개발한 싸피그룹 영어토익반 팀원들을 소개합니다!

한윤석	김수빈	이화연	육다빈	윤일준	정수빈
Leader & Frontend	Frontend	Frontend	Backend	Backend	Backend

😃 팀원 역할

• 한윤석
  • 팀장, 온보딩, 게임, 기사 상세, 나라별 기사
• 김수빈
  • 디자인, UCC, 랜딩/기사목록/검색
• 이화연
  • 회원관리, 다크모드, 마이페이지, 나라별 기사
• 육다빈
  • 서기, 관련 기사 추천, 데이터 전처리, 단어-카테고리 관련 API
• 윤일준
  • 배포, 보안, 회원 관련 API, UCC 주연 배우
• 정수빈
  • 뉴스 레벨, 워드카운트, 뉴스검색 API