Hello Vibe

만들면서 이해의 근거를 남기는 Kiro 바이브코딩 확장

고려대학교 × AWS AI Innovators Challenge에서 만든 프로젝트고려대학교 × AWS · 2026.08 – 2026.10

기간: 2026.08 – 현재
종류: 팀 프로젝트
팀: 2명
역할: 프론트엔드 개발 (백엔드 지원)
진행 상태: 진행 중
배포: 설치 파일 공개GitHub (VSIX)

언어: TypeScript, 이 기술을 쓴 프로젝트 보기
프론트엔드: VS Code Extension API, 이 기술을 쓴 프로젝트 보기
백엔드: Node.js, 이 기술을 쓴 프로젝트 보기
AI: Kiro, 이 기술을 쓴 프로젝트 보기
Model Context Protocol, 이 기술을 쓴 프로젝트 보기
DB: SQLite, 이 기술을 쓴 프로젝트 보기
Drizzle ORM, 이 기술을 쓴 프로젝트 보기
도구: Vitest, 이 기술을 쓴 프로젝트 보기

라이브러리fast-check, esbuild

AI 도구Claude Code, Kiro

백엔드 저장소 다운로드·설치 가이드

GitHub 저장소

Hello-KU-tty/program (새 탭)

요약

코딩 초보자가 배우고 싶은 기술 하나로 시작해 TypeScript 서비스를 완성하도록 돕는 Kiro IDE 확장입니다. Agent가 코드를 작성하는 동안 개발 중 생긴 실제 결정을 사용자가 고르게 하고, "Agent가 코드를 썼다"와 "사용자가 이해했다"를 구분해 기록합니다. 고려대학교 × AWS AI Innovators Challenge에서 2인 팀으로 만들었고 본선에 진출했습니다.

내가 한 일

Kiro 확장의 Agent Panel(Builder·Helper 탭, 응답 스트리밍 표시) 초기 구조 구현
학습 목표 입력부터 프로젝트 후보, Learning Spec 확정까지의 화면 흐름 설계·구현
Core 프론트엔드 SDK 연동과 연결 실패 시 기능을 막는 처리 구현
Builder·Helper·Decision·Evidence 화면을 실제 로컬 Core에 연결
실측에서 나온 오류 코드별 한국어 안내와 백엔드 문제 보고서 작성
본선 버전의 'Kiro 채팅에서 열기'와 창 재로드 안내 구현
백엔드의 Windows 도구 체인 오류 수정과 Windows 설치 파일 빌드·실기기 점검

핵심 기능

프로젝트 후보 탐색: 배우고 싶은 기술을 입력하면 프로젝트 후보 10개를 받고, 피드백으로 후보를 다시 좁힙니다.
Learning Spec: Learning Spec을 검토·보완해 확정하고, 필요하면 프로젝트 후보 탐색으로 돌아갑니다.
Builder 결정 카드: Builder Agent가 개발 중 만난 실제 결정을 카드로 보여 주고, 사용자가 고르면 그 선택대로 작업을 이어갑니다.
읽기 전용 Helper: 설명을 위한 읽기 전용 대화로, 파일을 수정하지 않습니다.
이해 근거와 개념 상태: 학습 근거를 기록하고, 개념 상태는 정해진 네 단계 순서로만 올라가며 내려가는 변경은 거부합니다.
로컬 저장과 민감정보 가림: 상태를 사용자 컴퓨터의 SQLite에 저장하고, 저장 전에 알려진 형태의 토큰·키·홈 경로를 가립니다.
Kiro 채팅 연동: 본선 버전에서는 확정한 프로젝트를 Kiro 채팅에서 열어 실제 만들기를 이어갑니다.

기술 스택

언어

TypeScript: 확장 프론트엔드와 Core 백엔드의 주 언어

프론트엔드

VS Code Extension API: Kiro에 붙는 Agent Panel webview와 확장 명령

백엔드

Node.js: 127.0.0.1에서만 열리는 로컬 Core HTTP·SSE 서버

Kiro: Discovery·Builder·Helper·Evidence Analyst Agent 실행(Kiro 내장 Agent, kiro-cli)
Model Context Protocol: Agent 역할마다 쓸 수 있는 도구를 나눈 MCP 서버

SQLite: 로컬 상태 저장(better-sqlite3)
Drizzle ORM: SQLite 스키마 정의와 마이그레이션

도구

Vitest: 확장과 Core의 테스트

함께 쓴 라이브러리·도구

도구

fast-check: 화면 상태 Controller의 속성 기반 테스트
esbuild: 확장 코드와 webview 코드 번들링

같은 기술을 쓴 다른 프로젝트SHOWROOMZ Dayce

구조

Kiro 확장이 로컬 Core를 자동으로 띄우고, 127.0.0.1의 토큰 인증 HTTP·SSE로 통신합니다. Core는 상태를 SQLite에 저장하고, Kiro 내장 Agent 또는 kiro-cli로 네 Agent를 실행하며, Agent 역할마다 MCP 서버로 쓸 수 있는 도구를 나눕니다.

문제와 해결

문제
실제 Windows 11에서 사용자별로 설치된 kiro-cli를 찾지 못함
해결
사용자별 설치 경로를 탐색 대상에 추가하고 Windows에서만 실패하던 테스트 13개를 수정
문제
확장 버전을 올릴 때마다 생성 프로젝트가 도구 체인 변경 오류로 멈춤
해결
같은 제품의 새 버전 업그레이드는 허용하도록 판별 조건을 수정
문제
본선 버전에서 Core가 패널 Builder 실행을 거부해 시작 버튼이 오류로 끝남
해결
시작 동작을 Kiro 채팅에서 프로젝트를 여는 방식으로 변경
문제
portable 폴더의 node_modules가 git에서 무시되고, 줄바꿈 변환으로 배포 kit 해시가 깨짐
해결
.gitignore 예외와 .gitattributes 설정으로 파일을 원본 그대로 추적

결과

고려대학교 × AWS AI Innovators Challenge 본선 진출
프론트엔드 0.0.18 기준 자동 테스트 807개 통과
Mac 설치본(0.1.3)에서 실제 모델로 앱 생성·실행, 결정 반영, 재시작 후 복원 확인

배운 점

확장 프로그램 개발은 처음이었습니다. 확장 호스트와 webview가 메시지로만 주고받는 구조에 맞춰, 화면 상태를 Controller로 분리해 관리하는 방법을 익혔습니다.
AI를 프로그램 기능에 넣어 본 것도 처음이었습니다. 모델 응답이 실패하거나 중간에 끊길 때 사용자에게 상황과 다음 단계를 알맞게 안내하는 일이 기능을 만드는 것만큼 중요하다는 것을 배웠습니다.