Skip to content

2025-PNU-SW-Hackathon/PNUSW-2025-08

 
 

Repository files navigation

1. 프로젝트 소개

1.1 개발배경 및 필요성

뉴스는 건강한 민주주의 사회를 위한 핵심 요소입니다.

사람들은 뉴스를 통해 사회에서 일어나는 다양한 사건과 이슈를 접하고, 정치적·사회적 결정에 대한 객관적 정보를 바탕으로 비판적 사고를 형성합니다. 또한 뉴스는 사회 구성원 간의 공통된 의제를 제공하여 공론장 형성에 기여합니다.

이처럼 뉴스는 시민의 알 권리를 보장하고 민주적 의사결정을 돕는 사회의 필수 요소입니다. 그런데 만약 사람들이 뉴스를 점점 더 외면하고 있다면, 이는 우리 사회에 심각한 문제를 야기할 수 있지 않을까요?


뉴스 회피 현상의 심화

❗ 사람들이 점점 뉴스를 회피하고 있습니다.

최근 디지털 뉴스 이용 환경에서 '뉴스 회피' 현상이 뚜렷하게 나타나고 있습니다. TV, 인터넷 포털 등 주요 매체의 이용률이 큰 폭으로 감소했으며, 전반적으로 모든 매체의 뉴스 이용률이 하락하는 추세를 보이고 있습니다.


뉴스회피 (1)

매체별 뉴스 이용률, 출처: 한국기자협회


이러한 현상이 실제로 우리 주변에서도 일어나고 있는지 확인하기 위해, 2025년 5월 20일부터 27일까지 8일간 부산대학교 에브리타임 게시판에서 '매일 뉴스를 챙겨보는가?'를 주제로 익명 설문조사를 실시했습니다.


스크린샷 2025-08-10 오후 10 47 35 스크린샷 2025-08-10 오후 10 47 43

교내 설문조사 결과


총 36명이 참여한 결과, 단 8명(22%)만이 '매일 뉴스를 챙겨본다'고 답했고, 나머지 28명(78%)은 '뉴스를 매일 챙겨보지 않는다'고 응답했습니다. 이를 통해 널리 알려진 뉴스 회피 현상이 대학생들 사이에서도 현실적으로 나타나고 있음을 확인할 수 있었습니다.


뉴스 회피의 원인 분석

그렇다면 이러한 뉴스 회피 현상은 왜 발생하는 것일까요? 한국언론진흥재단의 통계 자료를 통해 그 원인을 분석해보았습니다.


뉴스신뢰도

뉴스 전반에 대한 신뢰, 출처: 한국언론진흥재단


먼저 '뉴스 전반에 대한 신뢰도'를 살펴보면, 한국은 46개국 중 30%로 최하위를 기록했습니다. 이는 10명 중 7명이 한국 뉴스를 신뢰하지 못하고 있다는 심각한 상황을 보여줍니다.


뉴스회피이유2

뉴스 회피 이유, 출처: 한국언론진흥재단


'뉴스 회피 이유' 조사 결과를 보면, "뉴스가 정치적으로 편향되어 있어서"와 "보고 싶지 않은 인물들이 나와서"가 가장 높은 비율을 차지했습니다. 이는 현재 한국 뉴스의 편향성과 관련성 부족에 대한 사용자들의 강한 불만을 드러내고 있습니다.

이를 종합하면, 한국의 뉴스 회피 현상이 심화되는 주요 원인은 다음 세 가지로 요약할 수 있습니다:

  • 신뢰성 부족: 뉴스가 믿을 만한 정보인지에 대한 의구심
  • 편향성 문제: 뉴스가 특정 관점에 치우쳐 있다는 인식
  • 관련성 결여: 개인이 원하는 뉴스를 찾기 어려운 환경

썸즈업이 해결하고자 하는 문제

💡 사람들이 뉴스를 건강하게 소비할 수 있도록 만들어야 한다.

저희는 이러한 뉴스 회피 현상을 근본적으로 해결하고, 시민들이 다시 뉴스에 관심을 가질 수 있는 환경을 조성하기 위해 썸즈업(Some's Up) 애플리케이션을 개발하게 되었습니다.

썸즈업은 다음과 같은 방식으로 뉴스 회피의 주요 원인들을 해결하고자 합니다:

  • 다양한 관점의 통합 제공: 여러 뉴스사의 관점을 편파적이지 않은 시각으로 종합하여 균형 잡힌 정보 제공
  • 접근성 향상: 복잡하고 어려운 뉴스를 간편하고 직관적으로 접할 수 있는 사용자 경험 설계
  • 개인화된 뉴스 큐레이션: 사용자가 원하는 주제와 관심사에 맞는 뉴스를 효율적으로 제공

이를 통해 사람들이 뉴스에 대한 신뢰를 회복하고, 건전한 정보 소비 습관을 형성할 수 있도록 돕고자 합니다.


1.2. 개발 목표 및 주요 내용

Some’s Up(썸즈업)은 AI/LLM 기술을 기반으로 한 뉴스 요약 및 큐레이팅 서비스입니다. 20대 대학생들의 뉴스 회피 문제를 인식하여, 20대 대학생들에게 ‘중립적이고 쉬운’ 뉴스를 제공하고자합니다.

  1. 기사 중립적 재구성

    다양한 언론사에서 같은 주제의 여러 기사를 수집하고, AI가 이를 수합하여 인덱스별로 요약. 다양한 뉴스를 종합하는 과정에서 편향성을 줄이고, 사실 기반의 뉴스로 가공.

  2. 심리적 부담 최소화를 위한 정보 배치

    1. 헤드라인 선택 과정 없이, 숏폼 형태로 기사를 바로 보여주어, 선택의 고민과 시간 감소.
    2. 헤드라인 → 기사 요약 → 상세 기사 순서로 정보를 점진적 공개하여 정보를 원하는 만큼 선택적으로 습득.
    3. 기존의 긴 기사를 인덱스와 함께 문단으로 분할하여 읽기 부담을 낮춤.
  3. 사용자 관심사 맞춤 뉴스 제공(알고리즘)

    1. 초기 관심 분야 설정(1)과 사용 중 상세기사를 많이 본 뉴스들의 분야(2)를 반영하여, 사용자 관심사 맞춤형 뉴스 큐레이팅 제공.
  4. 5분 요약 뉴스 : 전일 주요 뉴스를 5분 안에 훑어볼 수 있는 기능.

  5. 스크랩 기능 : 외부 도구 없이 앱 내에서 기사 스크랩 및 다시보기 지원.


1.3. 세부내용

(1) 로그인 및 회원가입

기능명
상세정보
로그인 휴대폰 번호와 인증번호로 로그인
  • 아이디와 비밀번호를 외울 필요없이 간단히 로그인 가능
회원가입 휴대폰 번호, 인증번호, 닉네임을 설정하여 회원가입
  • 닉네임은 공백포함 20자 입력 가능, 타 유저와 중복 불가
  • 닉네임 입력하지 않을 경우, 자동 생성됨
게스트로 시작하기 별도 회원가입없이, 게스트아이디를 부여받아 서비스를 시작
카테고리 관심도 입력 6개(정치,사회,경제,문화,세계,생활) 카테고리의 선호도를 각각 입력
  • 각 카테고리별로 높음, 중간, 낮음 중 선택

(2) 메인 뉴스화면 (Some's up) & 5분 뉴스 보기

기능명
상세정보
메인 뉴스 카드 기사 사진, 헤드라인, 기사 3줄 요약, 뉴스 카테고리 제공
상세 기사 보기
(우측으로 스와이프)
인덱스 별로 요약된 상세 기사 제공
기사 출처 및 원문보기
  • 수합된 뉴스가 어떤 언론사로부터 왔는지 표기
  • 각 언론사의 원문기사 보기로 이동(링크)
좋아요
  • 뉴스에 대한 선호도 표시
  • 이용자들의 누적 좋아요 개수가 표시됨
스크랩
  • 기사를 다시 보고싶은 경우, 스크랩버튼을 눌러 스크랩함에 보관가능
페이지 이동 상단 페이지 메뉴를 통해 메인뉴스화면(Some's up) → 5분 뉴스 → 마이페이지로 이동 가능
토스트 팝업 당일 5분 뉴스를 보지 않았다면, 상단에 '5분만에 이슈 훑기' 토스트 팝업 제공

(3) 마이페이지

기능명 상세정보
닉네임 수정 기존 설정된 닉네임 수정
스크랩 기사 스크랩한 기사 다시보기
내가 읽은 뉴스 가입 시 입력한 카테고리별 선호도(1)와 상세 기사를 많이 본 뉴스의 카테고리(2)를 표시하여, 읽은 뉴스의 카테고리 분포 데이터 육각형 차트로 제공
관심 카테고리 수정 가입 시 입력한 카테고리별 선호도 수정
자주 접한 키워드
  • 워드 클라우드 형태의 데이터로 제공
  • 뉴스 당 주요 키워드를 3개씩 수합하여, 빈도에 따라 사이즈를 달리하여 자주 접한 키워드 제공

1.4. 기존 서비스 대비 차별성

저희 팀은 K-ICT 행사에 참석하여 Some’s Up 서비스를 소개하고, 잠재 사용자들의 의견을 청취하는 시간을 가졌습니다. 주요 관심사는 ‘기존 뉴스 서비스 대비 어떤 차별점이 있는지’에 집중되었습니다. 이에 저희는 네이버 뉴스뿐 아니라, 뉴스 요약 및 큐레이팅을 제공하는 다양한 앱 서비스를 직접 사용하고 분석한 결과, 형평성 보장과 큐레이팅 방식에서의 개선 필요성을 찾았습니다.

스크린샷 2025-08-26 오전 1 54 05

기존 서비스 대비 차별성

  • 뉴스 소비 결정의 단순화
    • 앱 실행 시 게시판형 목록이 아닌, 전체 화면에 하나의 뉴스(사진·헤드라인·3줄 요약)만 표시.
    • 사용자는 해당 뉴스를 볼지 여부만 결정(가로 스와이프: 자세히 보기 / 세로 스와이프: 다음 기사).
    • 선택 단계 단순화로 인지 부담 및 이탈률 감소.
  • 구조화된 짧은 여러 개의 단락으로 재구조화
    • 기사를 개요, 경과, 파급효과 등으로 구분하여 짧고 구조화된 단락 제공.
    • 필요한 부분만 선택적으로 읽을 수 있어 정보 습득 효율 증가.
  • 다양한 관점의 통합
    • 다수의 뉴스 RSS 피드를 수집·통합하고 AI/LLM을 통해 종합 요약.
    • 상반된 관점의 내용이 중화되어 편파성을 완화하고, 균형 잡힌 시각 제공.
  • 개인화된 뉴스 큐레이팅
    • 카테고리 별 선호도 설정 및 사용자가 ‘상세 기사보기’를 많이 선택한 기사를 위주로 뉴스를 배치하여 개인 맞춤형 큐레이팅 제공.

1.5. 사회적가치 도입 계획

  1. 심리적 불안 해소

    • 뉴스 회피와 인지 부조화 해소
      사용자는 ‘뉴스를 봐야 한다’는 인지적 압박과 ‘뉴스가 어렵고 피로하다’는 경험 사이에서 인지 부조화(cognitive dissonance)를 겪습니다.
      Some’s Up는 쉬운 접근성과 중립적 정보를 제공하여 이 불안을 완화하고, 뉴스 소비에 대한 심리적 장벽을 낮춥니다.
  2. 서비스 확장성

    • 다양한 연령대 및 이용자 환경에 맞게 적용 가능하도록 설계되었으며, 읽기 부담을 낮춘 직관적 UI/UX는 20대 대학생뿐 아니라 중장년층 등 폭넓은 세대에도 효과적으로 적용할 수 있습니다.
  3. 뉴스회피 문제 해결에 따른 사회적 가치

    • 뉴스 소비 활성화로 정보 격차 해소 및 민주적 의사결정 참여 기회 확대
    • 편파적 보도와 정보 과부하에서 오는 피로감 완화로 이용자 만족도 증대
    • 궁극적으로 건강한 미디어 환경 조성과 사회적 신뢰 회복에 기여


2. 상세설계

2.1. 시스템 구성도

Screenshot 2025-08-16 at 5 13 40 PM

시스템 구성도

2.2. 사용 기술

분야 기술/라이브러리 버전
Backend Node 20.17.0
Express 4.21.0
Cloud(Terraform) hashicorp/google 6.0.1
Frontend React 18
Next 14.2.30
ReactNative 0.79.5
├─ React 19.0.0
├─ Expo 53.0.20

3. 개발결과

3.1. 전체시스템 흐름도

Untitled diagram _ Mermaid Chart-2025-08-18-212050

전체시스템 흐름도

3.2. 기능설명

온보딩 페이지

영상 소개 설명
2025-08-26.1.01.08.mov
기능 개요 비로그인 사용자가 처음 접하는 서비스 소개 페이지로, 사용자에게 서비스의 핵심 가치와 기능을 직관적으로 전달합니다.
사용자 입력 전화번호 로그인 또는 게스트 로그인 선택
시스템 동작 사용자가 선택한 로그인 방식에 따라 해당 페이지로 라우팅을 수행하며, 게스트 선택 시 임시 사용자 계정을 생성합니다.

로그인 페이지

영상 소개 설명
2025-08-26.1.03.54.mov
기능 개요 SMS 기반의 간편 인증 시스템을 통해 사용자 인증을 처리합니다.
사용자 입력 및 검증
  • 전화번호 입력 시 숫자만 허용되며, 실시간 유효성 검사를 수행합니다.
  • 전화번호 형식이 올바를 때만 인증번호 요청 버튼이 활성화됩니다.
시스템 동작
  • 인증번호는 5분간 유효하며, 시간 초과 시 재요청이 필요합니다.
  • 인증번호 불일치 시 오류 메시지를 표시하고, 인증 성공 시 닉네임 설정 페이지로 이동합니다.

닉네임 설정 페이지

영상 소개 설명
2025-08-26.1.06.29.mov
기능 개요 신규 사용자의 개인화된 닉네임을 설정하는 페이지입니다.
사용자 입력 및 검증
  • 1자 이상 15자 이하의 닉네임 입력이 가능합니다.
  • 입력 조건을 벗어날 경우 실시간으로 안내 문구가 표시됩니다.
시스템 동작 유효한 닉네임 설정 완료 시 선호도 설정 페이지로 자동 이동합니다.

선호도 설정 페이지

영상 소개 설명
2025-08-26.1.08.41.mov
기능 개요 개인화된 뉴스 큐레이션을 위한 카테고리별 관심도를 설정하는 페이지입니다.
사용자 입력 6개 뉴스 카테고리(정치, 사회, 경제, 문화, 세계, 생활)에 대해 각각 1~3단계의 관심도를 선택합니다.
시스템 동작 모든 카테고리의 선호도 설정이 완료되어야 다음 단계로 진행 가능하며, 설정된 데이터는 개인화 알고리즘에 반영됩니다.

메인 페이지 (Some's up)

영상 소개 설명
2025-08-26.1.19.54.mov.mp4
기능 개요 개인화된 뉴스 피드를 제공하는 핵심 서비스 페이지입니다.
사용자 상호작용
  • 상하 스와이프: 이전/다음 뉴스로 이동
  • 우측 스와이프: AI 요약 상세 기사 보기
  • 좌측 스와이프: 상세 기사에서 메인 화면으로 복귀
제공 정보 기사 대표 이미지, 헤드라인, 3줄 요약, 카테고리 정보를 카드 형태로 표시
부가 기능
  • 좋아요, 스크랩 기능을 통한 사용자 피드백 수집
  • 뉴스사 로고 클릭 시 출처 확인 및 원문 기사 링크 제공
  • 사용자 행동 데이터(상세 보기, 좋아요, 스크랩)를 기반으로 선호도 알고리즘 지속 업데이트

5분 뉴스 페이지

영상 소개 설명
2025-08-26.1.29.48.mov
기능 개요 전일 주요 뉴스를 효율적으로 소비할 수 있도록 큐레이션된 콘텐츠를 제공합니다.
사용자 상호작용 메인 페이지와 동일한 스와이프 기반 인터랙션을 지원합니다.
시스템 동작 제공된 모든 뉴스 열람 완료 시 완료 안내 UI를 표시하며, 추가 스와이프를 통해 메인 페이지로 복귀 가능합니다.

마이 페이지

영상 소개 설명
2025-08-26.1.22.46.mov
기능 개요 개인화된 뉴스 소비 패턴과 관련 데이터를 시각화하여 제공하는 사용자 정보 페이지입니다.
제공 정보
  • 사용자 닉네임 및 수정 기능
  • 실제 뉴스 소비 패턴 기반의 선호도 분석 결과를 육각형 차트로 시각화
  • 자주 접한 키워드를 워드 클라우드 형태로 제공
  • 스크랩한 기사 목록 접근 링크

스크랩 페이지

영상 소개 설명
2025-08-26.1.26.17.mov
기능 개요 사용자가 저장한 뉴스 기사들을 관리하고 재열람할 수 있는 페이지입니다.
시스템 동작 스크랩 목록이 없을 경우 안내 문구를 표시, 스크랩된 기사가 있을 경우 무한 스크롤 방식의 카드 리스트로 제공
사용자 상호작용
  • 스크랩 목록이 없을 경우 안내 문구를 표시
  • 스크랩된 기사가 있을 경우 무한 스크롤 방식의 카드 리스트로 제공

스크랩 스와이프 페이지

영상 소개 설명
2025-08-26.1.27.02.mov
기능 개요 스크랩된 기사들을 메인 페이지와 동일한 인터페이스로 열람할 수 있는 페이지입니다.
사용자 상호작용 메인 페이지와 동일한 스와이프 기반 네비게이션을 지원합니다.
시스템 동작 모든 스크랩 기사 열람 완료 시 링크를 통한 페이지 이탈 기능을 제공합니다.

3.3. 기능명세서

기능 명세서


3.4. 디렉토리 구조

somesup-cloud
|____server
|	|____src
|	|	|____types # 도메인 모델, 요청 등의 타입 지정
|	|	|____swagger # swagger API documentation
|	|	|____config # JWT, GCP, Redis, BigQuery등의 설정 및 클라이언트 정의
|	|	|____middlewares # 미들웨어 정의
|	|	|____utils # 유틸리티 함수 정의
|	|	|____controllers
|	|	| |____sectionController.ts # 영역 컨트롤러
|	|	| |____articleController.ts # 기사 컨트롤러
|	|	| |____authController.ts # 인증 컨트롤러
|	|	| |____userController.ts # 사용자 컨트롤러
|	|	|____routes # 라우터 정의
|	|	| |____article.ts # 기사 라우터
|	|	| |____section.ts # 영역 라우터
|	|	| |____user.ts # 사용자 라우터
|	|	| |____auth.ts # 인증 라우터
|	|	|____services
|	|	| |____coolsmsService.ts # SMS 전송을 위한 CoolSMS 전송 서비스
|	|	| |____authService.ts # 인증 서비스
|	|	| |____keywordService.ts # 키워드 서비스
|	|	| |____userService.ts # 사용자 서비스
|	|	| |____articleService.ts # 기사 서비스
|	|	| |____sectionService.ts # 영역 서비스
|____terraform
|	|____user_embeddings.tf # 사용자 선호도 벡터 계산 Cloud Function 정의
|	|____scheduler.tf # Cloud Scheduler 정의
|	|____workflows.tf # 뉴스 가공 파이프라인 정의
|	|____cluster_summarizer.tf # 뉴스 요약 Cloud Function 정의
|	|____module
|	| |____cloud_function # Cloud Function 모듈 정의
|	| | |____outputs.tf
|	| | |____main.tf
|	| | |____variables.tf
|	| | |____iam.tf
|	|____apis.tf # GCP 프로젝트에 필요한 API 정의
|	|____buckets.tf # GCS 버킷 리소스 정의
|	|____news_fetchers.tf # RSS Feed로부터 뉴스를 가져오는 Cloud Function 정의
|	|____bigquery.tf # BigQuery 테이블 정의
|	|____database.tf # Cloud SQL, MemoryStore 정의
|	|____registry.tf # GCR 도커 이미지 레지스트리 정의
|	|____provider.tf # Terraform Provider 정의
|	|____backend.tf # Terraform State를 원격으로 관리하기 위한 Terraform Backend 정의
|	|____assets
|	| |____provider_logos # 뉴스사 로고 이미지
|	|____server.tf # Node.js 서버 Cloud Run 서비스 정의
|	|____src
|	| |____guardian_fetcher # News Fetcher (<- Guardian)
|	| | |____requirements.txt
|	| | |____main.py
|	| |____workflows # 뉴스 가공 파이프라인 정의
|	| | |____article_processing.yaml
|	| |____recalculate_user_embeddings # 사용자 선호도 벡터 재계산 Cloud Function
|	| | |____requirements.txt
|	| | |____main.py
|	| |____newsapi_fetcher # News Fetcher (<- NewsAPI)
|	| | |____requirements.txt
|	| | |____main.py
|	| |____schema # BigQuery 테이블 스키마 정의
|	| | |____p_article_embeddings.json
|	| | |____user_embeddings.json
|	| | |____section_avg_embeddings.json
|	| |____clustering_articles # News Clusterer
|	| | |____requirements.txt
|	| | |____main.py
|	| |____calculate_user_embeddings # 사용자 선호도 벡터 계산 Cloud Function
|	| | |____requirements.txt
|	| | |____main.py
|	| |____cluster_summarizer # News Summarizer
|	| | |____requirements.txt
|	| | |____main.py
|	| |____sql # DB 초기화 SQL (deprecated)
|	| | |____01_init_db.sql
📦 somesup-next
├─ .github
│  ├─ ISSUE_TEMPLATE
│  │  └─ issue-template.md
│  └─ PULL_REQUEST_TEMPLATE.md
├─ .gitignore
├─ .prettierrc.json
├─ .vscode
│  └─ settings.json
├─ LICENSE
├─ README.md
├─ next.config.mjs
├─ package.json
├─ pnpm-lock.yaml
├─ postcss.config.mjs
├─ public
│  ├─ animations
│  │  └─ loading.json
│  ├─ fonts
│  │  └─ NotoSansKR.ttf
│  └─ images
│     ├─ keyword-bg.png
│     ├─ news-paper.png
│     ├─ onboarding-example-image.png
│     ├─ onboarding-image1.png
│     ├─ onboarding-image2.png
│     ├─ onboarding-image3.png
│     ├─ onboarding-image4.png
│     ├─ onboarding-image5.png
│     ├─ press-logo-example.png
│     └─ thumbs-up.png
├─ src
│  ├─ app
│  │  ├─ globals.css
│  │  ├─ highlight
│  │  │  └─ page.tsx
│  │  ├─ icon.png
│  │  ├─ layout.tsx
│  │  ├─ my-page
│  │  │  ├─ page.tsx
│  │  │  └─ scrap
│  │  │     └─ page.tsx
│  │  ├─ onboarding
│  │  │  └─ page.tsx
│  │  ├─ page.tsx
│  │  ├─ scrap
│  │  │  ├─ layout.tsx
│  │  │  └─ page.tsx
│  │  ├─ set-nickname
│  │  │  ├─ layout.tsx
│  │  │  └─ page.tsx
│  │  ├─ set-preferences
│  │  │  └─ page.tsx
│  │  └─ sign-in
│  │     └─ page.tsx
│  ├─ components
│  │  ├─ features
│  │  │  ├─ my-page
│  │  │  │  ├─ article-card.tsx
│  │  │  │  └─ word-cloud.tsx
│  │  │  ├─ news
│  │  │  │  ├─ news-abstract-view.tsx
│  │  │  │  ├─ news-detail-view.tsx
│  │  │  │  └─ news-provider.tsx
│  │  │  ├─ onboarding
│  │  │  │  ├─ onboarding-carousel.tsx
│  │  │  │  └─ onboarding-start-button.tsx
│  │  │  ├─ set-preference
│  │  │  │  ├─ set-preference-detail-page.tsx
│  │  │  │  ├─ set-preference-finish-page.tsx
│  │  │  │  ├─ set-preference-first-page.tsx
│  │  │  │  ├─ set-preference-lottie.tsx
│  │  │  │  ├─ set-preference-slider.tsx
│  │  │  │  └─ set-preference-wait-page.tsx
│  │  │  └─ sign-in
│  │  │     ├─ sign-in-form.tsx
│  │  │     ├─ sign-in-input-code.tsx
│  │  │     └─ sign-in-input.tsx
│  │  └─ ui
│  │     ├─ button.tsx
│  │     ├─ hexagon.tsx
│  │     ├─ page-selector.tsx
│  │     └─ toast.tsx
│  ├─ data
│  │  ├─ onboarding.ts
│  │  └─ sitemap.ts
│  ├─ lib
│  │  ├─ apis
│  │  │  ├─ api-config.ts
│  │  │  └─ apis.ts
│  │  ├─ hooks
│  │  │  ├─ useFetchArticles.ts
│  │  │  ├─ useInfiniteScroll.ts
│  │  │  ├─ useNewsDrag.ts
│  │  │  ├─ useRefWidth.ts
│  │  │  └─ useSwipeGestures.ts
│  │  ├─ stores
│  │  │  ├─ highlight.ts
│  │  │  ├─ toast.ts
│  │  │  └─ user.ts
│  │  └─ utils
│  │     ├─ camelize.ts
│  │     ├─ index.ts
│  │     └─ news-daily.ts
│  ├─ middleware.ts
│  └─ types
│     ├─ dto.ts
│     └─ types.ts
├─ tailwind.config.ts
└─ tsconfig.json

4. 설치 및 사용 방법

  • 클라우드 리소스 생성

클라우드 서비스는 Google Cloud Platform을 사용하고 있으며, Cloud SQL, MemoryStore, Cloud Run, Workflow 등의 서비스를 사용하기 위해 필수적으로 필요합니다.

먼저 콘솔에서 Secret Manager 서비스에 접속하여 아래의 Secrets들을 등록해주어야 합니다.

COOLSMS_API_KEY SMS 문자를 보내기 위한 CoolSMS 서비스의 API KEY
COOLSMS_API_SECRET SMS 문자를 보내기 위한 CoolSMS 서비스의 API Secret
COOLSMS_FROM_PHONE_NUMBER SMS 문자를 보내기 위한 CoolSMS 서비스가 사용할 전화번호
GUARDIAN_API_KEY Guardian RSS Feed를 사용하기 위한 API KEY (링크 참조)
JWT_REFRESH_SECRET JWT Refresh Secret
JWT_SECRET JWT Secret
MYSQL_ADMIN_PASSWORD MySQL 관리자 비밀번호
MYSQL_ADMIN_USERNAME MySQL 관리자 사용자명
MYSQL_EMBEDDING_CALCULATOR_PASSWORD MySQL 임베딩 벡터 계산기 사용자명
MYSQL_EMBEDDING_CALCULATOR_USERNAME MySQL 임베딩 벡터 계산기 비밀번호
MYSQL_FETCHER_PASSWORD MySQL 뉴스 Fetcher 사용자명
MYSQL_FETCHER_USERNAME MySQL 뉴스 Fetcher 비밀번호
MYSQL_HOST MySQL 호스트
MYSQL_PORT MySQL 포트
MYSQL_SERVER_PASSWORD MySQL Node.js 서버 비밀번호
MYSQL_SERVER_USERNAME MySQL Node.js 서버 사용자명
MYSQL_SUMMARIZER_PASSWORD MySQL Summarizer 비밀번호
MYSQL_SUMMARIZER_USERNAME MySQL Summarizer 사용자명
NEWSAPI_API_KEY NewsAPI 서비스의 API KEY (링크 참조)

Secret 설정이 완료되었다면, 아래의 명령어를 실행하여 리소스를 생성합니다.

cd somesup-cloud/terraform

terraform init

terraform plan -out=plan.plan

terraform apply plan.plan
  • 백엔드 서버 실행

먼저 서버에 필요한 패키지를 다운로드 하고 실행하기 위해서는 pnpm이 전역으로 설치되어 있어야 합니다.

npm install -g pnpm

pnpm 설치가 완료되었다면, 아래의 명령어를 통해 서버를 실행합니다.

cd somesup-cloud/backend

pnpm install

pnpm init_db

pnpm dev
  • 프론트 앱 실행

서버와 마찬가지로 pnpm이 전역적으로 설치되어 있어야 합니다.

아래의 명령어를 통해 앱을 실행합니다.

cd somesup-front

echo NEXT_PUBLIC_API_URL=~~~ >> .env
pnpm install

pnpm dev

5. 소개 및 시연 영상

https://youtu.be/8qdakPnbD6k


6. 팀 소개

이름 박준우 이다은 양준석 송수민
전공 전기컴퓨터공학부
정보컴퓨터공학전공
정보의생명공학대학
정보컴퓨터공학부
정보의생명공학대학
정보컴퓨터공학부
디자인학과
시각디자인전공
이메일 boksam1017@gmail.com ddang@pusan.ac.kr earth4613@pusan.ac.kr sumin6757@naver.com
주요 경험
및 역량
  • 클라우드 엔지니어 인턴 경험 1년
  • Terraform을 사용한 Cloud Native 서버 개발 다수
  • GCP, AWS 등 다양한 CSP 사용 경험
  • Next.JS를 사용한 웹페이지 제작 다수
  • 부산대학교 "SW역량지원시스템" 웹 페이지 개발
  • 프론트엔드 포지션으로 대회&해커톤 입상 경험 다수
  • DIVE 등 다수 해커톤 참여 경험
  • 개발 동아리 임원 활동
  • Figma를 사용한 UI/UX 제작 다수
  • 부산대학교 제3회 창의융합SW해커톤 (우수상)
깃허브 - https://github.com/llddang https://github.com/junseok42 -

7. 해커톤 참여 후기

이름 후기
박준우 보통 1박 2일로 숨 가쁘게 진행되는 해커톤과 달리, 제가 참여한 해커톤은 2달이라는 긴 시간 동안 진행되었습니다. 이 충분한 시간 덕분에 '일단 만들자'는 식의 접근에서 벗어나, 아이디어의 본질에 대해 깊이 고민하며 서비스의 완성도를 높일 수 있었습니다. 단순한 프로토타입을 넘어, 사용자의 입장에서 충분히 생각하고 다듬은 결과물을 만들 수 있었던 점이 가장 큰 수확이었습니다. 이 과정에서 디자이너, 프론트엔드 개발자 등 다양한 분야의 팀원들과 함께한 경험은 무엇보다 소중했습니다. 서로 다른 관점을 조율하고 적극적으로 소통하며 하나의 목표를 향해 나아가는 진정한 협업의 가치를 배울 수 있는 좋은 기회였습니다. 무엇보다 머릿속에만 있던 아이디어가 눈앞에서 실제 서비스로 구현되고, 이를 사용자와 직접 테스트해보는 순간은 정말 잊을 수 없습니다. 우리의 생각을 넘어 실제 사용자의 목소리를 들으며 프로젝트를 완성해나간 경험은 이번 해커톤을 단순한 대회가 아닌, 하나의 프로덕트를 완성한 값진 여정으로 만들어 주었습니다.
이다은 이번 해커톤에서는 사용자를 대상으로 한 서비스를 개발하며, 사용자의 피드백을 받아 반영하고 수정해보는 귀중한 경험을 할 수 있었습니다. 개발자의 시각에서만 바라보았던 기능들이 실제 사용자에게는 어떻게 받아들여지는지 직접 확인할 수 있었고, 이를 통해 사용자 중심적 사고의 중요성을 깊이 깨달았습니다. 또한 이전에는 주로 웹 개발에 집중해왔다면, 이번에는 React Native라는 프레임워크를 활용하여 iOS와 Android 플랫폼을 모두 다루는 경험을 했습니다. 하나의 코드베이스로 여러 플랫폼에 배포할 수 있는 크로스 플랫폼 개발의 매력을 느꼈고, 모바일 앱 개발의 독특한 제약사항과 가능성들을 탐구할 수 있어 개발자로서의 시야를 한층 넓힐 수 있었습니다. 특히 실시간으로 사용자 피드백을 받고 즉석에서 개선사항을 적용하는 과정에서, 빠른 프로토타이핑과 반복적인 개발 사이클의 가치를 체감했습니다. 이론으로만 알고 있던 애자일 개발 방법론을 실제로 경험해보며, 사용자와의 소통이 얼마나 제품의 완성도를 높이는 데 기여하는지 알 수 있었습니다.
양준석 이번 해커톤을 통해 처음으로 실사용자를 대상으로 한 서비스 개발을 경험하며, 사용자 중심 사고의 중요성을 깊이 배우게 되었습니다. 지금까지는 프로젝트를 '완성'하는 것에 초점을 맞추어 개발을 진행해 왔다면, 이번 경험에서는 실제 사용자의 관점에서 어떻게 하면 서비스 경험을 뛰어나게 만들 수 있을지 고민하는 과정을 배웠습니다. 또한 프론트엔드 역할을 토이 프로젝트를 제외하고는 처음 맡아, 다양한 프론트엔드 개념과 기술을 접할 수 있었고, 이를 통해 추후 백엔드 개발자로 프로젝트를 진행할 때 프론트엔드 직군 개발자와 원활하게 소통할 수 있는 기반을 마련할 수 있었습니다. 이번 해커톤을 시작하기 전까지는 협업을 다소 중구난방으로 진행했지만, 경험 많은 팀원들의 체계적인 소통 방식을 직접 관찰하면서 협업 툴을 효율적으로 활용하는 방법과 체계적으로 개발을 진행하는 방식을 배울 수 있었습니다. 이러한 경험은 개발자로써의 커뮤니케이션 능력을 향상시키는 데 큰 도움이 되었습니다. 결과적으로 이번 해커톤은 단순히 개발 역량뿐만 아니라, 사용자 경험 개선, 프론트엔드와의 협업, 체계적 개발 방법 등 개발자로서 핵심적인 역량을 폭넓게 배울 수 있는 소중한 기회였습니다. 부족한 저에게 많은 것을 배울수 있게 해주신 팀원분들께 감사의 말씀을 드립니다.
송수민 이번 해커톤을 통해 단순한 아이디어 제안이 아닌 실제 사용자에게 전달되는 서비스 개발 전 과정을 경험할 수 있었다. 학생 대상 설문조사와 오프라인 행사에서 직접 사용자에게 서비스를 보여주고 피드백을 받는 과정을 통해, 단순히 좋은 아이디어가 아닌 실제로 필요한 서비스가 무엇인지 고민하게 되었다. 짧은 시간이었지만 팀원들과 함께 몰입해서 문제를 해결해 나가며 사용자의 니즈를 기반으로 서비스를 만들어가는 방법을 실제로 체득할 수 있었다. 특히 다양한 직군과 소통하며 빠르게 아이디어를 반영하는 과정 속에서, 디자이너로서 의견을 논리적으로 전달하고 조율하는 역량이 한층 성장했다고 느낀다. 이번 경험을 통해 사용자 중심으로 생각하는 시야가 확실히 넓어졌다.

About

2025-pnu-sw-hackathon-2025-pnu-sw-SW-Hackathon-2025 created by GitHub Classroom

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors