지도현
Frontend Engineer | AX Engineer
01프로젝트
NOD — 지식 자산화 서비스
AI 기반 SaaS · 2026.01 — 2026.02기술 아티클을 저장하면 AI가 요약·벡터 임베딩을 생성하고, 유사한 글을 브라우징할 때 관련 지식을 자동으로 추천하는 크롬 확장 + 웹앱 서비스. Next.js 16 풀스택 웹, Chrome Extension, FastAPI 백엔드, Terraform IaC까지 1인 풀사이클 개발.
- —Next.js 16 + React 19 풀스택 웹앱: App Router [locale] 동적 세그먼트 + generateStaticParams로 다국어 SSG, Turbopack 개발 서버 적용
- —자체 물리 엔진 지식 그래프: Cytoscape.js + 순수 TS force-directed 물리 엔진 직접 구현 (d3-force 미사용), rAF 기반 물리 루프, 드래그 시 k-hop 이웃 영향 전파
- —PWA 오프라인 지원: Serwist 기반 Service Worker — navigation preload, precaching, 오프라인 fallback, standalone 모드 홈 화면 설치
- —타입 안전 데이터 파이프라인: Orval로 FastAPI OpenAPI 스키마 → TanStack Query 클라이언트 자동 생성, nuqs로 URL 파라미터 타입 안전 관리 → 딥링크/공유 가능
- —OKLCH 디자인 토큰 파이프라인: OKLCH 색공간 → P3 wide-gamut CSS 커스텀 프로퍼티 빌드, 다크/라이트 테마 자동 전환 (MutationObserver)
- —다국어 시스템: next-intl 기반 한/영/일 3개국어 + 로케일별 날짜·숫자 포맷 자동 적용, Chrome Extension은 제로 의존성 순수 TS i18n
- —6종 콘텐츠 다형성 UI: GitHub · 논문 · 공식문서 · 테크블로그 · 영상/팟캐스트 · 뉴스별 전용 메타데이터 렌더러
- —SEO 인프라: 프로그래밍 방식 sitemap.ts · robots.ts · Open Graph 메타데이터, SEO 타겟 블로그 콘텐츠 6편
Chrome Extension
- —Manifest V3 3분리 아키텍처: Content Script / Background Service Worker / React Popup 분리, Vite 빌드 타겟 분리
- —다중 전략 콘텐츠 추출기: Mozilla Readability → 시맨틱 HTML 휴리스틱 → GitHub 전용 → PDF passthrough, 네이버 블로그 iframe 관통 처리
- —Cross-Origin 인증: externally_connectable로 웹앱 → 익스텐션 토큰 전달, 인증 상태 뱃지 실시간 표시
AI · Backend · Infra
- —멀티 프로바이더 AI 추상화: AIProvider<T> 제네릭 ABC → Gemini/OpenAI 구현체, Factory 패턴 + 런타임 폴백 체인 (주 프로바이더 실패 시 자동 전환)
- —콘텐츠 타입 인식 에이전트: 60+ 도메인 URL 패턴 분류기, BaseSummaryAgent Strategy 패턴 + 자동 등록 데코레이터 — 새 타입 추가 시 파일 1개만 추가
- —pgvector 시맨틱 검색: 768차원 벡터 임베딩, IVFFlat 코사인 유사도 인덱스 (100 lists), cosine distance 0.3 threshold → 텍스트 검색 폴백
- —컨셉 그래프 파이프라인: NFKC 정규화 → casefold → 한영 기술 용어 매핑 → SequenceMatcher 0.92 퍼지 중복 제거, lateral SQL KNN 간선 계산
- —Terraform IaC (GCP): Cloud Run v2 3-tier + Cloud SQL PostgreSQL 16 (HA, PITR) + Redis Memorystore + Cloud Tasks 이중 큐 + Secret Manager
- —Paddle 결제 연동: stdlib HMAC-SHA256 웹훅 검증, 5분 타임스탬프 리플레이 방어, 통합 크레딧 과금 모델 (Free 20회/월, Pro 무제한)
Frontend
- — 자체 물리 엔진 그래프
- — PWA 오프라인 지원
- — OKLCH 디자인 토큰
- — Orval 타입 자동 생성
Extension
- — Manifest V3 3분리 구조
- — 다중 전략 콘텐츠 추출
- — Cross-Origin 인증
- — 제로 의존성 i18n
AI · Infra
- — 멀티 프로바이더 폴백
- — pgvector 시맨틱 검색
- — Terraform GCP IaC
- — OpenTelemetry 관측성
MOZU — 모의주식 투자 관리 서비스
대전시 진로융합교육원 납품 · 소프트웨이브 2025 전시 · 팀장모의주식 투자 관리 서비스. 기관 요구사항 문서화부터 FSD 아키텍처 설계, 모노레포 환경 구축, 실시간 통신까지 프론트엔드 전체를 리드.
- —FSD 아키텍처 도입: Admin 패키지에 Feature-Sliced Design 적용, 200+ 컴포넌트를 entities · features · shared 기반으로 재구성해 모듈 간 의존성 명확화
- —모노레포 환경 구축: Yarn Workspaces 기반 모노레포 최적화 및 package.json 스크립트 통합으로 개발 생산성 향상
- —Biome 코드 스타일 통합: ESLint + Prettier 대체, 코드베이스 간 코드 스타일 일관성 확보
- —Vite 빌드 최적화: 환경 설정 및 빌드 파이프라인 최적화를 통해 빌드 속도 40% 단축
- —Lighthouse CI 통합: CI/CD 파이프라인에 Lighthouse CI를 연동하여 Pull Request마다 웹 성능 리포트 자동 생성
Frontend 구현
- —Zod + React Hook Form: 폼 검증 로직 타입 안전성 강화 및 런타임 오류 90% 감소
- —Optimistic Update 패턴: Custom Hook 기반 Optimistic Update 적용으로 실시간 사용자 경험 향상
- —SSE 실시간 통신: Server-Sent Events 연결 상태 시각화 및 자동 재연결 로직으로 안정적인 실시간 통신 구현
- —폼 UX 리팩토링: Article 관리 페이지의 검증 및 에러 처리 로직 리팩토링으로 폼 UX 개선
- —반응형 UI · 접근성: 반응형 UI 및 접근성 개선, 요구사항에 따른 유동적 UI 퍼블리싱
- —온프레미스 네트워크 대응: Local IPv4 자동 감지 기능 구현으로 온프레미스 환경 네트워크 연결 안정성 확보
프로젝트 관리
- —도메인 구체화: 기관 요구사항 문서화를 통한 도메인 정의 및 구체화
- —Jira Issue Tracker: Jira 자동화 기반 Issue Tracker 시스템 설계·구축으로 이슈 관리 효율화
- —Git Workflow: 팀 내 공통 Git 컨벤션 정의 및 워크플로우 세팅
02기술 스택
03학력
| School | Major | Period | Note |
| 대덕소프트웨어마이스터고등학교 | 인공지능 소프트웨어과 | 2024.03 — 2027.02 | 2027년 졸업 예정 |
04활동스터디 · 동아리 · 오픈소스
'대동여지도'라는 교내 동아리관리 서비스를 운영하는 동아리에서 프론트엔드 엔지니어로 기여함.
1~2학년을 대상으로 타입스크립트 스터디를 개설하여 스터디장으로서 팀원과 함께 스터디를 진행함.
'모주' 프로젝트를 서울 코엑스에서 열리는 소프트웨이브 2025에 전시함.
'모주'라는 서비스를 대전시의 진로융합교육원에 납품하여 운영함.
중국의 국제학교 학생들과의 프로덕트 빌드 멘토링
05수상
06소개
Who I Am
저는 대덕소프트웨어마이스터고 2학년으로, 프론트엔드 엔지니어로 개발을 시작했습니다.
React로 사용자에게 보이는 화면을 빠르게 만들고, 컴포넌트를 설계하고, 상태 관리와 UX 흐름을 다듬는 일을 반복해왔습니다.
이 경험 덕분에 "고객이 눈으로 확인할 수 있는 형태"로 아이디어를 빠르게 구현하고 검증하는 데 강점이 있습니다.
최근에는 Claude Code 같은 AI 개발 도구를 적극적으로 사용하면서, 프론트엔드 엔지니어로서 더 빠르고 정확하게 사용자 경험을 만드는 방법을 고민하고 있습니다. AI는 저에게 "대체 위협"이 아니라, 더 나은 UI를 더 빨리 설계하고 구현하기 위한 레버리지입니다.
제가 지향하는 프론트엔드 엔지니어는 단순히 화면을 그리는 사람이 아니라, 컴포넌트 아키텍처를 설계하고, 상태 관리 전략을 수립하며, 성능을 측정·개선하고, 사용자 경험의 품질을 끝까지 책임지는 엔지니어입니다.
특히 관심 있는 분야는 (1) 재사용 가능한 컴포넌트 시스템 설계, (2) 웹 성능 최적화와 Core Web Vitals 개선, (3) 디자인 시스템 구축과 DX(개발자 경험) 향상입니다.
경력은 부족하지만, 저는 "완벽을 고민하다 멈추기"보다 일단 만들고, 돌리고, 측정하고, 고치는 방식으로 성장해왔습니다. 빠르게 실행하고, 실패를 기록하며, 다음 실험의 정확도를 올리는 사람이 되고자 합니다. 결국 제가 추구하는 가치는 하나입니다.
사용자에게 가장 가까운 곳에서, 기술적으로 어려운 문제를 끝까지 파고들어 최고의 경험을 만드는 프론트엔드 엔지니어가 되는 것입니다.
What I Build
저는 학교와 개인 프로젝트를 통해 "기능을 구현하는 개발"에서 시작해, 점점 "문제를 정의하고 해결하는 개발"로 관점을 옮겨왔습니다.
처음에는 React 기반으로 화면을 만들고, 컴포넌트를 나누고, 상태를 관리하며 사용자가 불편함 없이 흐름을 따라갈 수 있도록 UX를 다듬는 데 집중했습니다. 이 과정에서 단순히 화면을 예쁘게 만드는 것을 넘어, 사용자 행동 흐름을 기준으로 컴포넌트 책임을 나누고, 상태를 어디에 둘지(로컬/전역/서버) 결정하는 사고를 익혔습니다.
프로젝트를 진행하며 자주 마주친 문제는 "기능은 돌아가지만 운영이 어렵다"는 지점이었습니다. 예를 들어 데이터가 조금만 복잡해져도 화면 상태가 꼬이거나, 비동기 요청이 늘어나면서 로딩/에러 처리의 일관성이 깨지고, 팀 협업에서 기능 추가가 곧 코드 복잡도로 이어지는 경험을 했습니다.
그래서 저는 기능 구현 이후 단계에 더 시간을 쓰기 시작했습니다. 에러 케이스를 먼저 정의하고, 로딩/실패/재시도 흐름을 표준화하고, 컴포넌트를 재사용 가능한 단위로 정리하는 방식으로 "확장 가능한 형태"를 만들기 위해 노력했습니다.
최근에는 AI 도구를 활용해 개발 속도를 끌어올리되, 그 결과를 그대로 수용하는 것이 아니라 구조와 안정성을 스스로 책임지는 방향으로 성장하고 있습니다. Supabase 기반 백엔드를 연결해 실제로 데이터가 흐르는 구조를 구성해보며, 프론트엔드 엔지니어로서 API 연동부터 배포까지 전체 흐름을 이해하는 경험을 쌓았습니다.
이 과정에서 특히 크게 느낀 점은, AI가 코드를 빠르게 생산해도 "컴포넌트 설계, 상태 관리 전략, 성능 최적화, 접근성"은 결국 엔지니어가 책임져야 한다는 것입니다. 그래서 저는 "잘 돌아가는 것"을 넘어 "왜 돌아가는지, 어디서 깨질 수 있는지"를 이해하려고 합니다.
기술적으로는 (1) 사용자 경험 중심의 UI 설계 및 상태 관리, (2) API 연동과 비동기 흐름 설계, (3) 데이터 모델을 고려한 화면 구조화, (4) E2E 테스트와 CI/CD 파이프라인 구축을 반복하며 성장해왔습니다.
앞으로는 여기에 웹 성능 최적화, 디자인 시스템 설계, 접근성 개선 역량을 더해 프론트엔드 엔지니어로서 "사용자 경험의 품질을 끝까지 책임지는 능력"을 강화하고자 합니다.
Goals
앞으로 저는 "cracked engineer"를 목표로 성장하고자 합니다. 제가 생각하는 cracked engineer는 AI 도구를 잘 쓰는 사람을 넘어, AI를 레버리지로 삼아 한 사람이 작은 팀 수준의 속도와 품질을 만들어내는 엔지니어입니다.
단순히 코드를 빠르게 생성하는 데서 끝나는 것이 아니라, 문제를 정의하고 요구사항을 구조화하며, 설계·구현·검증·운영까지 책임질 수 있는 역량을 갖추는 것을 의미합니다. 이를 위해 저는 프론트엔드 엔지니어로서의 전문성을 깊이 있게 쌓고 싶습니다.
사용자의 실제 행동 패턴과 니즈를 빠르게 파악하고, 최적의 인터페이스를 설계·구현하는 능력을 강화할 계획입니다.
특히 관심 있는 분야는 (1) 대규모 프론트엔드 아키텍처 설계와 디자인 시스템 구축, (2) 웹 성능 최적화와 Core Web Vitals 기반 반복 개선, (3) 접근성(a11y) 확보와 사용자 중심 UX 설계입니다.
AI가 만든 결과물이라도 결국 서비스 품질은 사람이 책임져야 한다고 믿기 때문에, "돌아가는 것"을 넘어 "왜 돌아가는지, 어디서 깨지는지"를 이해하는 엔지니어가 되고자 합니다. 제가 만들고 싶은 임팩트는 명확합니다.
사용자가 매일 쓰는 인터페이스의 품질을 높이고, 개발 팀의 생산성을 끌어올리며, 작은 인원으로도 더 큰 성과를 낼 수 있게 만드는 것입니다. 단기적으로는 견고한 컴포넌트 설계와 테스트 역량을 갖추고, 중장기적으로는 복잡한 프로덕트에서도 일관된 사용자 경험을 유지하는 프론트엔드 아키텍처를 설계·개선하며,
AI를 활용해 실질적인 생산성 향상을 만드는 프론트엔드 엔지니어로 성장하겠습니다.