포트폴리오
실시간 요가 자세 분석 서비스4개월
Samadhi
2025. 09. 01 - 2025. 12. 31
외부 영상(유튜브 등)과 웹캠을 실시간으로 대조하여, 별도 장비 없이도 정확한 요가 자세 피드백을 제공하는 웹 서비스
5인 팀|[팀장] 프론트엔드|
산학프로젝트 수업 A+ / IA x AI 해커톤 장려상 수상
Next.jsTypeScriptMediaPipeZustandWeb Worker
- 프로젝트 일정 관리 및 역할 조율을 포함한 팀 리딩과 대외 발표 주도
- 랜딩페이지, 운동 준비 및 진행 페이지 관련 FE 개발
- MediaPipe를 활용해 실시간 포즈 추론 및 시각화 로직 구현
- 웹캠, 화면 공유 등 입력 소스별 상태를 분리한 Zustand 상태 관리 구조 설계
- Screen Capture API를 활용한 화면 공유 기반 영상 입력 파이프라인 설계
- 실시간 추론과 렌더링 병목을 분석하고 Web Worker 분리 구조 적용
트러블슈팅
Screen Capture API로 플랫폼 무관 영상 분석 구현
문제
- MediaPipe는 video 요소의 픽셀 데이터를 프레임 단위로 추출해 분석
- iframe은 별도 origin으로 취급되어 Same-Origin Policy로 내부 픽셀 데이터 접근 차단
해결
- iframe 내부 접근 대신, 브라우저가 렌더링한 화면 자체를 소스로 사용하는 방향으로 문제 재정의
- Screen Capture API(getDisplayMedia())로 사용자가 선택한 탭을 MediaStream으로 캡처해 video.srcObject에 연결
결과
- origin 제약 없이 외부 플랫폼 영상을 그대로 MediaPipe 입력으로 활용
- 유튜브, 넷플릭스 등 플랫폼 무관하게 동일한 파이프라인으로 자세 분석 가능
Swipe to see more →
Web Worker 분리로 렌더링 60fps 안정화
문제
- 포즈 추정 1회에 20~40ms 소요로 16.67ms 프레임 예산 초과
- 렌더링과 포즈 추정이 메인 스레드에서 순차 실행되어 UI 프리징 및 프레임 드랍 발생
해결
- 렌더링(60fps)과 포즈 추정(30fps)의 목표 fps가 다르다는 점에 착안해 Web Worker 도입
- Web Worker 2개(웹캠/기준 영상 각각)에서 포즈 추정을 30fps로 처리, 메인 스레드는 렌더링 60fps만 담당
- Worker 응답 대기 중 직전 프레임 결과 캐싱으로 스켈레톤 끊김 방지
결과
- 렌더링 60fps/포즈 추정 30fps가 독립적으로 안정화되어 UI 프리징 해결
- 웹캠과 기준 영상을 동시에 분석하면서도 끊김 없는 사용자 경험 제공
Swipe to see more →
경매 기반 순환 거래 플랫폼 및 운영 백오피스10일
Nafal
2025. 08. 14 - 2025. 08. 24
팝업스토어나 전시회 후 버려지는 자원을 경매 방식으로 재거래하여 자원 선순환을 돕는 웹 기반 플랫폼 및 운영 백오피스
7인 팀(FE2, BE2, 디자인2, PM1)|프론트엔드|
블레이버스 MVP 개발 해커톤 대상 수상
Next.jsReact QueryPrisma ORM
- Next.js와 Prisma ORM 기반 경매/상품 관리 백오피스 전반 설계
- React Query를 활용한 서버 상태 관리 구조 구현 및 데이터 캐싱/동기화
- 반복되는 비즈니스 규칙을 커스텀 훅으로 분리해 재사용 가능하도록 추상화
- Zod 스키마 기반으로 시작가, 최소 입찰가, 일정 등 필드 간 의존성 검증 로직을 일관되게 구현
- 사용자 인증/마이페이지, 고객 후기 페이지 등 주요 화면 개발
트러블슈팅
Zod superRefine으로 복잡한 폼 검증 로직 구조화
문제
- 시작가/최소 입찰가/즉시 구매가, 시작일/종료일 등 여러 필드 간 의존성 검증 필요
- 필드 단위 검증으로는 다른 필드 값에 접근 불가, onChange에 분산 시 동일 로직 중복 발생
해결
- Zod superRefine으로 전체 폼 데이터를 기준으로 필드 간 관계를 하나의 흐름에서 검증
- ctx.addIssue로 에러를 특정 필드에 직접 연결해 해당 입력 요소에 즉시 표시
결과
- 분산된 검증 로직을 단일 흐름으로 통합해 조건 간 충돌 없이 일관된 검증 구현
- 에러가 해당 필드에 바로 연결되어 사용자가 수정할 지점을 즉시 파악 가능