L8 Principal Building a Full Stack App with Agentic Engineering

Meta·Microsoft·Atlassian에서 L8 프린시펄 엔지니어로 일한 Kun Chen이, 이전에 60만 조회를 기록한 '에이전틱 엔지니어링 워크플로' 영상의 후속으로 실제 프로젝트를 맨바닥부터 끝까지 만드는 과정을 통째로 보여주는 영상입니다. 만드는 것은 아들 에디를 위한 어린이 용돈 관리 앱(Edie's Wallet).

00:26도구 소개 — Herdr + Firstmate

• Herdr: 그의 새로운 tmux 대체품. 에이전트 세션을 관리해준다. 전통적 터미널 멀티플렉서는 터미널·페인·셸만 이해하지만 Herdr는 '에이전트'를 이해한다는 게 최대 장점 — 에이전트 사이드 패널, 키바인드로 뜨는 에이전트 검색 창(제목으로 검색해 세션 간 즉시 이동)을 제공.
• Firstmate: 그가 만든 오픈소스 프로젝트. 핵심은 선장(captain)인 나는 오직 하나의 에이전트('first mate')하고만 대화하고, first mate가 나머지 모두를 저글링하는 방식 — 인지 부하와 컨텍스트 스위칭 부담을 크게 줄인다. 설치는 레포를 clone하고 그 안에서 에이전트를 띄우면 끝.
• 오늘의 harness는 Pi agent(Claude가 아닌 모델을 돌릴 때 그가 가장 좋아하는 harness). 평소엔 GPT-5.6 xhigh를 쓰지만, 일부러 도전 삼아 더 효율적인 'Luna' 모델을 쓴다 — "모든 것에 최고 모델이 필요한 건 아니다"를 증명하기 위해.
• 첫 프롬프트로 레포 생성 + "오늘 모든 태스크와 크루메이트는 GPT-5.6 Luna xhigh로 디스패치하라"는 그라운드 룰을 함께 지시.

03:40calm 모드

• Firstmate는 결정론적 부분을 스크립트로 처리하며 도구·스킬 호출 로그를 쏟아내는데, 그는 이 노이즈를 전부 무시한다. Firstmate에 딸린 calm 모드(현재 Pi agent 전용)를 켜면 내 프롬프트와 first mate의 응답만 남아 화면이 깨끗해진다.
• 관점: 1~2년 전 덜 똑똑한 모델에선 어떤 툴을 부르고 어떤 파일을 읽는지 보며 잘못된 길로 갈 때 개입(steer)하는 게 유용했지만, 오늘날 모델에선 개입이 필요한 경우가 점점 드물어져 툴 콜을 들여다보는 효용이 줄었다.

05:41제품 아이디어 — "3,000자짜리 횡설수설"

• 요구사항을 길게 rambling으로 던진다(약 3,000자): 아들 에디가 만들어 달라고 한 용돈 관리 앱, 노트에 적거나 기억으로 관리하기 어려움 → 잔액 추적 + 잔액·대출·신용카드 작동 방식·이자 같은 기본 금융 개념을 자연스럽게 점진적으로 가르치는 교육적 가치, 아이패드를 쓰니 iOS 우선, 부모 모드(입금·출금 관리)와 자녀 모드(읽기 전용 조회).
• 중요한 제약 두 가지: 돈은 전부 가상(실제 돈 아님), 그리고 부모는 폰·아이는 아이패드/맥으로 기기가 다르므로 데이터는 클라우드에 저장·포터블해야 함.
• 그리고 두 가지를 병렬로 요청 — ①시장 조사(이미 똑같은 앱이 있으면 그냥 설치하면 되고, 없으면 그게 우리가 채울 갭) ②기술 조사(풀스택으로 어떻게 만들 것인가).
• 이것이 그의 신규 프로젝트 시작 방식 — 머릿속의 모든 것을 first mate에게 쏟아내고 에이전트가 정리하게 한다.

11:28크루메이트(crewmates)

• first mate는 곧바로 탭 두 개를 띄운다 — 시장 조사용, 기술 조사용. first mate는 스스로 모든 걸 하지 않는다 — 그러면 한 번에 하나밖에 못 해 막히기 때문에, 작업을 크루메이트에게 위임해 병렬로 처리한다.
• 각 크루메이트가 실제로 지정한 GPT-5.6 Luna xhigh로 돌고 있는지도 확인 가능.
• 일반적인 서브에이전트보다 나은 점: 크루메이트는 Herdr 탭에서 도는 평범한 에이전트라 언제든 그 세션에 들어가 무엇을 하는지 보고 직접 개입(steer)할 수 있다 — 대부분의 harness에서 서브에이전트는 관찰도 조종도 어렵다.
• 부수적으로 메뉴바 위젯으로 Claude·Codex·Kimi·Grok 등 각 구독의 쿼터를 추적하는 것도 보여준다.

13:17fast 모드

• Pi의 codex fast 확장으로 codex fast on을 켜면 비용을 더 쓰는 대신 지연시간이 낮아진다. 확인해 보니 한 세션에서 켜면 모든 세션에 적용됨. 평소엔 GPT 모델이 이미 빨라 안 켜지만 데모라서 켠다.
• 컨텍스트 관련 팁: GPT 모델의 기본 상한을 272K로 캡해 둔다 — 그 이상 크기의 요청은 평소보다 높은 요금이 부과되는 버그가 보고된 적이 있어(사람들이 "Codex가 쿼터를 순식간에 태운다"고 하는 이유), 안전한 상한으로 둔 것.

16:53시장 조사 결과

• 크루메이트가 리포트를 쓰고 나면 first mate가 결과를 받아 요약하고, 끝난 세션 탭은 알아서 닫는다(예전엔 그가 직접 하던 일).
• 결과: 브리프 전체와 일치하는 iOS 앱은 없음 — 가상 화폐 전용 + 부모가 권한 통제 + 자녀 읽기 전용의 조합. 가장 가까운 참고 앱들(예: 웹 전용 키도뱅크 등)은 각자 강점이 있지만 정확히 원하는 걸 하는 앱은 없다 → "설치 대신 직접 프로토타입하라"는 권고. 좋은 검증.

19:06기술 조사와 첫 이견

• 권고: 네이티브 SwiftUI 아이패드 앱 + Supabase(Postgres, RLS) + 서버사이드 불변 원장(immutable ledger) + SwiftData 로컬 캐시 + 실제 금융 연동 없음.
• 그의 즉각적 반응: Supabase는 쓰고 싶지 않다 — 복잡해지면 비싸지는 경험이 있고, 지금은 사용자가 아들·아내·자신 3명뿐이라 스케일이 전혀 필요 없다. SaaS 비용을 낼 이유가 없다.
• 351줄짜리 리포트를 긴 텍스트 벽으로 읽고 싶지 않다 — 특정 부분에 피드백 주기도 어렵다. 그래서 그가 만든 또 다른 도구 Lavish(HTML 아티팩트로 계획을 인터랙티브하게 리뷰)를 띄우게 한다.
• 추가 지시: VPS 자체 호스팅도 선택지에 올려라, 인증은 iOS니 Apple 로그인 필수(구글 로그인은 나중), 오늘은 에디를 위한 MVP만 — 그리고 내가 결정해야 할 열린 질문과 결정 사항을 모두 정리해서 가져와라.

23:43병렬화 — 기다리는 동안 다음 일 벌이기

• 백엔드 조사가 도는 동안 프론트엔드 UX/사용자 여정 프로토타입도 Lavish 계획으로 만들라고 별도 워크스트림을 킥오프. first mate는 모든 걸 위임했기에 항상 대화 가능하다.
• 또 기다리는 동안 "시장 조사에서 다른 제품들의 흥미로운 컨셉 중 우리가 영감으로 삼을 것"을 분석시킨다. 나온 것들: 읽기 전용 아이 뷰, 머니 버킷(쓰기·저축·기부·목표), 의미 있는 활동 타임라인, 승인 요청, 실제 행동에 붙는 레슨(입금 후 잔액 설명, 지출 전 트레이드오프 설명, 대출 시 원금 설명 — 그가 원한 교육적 측면), 가상 대출 시뮬레이터, 유연한 용돈 규칙(지금은 수동으로 하는 일), 부드러운 게이미피케이션(아이 대상이라 조작적으로 느껴질 수 있어 그는 양가감정), 피해야 할 것으로 과도한 광고.
• 평: 에이전트가 그가 원한다고 말한 것들만 골라 남긴 판단력이 좋았다.

29:56인터랙티브 플래닝 — Lavish로 백엔드 검토

• Lavish 아티팩트가 브라우저에 뜬다(에이전트가 만든 UI의 레이아웃 문제를 먼저 자동 수정한 뒤 표시). 헤드라인: "인프라를 사기 전에 운영 단순성을 사라." 권고는 여전히 호스티드 Supabase Pro, MVP 기준 월 $25.
• 그는 요소 단위로 주석을 달아 피드백을 큐에 쌓는다: ①"$25~40은 여전히 너무 비싸다. Hetzner 같은 저가 VPS면 월 $5 안팎이 가능하니 그 수준의 옵션을 찾아라"(추정된 VPS 월 $30~60은 자기 경험상 틀렸다고 지적) ②아키텍처 다이어그램을 전체화면으로 보다 감사 이벤트·암호화 익스포트는 오버엔지니어링이라 판단해 삭제하고 "초기 스코프를 최소로 유지하라"고 지시.
• Lavish의 가치: 선택지를 큐에 넣고, 각 요소에 주석으로 피드백하고, 다이어그램을 보고 — 전부 인터랙티브. "긴 텍스트 벽을 읽고 '그 부분 고쳐줘'라고 말하는 것보다 훨씬 낫다." 실제로 다이어그램을 봤기에 계획에 숨어 있던 요구사항들을 발견할 수 있었다.
• 개별 결정들도 처리 — 자녀 로그인은 부모가 프로필 관리 + 부모 전용 동작은 PIN으로 게이트, 복구는 일단 일일 백업(시점 복구는 비쌈)으로 하되 VPS 실비를 파악한 뒤 재검토.
• 피드백 반영 후 first mate가 실제 클라우드 가격을 검색해 근거를 재설정 → 저가 Hetzner VPS 월 약 5.5달러로 권고 변경. 그는 VPS로 결정.

42:29UX 프로토타입 — "진짜 만질 수 있는 것"

• UX 크루메이트가 만든 결과가 마크다운 파일(스코프 정의)일 뿐 실제 프로토타입이 아니라, "Lavish에서 내가 직접 조작할 수 있는 HTML 아티팩트로, iOS 코드 없이, 폴리시된 목업이 아니라 화면·컨셉·유저 플로우 중심의 와이어프레임"을 요구.
• 결과물을 직접 클릭해 본다 — 가족 생성(단위 이름 'tokens'를 'points'로 바꿈), 페어링의 의미가 "다른 기기"라는 걸 깨닫고 사려 깊다고 평가, 자녀 읽기 전용 뷰(잔액·최근 활동·내 대출·다음 레슨), 부모 모드 잠금 해제 후 포인트 추가·용돈 설정.
• 제시된 질문에 답: 아이가 포인트를 요청하는 기능은 불필요(직접 나에게 오면 됨), 대출은 지갑 상세에, 레슨은 짧은 선형 경로.
• 그의 피드백: 통화 단위는 사용자의 현지 통화(USD)로 — 에디가 이미 그렇게 용돈을 받으니까. 그리고 자녀 뷰에 '최근 활동' 목록이 이미 있는데 또 '최근 활동' 버튼이 있는 건 이상하다고 지적.
• UI가 예쁘지 않은 건 자기가 와이어프레임만 요청했기 때문 — 덕분에 프로토타입을 빨리 얻어 피드백할 수 있었고 UI 폴리시는 나중에. 이어서 피드백을 반영한 PRD를 레포의 README로 작성하게 한다.

48:08컴팩션(compaction)

• 컨텍스트가 272K의 70%까지 찼다 — 100%가 되면 자동 컴팩션(현재 컨텍스트를 요약하고 세션을 재시작).
• 실용 팁: Codex에서 GPT 모델을 돌리면 서버사이드 컴팩션이 쓰이고 이게 알려진 것 중 가장 성능이 좋다. 하지만 Pi 등 다른 harness에서는 기본적으로 자체 알고리즘을 쓰므로, pi-openai-server-compaction 확장을 설치하면 Pi에서도 OpenAI 서버사이드 컴팩션을 써서 장시간 작업에서 더 잘 동작한다.
• 그는 선제적 컴팩션을 하지 않고 자동 컴팩션에 맡긴다. 실제로 이 세션에서 4번의 컴팩션이 일어났지만 성능에 눈에 띄는 영향이 없었다 — 서버사이드 컴팩션이 좋기도 하고, first mate가 크루메이트에게 준 작업들을 파일에 문서화해 두어 잃어버린 정보를 다시 가져올 수 있기 때문. "컴팩션은 이제 대부분의 사람이 신경 쓰지 않아도 되는 구현 세부사항."
• 이 시점에 레포를 공개 GitHub 레포로 발행하게 하고, 아들 이름 철자 오류(Eddie→Edie)를 발견해 로컬·원격·설명까지 전부 수정시킨다 — "내가 로컬을 먼저 바꿀지 업스트림을 먼저 바꿀지 고민할 필요가 없다는 게 first mate의 진짜 매력."
• no-mistakes 도구 언급 — 모든 코드 변경에 대한 로컬 검증 파이프라인. 판단 기준: "원래 사람 리뷰를 받을 코드 변경이면 켜고, 혼자 하는 작업이면 끈다." 지금은 프로토타입 단계라 끄고, MVP가 나오면 켜서 더 강한 가드레일로 쓸 예정. (지금은 PR 승인도 필요 없다고 지시)

55:36Claude Design으로 디자인 시스템

• README(PRD)가 있는 레포를 Claude Design에 연결해 '디자인'이 아니라 '디자인 시스템'을 생성 — 시스템이 잡혀 있으면 이후 컴포넌트·화면을 추가할 때 매번 재발명하지 않고 일관성을 보장할 수 있기 때문.
• 노트가 중요: "이 레포엔 소스 코드가 없다, README로 요구사항을 파악하라, 주요 화면을 스스로 정하고 규정된 UX를 자유롭게 반박해도 좋다, 아이에게 재미있고 교육적이며 친근하게, 부모에겐 통제와 투명성."
• Opus가 과부하라 Sonnet으로 진행("아주 영리한 해법이 필요한 문제는 아니니 시도해보자").

59:41시크릿 관리 — Atomic Vault

• 백엔드를 병렬로 시작시키며 Hetzner API 토큰은 'Atomic Vault'에 있다고 알려준다. 에이전트가 시크릿에 접근할 때마다 승인 다이얼로그가 떠서 어떤 명령을 실행하려는지 보고 승인 여부를 결정할 수 있다.
• 왜 중요한가: 많은 사람이 .env 파일에 시크릿을 두는데 그건 유출되기 쉽다. 에이전트에게 점점 더 많은 걸 위임하는 상황에서, 파일에 던져두면 에이전트가 그 시크릿을 공개 파일에 쓰거나 외부 API 호출에 실어 보냈는지 알 수 없다(우리는 모든 툴 콜을 보지 않으니까). 특히 프로덕션 시크릿의 행선지를 엄격히 통제하는 것이 점점 중요해진다.
• 이 도구는 Homebrew를 만든 Max Howell이 만든 신생 오픈소스라 신뢰하며 직접 피드백도 주고 있다고. 또한 토큰은 환경변수로 전달돼 에이전트가 평문으로 보지 못한다.
• 인프라 방식도 교정 — "OpenTofu 같은 걸로 인프라를 코드로 선언하고 싶다"고 하자 first mate가 즉시 그 방향으로 재지시. 장점은 필요한 머신·리소스가 파일에 선언돼 감사·커밋·소스 관리가 가능한 것. 세 개의 병렬 워크스트림(백엔드 API, DB 스키마, VPS 기반+백업·배포)이 돌아가는데 어느 에이전트를 조종해야 할지 내가 신경 쓸 필요가 없다.

1:06:11디자인 시스템 리뷰

• 브랜드 아이콘·워드마크·컬러(골드 — 아들이 좋아하는 색)·중립색을 본다. 텍스트가 중앙 정렬조차 안 된 부분을 지적해 피드백.
• 클릭 가능한 실제 화면을 보고 핵심 피드백: "전반적으로 아이들 앱처럼 느껴지지 않는다. 더 재미있고 아이 친화적인 쪽으로 기울여라." 추가로 앱 아이콘 옵션도 요청.
• 결과: 아이콘은 돼지저금통(piggy)을 선택하되 더 크게, 그리고 iOS 앱에 바로 쓸 수 있는 규격의 이미지로 생성 요청. 재확인해 보니 텍스트 정렬이 고쳐졌고, 돼지가 통통 튀는 애니메이션에 폰트도 커져 훨씬 나아졌다 — "충분히 좋다."
• 완성된 디자인 시스템을 zip으로 익스포트해 로컬로 내려받고, first mate에게 "레포에 세팅하고 이 디자인 시스템을 따라 실제 UI를 만들라, iPhone·iPad 모두 지원"을 지시. 이때 백엔드는 별도 프라이빗 레포로 분리(오픈소스는 iOS 프론트엔드만).

1:18:08브라우저 자동화 — Apple Developer 세팅

• Apple 로그인 설정을 위해 first mate가 정확한 단계와 URL 목록을 주자, 그는 "Chrome DevTools로 내 브라우저를 조종해서 네가 다 해줘"라고 요청 — 이미 App Store Connect에 로그인돼 있다고.
• 실제로 에이전트가 브라우저를 몰아 App ID 등록을 수행한다(앱 표시 이름의 유효하지 않은 문자 때문에 한 번 실패 → 그가 힌트를 주자 재시도 성공, Sign in with Apple 권한 선택까지).
• 전제 조건: 크롬의 원격 디버깅을 켜둬야 에이전트가 기존 브라우저 창(내 인증 정보가 있는)을 조종할 수 있다 — 아니면 격리된 창이 뜬다. 새 에이전트 세션마다 권한을 묻는다. 그는 "이런 작업은 재앙적 결과가 없으니 맡겨도 괜찮다"는 기준.

1:20:33E2E 통합 — "MVP 완료의 정의"

• first mate가 "PR 병합 완료, 백엔드 인프라·네이티브 iOS 앱·디자인 시스템 완료"라고 보고하지만 그는 증거를 요구 — 물어보니 iOS 앱은 아직 목(mock)이고 백엔드와 연결되지 않음.
• 그가 정의한 MVP 완료 기준: 시뮬레이터에서 실제 Apple 계정으로 로그인해 VPS의 진짜 백엔드에 연결되는 것. 여기까지 가는 구현 계획을 세우고 최대한 병렬화하라고 지시.
• 중요한 교정: 계획에 "개발용 백엔드 배포"가 있는 걸 보고 환경 분리는 오버킬이라며 프로덕션 하나만 두라고 지시 — "GPT 5.6은 오버엔지니어링 경향이 있다. 이런 지점이 인간이 판단으로 조종해야 하는 곳."
• 도메인은 자신의 Cloudflare 계정과 API 토큰(역시 Vault)을 주고 서브도메인을 만들게 한다. (음성 인식이 이름을 잘못 옮겼는데 Luna가 앞선 맥락으로 올바른 철자를 추론해내는 것도 확인.) 결과적으로 백엔드가 유효한 HTTPS로 라이브.
• 전체 철학: "에이전트에게 권한과 능력을 많이 주되, 프로덕션을 건드릴 때는 내 승인을 받게 한다."
• 진행 중 발견된 이슈들을 first mate가 알아서 처리 — 프론트엔드가 잘못된 주소를 가리키던 문제(백엔드 연결 중에 앱이 빌드돼 발생)를 스스로 워커에게 수정 지시하고 그에게는 FYI만. 또 시뮬레이터를 띄워 에이전트가 스스로 E2E 테스트를 하며 로그인 에러를 잡는다.
• 그가 발견한 제품 버그: 브랜드명은 'Edie's Wallet'이 맞지만 'Edie'를 사용자 이름 대신 쓰면 안 된다(다른 이름의 사용자도 쓸 테니 중립적 용어로) → first mate가 테스트를 계속하면서 별도 크루메이트를 띄워 병렬로 수정.
• 그가 에이전트에게 자주 한다는 말: "나에게 묻지 마라 — 오직 나만 할 수 있는 일이 아니면." 에이전트는 계속 시도하기만 하면 충분히 유능하며 약간의 격려만 필요하다는 것.

1:33:46백엔드 아키텍처 리뷰

• 백엔드는 배포됐지만 코드를 본 적이 없어, 소스 코드 대신 Lavish로 아키텍처 리뷰를 요청 — 관심사는 어떤 API 엔드포인트가 노출됐는지, 인증은 어떻게 처리하는지, DB 스키마는 어떤지.
• 확인 결과: iOS 클라이언트 → HTTPS → Fastify API → 세션 서비스·지갑 서비스 → DB. 화면별로 나뉜 엔드포인트(Apple 인증, me/family/wallet/child view)와 도메인 오퍼레이션 중심 설계. 스키마는 parent identities → sessions → families → children → wallets → loans → ledger entries 구조로, 가족이 부모와 여러 자녀를 잇는 형태가 좋다고 평가.
• 그가 찾던 것은 불필요한 오버엔지니어링 여부였는데 "과하게 만든 것 없이 모두 합리적"이라 결론.

1:37:55작동한다!

• 시뮬레이터에서 Apple 로그인 성공 → 부모 뷰 진입(다만 UI는 더 다듬어 아이 뷰를 전면에, 부모 뷰를 더 숨기고 싶다고) → $10 추가 → 잔액 $10 반영 → 에디의 뷰에서도 $10 확인.
• 로그아웃 후 재로그인해도 같은 데이터가 돌아온다 — 사용자 ID가 서버 백엔드에 도달해 데이터를 가져오는 E2E가 전부 정상 작동.
• 다음 단계는 TestFlight 빌드 → 아들 아이패드에 설치 → 내일부터 실사용.
• 마무리 소회: 오늘 풀스택 앱을 GPT-5.6 Luna로 처음부터 끝까지 만들었고, Claude Design조차 Opus가 아닌 Sonnet으로 했는데도 잘 됐다. 세션 전체에서 Luna가 충분히 똑똑하지 않다고 느낀 유일한 지점은 VPS 비용 판단(잘못된 데이터에 근거한 권고)뿐이었다.

📌 최종 요약 정리

• L8 프린시펄 엔지니어가 Herdr(에이전트를 이해하는 tmux 대체) + Firstmate(선장은 한 에이전트하고만 대화하고 그가 크루메이트들을 저글링) 조합으로, 아들을 위한 어린이 용돈 앱을 시장조사→기술설계→디자인→백엔드→iOS 앱→E2E 검증까지 한 세션에 완주한다.
• 워크플로의 핵심은 극단적 병렬화와 위임 — 요구사항을 3,000자 rambling으로 쏟아붓고 시장조사·기술조사·UX 프로토타입·백엔드 3트랙을 동시에 굴리며, 기다리는 시간마다 다음 일을 벌인다. 툴 콜 노이즈는 calm 모드로 지우고, 컨텍스트는 자동 컴팩션에 맡긴다(4회 발생, 체감 손실 없음 — 서버사이드 컴팩션 + 작업을 파일로 문서화한 덕).
• 리뷰는 긴 마크다운 대신 Lavish의 인터랙티브 HTML 아티팩트로 — 다이어그램을 보고 요소마다 주석을 달아 숨은 요구사항(감사 이벤트·암호화 익스포트)을 오버엔지니어링으로 판정해 삭제하고, Supabase $25/월 권고를 Hetzner VPS $5대로 뒤집는 등 인간의 판단이 결정적인 지점들을 보여준다("환경 분리는 오버킬" 교정도 같은 맥락).
• 안전·품질 장치는 Atomic Vault(시크릿 접근을 매번 승인, .env 방식의 유출 위험 대체), OpenTofu로 인프라 코드화, no-mistakes(사람 리뷰가 필요한 변경일 때만 켬), 프로덕션 접근 시에만 내 승인이라는 원칙으로 정리되며, 결론은 "모든 것에 최고 모델이 필요하지 않다" — GPT-5.6 Luna와 Sonnet만으로 실제 작동하는 풀스택 앱을 완성했다.

전체 대본(타임스탬프 포함) 원문이 필요하면 말해줘 — 그대로 붙여줄게.