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.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.10 - 현재
2025.10 - 2025.11
Description.
- 카카오톡 친구들과 즐기는 크리스마스 시즌 한정 실시간 멀티플레이어 미니게임입니다. 최대 4명이 동시 접속하여 클릭으로 루돌프의 코를 터트리는 경쟁 게임으로, Firebase 무료 티어 내에서 실시간 동기화와 동시성 이슈를 해결하는 것이 핵심 과제였습니다. Transaction 기반 동시 접속 제어로 Race Condition을 해결하고, 카카오톡 공유를 통한 바이럴 확산으로 크리스마스 시즌 동시 접속 최대 50명을 달성했습니다.
What did I do.
- Firebase Realtime Database를 활용한 실시간 멀티플레이어 게임 로직 및 상태 동기화 구현
- Transaction 기반 동시 접속 제어로 Race Condition 해결 및 최대 4명 제한 보장
- Firebase 무료 티어 최적화 전략 수립 (6시간마다 오래된 방 자동 삭제, 90개 연결 시 생성 차단)
- 카카오 로그인 팝업 인증 시스템 구축 및 Firebase Anonymous Auth 연동
- Framer Motion을 활용한 게임 애니메이션 및 인터랙션 구현
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.
매번 새 노션 페이지에 QA를 기록하다 보니 테스트 이력이 쌓이지 않았고, 클라우드별 이슈도 뒤섞여 관리가 안 되는 문제를 해결했습니다. Claude Code에 사내 서비스 특화 Agent, Skill, Command를 설정하여 QA 베스트 프랙티스를 도출하고, Notion MCP 연동으로 테스트케이스 관리 시스템을 구축했습니다. 체계적인 테스트케이스 확립으로 기존 기능 품질을 유지하면서 신규 이슈 대응이 용이해졌고, 릴리즈 전 테스트케이스 검증 프로세스 도입으로 신규 배포 안정성을 확보했습니다.
Claude Code를 활용하여 프로젝트 기획부터 배포까지 End-to-End로 완성했습니다. AI와 아키텍처와 코드 구조를 설계하고, 디테일한 비즈니스 로직과 엣지 케이스 처리는 혼자 구현하는 협업 방식으로 개발 속도와 코드 품질을 동시에 향상시켰습니다. AI 페어 프로그래밍을 통해 테스트 코드 작성까지 전 과정을 효율적으로 진행하였고 Top-Down 형식으로 저 자신에 대한 성장도 이루어내었습니다.
뉴스잽 프로젝트에서 Ollama를 활용한 LLM 뉴스 편향성 분석 시스템을 설계했습니다. -100~+100 스케일의 판단 정확도를 높이기 위해 키워드 가중치 알고리즘과 LLM 판단을 결합한 하이브리드 분석 방식을 적용했습니다. 로컬 LLM의 하드웨어 의존성과 응답 속도 한계를 경험하며, 향후 프로젝트에서는 LLM API를 활용한 빠른 MVP 적용 후 LangChain/LangGraph 기반 고도화 하는 전략을 구상했습니다.
Figma MCP를 Claude Code에 연동해서 피그마 링크만 전달하면 레이아웃 구조, 컴포넌트 계층, 색상/폰트/간격 값을 자동으로 읽어옵니다. 추출된 정보를 기반으로 컴포넌트 코드와 스타일 코드를 바로 생성해서, 디자인을 보고 코드를 작성하는 시간을 80% 줄였습니다. 기존에는 피그마에서 색상 코드를 복사해 코드에 붙여넣는 과정에서 오타가 자주 발생했는데, 이 과정을 자동화하면서 디자인과 실제 구현 간의 불일치를 없앴습니다.
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 컴포넌트 라이브러리 사용 경험이 있습니다.