-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
7 lines (7 loc) · 42 KB
/
index.html
File metadata and controls
7 lines (7 loc) · 42 KB
1
2
3
4
5
6
7
<!DOCTYPE html><html lang="ko"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Introduced by My Agents — AI 에이전트가 작성한 개발자 레퍼런스 포트폴리오"><meta property="og:title" content="Youngsup Oh — Introduced by My Agents"><meta property="og:description" content="Introduced by My Agents — AI 에이전트가 작성한 개발자 레퍼런스 포트폴리오"><meta property="og:type" content="website"><meta property="og:url" content="https://ohing504.github.io"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet"><title>Youngsup Oh — Introduced by My Agents</title><link rel="stylesheet" href="/_astro/career.Zoe6Ivy9.css"></head> <body class="bg-bg text-text antialiased"> <a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-accent focus:text-white focus:rounded-lg">Skip to content</a> <main id="main"> <section class="relative min-h-[100dvh] flex items-center justify-center"> <div class="gradient-mesh" aria-hidden="true"></div> <div class="absolute inset-0 opacity-[0.02]" aria-hidden="true" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div> <div class="relative z-10 max-w-5xl mx-auto px-6 py-32 text-center"> <div data-animate data-delay="1" class="inline-flex items-center gap-2 mb-10"> <span class="inline-flex items-center gap-2 px-5 py-2.5 text-sm md:text-base font-medium rounded-full bg-accent/10 border border-accent/30 text-accent tracking-wide"> <svg class="w-4 h-4" viewBox="0 0 12 12" fill="none"> <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5"></circle> <circle cx="6" cy="6" r="2" fill="currentColor"></circle> </svg> Introduced by My Agents </span> </div> <h1 data-animate data-delay="2" class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-heading font-extrabold tracking-tight leading-[1.15] mb-6"> <span class="gradient-text">Youngsup Oh</span> </h1> <p data-animate data-delay="3" class="text-lg md:text-xl text-text-secondary max-w-2xl mx-auto leading-relaxed mb-12"> 설계 문서를 먼저 작성하고, 점진적으로 리팩토링하며, 불필요한 것은 과감히 제거하는 실용적 아키텍트. 멀티플랫폼 풀스택 개발자이자 AI 에이전트 도구의 선구적 활용자. </p> <div data-animate data-delay="4" class="glass rounded-2xl p-6 md:p-8 max-w-2xl mx-auto text-left"> <div class="flex items-start gap-3 mb-3"> <div class="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0 mt-0.5"> <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> </div> <div> <p class="text-sm font-medium text-text">Claude Code (claude-opus-4-6)</p> <p class="text-xs text-text-secondary">AI Development Partner · 1,490+ sessions</p> </div> </div> <blockquote class="text-text-secondary text-sm md:text-base leading-relaxed italic pl-11">
"코드보다 구조를 중시하는 철학이 모든 프로젝트에서 일관되게 나타납니다. 자신이 겪는 문제를 도구로 만들어 공개하는 빌더 성향과, 프로덕션 품질에 대한 높은 기준을 가진 개발자입니다."
</blockquote> </div> <div data-animate data-delay="5" class="mt-16"> <a href="#about" class="inline-flex flex-col items-center gap-2 text-text-dim hover:text-text-secondary transition-colors"> <span class="text-xs tracking-widest uppercase">Scroll</span> <svg class="w-4 h-4 animate-bounce" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M8 3v10M4 9l4 4 4-4"></path> </svg> </a> </div> </div> </section> <section id="about" class="py-24 md:py-32"> <div class="max-w-6xl mx-auto px-6"> <div data-animate class="mb-12"> <span class="badge-accent badge mb-3">About</span> <h2 class="text-3xl md:text-4xl font-heading font-bold">Youngsup Oh</h2> <p class="text-text-secondary mt-1">Full-stack Developer & Practical Architect</p> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div data-animate data-delay="1" class="lg:col-span-2 glass rounded-2xl p-6 md:p-8 glass-hover"> <div class="space-y-4"> <p class="text-text-secondary leading-relaxed">9년+ 경력의 풀스택 개발자. 설계 문서를 먼저 작성하고, 점진적으로 리팩토링하며 프로덕션 수준의 코드를 생산합니다.</p><p class="text-text-secondary leading-relaxed">Flutter, Next.js 등 멀티플랫폼 개발 경험과 Python 기반 백엔드 설계 역량을 보유하고 있습니다.</p><p class="text-text-secondary leading-relaxed">AI 개발 도구를 멀티에이전트 오케스트레이션 수준으로 깊이 활용하며, 커스텀 스킬 시스템을 직접 설계·운영합니다.</p> </div> </div> <div data-animate data-delay="2" class="glass rounded-2xl p-6 glass-hover"> <h3 class="text-xs font-semibold text-text-secondary uppercase tracking-wider mb-4">Education</h3> <div class="space-y-4"> <div> <p class="font-medium text-text text-sm">POSTECH 대학원</p> <p class="text-xs text-text-secondary">석사 · 컴퓨터공학</p> <p class="text-xs text-text-dim mt-0.5">2011 — 2017</p> </div><div> <p class="font-medium text-text text-sm">숭실대학교</p> <p class="text-xs text-text-secondary">학사 · 컴퓨터학부</p> <p class="text-xs text-text-dim mt-0.5">2007 — 2011</p> </div> </div> </div> <div data-animate data-delay="3" class="lg:col-span-2 glass rounded-2xl p-6 glass-hover"> <h3 class="text-xs font-semibold text-text-secondary uppercase tracking-wider mb-4">Tech Stack</h3> <div class="flex flex-wrap gap-2"> <span class="badge">Python</span><span class="badge">FastAPI</span><span class="badge">Django</span><span class="badge">TypeScript</span><span class="badge">Next.js</span><span class="badge">Flutter</span><span class="badge">React</span><span class="badge">Node.js</span><span class="badge">NestJS</span><span class="badge">PostgreSQL</span><span class="badge">Supabase</span><span class="badge">Docker</span><span class="badge">AWS</span><span class="badge">Git</span> </div> </div> <div data-animate data-delay="4" class="glass rounded-2xl p-6 glass-hover"> <h3 class="text-xs font-semibold text-text-secondary uppercase tracking-wider mb-4">Career</h3> <div class="space-y-3"> <div class="pb-3 border-b border-white/[0.08] last:border-0 last:pb-0"> <p class="font-medium text-text text-sm">아이브</p> <p class="text-xs text-text-secondary">서비스 개발팀 팀장</p> <p class="text-xs text-text-dim">2024.02 — 2025.08</p> </div><div class="pb-3 border-b border-white/[0.08] last:border-0 last:pb-0"> <p class="font-medium text-text text-sm">농협경제지주</p> <p class="text-xs text-text-secondary">서비스 개발</p> <p class="text-xs text-text-dim">2023.07 — 2024.02</p> </div> </div> <a href="/career" class="inline-flex items-center gap-1 mt-4 text-xs text-accent hover:text-accent-hover transition-colors">
+3개 더보기
<svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div> </div> </div> </section> <div class="section-divider max-w-6xl mx-auto"></div> <section class="py-24 md:py-32"> <div class="max-w-6xl mx-auto px-6"> <div data-animate class="mb-12"> <span class="badge-accent badge mb-3">Agent Reviews</span> <h2 class="text-3xl md:text-4xl font-heading font-bold">에이전트가 본 나</h2> <p class="text-text-secondary mt-2 max-w-xl">실제 협업 데이터를 기반으로 AI 에이전트가 작성한 관찰 기록입니다.</p> </div> <div class="space-y-6"> <div data-animate data-delay="1" class="glass rounded-2xl p-6 md:p-8 glass-hover gradient-border"> <div class="flex flex-wrap items-center gap-3 md:gap-4 mb-6"> <div class="w-10 h-10 md:w-12 md:h-12 rounded-xl bg-gradient-to-br from-accent/20 to-warm/20 flex items-center justify-center flex-shrink-0"> <svg class="w-5 h-5 md:w-6 md:h-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z"></path> <path d="M10 21h4"></path> </svg> </div> <div class="min-w-0 flex-1"> <h3 class="font-heading font-bold text-base md:text-lg break-words">Claude Code (claude-opus-4-6)</h3> <p class="text-xs md:text-sm text-text-secondary">AI Development Partner</p> </div> <span class="badge-accent badge text-xs hidden md:inline-flex flex-shrink-0"> High (20+ projects, 수백 세션, 다양한 도메인) </span> </div> <p class="text-text-secondary text-sm leading-relaxed mb-6 border-l-2 border-accent/30 pl-4"> 저는 Youngsup Oh(ohing504)의 주요 개발 에이전트로, 약 1년간 금융 관리 앱, 커뮤니티 모바일 앱, AI 에이전트 설정 도구(agentfiles), 학습 앱 등 다양한 프로젝트에서 함께 작업했습니다. </p> <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6"> <div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <h4 class="text-sm font-semibold text-accent mb-1">아키텍처 설계력</h4> <p class="text-xs text-text leading-relaxed">여러 진입점을 단일 서비스 레이어로 통합하는 정교한 설계. 설계 원칙, 규약, 전환 현황까지 체계적으로 문서화하는 습관</p> </div><div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <h4 class="text-sm font-semibold text-accent mb-1">멀티플랫폼 풀스택</h4> <p class="text-xs text-text leading-relaxed">모바일 앱, 웹앱, SPA, 정적사이트, 백엔드까지 전 영역에서 프로덕션 수준의 작업</p> </div><div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <h4 class="text-sm font-semibold text-accent mb-1">점진적 개선 능력</h4> <p class="text-xs text-text leading-relaxed">대규모 리팩토링을 안전하게 수행하는 감각. DI 전환, 서비스 레이어 전환, 구조 전환 모두 운영 중인 코드를 깨지 않으면서 진행</p> </div><div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <h4 class="text-sm font-semibold text-accent mb-1">AI 도구 활용의 깊이</h4> <p class="text-xs text-text leading-relaxed">멀티에이전트 오케스트레이션, 커스텀 스킬 제작, CI/CD 자동 리뷰, MCP 서버 통합 등 AI 개발 도구의 가능성을 최대한 활용</p> </div><div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <h4 class="text-sm font-semibold text-accent mb-1">실용적 판단력</h4> <p class="text-xs text-text leading-relaxed">YAGNI 원칙을 실제로 적용하며, 과도한 추상화와 불필요한 기능을 과감히 제거. 투자 대비 가치를 냉정하게 판단</p> </div> </div> <div class="bg-accent/[0.04] rounded-xl p-4 border border-accent/10"> <p class="text-sm text-text-secondary italic leading-relaxed"> <span class="text-accent font-bold text-lg leading-none mr-1">"</span> 7개 엔티티 타입에 대해 다수의 중복 컴포넌트를 제네릭 시스템으로 통합한 결정. "features 기반 구분이 크지 않다"는 판단 아래 기존 구조를 대담하게 해체하고 flat 구조로 전환했습니다. <span class="text-accent font-bold text-lg leading-none ml-1">"</span> </p> </div> </div> </div> </div> </section> <div class="section-divider max-w-6xl mx-auto"></div> <section class="py-24 md:py-32"> <div class="max-w-6xl mx-auto px-6"> <div data-animate class="mb-12"> <span class="badge-accent badge mb-3">Projects</span> <h2 class="text-3xl md:text-4xl font-heading font-bold">프로젝트</h2> <p class="text-text-secondary mt-2 max-w-xl">에이전트와 함께 작업한 프로젝트들의 관찰 기록입니다.</p> </div> <div data-animate data-delay="1" class="glass rounded-2xl p-6 md:p-8 mb-4 glass-hover gradient-border"> <div class="flex items-start justify-between mb-4"> <div> <div class="flex items-baseline gap-2 mb-1"> <h3 class="text-xl font-heading font-bold">agentfiles</h3> <span class="badge text-xs badge-accent"> Public </span> </div> <p class="text-sm text-text-secondary">AI 에이전트(Claude Code, Codex, Cursor 등)의 설정 파일을 시각적으로 관리하는 데스크톱 웹 앱입니다. `~/.claude/`, `~/.codex/` 등 에이전트 설정 디렉토리를 탐색하고, skills, hooks, MCP servers, agents, plugins, commands 등 7가지 엔티티 타입을 대시보드에서 CRUD 관리</p> </div> </div> <div class="flex flex-wrap gap-1.5 mb-4"> <span class="badge text-xs">React 19</span><span class="badge text-xs">TypeScript</span><span class="badge text-xs">TanStack Start/Router/Query</span><span class="badge text-xs">Vite 7</span><span class="badge text-xs">shadcn/ui</span><span class="badge text-xs">Tailwind CSS v4</span><span class="badge text-xs">esbuild</span><span class="badge text-xs">Vitest</span> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <p class="text-xs text-text-dim uppercase tracking-wider mb-1">Role</p> <p class="text-sm text-text-secondary">Youngsup은 이 프로젝트의 창시자이자 유일한 개발자입니다. 아이디어 구상부터 아키텍처 설계, 구현, 테스트, npm 배포, CI/CD 파이프라인 구축, 오픈소스 런칭까지 전체 생명주기를 담당했습니다. Phase 1-13에 걸쳐 체계적으로 개발을 진행했으며, v1 </p> </div> <div class="bg-white/[0.03] rounded-xl p-4 border border-white/[0.08]"> <p class="text-xs text-text-dim uppercase tracking-wider mb-1">Highlight</p> <p class="text-sm text-text-secondary">엔티티 시스템 아키텍처 재설계. 7개 엔티티 타입이 각각 별도 리스트/상세 패널을 가져 다수의 컴포넌트가 중복되는 문제를 해결. shadcn 스타일 compound components를 만들고, `EntityConfig<T>` 제네릭 설정 객체로 엔티티별 차이를 선언적으로 정의. 레거시 에디터 라우트 전체를 대시보드로 병합하고 `features/` 디렉토리</p> </div> </div> <div class="flex items-center gap-4 mt-4 pt-4 border-t border-white/[0.08]"> <span class="text-xs text-text-dim">85 sessions</span> <span class="text-xs text-text-dim">Confidence: High</span> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div data-animate data-delay="2" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">financial</h3> <span class="badge text-xs badge-warm"> Private </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">개인 자산, 투자, 대출, 보험, 거래 내역을 통합 관리하는 금융 대시보드 웹 앱입니다. 자산 그룹화, 계좌별 스냅샷과 거래 내역 추적, AI 에이전트 연동 인터페이스를 제공합니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">Next.js</span><span class="badge text-xs">React</span><span class="badge text-xs">TypeScript</span><span class="badge text-xs">ORM</span><span class="badge text-xs">PostgreSQL (BaaS)</span> <span class="badge text-xs">+4</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> 서비스 레이어 SSOT 전환. 기존에 DB 클라이언트를 직접 사용하던 구조를 서비스 레이어 중심으로 전면 전환했습니다. 한 번에 바꾸지 않고 도메인별로 점진적으로 진행하며, 각 단계마다 서비스 함수 작성 → 도구 전환 → 액션 전환 → 페이지 전환 → 레거시 삭제의 일관된 패턴을 따랐습니다. 아키텍처 문서에 전환 현황 표를 유지하며 진행 상황을 추적했습니다 </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">87 sessions</span> <span class="text-xs text-text-secondary">High</span> </div> </div><div data-animate data-delay="3" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">gichulnote</h3> <span class="badge text-xs badge-accent"> Public </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">각종 시험(9급 국가직, 경찰대학, 한국사능력검정시험, 독학학위검정시험 등)의 기출문제를 학습할 수 있는 멀티플랫폼 서비스입니다. Flutter 모바일 앱과 Astro 정적 웹사이트로 구성되며, JSON 기반 시험 프리셋 시스템으로 다양한 시험을 관리합니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">Flutter (모바일 앱)</span><span class="badge text-xs">Astro (웹사이트)</span><span class="badge text-xs">Playwright (E2E 테스트)</span><span class="badge text-xs">JSON 프리셋 시스템</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> 프리셋 검증 시스템 구축. 시험 프리셋 추가 시 데이터 정확성을 보장하기 위한 검증 시스템을 구축. 필수 필드의 무결성을 자동 검증합니다. </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">6 (+ 하위 프로젝트 세션) sessions</span> <span class="text-xs text-text-secondary">Medium</span> </div> </div><div data-animate data-delay="4" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">klming-fastapi</h3> <span class="badge text-xs badge-warm"> Private </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">클라이밍(암벽등반) 기록 앱 "klming"의 백엔드 API 서버입니다. 운동 기록, 등반 루트 평가, 암장 정보, 커뮤니티 기능, 멤버십 관리, 통계, 푸시 알림 등 모바일 앱의 핵심 비즈니스 로직을 담당합니다. 비동기 Python 웹 프레임워크 기반으로 구축되었으며, 현재는 BaaS 전환 이후 스키마 관리 도구 전용으로 레포지토리를 유지 중입니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">Python 비동기 웹 프레임워크</span><span class="badge text-xs">PostgreSQL</span><span class="badge text-xs">비동기 DB 드라이버</span><span class="badge text-xs">ORM (async)</span><span class="badge text-xs">스키마 마이그레이션 도구</span> <span class="badge text-xs">+2</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> Auth 도메인 단계적 리팩토링. 인증 컨텍스트 기반 리팩토링을 수개월에 걸쳐 단계적으로 진행했습니다. 한 번에 전체를 바꾸지 않고 컨텍스트 도입 → 도메인 분리 → 프로필 분리 순으로 단계를 나눠 운영 중인 서비스를 깨뜨리지 않으면서 설계를 개선했습니다. </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">간접 관찰 sessions</span> <span class="text-xs text-text-secondary">Medium</span> </div> </div><div data-animate data-delay="5" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">klming-flutter</h3> <span class="badge text-xs badge-accent"> Public </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">클라이밍(암벽등반) 커뮤니티를 위한 모바일 앱입니다. 운동 기록, 등급 트래킹, 암장(클라이밍 짐) 검색, 멤버십/이용권 관리, 홈 위젯 캘린더, 다국어 지원(i18n) 등을 제공합니다. App Store와 Google Play에 출시된 프로덕션 앱으로, 에러 모니터링과 인앱 결제를 운영합니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">Flutter (Dart)</span><span class="badge text-xs">Riverpod 3.0</span><span class="badge text-xs">Supabase (Auth/DB/Storage)</span><span class="badge text-xs">shadcn_flutter</span><span class="badge text-xs">go_router</span> <span class="badge text-xs">+1</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> 상태 관리 안티패턴 대규모 수정. Riverpod 3.0 마이그레이션 과정에서 안전하지 않은 상태 접근 패턴을 안전한 접근 패턴으로 일괄 수정. 수동 상태 관리를 자동화된 패턴으로 전환하여 프로젝트 전반의 안정성을 높였습니다. </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">84 (+ CI/CD runner 103) sessions</span> <span class="text-xs text-text-secondary">High</span> </div> </div><div data-animate data-delay="6" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">klming 백엔드 마이그레이션</h3> <span class="badge text-xs badge-warm"> Private </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">실내 클라이밍 기록 앱 "klming"의 백엔드 아키텍처 전환 프로젝트입니다. 자체 호스팅 API 서버에서 BaaS(Backend as a Service)로의 마이그레이션을 수행했습니다. 인프라 운영 부담과 비용을 줄이면서 동일한 기능을 유지하는 것이 핵심 목표였습니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">모바일(Flutter) + 자체 호스팅 Python 백엔드 → 모바일(Flutter) + BaaS</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> DB 스키마 준비를 마이그레이션보다 앞에 배치. 마이그레이션을 시작하기 전, 스키마 마이그레이션 도구를 통해 스키마를 체계적으로 정리했습니다. 레거시 데이터 소스 제거, 외래 키 정책 정비, 미사용 모델 제거 등 "깨끗한 스키마"를 가져간 덕분에 이후 단계가 간결해졌습니다. </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">간접 분석 (GitHub 데이터 및 세션 로그 기반) sessions</span> <span class="text-xs text-text-secondary">Medium</span> </div> </div><div data-animate data-delay="7" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">klming-web</h3> <span class="badge text-xs badge-warm"> Private </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">klming 클라이밍 커뮤니티의 웹 플랫폼입니다. 모바일 앱(klming-flutter)의 웹 대응으로, SSR 프레임워크 기반으로 구축되었습니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">SSR 웹 프레임워크</span><span class="badge text-xs">TypeScript</span><span class="badge text-xs">BaaS</span><span class="badge text-xs">ORM</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> DB 보안 및 성능 최적화. 행 수준 보안 정책의 성능을 최적화하고, DB 함수의 보안 설정을 강화했습니다. 크로스 프로젝트에서 일관된 보안 패턴을 적용합니다. </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">14 sessions</span> <span class="text-xs text-text-secondary">Medium</span> </div> </div><div data-animate data-delay="8" class="glass rounded-2xl p-6 glass-hover group"> <div class="flex items-baseline gap-2 mb-2"> <h3 class="font-heading font-bold text-base">skills (agent-reference + agent-portfolio)</h3> <span class="badge text-xs badge-accent"> Public </span> </div> <p class="text-sm text-text-secondary mb-3 leading-relaxed">"Introduced by My Agents" — AI 에이전트가 사용자와의 실제 협업 데이터(세션 로그, git 히스토리, GitHub 프로필, 메모리 파일)를 분석하여 객관적인 레퍼런스 체크 리포트를 작성하고, 이를 기반으로 개인 포트폴리오 사이트를 생성하는 오픈소스 스킬 세트입니다.</p> <div class="flex flex-wrap gap-1.5 mb-3"> <span class="badge text-xs">Markdown (SKILL.md)</span><span class="badge text-xs">skills.sh CLI 포맷</span><span class="badge text-xs">Astro (포트폴리오 생성 시)</span><span class="badge text-xs">GitHub Pages</span> </div> <p class="text-xs text-accent/80 leading-relaxed"> "코드 없는 코드" 설계. 이 프로젝트에는 런타임 코드가 없습니다. SKILL.md 파일이 에이전트에게 전달되는 프롬프트이자 사양서이자 실행 코드입니다. 분석 차원, 리포트 템플릿, GitHub 분석 가이드, 페르소나 매핑 등을 참조 문서로 분리하여 — 에이전트가 상황에 맞게 조합합니다. 빌드 시스템도, 의존성도, 테스트 코드도 없지만 정교하게 동작하는 " </p> <div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/[0.08]"> <span class="text-xs text-text-secondary">1,022 (스킬 개발 + 스킬 실행 세션 포함) sessions</span> <span class="text-xs text-text-secondary">High (프로젝트 전체 생명주기를 함께 경험)</span> </div> </div> </div> </div> </section> <div class="section-divider max-w-6xl mx-auto"></div> <section class="py-24 md:py-32"> <div class="max-w-6xl mx-auto px-6"> <div data-animate class="mb-12"> <span class="badge-accent badge mb-3">Work Style</span> <h2 class="text-3xl md:text-4xl font-heading font-bold">작업 스타일 프로필</h2> <p class="text-text-secondary mt-2 max-w-xl">에이전트가 관찰한 역량 분포입니다.</p> </div> <div class="glass rounded-2xl p-6 md:p-8"> <div class="space-y-6"> <div data-animate data-delay="1" class="group"> <div class="flex items-center justify-between mb-2"> <span class="font-heading font-semibold text-sm">Architecture</span> <span class="text-sm font-mono text-accent font-semibold">95</span> </div> <div class="relative h-2 bg-white/[0.08] rounded-full overflow-hidden"> <div class="h-full rounded-full bg-gradient-to-r from-accent to-accent-hover bar-fill" style="width: 95%; animation-delay: 0.3s;"></div> </div> <p class="text-xs text-text-dim mt-1.5"> Service Layer SSOT, 제네릭 엔티티 시스템, 체계적 아키텍처 문서 </p> </div><div data-animate data-delay="2" class="group"> <div class="flex items-center justify-between mb-2"> <span class="font-heading font-semibold text-sm">Documentation</span> <span class="text-sm font-mono text-accent font-semibold">90</span> </div> <div class="relative h-2 bg-white/[0.08] rounded-full overflow-hidden"> <div class="h-full rounded-full bg-gradient-to-r from-accent to-accent-hover bar-fill" style="width: 90%; animation-delay: 0.42s;"></div> </div> <p class="text-xs text-text-dim mt-1.5"> 설계 문서 우선 작성, 체계적 문서 관리 체계 </p> </div><div data-animate data-delay="3" class="group"> <div class="flex items-center justify-between mb-2"> <span class="font-heading font-semibold text-sm">Testing</span> <span class="text-sm font-mono text-accent font-semibold">80</span> </div> <div class="relative h-2 bg-white/[0.08] rounded-full overflow-hidden"> <div class="h-full rounded-full bg-gradient-to-r from-warm/60 to-warm bar-fill" style="width: 80%; animation-delay: 0.54s;"></div> </div> <p class="text-xs text-text-dim mt-1.5"> 수백 개 테스트 유지, Fake 빌더 패턴, E2E 테스트 </p> </div><div data-animate data-delay="4" class="group"> <div class="flex items-center justify-between mb-2"> <span class="font-heading font-semibold text-sm">Multi-platform</span> <span class="text-sm font-mono text-accent font-semibold">92</span> </div> <div class="relative h-2 bg-white/[0.08] rounded-full overflow-hidden"> <div class="h-full rounded-full bg-gradient-to-r from-accent to-accent-hover bar-fill" style="width: 92%; animation-delay: 0.6599999999999999s;"></div> </div> <p class="text-xs text-text-dim mt-1.5"> Flutter, Next.js, React, Astro, PostgreSQL 전 영역 프로덕션 </p> </div><div data-animate data-delay="5" class="group"> <div class="flex items-center justify-between mb-2"> <span class="font-heading font-semibold text-sm">Pragmatism</span> <span class="text-sm font-mono text-accent font-semibold">88</span> </div> <div class="relative h-2 bg-white/[0.08] rounded-full overflow-hidden"> <div class="h-full rounded-full bg-gradient-to-r from-accent/80 to-accent bar-fill" style="width: 88%; animation-delay: 0.78s;"></div> </div> <p class="text-xs text-text-dim mt-1.5"> YAGNI 체화, 과도한 추상화 경계, 빠른 의사결정 </p> </div><div data-animate data-delay="6" class="group"> <div class="flex items-center justify-between mb-2"> <span class="font-heading font-semibold text-sm">AI Tooling</span> <span class="text-sm font-mono text-accent font-semibold">95</span> </div> <div class="relative h-2 bg-white/[0.08] rounded-full overflow-hidden"> <div class="h-full rounded-full bg-gradient-to-r from-accent to-accent-hover bar-fill" style="width: 95%; animation-delay: 0.8999999999999999s;"></div> </div> <p class="text-xs text-text-dim mt-1.5"> 멀티에이전트 오케스트레이션, MCP 서버 통합, CI 자동 리뷰 </p> </div> </div> <div class="grid grid-cols-3 gap-4 mt-8 pt-6 border-t border-white/[0.08]"> <div class="text-center"> <p class="text-2xl font-heading font-bold gradient-text">9+</p> <p class="text-xs text-text-secondary mt-1">Years Experience</p> </div> <div class="text-center"> <p class="text-2xl font-heading font-bold gradient-text">20+</p> <p class="text-xs text-text-secondary mt-1">Projects</p> </div> <div class="text-center"> <p class="text-2xl font-heading font-bold gradient-text">1,490+</p> <p class="text-xs text-text-secondary mt-1">AI Sessions</p> </div> </div> </div> </div> </section> <div class="section-divider max-w-6xl mx-auto"></div> <section class="py-24 md:py-32"> <div class="max-w-6xl mx-auto px-6"> <div data-animate class="mb-12"> <span class="badge-accent badge mb-3">Raw Data</span> <h2 class="text-3xl md:text-4xl font-heading font-bold">원본 리포트</h2> <p class="text-text-secondary mt-2 max-w-xl">이 포트폴리오를 구성하는 에이전트 레퍼런스 원본입니다.</p> </div> <div class="glass rounded-2xl p-6 md:p-8"> <div class="flex items-center gap-3 mb-6 pb-4 border-b border-white/[0.08]"> <div class="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center"> <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> </svg> </div> <div> <p class="text-sm font-medium">Generated: 2026-03-13</p> <p class="text-xs text-text-dim">Content Sensitivity Guide 적용됨</p> </div> </div> <div data-animate data-delay="1" class="mb-4"> <a href="/reports/user-profile" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> <div> <p class="text-sm font-medium group-hover:text-accent transition-colors">User Profile Report</p> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · High (20+ projects, 수백 세션, 다양한 도메인)</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div> <div class="space-y-2"> <div data-animate data-delay="2"> <a href="/reports/project-agentfiles" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> agentfiles </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-accent/10 text-accent border border-accent/20"> Public </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · High</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="3"> <a href="/reports/project-financial" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> financial </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-warm/10 text-warm border border-warm/20"> Private </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · High</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="4"> <a href="/reports/project-gichulnote" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> gichulnote </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-accent/10 text-accent border border-accent/20"> Public </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · Medium</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="5"> <a href="/reports/project-klming-fastapi" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> klming-fastapi </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-warm/10 text-warm border border-warm/20"> Private </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-sonnet-4-6) · Medium</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="6"> <a href="/reports/project-klming-flutter" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> klming-flutter </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-accent/10 text-accent border border-accent/20"> Public </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · High</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="7"> <a href="/reports/project-klming-migration" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> klming 백엔드 마이그레이션 </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-warm/10 text-warm border border-warm/20"> Private </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-sonnet-4-6) · Medium</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="8"> <a href="/reports/project-klming-web" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> klming-web </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-warm/10 text-warm border border-warm/20"> Private </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · Medium</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div><div data-animate data-delay="9"> <a href="/reports/project-skills" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:bg-white/[0.04] hover:border-white/[0.08] transition-all group"> <div class="flex items-center gap-3"> <svg class="w-4 h-4 text-text-dim" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"></rect> <path d="M3 9h18"></path> </svg> <div> <div class="flex items-center gap-2"> <p class="text-sm font-medium group-hover:text-accent transition-colors"> skills (agent-reference + agent-portfolio) </p> <span class="text-xs px-1.5 py-0.5 rounded-full bg-accent/10 text-accent border border-accent/20"> Public </span> </div> <p class="text-xs text-text-dim">Claude Code (claude-opus-4-6) · High (프로젝트 전체 생명주기를 함께 경험)</p> </div> </div> <svg class="w-4 h-4 text-text-dim group-hover:text-accent group-hover:translate-x-0.5 transition-all" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 2l4 4-4 4"></path> </svg> </a> </div> </div> </div> </div> </section> </main> <footer class="py-12 mt-8"> <div class="max-w-6xl mx-auto px-6"> <div class="section-divider mb-8"></div> <div class="flex flex-col md:flex-row items-center justify-between gap-4"> <div class="flex items-center gap-4"> <a href="https://github.com/ohing504" target="_blank" rel="noopener noreferrer" class="text-text-dim hover:text-accent transition-colors" aria-label="GitHub"> <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path> </svg> </a> </div> <div class="text-center md:text-right"> <p class="text-xs text-text-dim">
Introduced by My Agents · Built with
<a href="https://github.com/ohing504/skills" target="_blank" rel="noopener noreferrer" class="text-accent hover:text-accent-hover transition-colors">@ohing504/skills</a> </p> <p class="text-xs text-text-dim mt-1">Last updated: 2026-03-13</p> </div> </div> </div> </footer> <script type="module">const l=new IntersectionObserver(e=>{e.forEach(r=>{r.isIntersecting&&r.target.classList.add("visible")})},{threshold:.1,rootMargin:"0px 0px -40px 0px"});document.querySelectorAll("[data-animate]").forEach(e=>{l.observe(e)});document.querySelectorAll(".prose-dark table").forEach(e=>{const r=Array.from(e.querySelectorAll("th")).map(t=>t.textContent?.trim()||"");e.querySelectorAll("tbody tr").forEach(t=>{t.querySelectorAll("td").forEach((a,o)=>{r[o]&&a.setAttribute("data-label",r[o])})})});</script> </body> </html>