haeran's blog

실무에서 얻어맞은 자리를 글로 되갚는 곳.

Introduce

Product Developer

기능을 만들고, 그게 정말 효과가 있었는지 데이터로 확인하는 일을 합니다. 확인해보면 기대와 다를 때가 많아서, 그 과정을 이 블로그에 기록합니다.

회사에서는 결제·정산·글로벌화를, 퇴근 후에는 친구들과 쓰는 서비스를 기획부터 운영까지 직접 만들고 있습니다.

CONNECT

Skills

JavaScript

TypeScript

React 19

Next.js

Zustand

TanStack Query

Tailwind-css

Styled-Components

Python(FastAPI)

Go(Connect-RPC)

PostgreSQL

Protocol Buffers

Vite

Capacitor

Electron.js

CSS-modules

Work Experience

벙커키즈 주식회사

Product Developer (2025. 07 ~ 현재)
React 19, TypeScript, Vite, Zustand, TanStack Query, Capacitor, Python(FastAPI), Go(Connect-RPC), Protocol Buffers, PostgreSQL

AI 캐릭터 채팅 서비스 Whif에서 Frontend(React 19)를 중심으로 Backend(FastAPI)·Gateway(Go BFF)를 넘나드는 풀스택 개발자로 근무하며, 결제·정산·글로벌화 등 서비스 핵심 도메인을 설계·구현하고 있습니다.

  • 신규 유저 대상 첫결제 유도 배너 배포 후 전환 데이터를 추적해 5주간 미노출되던 버그를 발견·수정
    결제 전환율 0.81% → 8.03%(약 10배), 주문 8.8배 증가 (동일 규모 16만 명 코호트 비교)
  • 비로그인 체험 대화 → 가입 → 결제로 이어지는 전환 퍼널을 이벤트 추적 체계와 함께 설계
    가입 전환 유저의 30.8%가 결제로 이어지는 구조 확인(서비스 평균 대비 약 1.6배)
  • 커플룸/정실 등록 리텐션 기능 출시 후 데이터로 효과 검증
    활동 유저 비율 +10.4%p, 1인당 활동일수 약 2배 증가
  • 위프(재화) 차감 로직을 선차감 → 후차감 방식으로 통일, 차감 정책 명문화
    dead code 약 850줄 제거
  • 재화 자동충전 결제 기능을 백엔드 전 계층으로 구현, 이후 멱등성을 강화해 중복 충전 방지
  • 정실 유저 약 1만 명의 리텐션 적립이 19시간 전면 실패한 장애를 원인 분석·긴급 수정·데이터 백필로 대응
    재발 방지 규칙을 팀 전역 문서화
  • 커플룸 등록 기능(123커밋 규모)을 LLM 기반 상황 대사 생성 포함해 도메인 전체 설계·구현
  • 앱 내 본인인증(Capacitor), 쿠키 동의 배너(CCPA/LGPD) 등 9개국 서비스의 글로벌 규제 대응 구현
  • Claude Code 기반 AI 페어 프로그래밍 워크플로우(커스텀 스킬/서브에이전트 자동화)를 팀 개발 표준으로 도입·정착

작가 주식회사

Product Developer (2024. 02 ~ 2024. 12)
React, TypeScript, Electron.js, Zustand, Million.js, Supabase, Tailwind-css

Electron.js를 활용해 Task 관리에 최적화된 생산성 브라우저 데스크탑 앱을 개발했습니다.
사용자는 To-Do List로 할 일을 정리하고, Rich Text Editor를 통해 노트를 작성하며, 브라우저 기능을 프로스페이스 앱에서 Task 기능과 함께 활용해 효율적인 작업을 도와주는 서비스 입니다.

  • million.js를 활용한 퍼포먼스 개선으로 같은 조건에서 시작한 랜더링의 완료 속도가 65% 가량 감소 (Wiki)
  • tiptap-editor를 이용하여 리치 텍스트 에디터 구현 및 키보드 단축키 연결
  • Dnd-kit을 활용하여 space, tab-group, tab 사이의 드래그 앤 드랍 구현
  • Web-Worker를 통해 각 스페이스(공간)별 시간 기록
  • color-picker를 이용해 확장성 높은 색상 팔레트 구현 및 cwag기준에 맞는 텍스트 컬러 변경

Project

롤모임 — 리그 오브 레전드 사설 내전 커뮤니티 플랫폼

개발 일지 (2026. 05 ~ 운영 중)
React, Vite, TypeScript, Express, Prisma, PostgreSQL(Supabase), Redis, Socket.IO, GCP(Cloud Run/GCE)

친구들과 함께 운영 중인 리그 오브 레전드 사설 내전 커뮤니티를 위한 실제 프로덕션 서비스입니다. 내전 팀 구성을 위한 실시간 경매(드래프트), 배팅, 랭킹, 시즌 패스 등 커뮤니티 운영에 필요한 기능을 기획부터 운영까지 직접 맡고 있습니다.

운영 성과 (2026. 05 ~ 07, 약 2개월 운영 기준)
DAU 65명 · WAU 93명 · MAU 129명 · 고착도(DAU÷MAU) 약 50% · 누적 가입 134명 · 내전 참여 전환율(누적) 60.2% · 7일 코호트 활성화율 85.7%

  • DAU/WAU/MAU·리텐션 코호트·이탈률·참여 깊이·포인트 경제까지 추적하는 자체 프로덕트 대시보드를 설계·구축해 지표 기반 의사결정 체계 수립
  • WebSocket + Redis 기반 실시간 경매(드래프트) 시스템 — API 서버와 WS 서버가 같은 상태를 나눠 갖는 구조에서 생긴 동시성 버그를 진단·수정
  • 단일 모임 전용이던 서비스를 여러 모임이 함께 쓸 수 있는 멀티테넌트 구조로 전환(앱 레벨 테넌트 격리, 모임별 기능 on/off 플러그인 시스템)
  • 운영 중 발생한 N+1 쿼리·커넥션 풀 고갈 등 실 서비스 성능 이슈를 pg_stat_statements 실측 기반으로 진단·해결
  • 배포 사고 대응 후 재발 방지 체계 수립(git=운영 원칙, 배포 커맨드 안전장치 등)

운영하며 겪은 사고와 설계 결정들은 개발 일지 시리즈에 기록하고 있습니다.