Fullstack
Primary focus
96.08.05
Born
부산
Address
INTRODUCE
풀스택 개발자로 기획 참여부터 배포·운영까지 전 과정을 담당하며, Frontend(Next.js + React + TypeScript) 중심으로 Backend, Desktop App을 함께 경험하고 있습니다. 기획자와 요구사항을 조율하고 Figma 화면 설계부터 반응형 UI 구현까지 협업해 왔으며, Next.js 기반 PWA를 직접 구축하며 Service Worker 등록과 캐시 전략, Push 구독·알림 흐름, 런타임 호환성 이슈(Deno → Node.js 전환) 트러블슈팅까지 경험했습니다. 단순 화면 구현이 아니라 사용자 경험 단위에서 시스템을 설계하는 개발자가 되고자 노력하고 있습니다.
"어떻게 만들 것인가"보다 "왜 이 기술을 선택했는가"를 먼저 검증하는 습관을 갖추고 있으며, 기술적 의사결정 과정을 Notion과 블로그에 문서화합니다. 디자이너·기획자와의 적극적 소통을 통해 화면 단위가 아닌 사용자 경험 단위로 협업하는 개발자가 되고자 합니다.
Latest Updated 2026. 06. 22 (D+0)
Chan
Trade-off Driven Decision
복수 옵션을 비교·분석하고 판단 근거를 문서화하는 기술 의사결정 습관
ArchitectureDocumentationDecision Log
Cross-Functional Collaboration
기획자·디자이너와 Figma 화면 설계부터 협업, CS·운영 응대로 비즈니스 컨텍스트까지 이해
CommunicationFigmaProduct Sense
Web Performance Engineering
JS 번들 64% 감소, LCP 개선 등 측정 기반 프론트엔드 성능 최적화 경험
LCPBundle OptimizationLighthouse
EXPERIENCE
2025. 10 ~ 2026. 06
(주)씨이오포털 (CEO Portal)
프론트엔드 개발자 (풀스택 경험)
- Operations Automation Tool에서 1인 개발 체제로 기획 참여, 설계, 구현, 배포, 운영 전 과정 담당
- 기획자와 요구사항 정의 및 Figma 화면 설계 협업
- Frontend / Backend / Infrastructure / Desktop App 전 영역 개발
- 사내 운영팀/마케팅팀 Admin Tool(어드민 도구) 풀스택 개발
- 서비스 안정성 강화를 위한 Refactoring(리팩토링): Responsive UI(반응형 UI), CORS(Cross-Origin Resource Sharing), Data Pipeline(데이터 파이프라인)
- Skill KeywordsNext.jsReactNestJSElectronTypeScriptTypeORMPostgreSQL
PROJECT
2026. 04 ~
(주)씨이오포털 오늘톡톡 UI 리팩토링
오늘톡톡 / 프론트엔드 개발자- Responsive Sidebar Flickering Issue(반응형 사이드바 깜빡임 현상)를 CSS/JS viewport 측정 차이로 진단하고, media query 감지 로직을 window.matchMedia 기반 custom hook으로 전환
2026. 04 ~ 2026. 04
(주)씨이오포털 마케팅 리포트 자동 생성 도구
AI Report Automation Tool / 풀스택 개발자- 마케팅팀이 수기 작성하던 병원 대상 마케팅 리포트를 Anthropic Claude 기반 AI 자동 생성 구조로 전환: 일 100장 리포트 생성 가능한 파이프라인 구축
- 공공데이터포털 API 기반 이메일 추출 도구를 Python으로 별도 구축, 전국 약 2,000건 병원 이메일 데이터셋 확보 → 마케팅팀 outbound 캠페인에 약 50:1 회신율 기여
- Next.js 16 App Router Route Handler에 PDF 생성 파이프라인 직접 구현
2025. 11 ~ 2026. 02
(주)씨이오포털 운영팀 업무 자동화 도구
Operations Automation Tool / 풀스택 개발자- 운영자가 수동 처리하던 다채널 계정 데이터 통합 업무를 Electron Desktop App으로 자동화: 처리 대상 8만 건에서 20만 건으로 확장, 수동 작업 1인 분량 대체
- PostgreSQL Indexing Strategy(인덱싱 전략) 수립: 사용자별/카테고리별 활성 계정 필터링과 최신순 정렬 쿼리에 맞춘 Composite Index(username, category_id, is_active, created_at) 설계
- Data Collection Pipeline(데이터 수집 파이프라인)을 Step-based Structure(단계 기반 구조)로 리팩토링하고 Checkpoint Resume(체크포인트 재개), File Streaming(파일 스트리밍), Cron Scheduler(스케줄러), Deduplication(중복 제거), Category Auto-classification(카테고리 자동 분류) 적용
SKILL
Languages
- TypeScript
- JavaScript
- HTML/CSS
Frameworks & Libraries
- Next.js
- React
- NestJS
- Spring Boot
- Electron
- Tailwind CSS
Infrastructure & Databases
- AWS
- Vercel
- Supabase
- Docker
- PostgreSQL
- MySQL
Tools & IDEs
- VS Code
- IntelliJ IDEA
- Git
- GitHub
- Jira
- Confluence
EDUCATION & TRAINING
2025. 06 ~ 2025. 08
패스트캠퍼스 강남 Kernel360
프론트엔드 심화캠프 4기- RSC와 Client Components의 rendering timing(렌더링 타이밍) 차이 학습
- CSR(Client-Side Rendering) 환경에서 React Query cache mechanism(캐시 메커니즘)을 활용해 API request 최소화 경험
- 개인 코드가 아닌 team codebase(팀 코드베이스) 관점에서 기존 component와 logic을 재사용하는 협업 역량 강화
- Turborepo 기반 monorepo(모노레포)의 cache strategy(캐시 전략)와 parallel build(병렬 빌드) 흐름 이해
- Supabase, Vercel 기반 serverless backend(서버리스 백엔드)와 deployment workflow(배포 워크플로우) 경험
- Skill KeywordsNext.jsReactTypeScriptReact QueryTurborepoSupabaseVercel
2023. 12 ~ 2024. 05
코리아 IT 아카데미
React + Spring Boot + MySQL 풀스택 과정- React Hooks, Context API, Recoil 기반 Functional Component(함수형 컴포넌트) state management(상태 관리) 학습
- Spring Boot 기반 CRUD API, DTO(Data Transfer Object), Entity 설계 및 server-side logic(서버사이드 로직) 구현
- MySQL schema design(스키마 설계), Normalization(정규화), SQL DDL(Data Definition Language)/DML(Data Manipulation Language) 학습
- Skill KeywordsReactSpring BootJavaMySQLRecoilAWS EC2Docker
2023. 02 ~ 2023. 07
그린컴퓨터아카데미
React 프론트엔드 양성과정- HTML/CSS, JavaScript 기본기 및 Git/GitHub collaboration workflow(협업 워크플로우) 학습
- React component model(컴포넌트 모델)과 state management(상태 관리) 원리 학습
- Skill KeywordsHTMLCSSJavaScriptReactGitGitHub