문제를 먼저 찾아, 실제로 쓰이는 해결책을 만듭니다.문제를 먼저 찾아,실제로 쓰이는 해결책을 만듭니다.

How I Work

일할 때 지키는 기준입니다.

• 필요한 일은 먼저 제안합니다

  같은 일이 반복되는 게 보이면 그냥 넘기지 않습니다. QA 봇, 자체 CMS, 배포 알림 모두 문제를 정리해 해결안을 기획하고, 팀에 제안해 직접 만들었습니다.

  배포 알림·기록 자동화 →

• 근거를 보고 구조를 정합니다

  좋은 구조인지는 방법론이 아니라 우리 코드가 결정한다고 봅니다. 후보 네 가지를 비교하고 의존성을 전수조사해, 정답으로 통하던 안 대신 하이브리드 구조를 택했습니다.

  아키텍처 마이그레이션 →

• AI에 안전장치를 붙입니다

  검증이 자동으로 걸리면 AI 산출물을 더 과감하게 쓸 수 있습니다. 테스트 생성 파이프라인에 문법 검증과 DB Read-only 강제를 넣어 실제 데이터를 건드리지 않게 했습니다.

  QA 자동화 봇 →

• 규칙은 검사 도구와 문서로 남깁니다

  규칙을 사람 기억에 맡기면 시간이 지나면서 무너집니다. 아키텍처 규칙은 검증 도구로, 디자인 시스템 규칙은 문서로 남겼습니다.

  디자인 시스템 →

Projects

실무에서 수행한 프로젝트와 기여 내용입니다.

주식회사 루멘테라

2024.05 - 현재, Frontend 개발, Backend 개발

약국과 제약사 간의 상품 주문, 결제, 장부관리까지 한 번에 처리할 수 있는 B2B 직거래 통합관리 플랫폼 '플랫팜' 프론트엔드 개발 및 운영

• 2026년 3월 - 현재QA 자동화 봇 (Smoke·Unit·E2E + AI 테스트 생성)

  PR마다 테스트를 자동 실행하고, 변경 diff를 분석해 Playwright 테스트를 AI로 생성·검증하는 QA 봇 설계·구축. 팀의 PR Gate로 정착해 상시 실행 (Playwright · Claude API)

  자세히 보기
• 2026년 6월브랜치 동기화 자동화 CI

  브랜치 간 동기화와 충돌 해소를 자동화하는 보조 CI 3종 구축, 잘못된 베이스의 머지를 required check로 차단 (GitHub Actions)

• 2026년 5월배포 알림·기록 자동화

  직전 배포 이후 커밋을 티켓별로 Slack에 자동 정리하는 Composite Action과 Notion 배포 기록 자동화를 직접 구축 (DX)

  자세히 보기
• 2026년 5월사내 회의 알림 봇

  노션이 Slack에 올린 회의 메시지를 파싱해 참여자에게 10분 전·시작 시 개인 DM, 평일 오전 당일 일정을 일괄 안내하는 전 구성원 대상 편의 자동화 (Node.js)

  자세히 보기
• 2026년 4월프론트엔드 아키텍처 마이그레이션 (VSA 하이브리드)

  수백 개 파일 규모의 구조 재설계. 후보 4안 비교와 의존성 전수조사 끝에 완전한 Vertical Slice 대신 하이브리드를 택하고, 7규칙 검증 CLI를 모든 PR에서 상시 검증하도록 고정 (Frontend)

  자세히 보기
• 2026년 3월WYSIWYG 에디터 마이그레이션

  CKEditor에서 Tiptap 에디터로 마이그레이션하여 패키지 크기 2.5GB → 3MB, 운영 배포 시간 약 50% 단축 (12분 → 6분) (Frontend)

  자세히 보기
• 2025년 상반기프론트엔드 성능 최적화

  코드 스플리팅·메모이제이션 등 프론트엔드 최적화로 초기 로딩 전방위 개선, 현재 데스크톱 실측 초기 렌더 0.6s·메인스레드 블로킹 10ms 수준 (Frontend)

  자세히 보기
• 2026년 3월 ~ 7월디자인 시스템 구현 및 전면 적용

  페이지·컴포넌트마다 적용된 스타일 기준이 달랐던 상태에서, 디자인 측이 정의한 토큰 체계를 코드로 구현하고 따로 마크업된 요소를 공용 컴포넌트로 대체한 뒤 정합 규칙을 만들어 유지보수 기준을 세움 (Frontend)

  자세히 보기
• 2026년 2월웨비나 라이브 스트리밍 페이지

  Naver Cloud Player 기반 라이브 스트리밍 시청 페이지와 사전예약·실시간 참여 현황 기능 구현. Route Colocation 첫 적용 사례 (Frontend)

  자세히 보기
• 2026년 1월자체 CMS 구축

  프론트엔드와 백엔드 전 과정을 1개월 만에 단독 개발한 자체 CMS 구축을 통한 운영 효율 및 개발 생산성 개선 (Fullstack)

  자세히 보기
• 2026년 1월대형 제약사 신규 서비스 제안 페이지

  계약 해지를 앞둔 고객사에 제안할 신규 서비스 시연 페이지를 구현, 서비스 전환을 통해 계약 유지로 연결 (Frontend)

• 2025년 8월 ~ 2026년 3월영업 담당자 자동매칭 시스템 구축 및 DB 마이그레이션

  비정형 벤더 담당 지역 데이터 표준화 → 주소 기반 자동매칭 구축(성공률 90%+) → JSON 158,000줄 DB 마이그레이션 + 서버 이관까지 완성 (Fullstack)

  자세히 보기
• 2024년 하반기서비스 초기 구축 참여

  B2B 직거래 플랫폼 '플랫팜'의 초기 구축 단계부터 참여, 벤더사별로 다른 요구사항을 수용하는 프론트엔드 구조와 공통 컴포넌트 체계 구성 (Frontend)

• 2026년 상반기 - 현재QA 인프라 유지보수 및 AI QA 봇 고도화

  PR Gate와 스테이징 QA 환경을 운영하며, 화면 변경으로 깨지는 테스트를 정리하고 실행 시간을 관리. AI 테스트 생성 봇은 생성 범위와 검증 단계를 계속 넓히는 중 (Playwright · Claude API)

• 2025년 상반기 - 현재백엔드 API 개발 및 수정

  백엔드 리소스가 제한된 환경에서 Node.js 기반 API 개발·수정 작업을 병행하며 서비스 개발 및 운영 효율성 확보 (Backend)

• 2024년 하반기 - 현재운영 안정성 및 유지보수성 개선

  운영 단계에서 발생하는 이슈 대응을 주도하며, 프론트엔드 전반의 안정성과 유지보수성 개선 (Frontend)

Side Projects

업무 밖에서 직접 만든 프로젝트입니다.

• 

  Web Service

  개발자의 타자 연습

  개발 용어를 치면 그 개념이 그림으로 움직이는 타자 연습 사이트입니다. 자료구조·알고리즘·OS·네트워크·DB·SW 공학·보안 용어 140개를 한글·영어로 칠 수 있고, 용어마다 막대·셀·그래프·타임라인·메시지 5가지 템플릿으로 동작을 보여 줍니다. 한글은 자모 단위로 입력을 판정하고, 검색 유입을 위해 용어별 정적 페이지를 빌드 때 생성합니다.

  Svelte 5, Vite, Cloudflare Workers, Workers KV, Vitest, Playwright

  type.whybusyy.com
• 

  Frontend

  http-journey - 요청 하나의 186ms

  주니어 개발자를 위한 한국어 인터랙티브 페이지입니다. 주문 버튼을 누른 순간부터 화면이 바뀌기까지 HTTP 요청 하나가 거치는 9단계를 스크롤에 맞춰 따라가며, 단계마다 오가는 메시지(논리)와 지나는 장비(물리)를 두 레인 다이어그램으로 보여 줍니다. 본문은 Astro로 JS 없는 HTML을 만들고 다이어그램만 React island로 hydrate했으며, 단계별 ms 값의 근거를 문서로 남겼습니다.

  Astro, React, TypeScript, Tailwind CSS, motion, nanostores, Vitest, Playwright

  http-journey.whybusyy.comGitHub
• 

  Mobile

  루틴 체크 - 매일 습관 트래커

  iOS 앱스토어에 출시한 루틴 트래커. Swift WidgetKit으로 Small/Medium/Large 위젯 3종을 직접 구현하고, Skia 기반 12주 히트맵으로 지속을 시각화했습니다.

  React Native, Expo, TypeScript, Zustand, MMKV, Skia, Swift

  App StoreGitHub
• 

  npm Package

  tiptap-editor-kit

  Tiptap 기반 WYSIWYG 에디터 npm 패키지. React와 Vanilla JS 두 가지 entry point를 제공하며, Full Toolbar와 이미지 업로드를 지원합니다.

  Tiptap, ProseMirror, TypeScript, React, tsup

  DemoGitHubnpm
• 

  Terminal

  TUI Games

  터미널에서 돌아가는 미니게임 4종(Snake·Tetris·Sudoku·Galaga). 의존성 없이 Node.js 표준 라이브러리만 쓰고, 변경된 셀만 다시 그리는 이중 버퍼 차분 렌더러를 직접 구현했습니다. 순수 로직을 분리해 테스트 68개를 붙였습니다.

  Node.js, JavaScript, ANSI / TUI, node:test, Zero-dependency

  GitHub
• 

  Mobile

  Re:Gym - 중고 헬스 기구 거래 앱

  중고 헬스 기구 거래 앱의 Flutter 클라이언트와 관리자 웹을 맡았습니다. 상품 등록·필터 검색·키워드 알림·찜·판매/구매 관리 화면과 STOMP 기반 실시간 채팅을 구현하고, 판매글·브랜드·부위를 관리하는 백오피스를 Next.js로 함께 만들었습니다. 단위 34개·위젯 12개 총 46개 테스트를 붙였고, MVP를 마치고 TestFlight로 테스트 중입니다.

  Flutter, Dart, STOMP (WebSocket), Firebase Messaging, Kakao SDK, Next.js, flutter_test

• 

  Frontend

  포트폴리오 사이트

  커서를 따라 끌려오는 3D 사원증과 카드를 따라 휘어지는 목걸이 줄, 스크롤에 맞춰 바뀌는 대표 작업 화면을 Framer Motion과 SVG로 직접 만들었습니다. 폰트는 동적 서브셋으로 바꿔 전송량을 3.5MB에서 653KB로 줄였습니다.

  Next.js, TypeScript, Tailwind CSS, Framer Motion, SVG

  GitHub

Open Source Contributions

• facebook/lexical #8214★ 23.9k, mergedPlayground LayoutContainerNode import 방식 수정
• Tencent/BrowserSkill #360★ 8.0k, merged확장 팝업 비활성 버튼 안내 문구 추가 (10개 로케일)

Skills

프로젝트에서 사용한 기술 스택입니다.

• LanguageTypeScript, Core
• LanguageJavaScript, Core
• LanguageHTML, Core
• LanguageCSS, Core
• FrontendNext.js / React, Core
• FrontendSSR / RSC, Core
• FrontendZustand, Core
• FrontendTanStack Query, Core
• FrontendReact Hook Form, Core
• FrontendTailwind CSS, Core
• TestingPlaywright (E2E), Core
• DevOpsGit / GitHub, Core
• DevOpsGitHub Actions, Core
• CollaborationFigma, Core
• CollaborationSlack, Core
• CollaborationCursor IDE, Core
• CollaborationClaude Code CLI, Core
• Language, BackendSQL, Proficient
• Frontend반응형 / 모바일 웹, Proficient
• FrontendEmotion, Proficient
• FrontendMUI, Proficient
• TestingJest, Proficient
• TestingTesting Library, Proficient
• BackendNode.js, Proficient
• BackendNestJS, Proficient
• BackendExpress, Proficient
• BackendRESTful API, Proficient
• DevOpsAWS (EC2, S3, Amplify, CloudFront), Proficient
• DevOpsDocker, Proficient
• DevOpsVercel, Proficient
• CollaborationNotion, Proficient
• CollaborationJira, Proficient
• Language, MobileDart, Familiar
• FrontendWebpack, Familiar
• FrontendVite, Familiar
• FrontendFramer Motion, Familiar
• TestingStagehand, Familiar
• MobileFlutter, Familiar