← 포트폴리오 목록
캐릭터 팬 커뮤니티 플랫폼
캐릭터·일러스트 작가와 팬을 연결하는 콘텐츠 플랫폼 소셜 커뮤니티 모바일 앱 MVP를 React Native와 Node.js 기반으로 구현합니다.
좋아요 기반 랭킹 집계 로직 구현주간/월간 집계 쿼리를 분리 설계해 캐릭터·작가 랭킹을 실시간에 가깝게 갱신하는 구조를 구축합니다
작가/팬 역할 기반 인증 구조 설계JWT 기반 역할 분기 인증으로 작가·팬 전용 화면과 API 접근을 분리하는 미들웨어를 구현합니다
이미지 업로드 파이프라인 구축S3 프리사인드 URL과 클라이언트 압축을 조합해 캐릭터 일러스트 업로드 흐름을 설계합니다
Overview
프로젝트 개요
캐릭터·일러스트 작가와 팬을 연결하는 콘텐츠 플랫폼 소셜 커뮤니티 모바일 앱 MVP를 React Native와 Node.js 기반으로 구현합니다. 작가 홍보와 팬 발견을 돕는 소셜 상호작용 중심 기능을 중심으로, 좋아요 기반 인기 랭킹과 굿즈화 투표까지 포함한 핵심 기능을 직접 구현한 프로젝트입니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
좋아요 수 급증 구간에서 랭킹 순위가 과도하게 흔들리지 않
집계 주기와 캐싱 전략을 설계할 필요가 있습니다
작가별 콘텐츠 업로드량 편차가 큰 상황에서 신규 콘텐츠 노출이 특정 작가에게 쏠리지 않
노출 로직을 설계할 필요가 있습니다
다수의 캐릭터 이미지 업로드 시 원본 화질과 로딩 속도를 함께 고려한 이미지 처리 파이프라인 설계가 필요합니다
작가/팬 역할별로 접근 가능한 화면과 API 범위가 달라 역할 기반 라우팅 설계에 주의가 필요합니다
구현 내용
핵심 기능 상세
핵심 기능 1
홈 피드
팬이 팔로우한 작가와 인기 캐릭터의 신작을 한 화면에서 시간순으로 발견합니다. 중앙 피드 컬럼에 작가별 신규 게시물을 시간순으로 노출하고, 상단 sticky 필터로 신규순/인기순 탭을 전환합니다
핵심 기능 2
작가 프로필
작가가 캐릭터 세계관과 프로필을 소개해 팬에게 자신의 작품을 홍보합니다. 작가별 상세 페이지에 세계관 소개, 대표 캐릭터 갤러리, 팔로우 버튼을 구성합니다
핵심 기능 3
인기 랭킹
좋아요 수를 기반으로 주간/월간 인기 캐릭터와 작가를 랭킹으로 보여줍니다. 주간/월간 탭 전환이 가능한 랭킹 리스트를 구성하고 순위 변동을 시각적으로 표시합니다
핵심 기능 4
굿즈화 투표
팬이 굿즈로 제작되길 원하는 캐릭터·일러스트에 투표하고 투표 랭킹을 확인합니다. 콘텐츠 상세 화면에 투표 버튼을 배치하고, 별도 굿즈화 희망 랭킹 페이지에서 누적 투표 순위를 제공합니다
구현 과정
프로젝트 진행 단계
STEP 1
작가/팬 데이터 모델 및 ERD 설계
회원 역할 분리, 캐릭터·작품·좋아요·투표 테이블 12개 정의 및 PostgreSQL 관계 매핑
STEP 2
콘텐츠 업로드 및 피드 API 개발
Express 기반 이미지 업로드(S3), 피드 타임라인, 좋아요 API 26개 엔드포인트 구현
STEP 3
작가/팬 프론트엔드 UI 개발
React Native 기반 프로필·피드·랭킹·투표 화면 14개 구현, 반응형 모바일 레이아웃 적용
STEP 4
랭킹 집계 및 통합 테스트
좋아요 기반 주간/월간 랭킹 집계 로직 구현, API-프론트엔드 통합 테스트 40개 케이스 작성
프로젝트 성과
주요 성과
좋아요 기반 랭킹 집계 로직 구현주간/월간 집계 쿼리를 분리 설계해 캐릭터·작가 랭킹을 실시간에 가깝게 갱신하는 구조를 구축합니다
작가/팬 역할 기반 인증 구조 설계JWT 기반 역할 분기 인증으로 작가·팬 전용 화면과 API 접근을 분리하는 미들웨어를 구현합니다
이미지 업로드 파이프라인 구축S3 프리사인드 URL과 클라이언트 압축을 조합해 캐릭터 일러스트 업로드 흐름을 설계합니다
Review
기술적 주안점
- 작가별/캐릭터별 필터가 결합된 피드 쿼리를 단일 API로 통합해 클라이언트 요청 수를 최소화하는 구조를 설계합니다
- 작가별 세계관 소개와 캐릭터 갤러리를 하나의 프로필 레이아웃으로 통합해 팬이 작가 브랜드를 한눈에 파악할 수 있도록 설계합니다
- 좋아요 집계 기준을 주간/월간으로 분리한 랭킹 엔진을 설계해 콘텐츠 발견 동기를 지속적으로 유지하는 구조를 구현합니다
