Projects
진행 중
Deallo
KZONE · Deallo.ai
2025.02 ~ 진행 중
개요
- 반품·악성재고를 글로벌 바이어와 연결하는 B2B 역물류 거래 플랫폼의 프론트엔드.
- CRM·재고·자동화·이메일·WhatsApp 등 복합 도메인을 다루며, 입사 직후 제안한 구조(FSD·Claude Code 표준)부터 인증(BFF)·API 자동화(Orval)·CI·배포 파이프라인까지 개발 기반 전반을 문서 합의로 정립.
기술 스택
프레임워크Next.js (App Router)React 19TypeScript
상태/데이터TanStack QueryZustandOrvalMSW
스타일/인증Tailwind CSSshadcn/uiNextAuth → BFF
역할
- 리드 자동화(Lead Gen·자동화 이메일) — PRD 구체화·PO/PD/BE 협의부터 구현·QA·릴리스까지 풀사이클 담당
- WhatsApp 채팅 통합 — 실시간 소켓, 검색 점프(양방향 무한스크롤), 메시지 재전송·삭제, 미디어 뷰어·OG 프리뷰
- 이메일 클라이언트 — Tiptap 작성 에디터(서명·템플릿 변수칩)·스레드/첨부·필터 URL 영속화
- Ask Deallo(AI 어시스턴트)·인보이스 PDF·바이어 CRM 등 신규 기능 구현
- 입사 첫 업무(Settings)에서 구조 부재를 발견 — FSD·Claude Code 팀 표준을 제안 문서로 합의받아 도입 (린트로 강제)
- Orval 타입 자동 생성 마이그레이션 + 런타임 테스트·GitHub Actions CI 도입·병렬화
- NextAuth → BFF 인증 전환 (accessToken 클라이언트 비노출)
- 릴리스·배포 파이프라인 자동화 + 프로덕션 P0 대응 (번역 크래시·세션 루프·self-fetch)
기술적 도전 및 해결
- Chrome 번역이 React 앱 전체를 죽이는 크래시 → DOM API 경계 가드로 부류 전체 차단
- HTTPS 세션 만료 무한 리다이렉트(P0) → RFC __Secure- 쿠키 삭제 규칙으로 해결
- 토큰이 클라이언트에 노출되던 구조 → BFF 토큰 변환기로 전환
- 다운로드 프록시가 CDN을 무력화 → 백엔드와 합의해 CloudFront Function + DTO 전환
- 채팅 검색 점프 → 단방향 페이징을 양방향 cursor 규약으로 백엔드와 재설계 + gap bridging
- 수동 릴리스 9단계의 휴먼 에러 → GitHub Actions 체인 자동화 (검증 사투 포함 20일)
- 3주 미제 상용 OOM(2.5일 주기 사망) → SSE 좀비 연결 누수를 규명·재현하고 한 줄 픽스로 종결
성과 / 배운 점
- 릴리스 9단계(12~17분) → 2단계(~30초) 자동화 — 연 16시간+ 절감, 휴먼 에러 0
- CI 3m 7s → 1m 39s (47%↓) 병렬화
- 다운로드 대역폭 50% 절감 + 채팅 미디어 용량 80~90%↓ (썸네일 스펙을 백엔드에 제안)
- 번역 사용자 전원이 앱을 못 쓰던 크래시·세션 P0 제거
- Swagger 타입 자동화로 수동 타입 관리 제거 — 스펙 변경이 타입으로 자동 반영
- 팀 온보딩 ~3일 → 0.5일 (Claude Code 팀 표준·CLAUDE.md)
완료
커넥트립
카카오테크 부트캠프 · 파이널 프로젝트
2024.08 - 2024.10
개요
- 실시간 채팅과 동행 간 위치공유가 가능한 통합형 국내 여행 동행 커뮤니티.
- FE를 단독으로 맡아 디자인·구현·성능 최적화·배포까지 진행.
기술 스택
프레임워크Next.js 14 (App Router)ReactTypeScript
실시간WebSocketSockJS
인프라AWS S3CloudFrontSharp
역할
- 동행 모집 / 커뮤니티 기능 개발
- 웹소켓·SockJS 실시간 채팅 + 지도 내 위치 확인·공유 구현
- 채팅 링크 썸네일(OG 스크래핑) 기능 구현
- 실시간 검색에 디바운스, 채팅방 무한스크롤에 스로틀링 적용
기술적 도전 및 해결
- 이미지 초기 렌더링 최대 8.21초 → Sharp + PNG→WebP + S3/CloudFront CDN 캐싱으로 78ms
- 채팅 링크 OG 중복 스크래핑·FOUC → 클라이언트(sessionStorage)+서버(메모리) 이중 캐싱 + 스켈레톤
- 실시간 검색/스크롤 서버 부하 → 디바운스·스로틀링
성과 / 배운 점
- 이미지 초기 렌더링 99.05% 개선 (8.21s → 78ms)
- 썸네일 로딩 59.5% 단축 (4s → 1.62s), 동일 URL 요청 50회 → 1회
- 🏆 카카오테크 부트캠프 파이널 프로젝트 1등
- 🔗 디스콰이엇 9월 주간 1등 — 금주의 프로덕트 선정
완료
플필 백오피스 대시보드
(주)플필
2022.12 - 2023.10 (6개월)
개요
- 대한민국 1위 캐스팅 플랫폼의 관리자 페이지 리팩토링과 비즈니스 대시보드 개발을 단독으로 담당.
- 매출·유저·이벤트 연관성을 한눈에 보는 대시보드로 의사결정을 지원.
기술 스택
프레임워크React
스타일styled-componentsAtomic Design
시각화Chart
역할
- Inline-CSS·중복 코드를 styled-components + Atomic 디자인 패턴으로 리팩토링
- 매출·구독자 증감 등 비즈니스 지표 시각화 차트 구현
- 디자인·프론트엔드 담당, 팀 피드백 기반 지속 업데이트
기술적 도전 및 해결
- 일관성 없는 관리자 UI·낮은 유지보수성 → styled-components + Atomic 디자인으로 구조화
성과 / 배운 점
- 플필 플러스 구독자 137.5% 증가 (80 → 190명, 3개월)
- 리텐션율 76% 유지
- 관리자 페이지 개편 후 만족도 45.4% 상승 (사내 설문)
완료
플필 글로벌 랜딩 페이지
(주)플필
2023.10 - 2023.11 (4주)
개요
- 국내 전용 캐스팅 플랫폼의 글로벌화를 위해 해외 캐스팅 업체 대상 랜딩 페이지를 단독 개발.
- 디자이너와 협업하여 반응형·인터랙티브 요소를 구현.
기술 스택
프레임워크React
스타일반응형애니메이션
역할
- PC·태블릿·모바일 각 화면에 최적화된 반응형 뷰 제공
- 무한 슬라이딩·스크롤 위치 기반 애니메이션 등 인터랙션 구현
- 디자이너 협업
기술적 도전 및 해결
- 화면별 최적 뷰 + 인터랙션 요구 → 반응형 설계 + 스크롤 애니메이션
성과 / 배운 점
- 대한민국 1위 캐스팅 플랫폼 달성에 기여
- 200여 국내외 캐스팅 업체·2만 배우 데이터 확보
완료
Rendi
졸업 프로젝트
2023.03 - 2023.10 (8개월)
개요
- 기존 키워드 검색의 한계를 넘어 '느낌·뉘앙스'를 문장으로 검색하는 GPT 기반 패션 쇼핑 플랫폼 프로토타입.
- GPT-4·OpenCV로 옷 속성을 키워드화하고, 임베딩 semantic search로 코사인 유사도가 높은 상품을 추천.
기술 스택
프레임워크React
디자인Figma반응형애니메이션
AIGPT-4OpenCVEmbedding
역할
- 웹사이트 전체 레이아웃·반응형·애니메이션 구현
- 세부 기획 및 Figma 디자인 구현
기술적 도전 및 해결
- 키워드 검색의 한계 → 자연어 문장(뉘앙스) 검색 UX 설계
성과 / 배운 점
- 🏆 한국멀티미디어학회 추계 학부생 논문 경진대회 우수상