04 / DevCourse FE Project

업다운

일상의 감정을 시장 지수처럼 기록·시각화하고, 공감 기반 커뮤니티에서 함께 나누는 감정 기록 서비스

업다운 Main Interface
Detail 1
Detail 2

프로젝트 소개

업다운 감정시장은 흩어지고 사라지는 일상의 감정을 한 화면에 모아 보여주는 감정 기록 커뮤니티 서비스입니다. 사용자가 하루의 기분을 간단히 기록하면, 이를 차트와 지수로 시각화해 오늘과 최근의 감정 흐름을 한눈에 파악할 수 있도록 설계했습니다.

프로젝트 리더이자 디자인 총괄로 참여해 전체 컨셉과 UI 톤을 정립하고, 커뮤니티·게시글 상세·감정 그래프 등 핵심 화면의 기능 구현을 주도했습니다. 게시글, 댓글, 좋아요 같은 커뮤니티 핵심 기능을 안정적으로 구현하면서도, 감정이라는 추상적인 주제를 사용자가 가볍고 자연스럽게 기록할 수 있도록 흐름과 인터랙션을 세심하게 다듬었습니다.

무한스크롤, 실시간 감정 집계, 태그 클라우드 기반 시각화, 반응형 및 다크모드 대응, 공통 컴포넌트 설계를 통해 서비스의 전반적인 완성도를 높였습니다. 짧은 기간 안에 팀의 개발 생산성과 사용자 경험을 함께 끌어올리며, 프론트엔드 4팀 중 1등을 차지한 프로젝트입니다.

프로젝트 기간

2025.11 - 2025.11

주요 역할

  • 프로젝트 리더 / 디자인 총괄
  • 커뮤니티·게시글 상세·마이페이지 등 핵심 화면 설계 및 구현
  • 무한스크롤 피드, 감정 지수·트렌드 시각화, 다크모드·반응형 UI 구현
  • 공통 컴포넌트 설계 및 Loading/Empty/Error 상태 UI 구현

사용 기술

Next.jsTypeScriptTailwind CSSSupabaseZustand
Video Thumbnail
재생

시연 영상

프로젝트의 주요 기능과 인터랙션을 영상으로 확인해보세요.

Challenge & Solution

감정 트렌드 시각화 로직 설계

문제 정의

감정 데이터는 단순한 숫자나 텍스트 목록만으로는 커뮤니티의 분위기와 흐름을 빠르게 이해하기 어려웠습니다. 특히 '지금 어떤 감정이 많이 공유되는지', '어제 대비 감정 변화는 어떤지'를 직관적으로 전달할 방법이 필요했습니다.

해결 방안

오늘과 어제의 해시태그 데이터를 날짜 범위 기준으로 각각 조회한 뒤, 태그별 랭킹과 증감률을 계산해 시각화용 데이터로 가공했습니다. 이를 통해 실시간 TOP 3 감정과 트렌드 태그를 한눈에 보여줄 수 있었고, 사용자는 커뮤니티 분위기와 감정 흐름 변화를 더 직관적으로 파악할 수 있었습니다.

Code Snippet