[LIVE] 코덱스로 바이브 코딩하기 (feat. 하네스 엔지니어링)

Summary

1) Live “vibe coding” with Codex + OpenAI collaboration (goal: build a YouTube analytics app)

• The host collaborates with OpenAI to live-code using Codex (mentions GPT 5.5 / “Frontier” models).
• Project goal: build a YouTube channel analytics app that:
  • Accepts a YouTube channel URL
  • Uses the YouTube API to collect channel/video data
    • MVP planned around the last ~50 videos
  • Uses the GPT API to analyze the collected data
  • Produces insights plus an execution checklist/dashboard that guides what to build next (turning analysis into actionable decisions)

2) Planning-first workflow: PRD → Architecture → ADR, with repeated plan iterations

• Strong emphasis: the planning stage is the bottleneck, so it should be thorough.
• Uses documents in a Daks-style structure:
  • PRD (Product Requirements Document): problem, target users, core features, MVP scope
  • Architecture: data flow, state, and stack choices
  • ADR (Architecture Decision Record): reasoning and trade-offs (why A/B/C was chosen and what was sacrificed)
• Iterates on the plan multiple times (often 3–5 iterations, though fewer if time is limited)

3) Codex app + CLI workflow: session management, modes, permissions

Key Codex features discussed:

Permission modes

• Default mode
  • Requires frequent approvals (described as inconvenient)
• Hook / “auto-review” intermediate mode
  • Auto-executes low-risk commands
  • Requests auth for high-risk commands
• Full access
  • Broad authority (used when necessary)
• Hook Access / dangerous access caution
  • Can allow destructive actions (e.g., delete files, drop DB tables)
  • Host recommends avoiding this unless experienced

Models and reasoning levels

• Chooses GPT 5.5 (claimed to improve coding quality)
• Adjusts reasoning intensity (tries Extra High)

Fast Mode

• Claims ~1.5x faster
• Uses ~2x tokens
• Used when deadlines/time are tight

“Stress line” / telemetry

• Displays a “stress line” in the terminal to monitor:
  • model/reasoning settings
  • token usage
  • context usage
• Host recommendation: set/consider context usage before starting

Clear vs Compact

• Clear
  • Wipes session history (recommended for unrelated next tasks)
• Compact
  • Condenses context (recommended for related next tasks to preserve context)
• Best practice: keep context around 20–30%
  • Avoid very high context (e.g., ~90%), which made output unusable

Folk / forked sessions, Side (sub-session)

• Forked sessions: “insurance” planning context that can be revisited later without inflating the main session
• Side (sub-session): runs auxiliary tasks without contaminating main-session context

4) Harness + headless sub-session architecture (separating work to avoid context bloat)

• Uses a Codex “Harness / Framework” approach:
  • Converts an existing Hannes Framework repository into Codex-ready skills and hooks
• Distinguishes between:
  • Headless mode
    • Separate session(s) not connected to the main agent session
    • Main session may not receive detailed intermediate status
    • Therefore uses index/status files to track completion
  • Sub-agent mode
    • Reports back results to the main session
• Builds a skill pipeline:
  • Harness skill breaks work into phases
  • Uses executor files to run steps while keeping main session context stable
• Progress is monitored via:
  • index files
  • step JSON checks (structured status)
  • status updates and verification steps

5) Hooks for enforcing quality: TDD, lint/test/build

• Uses Codex hooks to enforce process constraints:
  • TDD hook
    • Write/verify tests before code
    • Denies edits if no test exists
  • Lint/Test/Build hooks
    • Run checks before commit or key steps
• Notes that enforcement can be achieved via hooks/scripts even if a higher-level agent “instruction” cannot strictly require TDD

6) End-to-end build: MVP without DB, dashboard UI, and verification

Time-constrained MVP decisions:

• No DB integration
  • Explicitly omitted due to time
• Focus:
  • frontend dashboard UI
  • services/APIs:
    • Collect API (YouTube data retrieval)
    • Analyze API (GPT analysis)
• Verification strategy:
  • Since “automatic browser validation” wasn’t directly feasible, uses a minimum runtime smoke check:
    • check dev server HTTP responses
    • check initial rendered HTML
  • Also plans later automation using Codex browser skills / image skills

7) Runtime automation and browser testing via Codex “computer/browser skills”

Automation concepts demonstrated:

• Create automation that runs a script using the app to:
  • fetch channel data
  • analyze it
  • generate insights/checklist automatically (intended for morning runs)
• Use a computer/browser skill to interact with a live browser session (mouse/keyboard automation)
• Browser testing best practices:
  • define explicit test scenarios
  • generate a browser test script
  • run it repeatedly (similar to writing tests)
  • avoid vague “just test it” approaches

8) LLM tool quality improvements (GPT 5.5 + image generation)

• Claims coding quality improved significantly after GPT 5.5
• Uses an image generation skill (GPT image generation) to create:
  • YouTube-style thumbnail/content filler images
• Notes that image skills improved with newer GPT/image models (mentions ImageGen and GPT Image 2 quality)

9) Token/cost observation (practical usage)

• Reports token usage as relatively low/generous on the $20 Plus plan
• Mentions an example where context usage was much less than expected and tokens were generous, comparing Pro vs Plus
• Recommends Plus for live/demo scale

---

Key tutorial/guideline points explicitly emphasized

• Don’t implement the first plan immediately—iterate on PRD/user flow before coding.
• Keep Agency.md / always-in-context documents small
  • Target ~100–200 lines, max ~200 to preserve context capacity/performance.
• Use PRD / Architecture / ADR to reduce ambiguity and help consistent AI decisions later.
• Manage context with Clear vs Compact
  • Aim for 20–30% context usage.
• Use hooks (TDD, lint/test/build) when you need enforceable quality gates.
• Use Fork / Side / Headless to preserve or isolate context during parallel/auxiliary tasks.

---

Main speakers / sources

• Main speaker: The host of the live stream (Korean narration; described as a YouTube creator; repeatedly refers to “today’s live coding,” “my Codex,” and “I uploaded…”)
• Primary external sources/tools referenced: OpenAI, Codex (Codex CLI/App), and the Hannes Framework (adapted into Codex skills/hooks)