About
Resume
About
Resume
고객 문제를 정의하고, 기술로 해결하고, 제품을 성장시킵니다. 저는 프론트엔드 엔지니어지만 프론트, 백엔드, 기획 경계를 두지 않으려 해요. 필요한 곳이면 어디든 뛰어듭니다. 제품의 성장이 곧 저의 성장이라 생각합니다.
2023.05 - 현재
2024.08 - 현재
Description.
- AWS, Azure, GCP, OCI 4개 CSP 통합 관리 인터페이스를 Next.js로 구축했습니다. CSP별로 지원 리전과 리소스가 상이하여 Zustand 기반 전역 상태로 CSP/리전을 관리하고, HTTP 통신 레이어를 추상화하여 모든 API 요청에 CSP/리전 컨텍스트를 자동 주입하는 구조로 설계해 재사용성과 유지보수성을 확보했습니다.
What did I do.
- Next.js 기반 프론트엔드 아키텍처 설계 및 기술환경 구성
- 4개 CSP SDK 데이터를 통합 처리하는 공통 인터페이스 설계 및 구현
- 대시보드 ,핵심 CSP 서비스 등 등 전반 UI 개발
Tech Stack.
2024.08 - 현재
Description.
- 테스트 코드가 전무한 상태에서 배포 시 예기치 않은 버그가 빈번하게 발생하고, QA 과정에서 반복적인 수동 검증이 필요했습니다. Jest 기반 유닛 테스트 환경을 구축하여 핵심 비즈니스 로직에 대한 테스트 커버리지를 확보하고 테스트 자동화 프로세스를 도입했습니다. 체계적인 테스트 코드 작성으로 버그를 조기에 발견할 수 있게 되었고, 리팩토링 시 안정성이 크게 향상되었으며, CI/CD 파이프라인에 테스트 자동화를 통합하여 배포 전 품질 검증 프로세스를 강화했습니다.
What did I do.
- Jest 기반 유닛 테스트 환경 구축 및 설정 표준화
- 핵심 비즈니스 로직, 유틸리티 함수, 컴포넌트 테스트 코드 작성
- 테스트 커버리지 측정 및 리포팅 체계 수립
- 테스트 코드 작성 가이드라인 및 Best Practice 문서화
- CI/CD 파이프라인에 자동화된 테스트 프로세스 통합
Tech Stack.
2025.08 - 현재
Description.
- 디자이너-개발자 간 컴포넌트 스펙 확인을 위해 매번 로컬 실행 또는 슬랙 캡처 공유가 필요하여 소통 비용이 과다 발생했습니다. Storybook으로 UI 컴포넌트를 체계화하고 재사용 가능한 라이브러리를 구축했으며, S3 정적 호스팅으로 배포하여 디자이너가 실시간으로 컴포넌트를 확인하고 피드백할 수 있는 환경을 제공함으로써 디자인-개발 간 소통 비용을 30% 절감했습니다. 또한 컴포넌트별 독립적인 개발 및 테스트 환경 구성을 통해 개발 속도를 향상시키고 디버깅 시간을 단축했으며, 문서화 기능을 활용하여 컴포넌트 사용법과 Props를 체계적으로 정리함으로써 팀 내 일관된 개발 표준을 확립하고 장기적인 유지보수 효율성을 개선했습니다.
What did I do.
- Storybook으로 재사용 가능한 UI 컴포넌트 라이브러리 체계화
- AWS S3 정적 호스팅으로 실시간 접근 가능한 환경 배포
- GitHub Actions를 활용한 PR 머지 시 자동 배포 파이프라인 구축
- 컴포넌트별 Props 문서화 및 사용 가이드 작성으로 팀 내 개발 표준 확립
Tech Stack.
2025.11 - 현재
Description.
- 매번 새 노션 페이지에 일회성 QA를 기록하다 보니 테스트 이력이 축적되지 않았고, 클라우드별(AWS, Azure, GCP, OCI) 이슈가 뒤섞여 관리가 어려운 문제가 있었습니다. 2-Tier 테스트 전략(회귀 테스트 자동화 + 탐색 테스트)과 통합 이슈 트래킹 시스템을 구축하여 재사용 가능한 테스트케이스 자산을 확립하고, 릴리즈 전 품질 검증 프로세스 도입으로 개발자 간 이슈 공유 및 협업 체계를 마련했습니다.
What did I do.
- 2-Tier 테스트 전략 수립: 회귀 테스트 자동화(Tier 1) + 탐색 테스트(Tier 2) 체계 구축
- 통합 이슈 트래킹: 클라우드별 이슈를 단일 시스템에서 관리
- 릴리즈 검증 프로세스: 배포 전 테스트케이스 기반 품질 검증 단계 도입
Tech Stack.
2025.09 - 2025.09
Description.
- 코드 리뷰 시 린팅 오류, 포맷팅 불일치 등 사소한 이슈로 리뷰 시간이 지연되고, 테스트 미실행 코드가 원격 저장소에 푸시되는 문제가 발생했습니다. pre-commit과 pre-push 단계에서 코드 검증 프로세스를 자동화하여 코드 리뷰에서 스타일 관련 코멘트를 80% 감소시키고, 테스트 실패 코드의 원격 푸시를 원천 차단하여 개발팀의 코드 품질을 향상시키고 일관된 개발 워크플로우를 확립했습니다.
What did I do.
- pre-commit 훅에 ESLint, Prettier를 통한 코드 린팅 및 포맷팅 자동 검증 설정
- pre-push 훅에 Jest 테스트 자동 실행 기능 추가로 버그 코드의 원격 저장소 푸시 방지
- 빌드 프로세스 자동화를 통한 배포 전 코드 검증 파이프라인 구성
Tech Stack.
2025.07 - 2025.07
Description.
- CRUD 페이지 생성 시 매번 동일한 구조의 파일을 수동으로 생성해야 했고, 개발자별 코드 구조 불일치 문제가 발생했습니다. Plop.js 마이크로 제너레이터를 활용하여 템플릿 기반 코드 생성 시스템을 구축함으로써 일관된 코드 구조와 스타일을 유지하면서 새 페이지 생성 시간을 30분에서 3분으로 80% 단축하고, 개발자 간 코드 구조 100% 일관성을 확보했습니다.
What did I do.
- 템플릿 기반 자동 페이지 생성: 목록 페이지(page.tsx)와 생성 페이지(create/page.tsx) 템플릿 구축
- 경로 선택 시스템: Root, AI, Computing, Network 등 경로 옵션을 통한 유연한 페이지 배치
- Mock 데이터 통합: 개발 초기 단계에서 즉시 테스트 가능한 가짜 데이터함수 자동 생성
Tech Stack.
2023.05 - 2024.08
Description.
- 기업 간 데이터 거래를 위한 온라인 마켓플레이스 신규 구축 프로젝트입니다. 프론트엔드 개발자로서 판매자의 데이터 상품 등록부터 구매자의 검색, 결제까지 전체 구매 플로우 UI를 구현했습니다. NestJS 기반 일부 백엔드 API 개발에도 참여하여 풀스택 역량을 확장했습니다.
What did I do.
- 상품 상세 페이지 UI 및 데이터 미리보기 기능 구현
- 기업 인증 프로세스 및 결제 화면 개발
- NestJS 기반 일부 백엔드 API 개발 참여
Tech Stack.
2025.12 - 현재
2025.12 - 현재
Description.
- 인테리어 업체의 도면·견적·일정·공수를 2D/3D 기반으로 통합 관리하는 B2B SaaS 플랫폼입니다. 웹에서 직접 벽/방을 그리고 자재를 적용하면 면적과 견적이 실시간으로 자동 산출되며, React Three Fiber 기반 3D 뷰어로 고객에게 완성 모습을 미리 보여줄 수 있습니다. 프론트엔드/백엔드 아키텍처 설계부터 AWS 인프라 구성까지 전체 개발을 담당하고 있습니다.
What did I do.
- 프론트엔드/백엔드 아키텍처 설계 및 개발 구현
- Canvas API 기반 2D 도면 에디터 구현 (벽/방 그리기, 자재 적용, 면적 자동 계산)
- React Three Fiber 기반 3D 뷰어 구현 (ISO/1인칭/변면 뷰 모드)
- 도면 기반 실시간 자동 견적 산출 시스템 개발
- AWS 인프라 구성 및 GitHub Actions CI/CD 파이프라인 설정
Tech Stack.
2025.10 - 현재
2025.10 - 현재
Description.
- AWS 정적 웹사이트 배포 시 S3 업로드, CloudFront 설정, 캐시 무효화 등 15분 걸리는 반복적인 수동 작업을 TypeScript CLI로 자동화했습니다. 파일 해시 비교를 통한 증분 배포로 배포 시간을 2분으로 87% 단축시켰으며, npm 패키지로 배포 완료하고 GitHub 오픈소스화 하였습니다.
What did I do.
- TypeScript + Commander.js 기반 CLI 도구 설계 및 배포/삭제/상태확인 명령어 구현
- AWS SDK v3를 활용한 S3 버킷 자동 생성 및 파일 업로드 시스템 구축
- CloudFront 배포 자동화 및 캐시 무효화 기능 구현
- 파일 해시 비교를 통한 증분 배포(변경 파일만 업로드)로 배포 시간 87% 단축
- Zod를 활용한 설정 파일 스키마 검증 구현
Tech Stack.
2025.05 - 2025.06
2025.05 - 2025.06
Description.
- LLM 기반 뉴스 편향성 분석 플랫폼. 특정 매체 편향으로 인한 정보 왜곡 문제를 해결하기 위해, Ollama(로컬 LLM)와 키워드 가중치 알고리즘을 결합한 하이브리드 분석 시스템을 설계했습니다. AI가 기사 본문을 분석하여 정치적 성향을 -100~+100 스케일로 자동 분류하고, 사용자가 다양한 관점의 기사를 시각적으로 비교할 수 있는 인터페이스를 구현했습니다.
What did I do.
- Ollama 기반 로컬 LLM 서버 구축 및 뉴스 분석
- AI 응답 파싱 로직 설계 및 편향성 점수 산출 알고리즘 구현
- Next.js 기반 편향성 시각화 UI 컴포넌트 및 기사 비교 인터페이스 구현
Tech Stack.
2023.12 - 2024.01
2023.12 - 2024.01
Description.
- 프론트엔드 2명, 디자이너 1명의 소규모 팀으로 백엔드 개발자 부재 상황에서 크리스마스 시즌 타겟 바이럴 서비스를 2주 내 기획부터 배포까지 완료해야 했습니다. 프론트엔드 개발자로서 백엔드까지 풀스택으로 구현하여 나의 루돌프에게 주변 사람들로부터 양말(편지)을 받는 크리스마스 기념 편지 서비스를 완성했고, 실사용자 300명과 30,000건의 트래픽을 달성하며 첫 풀스택 프로젝트로 백엔드 역량을 확장했습니다.
What did I do.
- Next.js 기반 프론트엔드 전체 UI 구현
- 관계형 데이터베이스 ERD 설계 및 NestJS 서버 구축
- RESTful API 설계 및 구현, Swagger를 활용한 API 명세 문서화
- Nginx 웹서버 구성 및 AWS 인프라 배포
Tech Stack.
마이크로서비스 구조 상 반복되는 API 코드 작성과 휴먼 에러(TCP 패턴 오타 등) 발생 문제를 해결하기 위해 Claude Code 워크플로우를 구축하여 AWS 문서 분석부터 NestJS 코드 생성까지 전 과정을 자동화했습니다. API 개발 시간을 80% 단축하고, 일관된 패턴 적용으로 휴먼 에러를 0건으로 제거했습니다.
디자인 시안을 코드로 옮기는 과정에서 발생하는 반복 작업 및 스타일 불일치 문제를 해결하기 위해 Figma MCP를 활용해 레이아웃, 컴포넌트, 스타일 코드를 자동 추출하는 파이프라인을 구축했습니다. 디자인-개발 간 싱크로율 100% 달성 및 퍼블리싱 소요 시간 80% 절감했습니다.
휘발성 QA 기록으로 인해 클라우드별 이슈 추적이 어렵고 테스트 이력 관리가 미흡한 문제를 해결하기 위해 Agent를 설정하고 Notion MCP를 활용하여 테스트케이스 생성 및 검증 프로세스를 정립했습니다. 체계적인 QA 프로세스 도입으로 릴리즈 안정성 확보 및 신규 이슈 대응 속도를 향상시켰습니다.
수십 개의 페이지로 구성된 서비스 특성상 모든 기능에 대한 E2E 테스트 시나리오를 수동으로 설계하고 구현하는 데 과도한 리소스가 소요되는 문제를 해결하기 위해 페이지 분석을 통한 테스트 명세 도출부터 Playwright 코드 작성, 실행 실패 시 자동 디버깅까지의 전 과정을 수행하는 자동화 파이프라인을 구축했습니다. 반복적인 테스트 작성 업무를 AI 에이전트에 위임하여 테스트 커버리지를 획기적으로 넓히고, 개발자가 복잡한 비즈니스 로직 검증에만 집중할 수 있는 고효율 테스트 환경을 마련했습니다.
단순 프롬프팅만으로는 로컬 LLM의 답변 일관성 확보와 정량적 편향성 수치 산출이 불가능한 문제를 해결하기 위해 프롬프트 엔지니어링 및 JSON 파싱 파이프라인을 구축하여 비정형 응답을 정형 데이터로 구조화했습니다. 뉴스 기사의 편향성 점수와 논리적 근거를 도출하는 AI 저널리즘 분석 엔진을 구현했습니다.
여러 판매처의 파편화된 데이터와 사용자의 복합적인 검색 의도를 단순 키워드 매칭으로는 해결하기 어려운 문제를 해결하기 위해 LangGraph 기반 7단계 에이전트 워크플로우를 설계하여 LLM이 스스로 판단하고 도구를 호출(Tool Use)하도록 구현했습니다. 복잡한 자연어 질문에도 최적의 구매 경로를 제안하는 자율형 검색 에이전트를 구축했습니다.
기획부터 배포까지 전 과정을 1인 개발로 주도하며, AI와 아키텍처 설계 후 비즈니스 로직 및 엣지 케이스는 직접 구현하는 협업 방식을 적용했습니다. 테스트 코드 커버리지 확보 및 고품질 코드 베이스를 유지하며 프로젝트를 완수했습니다.
HTML/CSS
JavaScript & TypeScript
React
Next.js
Backend & Infra
AI
Semantic Markup을 신경쓰며 코드 가독성을 향상시키는 데 노력합니다.
HTML의 구조적 의미를 살려 접근성과 SEO에 도움이 되는 마크업을 지향합니다.
CSS를 최대한 간단하고, 개발자 친화적으로 짤 수 있게 노력합니다.
복잡한 스타일을 단순화하고 재사용 가능한 클래스를 만들어 유지보수성을 높입니다.
다양한 CSS 방식을 사용해보았습니다.
TailwindCSS, Styled Component, CSS Module, CSS in JS 등을 사용해보았습니다.
다양한 UI 라이브러리 사용 경험이 있습니다.
MUI, ANTD, Radix UI, Shadcn UI 등의 다양한 UI 컴포넌트 라이브러리 사용 경험이 있습니다.