← PORTFOLIOPDF 다운로드

Resume

박찬빈Frontend Developer

React, TypeScript와 Flutter로 서비스를 만드는 프론트엔드 개발자입니다. 팀으로 위치 기반 게임 '경찰과 도둑'을 출시해 운영해왔고, 교내 수강신청 도우미와 분실물 지도 서비스 개발에 참여했습니다. 서비스는 출시가 아니라 운영에서 완성된다는 생각으로, 사용자의 제보와 지표를 보며 계속 다듬으려 노력하고 있습니다.

010-2604-7764chanbin0626@gmail.comgithub.com/INSANE-Pportfolio.chanbin.dev

기술

Language
TypeScript · JavaScript · Dart
Framework
React · Next.js · Flutter
State & Data
Zustand · TanStack Query · Riverpod · MSW
Test
Vitest · Cypress
Infra / Deploy
GitHub Actions · Docker · AWS (EC2 · S3 · CloudFront) · Vercel
Analytics
GA4 · App Store Connect
Collaboration
Git · GitHub · Notion

프로젝트

2025.10 ~

프론트엔드 (앱 · 웹)

출시 · 운영 중

경찰과 도둑

위치 기반 실시간 멀티플레이어 모바일 게임

App StoreGoogle Play소개 웹사이트웹 데모 (설치 없이 체험)앱 GitHub웹 GitHub서울게임타운 참가기

  • STOMP 기반 WebSocket으로 실시간 채팅과 체포·탈옥 등 게임 이벤트를 구현하고 양대 마켓에 출시. v3에서 같은 기반을 커뮤니티(모집 게시판·상시 채팅)로 확장
  • 스크린샷으로 전달되지 않는 게임을 설치 전에 해볼 수 있게, 앱 화면을 실측 재현한 4개 코스 웹 데모를 소개 사이트에 구축
  • 앱·웹 두 벌로 관리되던 법적 문서를 웹 단일 정본 + 앱 웹뷰로 정리해 앱 심사 없이 갱신 (HTML 111KB→27KB·JS 0개, 폰트 760KB→52KB)
  • 화면이 꺼지면 iOS가 소켓을 끊어 게임이 멈추던 문제를, FCM 푸시 수신을 네트워크 생존 신호로 활용한 자동 재연결로 해결
  • 서울게임타운 부스 참가를 먼저 제안해 신청부터 운영까지 진행. 하루 동안 방문객 300명, 서비스 가입자 60명 증가
  • '경찰과 도둑'이 일반명사라 검색에 밀린다고 판단, 노션에 글만 쓰면 발행되는 팀 블로그를 제안하고 Next.js로 구축
  • 카카오톡, 인스타그램 같은 인앱 브라우저에서 초대 링크가 앱으로 이어지지 않는 문제를 브릿지 페이지로 해결
  • 일본 App Store 노출이 한국과 같아졌는데 페이지를 여는 비율은 3분의 1(5.6% vs 15.6%)임을 짚고, 한국어로 남은 공지·닉네임의 국제화를 팀에 제안해 공지 다국어를 백엔드에 직접 구현

Flutter · Dart · STOMP over WebSocket · Riverpod · Next.js · Notion API · Supabase · Cloudflare R2 · Vercel Blob · Upstash Redis

2025.12 ~

프론트엔드

운영 중

올클

세종대학교 수강신청 도우미

서비스GitHub

  • 최근 3개월 이용자 1만 6천 명 규모의 수강신청 도우미에서, 운영이 종료된 'Please Graduate'의 졸업 요건 검사 기능 이전을 원 개발자에게 직접 요청받아 주도 개발
  • 원 서비스가 지원하지 않던 22학번 이후 규정을 새로 구현. 학번마다 달라지는 균형교양 정책과 전공 인증, 복수전공 등 늘어나는 엣지 케이스를 대시보드와 검사 플로우로 풀어냄
  • '스크롤이 안 된다'는 제보를 재현해 원인이 구글이 자동으로 적용한 전면광고 실험임을 확인하고, 수강신청 기간에 트래픽이 몰리는 서비스에 맞는지 팀과 논의해 자동 광고 실험은 유지하되 전면광고 형식의 실험만 제외
  • 로그인 실패가 한 문구로 뭉쳐 전학년 수강신청일 실패자 51명이 평균 5.6회 재시도하던 문제를, 원인별 오류 코드에 맞춰 비밀번호·개인정보 동의·계정 상태별 안내로 분리

React · TypeScript · Zustand · TanStack Query · MSW · Storybook

2026.08 ~

기획 · 개발 (개인)

npm 배포 · 운영 중

gitmoru

저장소가 침해됐을 때 무엇이 바뀌었는지 확인하는 도구

웹사이트npmGitHub

  • 계정 탈취로 조직 전체 브랜치가 덮어씌워지는 일을 직접 겪고, 무엇이 언제 바뀌었는지 확인해 되돌릴 근거를 찾아주는 도구를 만들어 npm에 배포
  • 탐지 규칙이 못 잡은 공격이 '이상 없음'으로 보이는 문제를 겪어, 감염 여부를 단정하지 않고 변경 사실만 보여주는 방향으로 설계
  • 악성 코드를 다루는 도구라 clone과 대상 코드 실행을 막고, 렌더러 CSP로 외부 통신을 차단하며, 토큰은 GitHub CLI에서 빌려 쓰도록 제약을 문서로 정리
  • 변경 내용 해석은 MCP 서버로 AI에 위임하되, 공격자가 쓴 텍스트를 읽는 만큼 도구를 읽기 전용으로 제한
  • 사고 순간 바로 켜지고 브라우저 탭과 달리 열린 포트·확장 프로그램 공유가 없도록 Electron 앱으로 구현(첫 사용). MCP 서버만 npm에 배포해, 클론 경로를 손으로 채우던 설치를 명령 한 줄로 단축

Electron · React · TypeScript · Vite · Vitest · MCP SDK

2026.03 ~

프론트엔드 · AI 추론 서버

Footure

축구 선수 이적 퍼포먼스·시장가치 예측 서비스

서비스프론트 GitHubAI 서버 GitHub

  • 팀에 서버 경험자가 없어 FastAPI 기반 AI 추론 서버까지 역할을 넓혀, API 규격과 배포 방식을 문서로 합의한 뒤 구축
  • 예측 모델을 교체할 수 있는 구조와 환경별 실행 모드를 설계하고, 선수 한 명의 예측 실패가 전체 응답을 막지 않게 처리
  • 선수 검색과 상세, 시즌 지표 그래프, 어드민 화면 구현. Docker와 GitHub Actions로 EC2 자동 배포 구성

React · TypeScript · FastAPI · Docker · GitHub Actions · AWS (EC2 · S3)

2025.07 ~ 2026.04

프론트엔드 · 배포

세종 줍줍

세종대학교 지도 기반 분실물 찾기 웹

서비스GitHub

  • Context API로 시작한 전역 상태가 리렌더링 문제를 일으키자 TanStack Query와 Zustand로 역할을 나눠 마이그레이션
  • 첫 팀 프로젝트에서 브랜치 전략과 이슈, PR 컨벤션을 오픈소스 방식을 참고해 팀과 함께 정립
  • MSW 목 서버로 백엔드와 병렬 개발, AWS CloudFront 배포 파이프라인을 직접 구축

React · TypeScript · Vite · Zustand · TanStack Query · MSW · AWS CloudFront

수상

활동

2025.03 ~

그리디 (Greedy)

세종대학교 SW 학술 동아리 · 2기 멘티 → 3기 스터디 리드 → 4기 메인테이너

  • 56명 규모 동아리에서 멘티로 시작해 스터디 리드를 거쳐, 미션 설계를 포함해 동아리 전반을 운영하는 메인테이너로 역할 확장. 미션 하나에 수십 개의 리뷰 코멘트가 오가는 코드 리뷰 문화에서 성장
  • 두 기수 연속으로 스터디를 이끌며 매주 세션을 진행, 상태관리 미션을 Zustand와 TanStack Query 기반으로 재설계
  • 직접 설계한 JavaScript 게임 미션이 우아한테크코스 코치들의 스터디 네트워크(초록스터디)에 첫 프론트엔드 학습 자료로 제공되는 절차 진행 중
  • 현업 코치 초청 세션(코수타)을 기획하고, SW중심대학사업단과 공동 주최하는 그리디콘에서 그리디 운영진으로 연사 섭외와 후원사·도서 후원 컨택을 맡음. 축제 부스 운영도 총괄

학력 · 병역 · 어학

학력
세종대학교 컴퓨터공학과 · 2021.03 ~ 재학 중 (4학년)
병역
카투사(KATUSA) 병장 만기전역 · 미 육군 표창 훈장(ARCOM) 수훈 · 2023.05 ~ 2024.10
어학
JLPT N3 (2024.07 취득)