간단 소개Cosmos는 NASA와 전 세계 우주 커뮤니티로부터 제공되는 최신 이미지, 뉴스, 천문 이벤트를 누구나 쉽고 재미있게 접할 수 있도록 기획된 우주 정보 커뮤니티 플랫폼입니다. 단순한 정보 제공을 넘어, 사용자들이 직접 촬영한 천체 사진 공유, 영화 리뷰, 자유로운 토론 등 커뮤니티 기능을 통해 소통할 수 있습니다. 또한 퍼즐과 퀴즈 같은 게임 콘텐츠를 결합하여 우주를 친근하게 즐기고 자연스럽게 지식을 확장할 수 있는 경험을 제공합니다.
작업 기간2025.05. - 2025.06.
프로젝트 유형팀 프로젝트 (FrontEnd 5명)
기술 스택
구현한 기능
Supabase 핵심 기능 구현
- • 데이터베이스 설계 및 ERD 구조화
사용자, 게시글, 댓글, 좋아요 등 핵심 테이블을 정규화하고 관계형 모델로 구조화하여 데이터 중복을 최소화하고 조회 성능을 개선
- • 실시간 댓글 동기화 (Realtime)
Supabase Realtime을 활용해 댓글 작성/삭제가 즉시 반영되도록 구현하여, 새로고침 없이도 사용자 간 상호작용이 원활해짐으로써 커뮤니티 UX 개선
- • 이미지 관리 (Storage)
아바타 이미지 업로드·URL 저장·리셋 기능을 제공하여 개인화 경험을 강화하고 프로필 관리 편의성 향상
- • 데이터베이스 설계 및 ERD 구조화
퍼즐 게임 및 랭킹 기능 구현 (우주 이미지 활용)
- • 퍼즐 난이도 및 시간 제한 설계
react-jigsaw-puzzle 라이브러리를 활용하고, 주제(Category)와 난이도(Difficulty)에 따라 퍼즐 조각 수와 제한 시간을 차등 설정하여 다양한 난이도 경험 제공
- • 효율적인 게임 상태 관리
Zustand를 이용해 게임 상태(퍼즐 조각, 타이머, 점수 등)를 전역으로 관리하여 렌더링 지연 없는 부드러운 상호작용 구현
- • 점수 계산 및 랭킹 보드 구현
퍼즐 완료 시간과 난이도 기반으로 점수를 계산하고 Supabase에 기록하여 누적 점수를 관리 또한 실시간 점수 반영 및 랭킹 조회 기능으로 사용자 간 경쟁 유도 및 재플레이 장려
- • 퍼즐 난이도 및 시간 제한 설계
한글 번역 시스템 구축 (영어 기반 우주 콘텐츠)
- • AI 기반 번역 및 요약 기능 구현
영어로 제공되는 우주 콘텐츠를 GPT와 Gemini를 활용해 자연스럽게 한글로 번역하고 핵심 요약하여 사용자가 즉시 이해 가능, 접근성 향상 및 UX 개선
- • BLEU/BERTScore 성능 평가로 최적 번역 방식 선택
번역 정확성과 자연스러움을 평가해 GPT와 Gemini 모델을 콘텐츠 특성에 맞게 사용함으로써 신뢰도 높은 번역 제공과 사용자 만족도 증가
- • Supabase 기반 캐싱 전략 적용
이미 번역된 콘텐츠는 DB에서 즉시 불러와 API 호출 없이 빠르게 표시하여 속도와 비용 최적화, 페이지 로딩 시간 단축과 서버 비용 절감
- • AI 기반 번역 및 요약 기능 구현
디자인 시스템 및 UI/UX 설계 총괄
- • 컴포넌트 기반 UI 디자인 시스템 구축 및 반응형 UI/UX 전반 구조 설계
Home 랜딩 페이지 & Contact 페이지 구현
- • GSAP ScrollTrigger을 활용해 스크롤에 따라 인터랙션이 변화하는 랜딩 페이지를 구성하여 몰입감 있는 사용자 경험을 제공
- • 다크/라이트 테마에 따라 react-globe.gl, three.js 기반의 지구(라이트) 또는 달(다크) 3D 모델이 표시되며, 마우스 움직임에 따라 회전/확대
- • MutationObserver로 테마 변경 실시간 감지 및 적용