Mingyu Kim

AI 활용 경험

Claude Code 서브에이전트 설계·운영

• 개인 RN 프로젝트에 역할별 에이전트(기획·UX설계·기술자문·Android·iOS 전문가)를 구축해 기획 → 설계 → 구현 전 과정을 에이전트 워크플로로 운영하였습니다.

도메인 지식베이스 기반 기획

• 도메인 지식을 문서 폴더에 마크다운 파일로 구축하고, 기획 에이전트가 이를 SSOT로 참조·검증하도록 설계하였습니다. 지식 보강은 직접 수정 대신 제안만 하도록 거버넌스를 분리하였습니다.

환각 방지

• 근거 등급 표기 규약([코드]/[문서]/[지식])을 전 에이전트에 적용하고, 시변 정보는 공식 출처 검증을 강제하고 미검증 주장을 격리하였습니다.

Spec-Driven Development

• 명세 → 계획 → 작업 분해 → 구현의 단계를 정립해, AI가 의도와 다른 코드를 생성하는 drift를 줄이고 산출물의 일관성과 예측 가능성을 확보하였습니다.

주도적 문제 해결 경험

비개발자를 위한 노코드 E2E 테스트 도구 개발 (크롬 확장프로그램)

• 문제 정의
  • 테스트 작성·실행에 인력과 시간이 반복 투입되는 비효율을 직접 포착하여, 비개발자도 코드 없이 E2E 테스트를 녹화·재생할 수 있는 도구를 자발적으로 기획하였습니다.
• 에이전트 워크플로 단독 개발
  • 기능별 '설계 스펙 → 구현 계획 → TDD' 사이클을 Claude Code 에이전트 지침에 내재화해, 1인 개발에도 테스트 174개 기반의 안정성을 확보하며 3일 만에 동작하는 MVP를 완성하였습니다.
• 접근성 우선 설계
  • CSS 셀렉터 대신 ARIA role·accessible name으로 요소를 식별하고 접근성 속성 누락 시 경고하도록 설계해, 테스트 견고성과 제품 접근성을 동시에 고려하였습니다.
• 브라우저 제어 구현
  • CDP(chrome.debugger)·Puppeteer 기반으로 이벤트 녹화 → 순차 재생 → 스크린샷 캡처까지 동작하는 파이프라인을 구현하였습니다.

설계 경험

레거시 프론트엔드 구조 개선

• 단방향 데이터 흐름
  • 컴포넌트와 데이터가 양방향으로 흐르면서 사이드 이펙트가 발생해 디버깅과 기능 수정이 어려웠습니다. feature based architecture에 영감을 받아 기능별 feature 폴더 아래 presentational·container·page 계층을 두어 한 방향으로 흐르도록 하고, presentational 컴포넌트가 container를 호출하지 않도록 의존 방향을 고정하였습니다.
• 단일 책임 분리
  • 함수 하나에 책임이 과도하게 몰려 있고 명령형으로 작성되어 가독성과 수정 용이성이 떨어졌습니다. 단일 책임 원칙에 따라 선언형으로 분리하고, co-location으로 관련 코드를 가까이 배치해 응집도를 높였습니다.
• UI·비즈니스 로직 분리
  • UI 로직과 비즈니스 로직이 혼재되어 기능 확장과 재사용이 어려웠습니다. presentational 컴포넌트와 container 컴포넌트를 분리해 각각 UI 로직과 비즈니스 로직·API 호출을 담당하도록 책임을 분리하였습니다.

성능 개선 경험

Waterfall 개선

• 한 페이지를 그리는 데 필요한 데이터를 하나의 큰 API가 한꺼번에(불필요한 항목까지) 내려주던 구조를, 화면에 실제로 필요한 단위로 API를 나누고 여러 요청을 동시에(병렬, Promise.all) 호출하도록 재설계하였습니다.
• 요청을 순서대로 기다리던 초기 로딩을 병렬 처리로 바꿔, 전체 대기 시간을 '모든 요청 시간의 합'이 아니라 '가장 느린 한 건' 수준으로 단축하였습니다.

전역 상태(Pinia) 캐싱을 TanStack Query로 일원화

• 이미 서버 데이터 캐싱 라이브러리(TanStack Query)를 쓰고 있었음에도, 여러 페이지가 공유하는 공통 데이터는 따로 전역 상태 라이브러리(Pinia)에 중복으로 캐싱하고 있는 불일치를 발견하여, 캐싱 방식을 TanStack Query로 일원화하였습니다.
• 화면 컴포넌트뿐 아니라 라우팅 단계·로그인 등 화면 밖에서도 같은 캐시를 재사용하도록 통일하고, 로그아웃 시 캐시를 비우도록 처리하였습니다.
• 직접 작성하던 상태 동기화 코드와 중복 요청을 제거해 캐시 관리 책임을 라이브러리에 위임하고, 해당 데이터를 위해 따로 두었던 전역 저장소를 제거하였습니다.

Race Condition 개선

• 검색어를 빠르게 바꿀 때 늦게 도착한 이전 검색 응답이 최신 결과를 덮어써 엉뚱한 결과가 보이던 경쟁 상태(race condition)를 해결하였습니다.
• 새 입력이 들어오면 진행 중이던 이전 요청을 즉시 취소(AbortController)하고, 응답을 화면에 반영하기 직전 '가장 최근 요청의 응답이 맞는지' 확인해 오래된 응답은 버리도록 하였습니다.
• 입력이 멈춘 뒤에만 요청을 보내도록(디바운스) 호출량을 줄이고, 요청 취소 시 로딩 표시가 잘못 남던 부분까지 함께 정리하였습니다.

SSR에서 API 호출 개선

• 화면이 다 그려진 뒤 브라우저에서 데이터를 불러오던 방식을, 서버에서 화면을 만들 때 미리 데이터를 받아오도록(서버 사이드 렌더링) 바꿨습니다.
• 서버에서 준비한 데이터를 화면이 그대로 이어받게 하여, 처음에 빈 화면이 보였다가 데이터가 채워지며 생기던 깜빡임을 없앴습니다.

협업 경험

기술 스택 전환 제안 (google-protobuf → ts-proto)

• 이슈
  • proto의 oneof 필드가 TypeScript 컴파일 시 기본값("", 0, false)이 필수값으로 변환되어, undefined로 보내야 할 값까지 기본값이 전송되며 백엔드 필터링이 오작동하는 문제를 직접 발견하였습니다.
• 원인 분석
  • 기존 google-protobuf + grpc-web 구조가 Binary → Message → Object 변환을 거치며, 이 과정에서 convertor 보일러플레이트와 클라이언트 객체의 optional/required 불일치가 발생해 API 하나당 코드량이 과도하게 늘어난다는 점을 근본 원인으로 분석하였습니다.
• 해결 방안
  • 변환 단계를 Binary → Object로 단축해 convertor를 제거하는 ts-proto 컴파일러로의 전환을 팀에 제안하고, 빌드 도구도 buf로 전환해 GitHub Action의 python3·node_modules 셋업을 제거하는 방향을 함께 제시하였습니다. 써드파티 의존·직렬화 속도 차이·별도 stub 구현 등 트레이드오프까지 PR·빌드 결과 비교 자료와 함께 정리해 의사결정을 도왔습니다.
• 성과
  • oneof가 Union 타입으로 매핑되어 타입 안정성을 확보하고, convertor·gen 함수 등 API 호출당 반복 코드를 제거해 API당 코드량을 약 54% 줄이고 빌드 의존성을 단순화하였습니다.