김태수

Frontend Engineer

스타트업에서 레거시 마이그레이션, 프론트엔드 구조 설계, 운영 최적화, ISMS 인증 등에 기여하며 회사와 개인의 폭발적인 성장을 경험했습니다.

신규 프로젝트 배포를 넘어 안정적인 운영을 위해 Storybook, E2E 시스템을 구축하여 내 코드를 믿고 배포할 수 있는 환경을 마련했습니다. 배포마다 치르던 검증 시간과 불안이 줄었고, 이제는 테스트가 통과하면 프론트엔드는 문제없다고 말할 수 있습니다.

현재는 AX TF에 자원하여 타 부서 워크플로우 진단 및 개선, 조직 업무 툴 전환을 기획, 실행하고 있습니다. 다양한 조직의 업무 방식을 경청하며, 생각의 한계를 넓히고 있습니다.

저는 효율적인 협업을 위해 프론트엔드 기술을 중심으로, 인프라, DB, 타 부서 업무 등 넓은 범위의 지식을 쌓고자 합니다. 환경적으로 넓게 보고 기술적으로 깊게 보는 개발자로 꾸준히 정진하는 것이 제 방향성입니다.

Experience

Allra Fintech

2024.12 ~ 현재

선정산 업계 1위 서비스의 레거시 마이그레이션 및 V2 출시 후 안정화 기여
V2 출시 후 단독 메인테이너 → 2인 팀 → 3인 팀 소규모 인원 리딩 경험
전사 어드민 모노레포 구조 개발 및 올라선정산 어드민 V2 마이그레이션
프론트엔드 영역 ISMS 담당. 프론트엔드 미비점 100% 개선
V2 구조적 결함 발견 및 트랜스포트 계층 리팩터링 의사결정 등을 통해 프로덕트 안정화에 적극적으로 기여

사내 데이터의 AI 가시성 확보를 위한 비정형 업무 데이터 흐름 개선 기획 및 실행
VPC 전용 사내 데이터 MCP를 구축하여 비개발 부서가 데이터를 직접 조회하는 환경 마련
비개발자 대상 AI 교육을 맡아 조직의 전반적인 AI 업무 효율성 개선
AX 환경을 위해 전사적 사내 업무 툴 전환 주도 (기존 채팅툴 → Slack 이관 전환, Google Workspace 도입 준비 등)

MarketTree

2024.05 ~ 2024.08

전통시장 이커머스 플랫폼 개발 및 어드민 시스템 구축

Dable

2023.09 ~ 2024.04

난임정보 커뮤니티 앱 디에이블 웹뷰 구축
디에이블 통합 어드민 시스템 구축

Projects

올라선정산 V2 마이그레이션 및 운영

2024.12 ~ 2026.05

레거시 서비스 마이그레이션 및 안정적인 운영 환경 구축 기여

Vue2
Next.js
TypeScript
tRPC
Playwright
Storybook

- Vue2 프론트엔드 코드가 회사의 성장을 버틸 수 없는 구조적인 한계 봉착
- 기존 레거시 코드를 분석하여 V2 프론트엔드 전면 재개발
- 회원, 계약, 외부 인증, 사이트 관리 관련 도메인 개발 담당
- FSD를 참고한 프론트엔드 아키텍처를 도입하여 도메인 복잡도를 구조적으로 완충
- PDF 서명 모듈, OCR 모듈, 인증 모듈 등 결합도 제거를 위해 주요 기능 모듈화
- 모듈 호출 → [모듈 내 처리] → 콜백 함수 연계로 간단하게 타 도메인에 탈부착 가능한 형태의 모듈 개발
- 컴포넌트 가시성 확보를 위해 Mock 호출 기반 Storybook 시스템 구축
- 프론트엔드 코드 신뢰도 확보를 위해 Playwright 기반 E2E 시스템 구축
- 모든 도메인 상태 Storybook 표현, 주요 도메인 E2E 커버리지
- 테스트 통과를 프론트엔드 이상 없음의 근거로 활용하여 배포 전 검증 부담 완화
- Storybook은 화면 전반을, E2E는 실제 동작 흐름을 보여줘 신규 입사자의 온보딩 자료로 활용
Storybook 도입기(사내 블로그)E2E 테스트 도입기(사내 블로그)
- 출시 직후 SEO 미식별 문제, Mixpanel 이벤트 폭증 문제 등 실제 운영 이슈 해결
- 클라이언트 전용 모듈(뷰어, PDF 등)을 dynamic import로 분리하여 번들 사이즈 개선
- 디자인 요구로 도입된 6.8MB 웹폰트를 실사용 글자만 서브셋팅해 456KB로 축소
- TanStack Query의 select·combine이 인라인 정의로 매 렌더 재실행되던 문제를 식별해 컴포넌트 밖으로 분리, 불필요한 리렌더 제거
폰트 서브셋 직접 만들어 사용하기(개인 블로그)
- 출시 직후 약 1년간 V2 메인테이너로 각종 운영 이슈 처리 및 팀 확장 기여
- 신규 입사자 교육과 브랜치 관리, 코드 리뷰, 이슈 문화 등 팀 문화 안착
- 팀 내 의견 청취, 업무 할당, 아키텍처 변경 의사결정 등 리딩 경험
- 서버 액션을 용도에 맞게 사용하지 않아 발생한 구조적 문제(큐 지연, Version Skew 등) 식별
- Next.js의 서버 액션 문제를 식별하여 통신 레이어 교체 결단
- tRPC 도입을 통해 서버액션 관련 동기 큐, Version Skew 문제 해결
- tRPC 기능과 Storybook, E2E Mocking 시스템을 결합하여 모킹 시스템 단순화
- 프론트엔드 메인테이너로서 ISMS 컨설팅 업체와 프론트엔드 관련 업무 수행
- 프론트엔드 보안 지적사항 100% 해결 및 회사의 ISMS 인증 성공에 기여

올라 어드민 모노레포 구축

2025.03 ~ 2025.06

제안·설계·구축 단독 수행

Turborepo
Next.js
shadcn/ui
Lexical

- 신규 서비스 증가에 따른 프로젝트 중복 세팅 이슈 발생
- 모노레포 도입을 건의하고 아키텍처 기반을 직접 구축
- 어드민 UI 패키지, CSS Style, Lint System 및 CI/CD 환경 구축
- 로그인·로그아웃 공통 레이아웃 포함 템플릿 생성
- 결과적으로 프로젝트마다 하루씩 들던 초기 세팅을 없애고, 신규 서비스가 동일한 구조로 출발하도록 통일
- PHP 어드민 시스템 코드가 유지보수를 견디지 못하는 시점에 도달
- PHP 기능을 각각 REST API, VIEW로 분리
- 구축한 모노레포 아키텍처 기반에 어드민 V2 VIEW 신규 구축
- 확장이 불가능했던 과거 어드민 뷰어를 새롭게 런칭하여 유지보수 가능성 확보
- 마케터 동료들이 에디터에 직접 HTML을 입력하여 공지사항 등 게시글 오염도가 심각했던 현상 식별
- WYSIWYG 기능에 동료들이 애용하던 iframe, 테이블 편집 기능을 포함해 개발하고, HTML 직접 입력은 원천 차단
- 결과적으로 HTML 입력을 통한 보안·유지보수 리스크 제거 및 실사용성 개선

사내 MCP 구축 및 보급

2026.05 ~ 현재

FDE로서 사내 데이터 MCP 설계·구축 및 전사 보급

MCP(stdio ↔ remote)
VPC
Agent

- 팀별 비정형 업무 데이터와 사내 DB를 연결하는 MCP 개발
- 보안상 사내 데이터 MCP는 VPC 환경에서만 동작해야 하는 제약
- remote MCP는 배포가 쉬우나 외부 환경을 경유해 사내 DB 연결 불가
- stdio MCP는 안전하나 배포·유지보수가 까다로운 구조
- stdio MCP가 VPC 내부 remote MCP를 감싸는 프록시 구조를 설계하여 보안과 유지보수성 모두 확보
- 개발 스쿼드와 CX·마케팅 등 비개발 부서가 개발자를 거치지 않고 매일 직접 데이터를 조회해 분석 업무에 활용
- 효과적인 AX 전환을 위해 비개발자 동료 대상 AI 활용 방법 공유
- CX팀은 일일 업무 자동 스케줄링을, 마케팅 팀원은 아웃바운드 대상자 자동 보고 시스템을 직접 만들어 사용
- 구성원이 각자 업무 범위에서 바이브코딩으로 스스로 문제를 해결하도록 보조

사내 보고서 에이전트

2026.05 ~ 현재

정기 리포트 자동화 에이전트 설계 및 개발

Agent
MCP
EKS
Container

- 데이터를 정기적으로 분석하는 체계가 없어 정기 보고 리포트 개발
- 마케팅 데이터·코드 업데이트 현황·사내 정형/비정형 데이터를 에이전트에 제공 후 프롬프트 개발
- EKS 크론 기반 주기 실행으로 직전 기간 대비 지표를 자동 비교하여 정기 분석 체계를 확립

전통시장 이커머스 플랫폼 놀장 런칭

2024.05 ~ 2024.08

외주 인계 코드 인수 후 프론트엔드 재개발 및 런칭 담당

Next.js

- 외주 개발이 종료된 시점에 인계받은 코드가 출시가 불가능한 수준의 결함을 안고 있던 상황
- 결제, 장바구니, 옵션 선택, 상품 목록, 검색, 정렬, 페이지네이션 등 주요 플로우 전 영역 디버깅 및 재개발
- 전역 상태 관리에 Context API를 도입하여 관심사 분리
- 에러 처리 부재를 식별한 후, 유저에게 필요한 에러 처리 전달 기능 확보
- 공유 스프레드시트 기반 사내 Q/A 시스템을 구축하여 이슈와 우선순위를 빠르게 식별할 수 있는 환경 마련
- 전 직원에게 도움을 요청하여 전방위적 자체 Q/A 진행
- Q/A 과정에서 발생한 치명적인 오류 디버깅
- 프론트엔드에서 패스워드를 암호화해 백엔드로 전송하는 취약점 등 식별
- 최소한의 출시 품질을 맞춘 후 기간 내에 프로젝트 배포 완료

디에이블 AI 난임리포트 웹뷰

2023.12 ~ 2024.01

난임정보 커뮤니티 앱의 리포트 웹뷰 단독 개발

Next.js
ApexCharts

- Flutter 앱이 웹뷰를 초기화할 때 쿠키에 토큰을 등록하도록 앱·웹 간 전달 경로 합의
- 웹뷰 최초 진입 시 쿠키의 토큰을 클라이언트 사이드 TokenProvider에 주입
- SSR은 쿠키로, CSR은 Provider로 같은 토큰을 사용하는 구조 확립
- 기획안이 확정되지 않은 상태에서 개발을 시작
- 차트 구간 하이라이팅, 스크롤 강제 이동, 복잡한 형태의 모달 등 통일되지 않은 요구가 쌓이며 코드와 디렉터리 구조 복잡도 상승
- 기획이 안정됐다고 판단한 시점에 중복 기능을 응집하고 디렉터리를 정리하는 리팩터링을 개발과 병행