프로젝트 명: PICSCORE
프로젝트 기간: 2025.02 ~ 2025.03
주제: 사진 미적평가와 액티비티요소가 들어있는 사진공유 웹앱
인원: 6인 (프론트 3인, 백엔드 2인, AI/인프라 1인)
기여도: 프론트엔드 50%
프로젝트 주관: 삼성 청년 SW/AI 아카데미
- 모바일 환경에 최적화된 이미지 공유 피드 구현 및 무한 스크롤 적용으로 사용자 콘텐츠 탐색 편의성과 체류 시간 향상
- AI 기반 사진 평가 기능을 프론트엔드에 연동하여 사용자 업로드 이미지에 대한 즉각적인 피드백 제공 및 서비스 몰입도 향상
- jwt토큰 기반 사용자 인증 흐름 구현 및 로그인 상태 전역 관리로 안정적인 사용자 세션 유지
- PWA 오프라인 모드 구현을 통해 네트워크 불안정 환경에서도 핵심 기능 사용 가능하도록 서비스 접근성 강화
- Figma를 활용한 UI 설계 및 화면 흐름 공유로 팀원 간 요구사항을 사전에 정렬하고 개발 단계에서의 커뮤니케이션 비용 감소
- 대용량 이미지 피드 렌더링 최적화 (LCP 8.6s → 1.8s 79% 개선)
- 문제: 고해상도 원본 이미지의 동시 로딩으로 인해 LCP가 8.6s까지 지연되고 모바일 스크롤 버벅임 발생
- 해결: Intersection Observer 기반의 Lazy Loading 및 무한 스크롤을 구현, 로딩 상태에 Skeleton UI를 적용하여 체감 속도 개선
- 결과: LCP 8.6s에서 1.8s로 약 79% 단축
- 서비스 안정성 확보 및 모바일 네이티브 경험 구축
- 문제: 배포 후 사용자들이 정상적으로 서비스를 사용하고 있는지 파악 x, 최소한의 재현 과정 파악이 어려움
- 해결: Sentry를 연동하여 클라이언트 에러를 실시간으로 추적함
- 결과: 사용자 환경 정보를 기반으로 버그 재현 시간을 단축하여 대응 속도를 높여 서비스 안정성에 기여
- 상태 관리 최적화 및 사용자 경험 개선
- 해결: Zustand를 활용해 사용자 인증 및 이미지 평가 데이터의 흐름을 전역 상태로 관리하여 복잡도를 낮춤
- 결과: Prop Drilling 없는 간결한 데이터 흐름을 설계해 유지보수성 향상
| 입장 | 로그인 |
|---|---|
 |
 |
| 사진 미적 분석 | 분석 결과 | 업로드 |
|---|---|---|
 |
 |
 |
| 전체 목록 | 게시글 | 친구/게시글 검색 |
|---|---|---|
 |
 |
 |
