Keyco signature

Skills & Tools

다룰 수 있는 기술,
그리고 일하는 도구

실제 업무와 프로젝트에서 사용한 기술과 도구를 정리했습니다. 필요한 도구를 골라 적용하고, 독립 검수와 직접 확인을 거쳐 작업합니다.

핵심 기술

Development

  • JavaScript
  • TypeScript
  • React
  • Next.js
  • Python
  • Swift

KBO-Hub와 macOS 도구, 자동화 스크립트 개발에 사용합니다. JavaScript는 부스트캠프 챌린지에서 ES6+ 과제로 다뤘습니다.

Styling & Markup

  • HTML
  • CSS
  • Tailwind CSS
  • Responsive Web
  • Accessibility

마케팅 랜딩 페이지 수정과 KBO-Hub UI 구축에 사용했습니다. 시맨틱 마크업과 접근성을 함께 고려합니다.

Backend & Management

  • Supabase
  • PostgreSQL
  • Auth
  • RLS
  • Storage

KBO-Hub의 인증과 데이터 계층에 사용했습니다. Row Level Security로 사용자 데이터를 격리합니다.

AI-assisted Development

CLI Agent Operations

필요한 AI 도구를 작업에 맞게 고르고, KBO-Hub와 이 포트폴리오를 만드는 데 활용했습니다. 구현과 검수를 나누되, 작업 방향과 최종 판단은 사람이 맡습니다.

Tools in Operation

  • Claude / Claude Code복합 구현 · 리팩터링 트랙
  • Codex / Codex CLI빠른 단위 작업 · 보조 트랙
  • Google Antigravity탐색 · 프로토타이핑
  • AiderGit 연동 pair 편집
  • OpenCodeCLI 범용 에이전트
  • 기타 CLI 개발 도구스크립트 · 자동화 유틸

How They Are Operated

  • Agent Routing

    작업 성격에 맞는 도구를 사람이 선택

  • Parallel Workers

    서로 겹치지 않는 작업은 worktree로 나누어 진행

  • Independent Review

    구현과 검수를 분리해 빌드·타입·보안·회귀 확인

  • Human Final QA

    실제 화면은 사람이 확인하고 최종 판단

Tools & Workflow

일하는 도구 체계

Development & Version Control

  • Git
  • GitHub
  • Git Worktree
  • Cloudflare

브랜치 전략과 worktree 격리, Cloudflare 기반 배포.

AI & CLI Development

  • cmux
  • Claude Code
  • Codex CLI
  • Google Antigravity
  • Aider
  • OpenCode

작업을 나누고 독립 검수하는 터미널 중심 개발 환경.

Collaboration & Documentation

  • Notion
  • Jira
  • Slack
  • Microsoft Teams

기획·이슈 트래킹·인수인계 문서화와 팀 협업.

Content & Marketing

  • Final Cut Pro
  • Google Analytics
  • Blog / SEO
  • SNS

영상 편집과 채널 콘텐츠 기획, 유입 데이터 분석 및 마케팅 도구 파이프라인.

Documentation — Notion

기록이 곧 인수인계입니다

기획과 작업 기록, QA 결과를 Notion에서 관리합니다. 다음 작업을 이어갈 때 필요한 결정과 진행 상황도 함께 남깁니다.

  • 프로젝트 기획

    요구사항과 범위 정의 문서화

  • Day Log

    작업 단위별 진행 기록

  • 디자인 결정

    판단 근거와 대안 비교 기록

  • QA 체크포인트

    검증 항목과 결과 정리

  • HANDOFF 문서

    트랙 간 인수인계 문서화

  • 프로젝트 아카이브

    완료 후 기록 보존

Development Environment

VS CodeGhosttyYazibtopLazyGit

터미널 중심의 개발 환경을 꾸려 사용합니다 — 에디터는 VS Code, 터미널은 Ghostty, 파일 탐색은 Yazi, 모니터링은 btop, Git 작업은 LazyGit.

Development Workflow

계획부터 릴리스 게이트까지

KBO-Hub와 이 포트폴리오 모두 작업 범위를 나누고, 구현과 검수를 분리한 뒤 사람이 실제 화면을 확인하는 순서로 개발했습니다.

  1. 01 · Plan

    계획

    요구사항과 작업 범위를 정의하고 트랙을 나눕니다.

  2. 02 · Documentation

    문서화

    Notion에 기획 문서와 Day Log, HANDOFF를 정리합니다.

  3. 03 · Branch Strategy

    브랜치 전략

    dev 기준으로 역할과 범위에 맞는 브랜치를 설계합니다.

  4. 04 · Worktree Isolation

    Worktree 격리

    Git worktree로 작업 트리를 물리적으로 분리합니다.

  5. 05 · Agent Assignment

    에이전트 배치

    cmux 세션에 트랙별 에이전트를 배치합니다.

  6. 06 · Parallel Implementation

    병렬 구현

    독립 트랙을 동시에 구현합니다.

  7. 07 · Independent Review

    독립 리뷰

    구현자와 분리된 리뷰 에이전트가 빌드·타입·보안·회귀를 감사합니다.

  8. 08 · Remediation

    보완

    발견된 결함을 단계별로 수정하고 재검토합니다.

  9. 09 · Integration

    통합

    게이트를 통과한 결과만 dev에 병합합니다.

  10. 10 · Human Runtime QA

    Human Runtime QA

    실제 동작 환경에서 인간 관점으로 검증합니다.

  11. 11 · Release Gate

    릴리스 게이트

    보안·프라이버시 최종 확인 후 릴리스합니다.

Relevant Capabilities

Isolation

  • Git Branch Strategy
  • Git Worktree Strategy
  • Agent-per-Worktree

Agent Operations

  • CLI Agent Operations
  • Parallel Worker Pipeline

Review & Quality

  • Independent Senior Review
  • Remediation / Re-review
  • Human Runtime QA
  • Security / Release Gate

Documentation

  • HANDOFF Documentation

Development Architecture

개발 환경이 연결되는 방식

위의 워크플로우가 작업 순서라면, 이 다이어그램은 도구의 연결 관계를 보여줍니다. 사람이 범위를 정하고 문서화한 뒤, cmux와 Git worktree로 작업을 나누고 검수·QA·HANDOFF까지 이어지는 구조입니다.

  • branch / worktree 명시적 격리
  • 병렬 독립 워커 운영
  • worktree당 수정 주체 1개
  • 독립 시니어 리뷰
  • Remediation / 재검토 루프
  • Human Runtime QA
  • Security / Release Gate
  • HANDOFF 문서화