Projects

개요

• 반품·악성재고를 글로벌 바이어와 연결하는 B2B 역물류 거래 플랫폼의 프론트엔드.
• CRM·재고·자동화·이메일·WhatsApp 등 복합 도메인을 다루며, 입사 직후 제안한 구조(FSD·Claude Code 표준)부터 인증(BFF)·API 자동화(Orval)·CI·배포 파이프라인까지 개발 기반 전반을 문서 합의로 정립.

기술 스택

담당 업무

• 리드 자동화(Lead Gen·자동화 이메일) - PRD 구체화·PO/PD/BE 협의부터 구현·QA·릴리스까지 풀사이클 담당
• WhatsApp 채팅 통합 - 실시간 소켓, 검색 점프(양방향 무한스크롤), 메시지 재전송·삭제, 미디어 뷰어·OG 프리뷰
• AI 인보이스 PDF 자동 등록 - 확률로만 답하는 AI를 휴먼 인 더 루프 UX로 설계, Ask Deallo(AI 어시스턴트)·바이어 CRM 등 신규 기능 구현
• 5,000행 바이어 목록 가상화 - MSW+Playwright 측정 하네스로 before/after 검증
• 입사 첫 업무에서 FSD·Claude Code 표준 제안·도입 - 구조 부재를 발견해 제안 문서로 합의받아 (린트로 강제)
• '명세 먼저' 협업 + Orval 타입·MSW 목 자동 생성 마이그레이션 + 런타임 테스트·GitHub Actions CI 도입·병렬화
• AI 개발 사이클 설계 - PRD·디자인 AI 교차 검토, 테스트 케이스 자동 생성, AI 코드리뷰
• NextAuth → BFF 인증 전환 (accessToken 클라이언트 비노출)
• 릴리스·배포 파이프라인 자동화 - 배포마다 AI가 변경 내역을 정리한 릴리스 노트 슬랙 발행까지 + 프로덕션 전면 장애 대응 (번역 크래시·세션 루프·self-fetch)

기술적 도전 및 해결

• Chrome 번역이 React 앱 전체를 죽이는 크래시 → DOM API 경계 가드로 부류 전체 차단
• HTTPS 세션 만료 시 무한 리다이렉트 → RFC __Secure- 쿠키 삭제 규칙으로 해결
• 토큰이 클라이언트에 노출되던 구조 → BFF 토큰 변환기로 전환
• 채팅 검색 점프 → 단방향 페이징을 양방향 cursor 규약으로 백엔드와 재설계 + gap bridging
• 수동 릴리스 9단계의 휴먼 에러 → GitHub Actions 체인 자동화
• 3주 미제 상용 OOM(2.5일 주기 사망) → SSE 좀비 연결 누수를 규명·재현하고 한 줄 픽스로 종결
• 5,000행 렌더에 클릭이 15초씩 밀리던 목록 → 가상 스크롤 전환 + 조건 고정 하네스로 검증

성과 / 배운 점

• 바이어 목록 첫 행 표시 7.2s → 1.1s·전체선택 INP 1.2s → 82ms (5,000행 가상화, DOM -96%)
• 릴리스 9단계(12~17분) → 2단계(~30초) 자동화 - 연 16시간+ 절감, 휴먼 에러 0
• 다운로드 대역폭 50% 절감 + 채팅 미디어 용량 80~90%↓ (썸네일 스펙을 백엔드에 제안)
• 번역 사용자 전원이 앱을 못 쓰던 전면 장애 2건(크래시·세션 루프) 제거
• Orval(타입 자동 생성)+MSW(목 API)로 BE 대기 없는 병렬 개발 - 스펙 변경 자동 반영·수동 타입 관리 제거

개요

• 병동 의료진-환자 커뮤니케이션을 돕는 NAVER CLOVA 기반 AI 플랫폼 프로토타입. 실시간 응대 매뉴얼 챗봇이 AI 생성 답변을 전달하고, AI 판단 결과에 따라 클라이언트를 socket으로 연결.
• LAB 특성상 빠른 기획 변경을 반영하며 프로토타입부터 실제 병원 도입까지. 강원대학교병원 계약 체결·도입 완료.

기술 스택

담당 업무

• 디자인 시스템 기반 UI 컴포넌트 개발 (Shadcn/ui·NextUI 커스텀)
• 병상 단위 계정 + 입·퇴원 흐름 제안·도입 - 환자마다 회원가입하는 대신 계정은 병상에 두고, 퇴원 시 새 환자가 이름·동의만 입력하면 같은 계정을 이어 쓰는 구조를 제안해 FE/BE 개선 - 입원 절차 4스텝→2스텝, 영업일 10일 만에 현장 도입
• 잦은 기획 변경에 기획·디자인까지 적극 기여 - A/B로 선택지를 둘 이상 구현해 최적안을 빠르게 도출
• 인증/인가 로직 리팩토링 및 App Router 캐싱 문제 해결
• 소켓 무중단 배포 대응 - 자동·수동 이중 재연결 전략으로 연결 안정성 확대
• TanStack Query 캐싱 구조 개선 및 불필요한 API 호출 최적화
• Husky pre-commit hook으로 Lint/Prettier 미준수 커밋 차단

기술적 도전 및 해결

• JWT를 클라이언트가 직접 다뤄 보안·중복 refresh 문제 → HttpOnly 쿠키 위임 + 첫 401만 Promise + fetch 기반 RBAC
• 로그인 후 router.replace()가 미들웨어를 건너뛰어 접근 차단 유지 → window.location.href로 캐시 우회
• 서버 교체·네트워크 불안정 → Socket.io 자동+수동 이중 재연결로 안정성 확보

성과 / 배운 점

• 강원대학교병원 계약 체결 - 실제 병원에 도입 완료
• 입원 절차 4스텝 → 2스텝 - 영업일 10일 만에 현장 도입
• 동시 만료 요청이 제각각 치던 `/refresh`를 N회 → 1회로 단일화(single-flight) - 중복 로그아웃 제거
• 환자·간호사·관리자 접근 제어를 미들웨어 1곳으로 일원화 + 중복 로그인 시 페이지 전면 500 크래시 제거
• TanStack Query staleTime 1분 도입·`/users/me` 중복 호출 제거로 불필요한 refetch 감소
• 빠른 기획 변경에도 안정적으로 프로토타입 딜리버리

개요

• NAVER CLOVA 기반 건강검진 챗봇 프로토타입. 기존 외주 코드를 전면 개편하고 실시간 스트리밍 응답을 구현.
• 대웅제약 사내 PoC 실증 도입.

기술 스택

담당 업무

• 단일 훅 3000줄을 기능별 모듈로 분리
• 실시간 스트리밍 응답 처리 (fetch + ReadableStream) 구현
• 대화 내역 동기화를 서버 상태 기반으로 전환 (로컬 전역 상태 → 서버)
• 네이버 지도 기반 병원 검색 UX 개선

기술적 도전 및 해결

• LLM 응답 지연 → 전체 수신 후 출력 대신 chunk 단위 실시간 스트리밍
• 스트리밍 중 무한 로딩 → 마지막 'streaming' 메시지 덮어쓰기로 해결
• 지도 딥링크 fallback 중복 실행 → visibilitychange로 앱 이동 감지

성과 / 배운 점

• 대웅제약 사내 PoC 실증 도입
• 3000줄 단일 훅 → 모듈화로 유지보수성 개선
• 가짜 스트리밍(전체 수신 후 출력) → fetch+ReadableStream 실시간 스트리밍으로 첫 응답 체감 3~5초 → 1초 이내
• `status` 이벤트 중복 시 발생하던 무한 로딩 제거 - 스트리밍 메시지 단일 불변식 보장

개요

• 실시간 채팅과 동행 간 위치공유가 가능한 통합형 국내 여행 동행 커뮤니티.
• FE를 단독으로 맡아 디자인·구현·성능 최적화·배포까지 진행.

기술 스택

담당 업무

• 기획부터 참여·협업 주도 - BE 4명과 5번의 스프린트, 플래닝 포커 카드 도입을 제안해 작업량·속도를 함께 맞춤
• 동행 모집·커뮤니티 기능 개발
• 웹소켓·SockJS 실시간 채팅 + 지도 내 위치 확인·공유 구현
• 채팅 링크 썸네일(OG 스크래핑) 기능 구현
• 디바운스·스로틀링 적용 - 실시간 검색·채팅방 무한스크롤 서버 부하 제어
• SEO·성능 최적화 + Google Analytics 이벤트 트래커 연동·개선

기술적 도전 및 해결

• 이미지 초기 렌더링 최대 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등 - 금주의 프로덕트 선정

개요

• 기존 키워드 검색의 한계를 넘어 '느낌·뉘앙스'를 문장으로 검색하는 GPT 기반 패션 쇼핑 플랫폼 프로토타입.
• GPT-4·OpenCV로 옷 속성을 키워드화하고, 임베딩 semantic search로 코사인 유사도가 높은 상품을 추천.

기술 스택

담당 업무

• 웹사이트 전체 레이아웃·반응형·애니메이션 구현
• 세부 기획 및 Figma 디자인 구현

기술적 도전 및 해결

• 키워드 검색의 한계 → 자연어 문장(뉘앙스) 검색 UX 설계

성과 / 배운 점

• 🏆 한국멀티미디어학회 추계 학부생 논문 경진대회 우수상