김현우Frontend · AI Transformation ·
Productivity

리액트 웹뷰 기반으로 인테리어 상담·계약·시공 완료까지 고객 여정 전반을 관리하는 플러터 애플리케이션 개발·런칭

에이전틱 코딩 워크플로우에 Figma CLI, Jira 티켓 → PR 자동화, 자동 코드 리뷰 팀, Figma 작성 규칙(글로벌·로컬 AI Rule, 프레임 관리 규칙)을 결합한 하네스로 일관된 품질로 개발 기간 단축

네이티브·웹 사이 브릿지 인터페이스 아키텍처와 서비스별 HTTP 클라이언트 설계, 토큰 자동 주입·갱신 및 MSW·Sentry·Vitest 기반 품질 체계 구축

AI 에이전트 기능 구현을 Requirements → Design → Task → Implementation → Review 5단계로 표준화하는 Claude Skill 설계·검증·라이브러리화

인테리어 플래너에서 실전 검증 후 hanssem-ai-library 공통 Skill로 추출, 사내 4종 AI 에이전트(Claude Code / Cursor / GitHub Copilot / Antigravity)에서 동일 절차로 사용 가능한 자산으로 전환

4대 핵심 원칙: Context Isolation(단계별 독립 실행), Human in the Loop(승인 게이트), Document as Interface(.md 문서 통신), Git as History(체크포인트 커밋)

5단계 워크플로우: Requirements Analyst → System Designer → Task Analyzer → Coordinator → Reviewer, 단계별 입·출력 문서를 .ai/tasks/<TASK_ID>/에 고정

Step 1의 Given-When-Then(TS-xxx) 테스트 시나리오를 설계·태스크·TDD 구현·리뷰까지 일관 연결

Step 4 병렬 구현 자동화: TeamCreate → TaskCreate(의존성 그래프) → Task Worker 스폰(최대 5, TDD 강제) → 모니터링 → TeamDelete

status.yaml SSOT + task.sh CLI + resume-guide로 어느 세션에서나 작업 재개 보장

Skills·Agents·Rules를 관리·배포하는 Frontend AI Library와 설치 CLI·문서 웹 UI 구축, Claude Code·Cursor·GitHub Copilot·Antigravity 멀티 에이전트 지원

내부 API를 자연어로 조회해 코드 생성을 자동화하는 Swagger MCP, Figma → 코드 정밀도를 높인 Figma MCP·AI-Ready 디자인 가이드 등 개발 생산성 도구 개발·배포

Bitbucket CI/CD·semver 기반 릴리즈 운영으로 전사 배포 체계 확립

5인 팀 Claude Code 기반 AI 워크플로우 파일럿 — 고객 상담 앱 8페이지 웹 구현

Plan(00-plan.md) → Task(10-task.md) → Implementation(20-result.md) 3단계 워크플로우

Human in the Loop 체크포인트, Rules/Templates/Commands 시스템 표준화

Claude Code, Figma MCP, Swagger API, 리액트 + TypeScript + Tailwind CSS 활용

Go 기반 터미널 TUI로 Markdown 문서를 스캔·검색·미리보기·원본 편집할 수 있는 개인 지식 워크플로우 도구

Ghostty split과 외부 LLM CLI 세션 연동을 통해 현재 문서 context를 AI 도구로 전달하는 개발자 생산성 실험

Bubble Tea, Lipgloss, Glamour 기반 Markdown preview/source/edit mode 구현

frontmatter/tag/path/body 검색, sidebar directory tree, app-managed selection, atomic save와 undo/redo 지원

.glowedignore 및 built-in ignore, polling refresh, JSON schema 설정, Homebrew tap/go install 배포 지원

v0.1.0~v0.2.2 릴리즈와 CHANGELOG/릴리즈 자동화 스크립트 운영

Go test 기반 cmd/internal 패키지 테스트와 docs/search/watch/editor 영역 회귀 테스트 구성

AI agent coding harness를 실제 제품 개발 루프에 적용한 사례

Swagger/OpenAPI API 문서를 MCP(Model Context Protocol)로 LLM에 제공하는 오픈소스 MCP 서버

개발자가 자연어로 API 명세를 조회하고, LLM의 도움으로 API 연동 코드를 자동 생성할 수 있게 한다

4개 MCP 도구: list_services(서비스 목록), list_apis(API 목록), get_api_detail(API 상세), get_components($ref 컴포넌트 스키마)

Drill-down 조회 흐름: 서비스 → API 목록 → API 상세 → 컴포넌트 스키마 단계로 조회해 LLM 컨텍스트 토큰 오버플로우 방지

swagger-config.json 기반 다중 서비스·다중 환경(dev/stg/prod) 관리, OpenAPI 3.0.x/3.1.x 지원

npm @hynu/swagger-mcp v1.0.9 배포, npx -y @hynu/swagger-mcp@latest로 설치 없이 즉시 실행

@modelcontextprotocol/sdk, @scalar/openapi-parser, zod 기반, tsdown 빌드, Node.js 18+ 환경