INSANE-P

Park
Chanbin

Frontend Developer — 박찬빈

About

안녕하세요, 프론트엔드 개발자 박찬빈입니다.

팀에서 같이 만들어가는 과정을 좋아합니다. 기획 단계부터 함께하는 걸 즐겨서, 더 나은 방법이 보이면 먼저 제안하고 팀을 설득해 실행까지 옮깁니다. 필요하다면 새로운 시도도 마다하지 않습니다.

“ 혼자 완결되는 기능은 거의 없다.”

“ 그래서 함께 만드는 과정이 곧 개발이다.”

함께 만드는 개발

올클에서는 바뀌는 명세를 백엔드와 계속 맞춰가며 졸업 요건 기능을 완성했고, 줍줍에서는 팀의 협업 규칙을 함께 만들었습니다.

먼저 제안하는 습관

경찰과 도둑에서 서비스명이 검색에 밀리는 문제를 발견해 SEO를 위한 팀 블로그를 제안하고 직접 구축했습니다. 서울게임타운 부스 참가도 먼저 제안해 신청부터 운영까지 이끌었습니다.

새로운 시도

Footure에서는 팀에 경험자가 없던 FastAPI 추론 서버를 문서화부터 배포까지 맡아 완성했습니다.

세종대학교 컴퓨터공학과chanbin0626@gmail.comgithub.com/INSANE-P

Projects

01

경찰과 도둑

Cops and Robbers— 출시 · 운영 중

2025.10 ~

프론트엔드 (앱 · 웹)

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

AWARD — 2026 세종 창업 아이디어리그 대상 (SW중심대학사업단 주최)

오프라인 술래잡기 '경찰과 도둑'을 위치 공유와 실시간 동기화로 옮긴 모바일 게임입니다. 프론트엔드의 실시간 통신과 게임 내부 이벤트를 담당해, STOMP 기반 WebSocket으로 로비·게임의 실시간 채팅과 게임 시스템을 연결했습니다.

불안정한 모바일 네트워크에서의 연결 복구

야외에서 뛰며 플레이하는 게임 특성상, 화면을 끄거나 앱을 전환하면 iOS가 WebSocket을 끊어 체포·탈옥·위치공개 이벤트를 놓치는 문제가 있었습니다. 연결 상태 표시와 수동 재연결 버튼을 추가하고, 게임 이벤트 FCM 푸시가 도착했다는 것은 네트워크가 살아있다는 신호라는 점에 착안해 포그라운드 FCM 수신 시 끊긴 연결을 자동으로 복구하도록 만들었습니다. 동시에 포그라운드에서는 불필요한 푸시 배너를 억제했습니다.

인앱 브라우저 딥링크 브릿지 페이지

Next.js 소개 웹사이트에 팀 테마 전환·미니게임 인터랙션을 구현했습니다. 초대 링크가 카카오톡·인스타그램·당근 인앱 브라우저에서 앱으로 연결되지 않는 문제를 발견하고, 인앱 브라우저를 감지해 외부 브라우저로 탈출시킨 뒤 설치된 앱을 실행하고 미설치 시에만 스토어로 안내하는 브릿지 페이지로 개선했습니다.

검색되지 않는 이름 — Notion CMS 팀 블로그

'경찰과 도둑'은 일반명사라 검색 결과에서 서비스가 밀린다고 판단해, 검색 유입을 만들기 위한 팀 블로그를 직접 개발했습니다. 블로그는 글이 꾸준히 쌓여야 의미가 있기에, 팀원들이 이미 쓰던 노션을 그대로 CMS로 선택해 글쓰기 진입장벽을 없앴습니다 — Notion API 문서를 파싱하는 블록 렌더러를 구현해, 노션에 글을 쓰고 체크박스만 켜면 ISR로 발행되는 구조입니다. 만료되는 노션 이미지를 위한 프록시, 글별 동적 OG 카드, Article JSON-LD, 사이트맵 등록과 이미지 최적화까지 Next.js 기반 검색 최적화를 적용했습니다.

서울게임타운 부스 — 세계관을 체험하는 오프라인 빌드

인디게임 전시회 서울게임타운에 부스 참가를 직접 신청해 성사시키고, 현장에서 유저들의 경험을 직접 들었습니다. 위치 기반 오프라인 게임이라는 특성에 맞춰 행사용 이벤트 게임 로직과 미니게임을 새로 만들고, 웹캠 촬영부터 Canvas 프레임 합성, Vercel Blob 업로드, QR 발급까지 전부 브라우저에서 처리되는 포토부스를 구현했습니다. Upstash Redis 정렬 집합 기반 리더보드로 닉네임별 최고 점수를 관리해, 방문자가 서비스 세계관을 간접 체험할 수 있게 부스를 구성했습니다.

Flutter / Dart / STOMP over WebSocket / Riverpod / Next.js / Notion API / Vercel Blob / Upstash Redis

경찰과 도둑 키비주얼
경찰과 도둑 앱 메인 화면
경찰과 도둑 소개 웹사이트

02

올클

ALLCLL— 운영 중

2025.12 ~

프론트엔드

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

2023년부터 운영되어 온 수강신청 도우미에 중간 합류해, FSD(Feature-Sliced Design) 구조와 팀 컨벤션을 파악한 뒤 기존 스타일에 맞춰 일관되게 기여하는 데 집중했습니다.

졸업 요건 검사 기능 이전 · 주도 개발

전교생 절반 이상이 쓰던 'Please Graduate'가 운영을 종료하면서, 원 개발자의 요청으로 그 기능을 올클로 이전하는 작업을 맡았고 이후 졸업 요건 기능 전반을 주도해 개발했습니다. 균형교양 영역 정책, 전공 인증, 영어·코딩 대체 과목, 복수전공·전과 등 복잡한 기준을 대시보드와 검사 플로우, 이수/미이수 모달로 풀어냈습니다.

함께 방향을 맞추는 개발

명세가 자주 바뀌는 도메인이라 백엔드와 계속 소통하며 졸업 판정 로직을 맞춰갔고, 자체 QA·사용자 제보 프로세스에 참여했습니다. 최근에는 반복되는 리뷰 피드백을 자동화하고 AI 에이전트가 팀 컨벤션을 따르도록 CLAUDE.md와 작업 규칙을 정비하고 있습니다.

React / TypeScript / Zustand / TanStack Query / MSW / Storybook

올클 홈 — 수강신청 연습·실시간 여석·졸업요건 검사
졸업 요건 분석 대시보드

03

Footure

Transfer Performance Prediction

2026.03 ~

프론트엔드 · AI 추론 서버

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

축구 선수의 이적 후 퍼포먼스와 시장 가치를 예측하고, 스타일이 유사한 선수를 찾아주는 서비스입니다. 선수 검색·상세 페이지와 시즌 히스토리 그래프, 어드민 페이지를 구현하며 복잡한 지표를 한글 라벨과 설명 툴팁으로 한눈에 이해할 수 있게 만들었습니다.

팀에 경험자가 없던 FastAPI 추론 서버를 맡아 완성

무작정 코드를 짜기보다 제품 요구사항과 API 규격, 예측 데이터 흐름, 배포 방식을 먼저 문서화하고 작업 범위와 검증 기준을 정리했습니다. 예측 모델을 쉽게 교체할 수 있도록 구조를 추상화하고, 실행 환경에 따라 동작 모드를 분리했으며(로컬은 가짜 데이터, 운영은 실제 DB 조회), 한 선수의 예측이 실패해도 전체 요청이 멈추지 않도록 부분 실패를 처리했습니다.

AI 도구를 검증하며 이끄는 개발

구현 과정에서 Claude 기반 에이전트를 보조적으로 활용하되, 생성된 결과를 그대로 쓰지 않고 직접 정의한 구조와 검증 기준에 맞는지 확인하며 진행했습니다. Docker 컨테이너화와 GitHub Actions 기반 EC2 자동 배포까지 갖춰, 문제를 문서로 정의하고 결과를 검증하며 이끌어가는 방식을 체득했습니다.

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

Footure 홈 — 이적 가능성 예측
선수 상세 — 시장가치 추이와 성장률

04

세종 줍줍

Zup-Zup

2025.07 ~ 2026.04

프론트엔드 · 배포 · 프론트엔드 3인

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

캠퍼스에서 분실물을 찾고 등록하는 지도 기반 웹 서비스로, 첫 팀 프로젝트이자 첫 배포 경험이었습니다. 분실물 찾기·로그인·마이페이지 등 주요 페이지를 구현하고 배포를 담당했습니다.

협업 규칙을 팀과 함께 만들기

협업 규칙이 없던 첫 팀이라, 잘 알려진 오픈소스 프로젝트들의 방식을 찾아보며 브랜치 전략과 이슈·PR 컨벤션을 팀과 함께 정했습니다. MSW로 목 서버를 구축해 API가 준비되기 전에도 화면을 완성했습니다.

Context API의 한계를 겪고 상태 관리 마이그레이션

전역 상태를 Context API로 시작했지만 규모가 커지며 한계를 겪었습니다 — 서버 데이터와 UI 상태가 한곳에 섞이고, 값 하나가 바뀌면 관련 없는 컴포넌트까지 리렌더링되고, 로딩·에러 처리를 매번 직접 구현해야 했습니다. 서버 상태는 TanStack Query, 클라이언트 상태는 Zustand로 역할을 나눠 마이그레이션했습니다.

첫 프로덕션 배포 파이프라인 구축

AWS CloudFront로 프로덕션 배포 파이프라인을 직접 구축했습니다. 첫 배포라 CI 빌드 단계에서 여러 문제를 만났지만, 하나씩 해결하며 안정적인 배포 환경을 만들었습니다.

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

세종 줍줍 — 캠퍼스 지도 기반 분실물 목록
분실물 등록 페이지

Skills

Frontend

React · TypeScript · Next.js · Flutter · Dart · HTML/CSS

React·TypeScript 기반 웹과 Flutter 기반 앱을 모두 만듭니다. Next.js로 SSR·SEO가 필요한 서비스 웹사이트를 구현한 경험이 있습니다.

상태 관리 · 데이터

Zustand · TanStack Query · Riverpod · MSW

서버 상태와 클라이언트 상태를 구분해 설계합니다. Context API에서 Zustand·TanStack Query로 마이그레이션을 주도했고, 상태관리 학습 미션을 직접 설계했습니다.

실시간 · 서버

STOMP over WebSocket · FCM · FastAPI

STOMP over WebSocket으로 실시간 게임 이벤트와 채팅을 구현했고, FastAPI 추론 서버를 설계부터 배포까지 완성했습니다.

테스트 · 인프라

Cypress · Storybook · Docker · GitHub Actions · AWS (EC2 · S3 · CloudFront)

Cypress E2E 테스트가 포함된 학습 미션을 설계했습니다. Docker와 GitHub Actions로 자동 배포 파이프라인을 구축한 경험이 있습니다.

Activity

그리디

Greedy — Sejong Univ. SW Club

2025.03 ~ 현재

2기 멘티 → 3기 스터디 리드 → 4기 메인테이너

매주 미션을 구현하고 서로 코드 리뷰를 주고받는 세종대학교 SW 학술 동아리입니다. 멘티로 시작해 스터디 리드, 미션 메인테이너로 역할을 넓혀왔습니다.

2기 — 멘티

순수 JavaScript로 숫자 야구 게임을 구현하며 MVC 패턴을 익히고, React 투두 리스트·SPA 라우팅 직접 구현·상태관리 미션을 진행했습니다. 미션 하나에 수십 개의 리뷰 코멘트가 오가는 코드 리뷰 중심 문화 속에서, "왜 이렇게 구현했는지"를 설명하고 피드백으로 코드를 고쳐나가는 방식에 익숙해졌습니다.

3기 — 스터디 리드

매주 미션의 핵심 개념과 리뷰에서 나온 좋은 접근들을 다루는 세션을 진행했습니다. 외부 현업 리뷰어의 피드백을 반영해 Recoil·Redux 기반 상태관리 미션을 Zustand·TanStack Query 기반으로 마이그레이션하며, 학습자가 "언제 어떤 상태관리 방식을 선택할 것인가"를 스스로 고민하도록 미션을 다시 설계했습니다.

4기 — 메인테이너

순수 JavaScript 게임 미션을 새로 설계하고 Cypress E2E 테스트를 붙였습니다. 처음에는 요구사항에 없는 동작까지 테스트가 검증하게 만들어 멤버들이 통과 기준을 두고 혼란을 겪었는데, 테스트를 요구사항 범위에 맞게 다시 정리하며 '테스트는 곧 명세'라는 기준을 얻었습니다. 설계한 미션들은 우아한테크코스 코치 기반 스터디 네트워크(초록스터디)의 첫 프론트엔드 학습 자료로 제공되는 절차가 진행되고 있습니다.

  • — 초록스터디와 연계해 현업 코치를 초청하는 세션(코수타)의 진행 흐름과 자료 기획

Awards

  • 세종 창업 아이디어리그 대상

    2026

    경찰과 도둑 · SW중심대학사업단 주최

  • 제14회 세종대학교 AI·SW 해커톤 우수상

    2026

    DevFlow — 코딩 팀프로젝트 협업·진행 시각화 · SW중심대학사업단 주최

  • 제13회 세종대학교 SW·AI 해커톤 장려상

    2025

    깃력사무소 — GitHub 활동 데이터 기반 팀 결성 플랫폼 · SW중심대학사업단 주최

Events

  • 서울게임타운

    2026

    인디게임 전시회 — 참가 신청부터 부스 출품·운영까지 직접 추진. 행사용 미니게임·포토부스·리더보드를 만들어 방문자가 서비스 세계관을 체험하게 구성

  • 세종대 축제 부스

    2026

    그리디 멤버들이 만든 게임으로 부스 운영 — 기획부터 현장 운영까지 총괄

  • 그리디콘

    준비 중

    SW중심대학사업단과 함께하는 현업 연사 초청 컨퍼런스 · 2회 운영진

서울게임타운 경찰과 도둑 부스
서울게임타운 — 경찰과 도둑 부스 운영
그리디 프론트엔드 스터디
그리디 프론트 스터디 — 매주 그 주 미션을 주제로 세션 진행
그리디 코수타 세션
코수타 — 현업 코치 초청 세션 기획·진행