Dev Lounge Recap 시리즈
AWS Hong Kong Summit 2026 · Developer Lounge 요약 · 6편 중 6편
AWS Magazine · 빅토리아 하버 현장 리포트
오프닝: 하이테크 럭셔리가 워터프론트 바이브를 만나다
AWS Hong Kong Summit 2026 동안 Hong Kong Convention and Exhibition Centre(HKCEC)의 천장까지 닿는 유리 콘코스에 서 본 적이 있다면, 그 느낌을 정확히 알 것이다. 빅토리아 하버의 파노라마, 어두운 수면 위를 춤추는 네온 반사, 그리고 고위험 기술이 글로벌 금융을 만나는 특유의 웅웅거림.
완차이(Wan Chai) 한복판에서, 수백만 달러의 벤처 자본과 스타트업 딜이 핸드푸어드 수제 티와 에스프레소 곁에서 협상되고 있었다. 국제 스피커와 클라우드 아키텍트들이 도쿄, 런던, 실리콘밸리에서 날아와 AWS Developer Lounge에 모였다. 환경은 전기적이었다—홍콩 특유의 럭셔리와 AWS의 최전선 클라우드 미학이 병치된 장면.
프라이빗 투자자 밋업, 스타트업 피치 덱, 기술 심층 분석 사이사이에서 Developer Lounge는 마지막 세션을 열었다. 그리고 노련한 테크 라이터라면 누구나 말하듯, 모든 상징적 서밋은 비행기에서 바로 챙겨 쓸 수 있는 기프트백 같은 토크로 끝난다.
Developer Lounge 아크를 닫으며, Haowen Huang은 장문 기술 콘텐츠를 3분 만에 세련된·경영진용 프레젠테이션으로 바꾸는 마스터클래스를 선보였다.
엘리베이터 피치: Amazon Web Services 블로그 URL을 Kiro에 주면, 대략 3분 안에 커스텀 테마의 프로덕션급 슬라이드 덱을 받는다—Vue 컴포넌트, 반응형 아키텍처 다이어그램, 수동 레이아웃 번거로움 제로—PowerPoint(PPTX), PDF, PNG로 바로 내보낼 준비가 된다.
+-----------------------------------------------------------------------------------+
THE 3-MINUTE AGENT LOOP
1. [ Tech Blog / URL ]
2. [ Kiro AI Agent Engine ] --> reread .kiro/steering/skill.md
3. [ Slidev Engine + theme-aws-dark ] --> render Vue components
4. [ Local Preview :3030 ] --> export PPTX / PDF / PNG
+-----------------------------------------------------------------------------------+
AWS Hong Kong Summit 2026에서 Haowen Huang은 Developer Lounge를 Kiro와 Slidev 워크플로로 마무리했다. AWS 블로그 URL을 약 3분 만에 세련된 덱으로 바꾼다. .kiro/steering/skill.md의 안내로 에이전트가 콘텐츠를 가져오고, 언어를 감지하고, theme-aws-dark Vue 컴포넌트를 적용한 뒤 PPTX·PDF·PNG로 내보낸다—무급 meetup 디자인 노동을 결정적이고 버전 관리 가능한 Markdown 파이프라인으로 대체하며, 빌더는 클론·반복하고 귀국 비행기에서 바로 실행할 수 있다.
기술 리소스 & 저장소
hands-on 분석에 들어가기 전에, 이 필수 저장소와 도구를 북마크하라.
-
프로젝트 GitHub 저장소: github.com/hanyun2019/kiro-slidev-ppt-maker
-
Slidev Framework: sli.dev
-
Kiro Agentic IDE: kiro.dev
아무도 예산에 넣지 않는 비싼 한 시간 (그리고 HK Meetup이 고치는 법)
우리 모두 겪어 봤다. Amazon EC2, Amazon Bedrock, 또는 Serverless 파이프라인에 대한 훌륭한 아키텍처 분석을 읽고, 엔지니어링 팀, 로컬 AWS User Group, 또는 잠재 시드 투자자에게 발표하고 싶어진다.
전통적인 슬라이드 제작 흐름은 악명 높게 지루하다.
-
PowerPoint, Keynote, 또는 Google Slides를 연다.
-
단락을 복사·붙여넣고, 공들여 불릿 포인트로 줄인다.
-
정렬을 쫓고, 글꼴 크기를 만지고, 박스 크기를 조정하는 데 한 시간을 쓴다.
-
핵심 기술 콘텐츠는 이미 써져 있는데도, 순수 디자인 오버헤드로 1~2시간을 낭비한다!
홍콩의 빠른 스타트업 생태계에서, 커뮤니티 오거나이저들은 매번 로컬 meetup 전에 슬라이드 포맷팅으로 밤을 샌다. Haowen의 프로젝트는 그 무급 디자인 노동을 결정적인 3분 AI 에이전트 루프로 바꾼다. 절약한 시간과 자원은 즉시 엔지니어 채용, 스폰서 확보, 프라이빗 창업자 밋업 자금으로 돌아갈 수 있다.
The Stack: 프로젝트 아키텍처 안에는 무엇이 있나?
이 워크플로는 Slidev(Vue 3와 Vite 위에 구축된 developer-first, Markdown 구동 슬라이드 프레젠테이션 도구)와 Kiro(스펙과 steering 파일로 안내되는 AI 에이전틱 개발 환경)를 결합한다.
프로젝트 구성요소 구조는 다음과 같다.
| 구성요소 디렉터리 / 파일 | 기술 역할 & 목적 |
|---|---|
theme-aws-dark/ |
AWS 키노트와 HK 하버 나이트 미학에서 영감을 받은 다크 그라데이션 배경의 커스텀 Slidev 테마. 세 핵심 Vue 컴포넌트 포함: StatCard, Timeline, ComparisonTable. |
ppt-aws-theme-demo/ & ppt-aws-theme-demo-cn/ |
올바른 구문, 컴포넌트 사용법, 구조 표준을 보여주는 영어·중국어 참조 레이아웃 템플릿. |
.kiro/steering/skill.md |
디렉터리 구조, 언어 자동 감지, 밀도 한도, 컴포넌트 선택, 출력 관례를 Kiro에 강제하는 「Steering Brain」 파일. |
| Preset Mermaid Architecture Snippets | 인기 AWS 클라우드 패턴(Web App, Serverless API, AI Agent, Data Pipeline)용 사전 구성된 Mermaid 다이어그램 블록. |
Step-by-Step Hands-On Workflow
브라우저 탭의 기술 블로그 포스트를 완전히 렌더링된 프레젠테이션 덱으로 바꾸는 다섯 가지 간단한 단계다.
+-----------------------------------------------------------------------------------+
FIVE-STEP DEVELOPER FLOW
1. Send blog URL to Kiro agent
2. Agent runs automated fetch, language detection, and rendering
3. Launch local hot-reload preview server (localhost:3030)
4. Natural-language iteration and formatting tweaks
5. Export to production PPTX / PDF / PNG
+-----------------------------------------------------------------------------------+
Step 1: 링크를 Kiro에 보내기
프로젝트 워크스페이스에서 Kiro를 열고 일상 언어 프롬프트를 내린다.
Turn this blog post into a PPT:
https://builder.aws.com/content/3EcuvO5GFJY06xS7DyCvk6KQMKk/
특정 프레젠테이션 제약이 있으면 지시에 직접 추가한다.
Turn this blog post into a PPT with no more than 20 slides:
https://builder.aws.com/content/3EcuvO5GFJY06xS7DyCvk6KQMKk/
Step 2: Kiro가 후드 아래에서 하는 일
Kiro가 링크를 받으면 다단계 파이프라인을 실행한다.
-
Deterministic Web Fetching: 먼저 빠른 HTTP fetch를 시도한다. 대상이 무거운 Single Page Application(SPA)—예:
builder.aws.com, Substack, Medium—이면 자동으로 headless browser rendered 모드로 전환해 전체 동적 콘텐츠를 캡처한다. -
Language Detection: 텍스트 밀도를 분석한다. 콘텐츠가 주로 중국어면
lang: zh를 설정하고, 그렇지 않으면lang: en으로 기본한다. 시스템 타이포그래피와 Mermaid 라벨 폰트가 자동으로 적응한다. -
Template Ingestion: 한 바이트도 쓰기 전에, Kiro는
ppt-aws-theme-demo/slides.md와pages/아래 모든 하위 페이지를 읽어 정확한 레이아웃 규칙과 Vue 컴포넌트 파라미터를 흡수한다. -
Isolated Project Creation:
ppt-{normalized-topic-name}/명명 체계로 격리된 폴더를 생성한다. 참조 템플릿은 절대 수정되지 않으며, 워크스페이스 루트 위생이 유지된다. -
Slide Content Generation: 커버 페이지, 섹션 디바이더, 구조화된 본문 슬라이드, 클로징 페이지를 초안한다. 10장보다 긴 덱은
pages/아래 모듈형 챕터 파일로 자동 분할된다. -
Smart Vue Component Assignment: * 단일 임팩트 메트릭 -> StatCard * 순차 이벤트 또는 로드맵 -> Timeline * 나란한 트레이드오프 -> ComparisonTable * 복잡한 테이블 데이터셋 (>4 metrics) -> 표준 Markdown 테이블
Step 3: Local Hot-Reload Preview
생성이 끝나면 Kiro가 터미널 실행 명령을 제공한다.
npm install && npx slidev ppt-{topic-name}/slides.md
이를 실행하면 http://localhost:3030/에서 로컬 Vite 개발 서버가 기동된다.
-
수동 마크다운 편집은 즉시 브라우저 hot-reload를 트리거한다.
-
http://localhost:3030/presenter/로 이동하면 speaker notes가 있는 전용 presenter 모드. -
http://localhost:3030/overview/로 이동하면 조감 슬라이드 그리드.
Step 4: Natural Language Iteration
특정 슬라이드 밀도나 배경 accent가 마음에 들지 않는가? Kiro와 직접 채팅해 출력을 조정한다.
The cost breakdown page has too much text — split it into two slides.
Use a forest-green gradient for the final closing slide.
Replace the bar chart with a Timeline component listing three major milestones.
Kiro가 해당 Markdown 파일을 즉시 편집하고, 로컬 서버가 변경을 hot-reload한다.
Step 5: PowerPoint 또는 PDF로 내보내기
클라이언트 피치 덱이나 엔터프라이즈 미팅용 네이티브 파일을 생성하려면 export 도구를 실행한다.
# Export as editable PowerPoint
npx slidev export ppt-{topic-name}/slides.md --format pptx
# Export as PDF document
npx slidev export ppt-{topic-name}/slides.md
(참고: 최초 export는 playwright-chromium 설치를 요청한다. 한 번 승인하면 이후 실행을 위해 캐시된다.)
Command Cheat Sheet & Quick-Start Loop
급한 개발자를 위한 빠른 명령 시퀀스:
| 목표 | Command / Action |
|---|---|
| Generate Deck | 블로그 URL을 Kiro chat 프롬프트에 붙여넣기. |
| Local Web Preview | npx slidev ppt-{topic}/slides.md |
| Export PPTX | npx slidev export ppt-{topic}/slides.md --format pptx |
| Export PDF | npx slidev export ppt-{topic}/slides.md |
| Export PNG Images | npx slidev export ppt-{topic}/slides.md --format png |
Real-World Case Study: Amazon EC2에 OpenClaw 배포하기
라이브 세션에서 Haowen은 실제 Amazon Web Services 개발자 아티클로 워크플로를 시연했다.
[https://builder.aws.com/content/3CQFzc91nM9sGkfHRbpjo4eXojf/deploying-openclaw-on-amazon-ec2-a-developers-perspective](https://builder.aws.com/content/3CQFzc91nM9sGkfHRbpjo4eXojf/deploying-openclaw-on-amazon-ec2-a-developers-perspective)
대략 3분 만에 Kiro는 네 챕터에 걸쳐 분류된 17개의 모듈형 슬라이드를 담은 ppt-openclaw-aws-ec2/를 구축했다.
| Chapter | Slide Contents & Architecture Focus |
|---|---|
| Part 1: What is OpenClaw | 핵심 기능 세트, 비즈니스 동기, 배포 가치 제안. |
| Part 2: Architecture | Mermaid 클라우드 아키텍처 다이어그램, 인프라 트레이드오프, 비용 추정, IAM 선수 조건. |
| Part 3: Deployment Guide | 원클릭 US-region 배포 스크립트, 파라미터 설정, AWS Systems Manager(SSM) 터널 셋업, 멀티 리전 배포 옵션. |
| Part 4: Configuration & FAQ | 두 열 코드 스니펫, 운영 bash 명령, 흔한 트러블슈팅, 테이크어웨이. |
FAQ 슬라이드는 복잡한 AWS Systems Manager(SSM) 명령과 bash 구문을 완벽한 정렬과 다크모드 코드 구문 강조가 있는 깔끔한 듀얼컬럼 레이아웃으로 자동 렌더링했다.
+-----------------------------------------------------------------------------------+
EXAMPLE 17-SLIDE DECK STRUCTURE
Cover Page
--> Part 1: What is OpenClaw Features and motivation
--> Part 2: Architecture Mermaid diagrams and SSM tunnel
--> Part 3: Deployment Guide AWS EC2 and regional steps
--> Part 4: FAQ and Operations Two-column bash snippets
Closing Page
+-----------------------------------------------------------------------------------+
Deep Dive: .kiro/steering/skill.md 내부
이 시스템을 구동하는 핵심 지능은 .kiro/steering/skill.md다. 예측 불가능한 one-shot 프롬프트에 의존하는 대신, Kiro는 매 세션 시작 시 이 Steering 파일을 자동으로 로드해 일곱 가지 주요 도메인에 걸쳐 엄격한 표준을 강제한다.
1. Working-Directory Strategy
-
모든 프레젠테이션 덱은
ppt-{normalized-topic-name}/에 보관된다. -
참조 템플릿(
ppt-aws-theme-demo/와ppt-aws-theme-demo-cn/)은 교차 대화 오염을 막기 위해 read-only로 표시된다. -
테마 경로는 기본값
theme: ../theme-aws-dark.
2. Intelligent Blog Fetching & Fallbacks
-
1차 시도로
webFetch(url, mode="full")를 실행한다. -
반환 페이로드가 <500 bytes이거나, paywall/login gate를 나타내거나, 내비게이션 헤더만 포함하면 자동으로
mode="rendered"로 업그레이드한다(JavaScript를 실행할 수 있는 전체 브라우저 엔진 구동). -
Hard Rule: fetch가 실패하면 콘텐츠를 날조하거나 환각하지 않는다. 사용자에게 직접 알리고 텍스트 입력을 요청한다.
3. Language & Internationalization (i18n) Rules
-
주로 중국어 텍스트면 자동으로
lang: zh를 설정하고, 그렇지 않으면lang: en으로 기본한다. -
lang: zh가 활성일 때, 테마는 body 폰트 스택을 PingFang SC, HarmonyOS Sans SC, Noto Sans SC로 전환하고, 누락된 Google Web Fonts로 인한 레이아웃 깨짐을 막기 위해 로컬 폰트 오버라이드를 적용한다.
4. Trademark Compliance Matrix
중국어 프레젠테이션 덱에서 기업·브랜드 표준을 유지하기 위해, Kiro는 교체 룩업 테이블을 적용한다.
| Source Term | Compliant Chinese Translation Standard |
|---|---|
| AWS Lambda | Lambda |
| AWS web app | Amazon Web Services web application |
| AWS services | Amazon Web Services services |
| built on AWS | built on Amazon Web Services |
Amazon Bedrock, Amazon EC2, Amazon S3 같은 전체 서비스 상표는 그대로 보존된다. lang: zh에서는 로고와 푸터가 테마에 의해 자동으로 억제된다.
5. Eight-Step Execution Protocol
Kiro는 다음 액션을 엄격히 순서대로 실행한다.
-
참조 템플릿 읽기 (
slides.md와pages/*.md). -
프로젝트 디렉터리 초기화.
-
전체 슬라이드 콘텐츠 초안.
-
긴 슬라이드 세트(>10 slides)를 모듈형 챕터 페이지로 분할.
-
정적 에셋 포함.
-
로컬 프리뷰 CLI 명령 출력.
-
자연어 피드백 반복 적용.
-
export를 위해 최종화.
6. Content Density & Layout Standards
-
Density Cap: 페이지당 최대 7개 불릿 포인트. 초과 콘텐츠는 멀티컬럼 또는 멀티페이지 형식으로 분할해야 한다.
-
Mermaid Architecture Standards: 다이어그램은 3–5개 핵심 노드에 머물고, 노드 라벨은 짧게 유지하며, 시각적 오버플로를 막기 위해
{scale: 0.7}또는{scale: 0.8}스케일 파라미터를 적용한다. -
Icon Selection: 검증되지 않은 아이콘 패키지보다 표준 유니코드 이모지(🚀, ✅, 💡)를 우선한다.
-
Image Scaling: 모든 임베디드 에셋에
{width=500px}또는{width=60%}같은 명시적 너비 제약을 강제한다. -
The Zero-Animation Constraint: Vue 애니메이션(
v-click,v-clicks,v-motion)을 직접 금지. 정적 안정성이 PDF와 PPTX 파일 변환을 완벽히 보장한다.
7. Automated 20+ Item Quality Checklist
제어권을 사용자에게 돌려주기 전에, 에이전트는 20+ 항목 체크리스트에 대해 출력을 조용히 검증한다(에셋 너비, 레이아웃 밀도, 제로 애니메이션 규칙, 구문 무결성 확인).
안정성을 보장하는 핵심 엔지니어링 결정
수십 년간 클라우드 개발 워크플로를 검토해 온 입장에서, Haowen 시스템의 세 가지 아키텍처 선택이 특히 훌륭했다.
1. Steering Files vs. System Prompts
거대한 프롬프트를 채팅바에 던지는 대신, 관례를 .kiro/steering/skill.md 안에 한 번 쓴다. Shiro Seike가 Summit 초반에 AWS 클라우드 아키텍처 표준을 CLAUDE.md에 인코딩한 것과 같이, Haowen은 presentation engineering도 동일한 steering 규율의 혜택을 받는다는 것을 보여주었다.
2. A Constrained Design System
theme-aws-dark/는 의도적으로 여덟 가지 레이아웃 타입과 세 커스텀 Vue 컴포넌트만 제공한다. 시각적 선택을 제한함으로써 AI 에이전트는 거의 동일한 레이아웃 선택 사이에서 혼란에 빠지지 않고, 매번 깨끗하고 예측 가능한 결과를 낸다.
3. Preset Architectural Snippets
생성형 AI에게 복잡한 아키텍처 다이어그램을 처음부터 구성하라고 시키기보다, theme-aws-dark/snippets/architectures/가 표준 AWS 인프라(Web Apps, Serverless, AI Agents, Data Pipelines)용 검증된 Mermaid 템플릿을 제공한다. 에이전트는 라벨 이름을 바꾸고 연결 노드를 조정하기만 하면 된다.
파이프라인 확장: 엔터프라이즈 & 투자자 유스케이스
기술 블로그를 중심으로 설계되었지만, Hong Kong Summit Developer Lounge의 개발자들은 이 워크플로가 다른 구조화된 입력 포맷도 처리한다는 것을 빠르게 발견했다.
-
Meeting Transcripts & Recaps: 경영진 트랜스크립트를 깔끔한 이해관계자 요약 덱으로 변환.
-
Startup READMEs & Pitch Decks: 오픈소스 GitHub 저장소를 프라이빗 VC 밋업용 세련된 투자자 업데이트로 변환.
-
Internal Architecture Specs: 기술 마크다운 문서를 팀 엔지니어링 브리핑으로 전환.
핵심 엔진이 Markdown, Vue 3, Vite에 의존하기 때문에, 모든 덱은 표준 git 워크플로로 버전 관리 가능하다—독점 파일 잠금 없음, 소프트웨어 구독 paywall 없음, 시각적 잡음 없음.
직접 해보기: Quick Start Guide
로컬 워크스테이션에서 워크플로를 테스트하려면 다음 명령을 실행한다.
# Clone the repository
git clone https://github.com/hanyun2019/kiro-slidev-ppt-maker.git
# Navigate into the project directory
cd kiro-slidev-ppt-maker
# Open Kiro IDE and send your prompt:
# "Turn this blog post into a PPT: <YOUR-URL-HERE>"
2026 Developer Lounge 최종 현장 노트
홍콩 스카이라인의 네온이 완차이 수면 위로 깜빡일 때, AWS Hong Kong Summit 2026의 최종 테이크어웨이가 선명해졌다. 개발자 생산성의 미래는 스펙 주도적이고 결정적이다.
Amazon Bedrock에서 엔터프라이즈 AI 에이전트를 구축하든, 로컬 유저 그룹용 슬라이드를 포맷하든, 표준을 Steering 파일에 인코딩하면 수 시간의 무급 노동이 단순하고 신뢰할 수 있는 3분 루프가 된다.
AWS Hong Kong Summit 2026 Developer Lounge에서 생중계로 보도했다. 6부 요약 시리즈는 여기서 끝!
