기여 역할

1. 메인 페이지 및 분석 리포트 로직 UI 구현 및 서버 API 연동
2. Chart.js를 활용한 유튜브 영상 데이터 대시보드 시각화
3. 공통 UI 컴포넌트(Button, Input, Modal 등) 모듈화 및 디자인 시스템 적용
4. 모바일 & 태블릿 & PC 기준 반응형 레이아웃 구현
5. Github Actions, Vercel을 이용한 자동 배포 파이프라인 구축
6. 구글 검색 등록 및 SEO 최적화

배운 점

• 시각화 대시보드 내의 다양한 사용자 인터랙션을 구현하며, 복잡한 데이터 흐름을 제어하고 예측 가능한 UI를 만들기 위한 상태 관리 패턴의 중요성을 깊이 이해했습니다.
• 프론트엔드 리드로서 명확한 업무 분배와 건강한 코드 리뷰 문화를 주도하는 방법을 배울 수 있었습니다. 팀원들의 적극적인 기술 논의를 이끌어내고, 개인의 성장이 프로젝트의 완성도로 이어지는 ‘동반 성장’의 가치를 실현했습니다.

프로젝트 개요

복잡하게 얽혀 있는 국제 정세와 투자 관련 뉴스를 사용자가 쉽고 빠르게 파악할 수 있도록 돕는 시각화 서비스입니다. AI가 분석한 뉴스 데이터 간의 연관성을 가중치 및 감성 점수 기반의 그래프 인터페이스로 구현하여 직관적인 정보 탐색 경험을 제공합니다. 사용자는 노드와 엣지로 연결된 시각화 화면을 통해 뉴스 간의 유기적인 관계를 파악하고, 투자 결정에 필요한 핵심 인사이트를 효율적으로 도출할 수 있습니다.

주요 기능

• Force-Directed Graph 시각화: 뉴스 키워드(Node)와 연관 관계(Link)를 물리 엔진 기반의 그래프로 표현
• 인터랙티브 조작: D3 Zoom/Pan 및 Drag & Drop 지원으로 자유로운 탐색 가능
• 동적 스타일링: 데이터 가중치(weight)와 감성 분석 결과(sentiment)에 따른 노드 크기 및 링크 색상/두께 변화
• 반응형 렌더링: 투자 모드/일반 모드 전환 및 링크 선택 시 즉각적인 하이라이팅 처리

데모 영상

기여 역할

• Next.js 기반의 반응형 웹 프론트엔드 개발 및 UI/UX 디자인 총괄
• Notion API를 활용한 Headless CMS 구조 설계 및 연동 (유지보수 비용 최소화)
• 학회원 전용 과제 제출 및 퀴즈 풀이 페이지 구현 (REST API 연동)

배운 점

• 단순히 기능을 구현하는 것을 넘어, ‘누가 이 서비스를 관리하는가(운영진)‘와 ‘누가 보는가(외부 인원, 학회원)‘를 깊이 고민했습니다. 운영진을 위한 Notion 연동과 모바일 사용자를 위한 반응형 UI 최적화를 수행하며 실사용자(사용자, 개발자) 경험을 모두 챙기는 시각을 길렀습니다.