비즈니스 확장성과 개발 생산성의 최적점을 찾는 4년차 프론트엔드 개발자 강은빈입니다.
화이트 레이블 아키텍처 설계와 AI 자동화 구축으로 비즈니스의 병목을 해결하고 있습니다. Turborepo 기반 멀티 브랜드 서비스 구조 설계로 4개국 글로벌 확장을 지원했고, Figma MCP 디자인-코드 자동화(80% 단축)와 Claude Code MR 자동 리뷰(90% 단축)를 직접 구축하여 팀 전체의 DX를 개선하고 있습니다.
보유 기술
Core
TypeScriptReactNext.jsTailwind CSS
상태 관리
React Query (TanStack Query)Zustand
모노레포 & 라이브러리
TurborepopnpmStorybookFramer MotionEmotioni18next
개발 도구 & CI/CD
GitLabGitHubGitHub ActionsClaude CodeCursorFigma MCP
협업
SlackFigmaSwagger UI
연동
Firebase (Auth, GA4, FCM)Airbridge SDKSSESupabase
인프라
VercelRailwayAWS EC2AWS S3CloudFront
테스트
JestVitestReact Testing Library
경력총 3년 10개월
(주) 버블탭
3년 3개월Frontend Developer · 2023.01 - 재직중
AI 캐릭터 채팅 B2C 서비스 개발 · Turborepo 화이트 레이블 아키텍처 설계 · DX 자동화
(주) 아데나소프트웨어
7개월Frontend Developer · 2022.07 - 2023.01
채팅형 웹소설 B2C 서비스 · 에디터 · 백오피스 시스템 개발
(주) 짐티
2개월Frontend Developer (겨울방학 체험형 인턴) · 2022.01 - 2022.02
티랩 스튜디오 브랜드 웹사이트 개발
프로젝트
(주) 버블탭
3년 9개월2022.07 - 재직중·2022년 아데나소프트웨어 입사 → 2023년 버블탭으로 소속 변경
기술 스택
CoreReact, TypeScript, pnpm
ArchitectureTurborepo, Storybook
State/DataReact Query, Zustand, SSE (Server-Sent Events)
ToolsGitLab, Claude Code, Figma MCP
AnalyticsGA4, Airbridge, Clarity
TestingVitest, Chromatic
프로젝트
사용자가 다양한 AI 캐릭터와 1:1 실시간 채팅을 즐기는 B2C 서비스입니다. SSE 기반 스트리밍 응답으로 자연스러운 대화 경험을 제공하며, 북마크, 채팅 히스토리, 캐릭터 즐겨찾기 등 개인화 기능을 지원합니다. BubbleChat(2024.10), TingleChat(2025.04) 런칭 후 태국, 대만, 일본으로 글로벌 확장했습니다.
프론트엔드 개발 / 아키텍처 설계 및 DX 개선 주도
ReactTypeScriptTurborepoSSESocket.IOReact QueryZustandStorybooki18nextGA4AirbridgeClarity
[서비스 기획] 타사 서비스 분석 및 UI/UX 설계
- 국내외 AI 채팅 서비스 벤치마킹 및 경쟁사 분석을 통한 핵심 기능 정의
- 서비스 기획 및 와이어프레임 설계, 사용자 플로우 정의
- UI/UX 설계를 통한 초기 제품의 복잡도 최적화 및 사용성 개선
[서비스 개발] 프론트엔드 개발 및 2.0 개편
- PoC 단계부터 프론트엔드 단독 개발로 서비스 런칭 주도
- Web 2.0 전면 개편: 메인/상세 페이지 UX 개선, 성능 최적화
- 양방향 무한 스크롤 채팅: 커서 기반 페이지네이션, 앵커 기준 스크롤 복원으로 점프/깜빡임 해결
- SSE 기반 실시간 AI 채팅 시스템 개발
- 알림 시스템 WebSocket(Socket.IO) 아키텍처 리팩토링: 범용 소켓 모듈로 재설계
[아키텍처] Turborepo 모노레포 구축
- [배경] TingleChat 화이트 레이블링 서비스 도입으로 기존 단일 React 구조의 한계
- [선택 이유] 멀티 브랜딩 지원, 코드 중복 제거, 일관된 배포 파이프라인
- [결과] BubbleChat/TingleChat 동시 유지보수, 신규 브랜드 추가 시 중복 작업 70% 제거
- 글로벌 서비스(태국, 대만, 일본) 대응: 시간대/통화 처리, CDN 최적화
[아키텍처] 디자인 시스템 구축
- [배경] 화이트 레이블 서비스 확장에 따른 일관된 UI/UX 필요
- 디자이너와 협업하여 프로젝트 디자인 시스템 정립 및 문서화
- 다크모드 컬러셋 구성: 라이트/다크 테마별 컬러 토큰 설계 및 CSS 변수 기반 통합 관리
- [결과] Button, Input, Modal 등 30개 이상 공통 컴포넌트 라이브러리 구축
[DX 개선] Figma MCP 디자인 자동화
- [배경] 반복적인 퍼블리싱 작업으로 인한 개발 생산성 저하
- [계기] 우아콘 디자인 자동화 세션 참석 후 사내 발표 및 도입 제안
- [구현] Figma MCP 연동으로 디자인→코드 워크플로우 자동화
- [결과] 퍼블리싱 작업 시간 80% 단축, 디자인-개발 간 커뮤니케이션 비용 최소화
[DX 개선] Claude Code MR 자동 리뷰
- [배경] 회사 보안 정책상 CodeRabbit 사용 불가, 수동 리뷰로 인한 병목
- [구현] CodeRabbit 구조 기반 프롬프팅, MR 생성 시 자동 리뷰 시스템 구축
- [결과] 코드 리뷰 시간 90% 단축, GitLab API 연동 이슈 생성 자동화
- 팀 개발 워크플로우 문서화 및 Claude Code 활용 가이드라인 작성
[DevOps] CI/CD 파이프라인 개선
- [배경] 서비스 증가(web, reward, design-system)에 따른 단일 파이프라인 구조의 한계
- [구현] Parent-Child Pipeline 구조로 서비스별 독립 배포 파이프라인 설계
- 공통 변수/캐시 설정을 common.yml로 분리하여 중복 코드 제거
- YAML Anchor 기반 변경 감지 로직으로 해당 서비스 파일 변경 시에만 Job 실행
- [결과] 빌드 시간 감소, 서비스별 독립 배포 가능, 유지보수성 향상
[리더십] 팀 성장 기여 및 기술 공유
- 기획자·디자이너·개발자 간 커뮤니케이션 허브 역할, 요구사항 정리 및 기술 제약 사항 조율
- 신규 입사자 온보딩 가이드 문서 작성 및 프로젝트 구조 설명
- 사내 기술 세미나 발표: Figma MCP 활용법, Claude Code 워크플로우 개선
- 우아콘 디자인 자동화 세션 내용 공유 → 팀 내 Figma MCP 도입 리드
[운영] 제품 안정화 및 데이터 기반 개선
- 트래픽 급증 대응 및 실시간 장애 복구(Hotfix)를 통한 서비스 가용성 확보
- GA4, Airbridge 연동 로깅 시스템 구축 및 사용자 행동 분석을 통한 UX 고도화
Impact
- 화이트 레이블 아키텍처 설계로 글로벌 4개국(KR, TH, TW, JP) 서비스 런칭 주도
- 모노레포 기반 구조 개선으로 신규 브랜드 추가 시 중복 작업 70% 제거
- Figma MCP 도입을 통한 디자인 자동화로 퍼블리싱 작업 시간 80% 단축
- Claude Code 기반 자동 리뷰 시스템 구축으로 코드 리뷰 소요 시간 90% 절감
- SSE 및 무한 스크롤 엔진 최적화로 끊김 없는 실시간 AI 채팅 환경 구현
Screenshots
BubbleChat / TingleChat 리워드 (크리에이터 수익화 서비스)
2024.12 - 현재크리에이터가 콘텐츠 수익을 정산받을 수 있는 수익화 플랫폼입니다. 본인인증(KYC), 계좌인증을 통해 정산 자격을 획득하고, 수익 현황을 확인할 수 있습니다. 메인 서비스와 크로스 도메인 SSO를 통해 seamless한 사용자 경험을 제공합니다.
프론트엔드 개발, 인증 아키텍처 설계
ReactTypeScriptReact QueryZustandi18next
수익화 기능 개발
- 본인인증(KYC) 연동 및 UI 구현
- 계좌인증 연동 및 정산 신청 플로우 구현
크로스 도메인 SSO 시스템 구현
- 메인/서브 도메인 간 토큰 공유 아키텍처 설계
- 메인 도메인 로그인 시 서브 도메인 자동 인증 처리
- 토큰 만료/갱신 시 도메인 간 동기화 처리
Impact
- 리워드 서비스 출시로 크리에이터 수익화 플랫폼 구축
- 크로스 도메인 SSO로 서비스 간 seamless한 사용자 경험 제공
Screenshots
버블탭 스튜디오 (웹소설 에디터)
2022.07 - 2025.03창작자가 채팅형 웹소설을 제작하는 전용 에디터입니다. AI 생성 커버/배경/캐릭터/효과음 애셋을 활용해 에피소드를 편집하고, 드래그앤드롭으로 정렬 기능과 다양한 단축키 기능을 제공했습니다. 실시간 미리보기로 독자 경험을 확인할 수 있습니다.
스튜디오 기능 개발 및 유지보수, 내부 PD UI/UX 피드백 반영
ReactTypeScriptZustandReact QueryAWS S3i18next
에디터 핵심 기능 개발
- Drag and Drop 기반 씬 편집 기능 구현
- 복사/잘라내기/붙여넣기/삭제 단축키 시스템 개발
- contenteditable 기반 인라인 WYSIWYG 텍스트 에디팅
- 다이얼로그 타입 변환 기능 (대사 ↔ 캐릭터)
애셋 관리 시스템
- 오리지널 애셋(배경/캐릭터/효과음) 카테고리 관리
- Presigned URL 기반 AWS S3 다중 파일 업로드
- RBAC 기반 권한 관리 (유저/내부 작가/외부 작가/어드민)
뷰어 기능 개발
- 효과음/배경음악/애니메이션 동기화 재생 알고리즘 구현
- dotLottie/Lottie 애니메이션 제어 (Play/Stop/Pause)
- 스크롤/터치 제스처 성능 최적화 (throttle 적용)
성능 최적화
- React.memo, useMemo, useCallback 적용으로 불필요한 리렌더링 제거
- 에디터 스크롤/필기 동작 시 레이아웃 리렌더링 이슈 분석 및 메모이제이션 적용
- 대용량 씬 리스트 가상화(Virtualization) 적용으로 초기 로딩 속도 개선
- React DevTools Profiler 활용한 렌더링 병목 지점 분석 및 최적화
Impact
- 내부 PD/작가 피드백 기반 에디터 UX 지속 개선
- Drag & Drop, 단축키 시스템으로 작품 제작 효율성 향상
- RBAC 기반 권한 체계로 내부/외부 작가 관리 체계화
- 메모이제이션 적용으로 에디터 스크롤/필기 시 렌더링 성능 개선
Screenshots
버블탭 (채팅형 웹소설 B2C 서비스)
2022.07 - 2025.03채팅형 웹소설을 감상하는 콘텐츠 소비 플랫폼입니다. 메인/베스트/디스커버 페이지에서 작품을 탐색하고, 작가 팔로우와 댓글로 커뮤니티 활동을 할 수 있습니다. 효과음, 배경음악, 애니메이션이 동기화된 몰입감 있는 뷰어 경험을 제공합니다.
웹 신규 기능 개발 및 유지보수, 배포 관리
ReactTypeScriptReact QueryZustandStorybooki18nextGA4Airbridge
콘텐츠 소비 페이지 개발
- 메인/베스트/디스커버 페이지 개발
- Elastic Search 연동 검색 기능 (useSearchParams 히스토리 관리)
- Suspense + Error Boundary 에러 핸들링 공통화
- 공모전 페이지 개발
- 반응형 디자인 (breakpoint 별 대응)
커뮤니티 기능 기획 및 개발
- 커뮤니티 기능 직접 기획: 사용자 니즈 분석 후 기능 정의 및 화면 설계
- 스토리 좋아요/북마크 등 사용자 인터랙션 기능 구현
- 에피소드별 댓글 및 대댓글 기능 개발
- 작가 팔로우/팔로잉 시스템 구현
개발 생산성 향상
- React Query 도입 (Query Key Factory 패턴)
- Storybook 도입 (Icon, Skeleton UI 모듈화)
- Viewer 비즈니스 로직 분리 → Web/Studio 공통 컴포넌트화
그로스 데이터 수집
- GA4/Airbridge 이벤트 공통 모듈화
- 비로그인 사용자 fingerprint RSA 암호화 트래킹
Impact
- 커뮤니티 기능 기획을 주도하여 사용자 참여도 향상
- React Query 도입으로 API 호출 최적화 및 캐싱 전략 수립
- Viewer 공통화로 Web/Studio 간 코드 중복 제거
- Storybook 도입으로 UI 컴포넌트 문서화 및 재사용성 향상
Screenshots
백오피스 시스템 (어드민 대시보드)
2022.07 - 현재버블탭 서비스 전체를 운영하는 내부 관리자 시스템입니다. 유저/작품/결제 관리, 크리에이터 수익 정산, 애셋 업로드, 배너/푸시 알림 발송, 구독 관리 등 운영에 필요한 모든 기능을 제공합니다.
기능 요구사항 수집, 신규 기능 개발, 리팩토링
ReactTypeScriptReact QueryFCMAWS S3i18next
수익 분배 및 구독 관리
- 크리에이터 수익 분배 시스템 개발
- 구독 관리 시스템 개발
- 포션/샴푸(인앱 재화) 관리 시스템 개발
- 본인인증(KYC), 계좌인증 연동 및 Manual KYC 시스템 개발
콘텐츠 관리 시스템
- 콘텐츠 필터링 시스템 개발
- 애셋 벌크 업로드 (CSV 카테고리 바인딩)
- 배너 관리 시스템
알림(FCM) 발송 시스템 기획 및 개발
- 즉시/예약/반복/액션 발송 타입 구성으로 유연한 알림 메시지 발송 시스템 구축
- 관리를 위한 카테고리 설정 기능으로 관리 편의성 향상
- 다양한 기기에서 푸시(텍스트/이미지) 미리보기 화면 제공으로 메시지 정확성 보장
자동 재화 지급 시스템 개발
- 즉시/예약/액션 타입으로 유연한 보너스 재화 지급 시스템 구축
- 유저의 특정 행위에 따른 보너스 재화 자동 지급 설정 기능
- 재화 지급 시 토스트 메시지로 유저 안내 (FCM과 별도 노출)
공통 컴포넌트 및 유틸리티
- 빠른 백오피스 개발을 위한 Driven UI 패턴 기반 Search, Input Template 설계
- Table → Excel 다운로드 기능
- 글로벌 서비스를 위한 UTC 시간 계산 로직 적용
Impact
- 크리에이터 수익 분배 자동화로 정산 업무 효율화
- KYC/계좌인증 연동으로 정산 프로세스 체계화
- Driven UI 패턴으로 어드민 페이지 개발 생산성 향상
(주) 짐티
2개월2022.01 - 2022.02·겨울방학 체험형 인턴십
기술 스택
코어Next.js, TypeScript, yarn
상태관리React Query
라이브러리Storybook, Emotion, Naver Map API, Geolocation API
협업 툴Git, GitHub, Figma, Zeplin
프로젝트
필라테스 스튜디오 브랜드 웹사이트입니다. 전국 지점 위치를 지도에서 확인하고, 현재 위치 기반으로 가까운 지점을 찾을 수 있습니다.
프론트엔드 개발
지점 안내 페이지 개발
- Naver Map API 연동 인터랙티브 지도 구현
- Geolocation API 활용 현재 위치 기반 가까운 지점 자동 표시
- 지점 마커 클릭 시 상세 정보 팝업 및 지도 중심 이동 애니메이션
- 지점별 상세 정보(주소, 연락처, 운영시간) 카드 UI 구현
개발 환경 및 배포
- Emotion(CSS-in-JS) 스타일링 시스템 적용
- AWS CloudFront + S3 정적 페이지 배포
Impact
- 실서비스 배포 경험으로 프로덕션 레벨 개발 프로세스 습득
Screenshots
학력
서울과학기술대학교
자유전공 · 2026.03(입학예정)
University of California, Irvine
Individualized Study Program - English Language & TEFL Programs · 2025.07 - 2025.08
대덕소프트웨어마이스터고등학교
소프트웨어개발과 · 2020.03 - 2023.02
수상 및 기타
WOOWACON 2025 컨퍼런스 참여
AI 기반 업무 변화, 디자인시스템 자동화 등 세션 참여
8th HighThon 해커톤 참여
MBTI 기반 오픈채팅 서비스 (웹소켓, 네이버 Map API)
NHN Forward 컨퍼런스 참여
프론트엔드 성능 최적화, MSA 아키텍처, 개발 문화 세션 참여
SW 품질 전문가 양성과정 수료
ISTQB Foundation Level 교육 수료
2021 소프트웨이브 전공동아리 프로젝트 전시
DMS(기숙사 관리), PMS(학부모 서비스) 프로젝트 전시 및 발표
제56회 전국기능경기대회 웹디자인 및 개발 참가
지방기능경기대회 웹디자인 및 개발 은메달
은메달자격증
정보기기운용기능사
2022.06
정보처리기능사
2021.05
웹디자인기능사
2021.04