kai Kai(카이)를 사용해 바이브 코딩(Vibe Coding)하기: 단순한 프롬프트를 통해 실제 VCL 윈도우 앱 구축하기

[Kori]

Sarina DuPont의 "Vibe Coding with Kai: Building a Real VCL Windows App from a Simple Prompt" 을 번역했습니다. (원문 작성: 2026년 5월, 최종 번역: 2026년 5월)

 

이번 주는 여기 엠바카데로(Embarcadero)의 모든 구성원에게 매우 흥미진진한 한 주였다. 이번 주에 우리는 공식적으로 Kai(카이)를 출시했다. 이 플랫폼은 RAD Studio(라드 스튜디오)를 에이전틱(Agentic) 개발 환경으로 변모시킨다. 최고 수준의 코드 제안 기능이 제공되며, 여기에 AI 에이전트를 결합한다. 그 AI 에이전트는 애플리케이션을 생성, 빌드, 수정, 진화시키는 역할을 할 수 있다.

내가 탐구하고 싶었던 한 가지 분야는 Kai(카이)의 바이브 코딩(Vibe coding) 지원 능력이다. 여러분이 잘 알고 있겠지만, 나는 수년 동안 엠바카데로 생태계 전반에 걸쳐 사용자 경험, 애플리케이션 디자인, 시각적 일관성에 집중해 왔다. 모바일 디자인 지원과 스타일링 기능을 발전시키는 것에서부터 VCL 및 FireMonkey(파이어몽키) 테마 작업, 커스텀 스타일 생성에 이르기까지 UX에 관련된 다양한 것들을 담당해오고 있다. 그러니 자연스럽게 나는 나는 Kai(카이)의 바이브 코딩 기능이 디자인 컨셉들, 사용자 경험(UX) 목표들, 시각적 요구 사항들을 실제 작동하는 애플리케이션들로 변환하는 데 어떻게 도움이 될 수 있는지 확인하고 싶었다. 즉, 보다 더 대화형(conversational)이고, 반복적(iterative) 개발 절차를 통해서 말이다.

바이브 코딩(Vibe coding)이란 소프트웨어를 신속하게 구축하는 실행 방식이다. 프롬프트와 반복 작업을 통해 AI와 협업하여 진행한다. 이것은 모든 코드 라인을 직접 수동으로 작성하는 것 보다는 의도와 실험에 보다 촛점을 맞춘다. 개발자들은 빈 폼(Form)들과 보일러플레이트 코드에서 시작하지 않고, 그 대신, 아이디어나 디자인 또는 대략적인 개념만 가지고 시작할 수 있다. 그리고 AI가 구현 절차를 가속화하도록 한다.

이번 기고에서, 나는 Kai(카이)가 단순한 아이디어를 얼마나 멀리까지 발전시킬 수 있는지 확인해 보고 싶었다. 최소한의 수동 설정만으로 말이다.

 

1단계: 애플리케이션 UI 모형(Mockup) 제작

수년 동안, 나는 Photoshop, Illustrator, Canva, Figma 및 기타 다양한 디자인 도구들을 사용해 왔다. 최근에는 Figma-to-code(피그마-투-코드) 작업흐름 그리고 AI-지원 UI 생성이 점점 더 대중화되고 있다. 그래서, 궁금해졌다. Kai(카이)는 AI로 생성된 개념 이미지(Image)를 받아서, 그것을 실제 작동하는 VCL 애플리케이션으로 바꿀 수 있을까?

이를 테스트하기 위해, 나는 ChatGPT(챗지피티)를 사용해 UI 모형(Mockup)을 만들었다. 간단한 EV(전기차) 충전소 검색 애플리케이션의 모형이다. 이 모형의 개념은 다음과 같다:

“간단한 윈도우 앱을 만들어줘. 어두운 테마를 반영해줘. 사용자가 우편번호를 입력하고 근처의 충전소들을 찾는 앱이야 ”

ChatGPT는 세련된 모형을 만들어 냈다. 실제 프로덕션 애플리케이션에서 볼 수 있을 법한 것과 놀라울 정도로 비슷했다.

 

나는 이 이미지를 로컬에 다음과 같이 저장했다:

C:\Pictures\EVChargerMockup.png

목표는 간단했다: 이 모형을 디자인 참조 자료로 사용한다. 그리고 Kai(카이)가 RAD Studio(라드 스튜디오) 안에서 이것을 얼마나 효과적으로 재현할 수 있는지 확인하는 것이다.

2단계:  Kai(카이) 프롬프트를 작성해 애플리케이션을 구축하기

애플리케이션을 생성하기 전에, 나는 먼저 RAD Studio(라드 스튜디오) 안에 Kai(카이)를 구성했다. Kai를 설치한 후, OpenAI Codex(오픈에이아이 코덱스)에 연결했다. 여기에서 지정한다:

Tools > Options > Kai > Chat

 

그런 다음, 새로운 빈 VCL 애플리케이션을 생성했다. 그리고, Kai-Chat(카이-챗) 패널을 실행했다. 여기에서 지정한다 :

View > Kai > Chat

그런 다음, 프롬프트 하나를 제공했다. 거기에는 내가 원하는 기능과 앞서 생성한 시각적 참조 이미지를 설명했다. 

 

내가 가장 인상 깊게 느꼈던 점은 Kai(카이)가 단순히 UI 컴포넌트들만 생성하는 데 그치지 않았다는 사실이다. 이것은 애플리케이션 요구 사항들을 논리적으로 분석하고, EV 충전소 데이터 가져오기 및 우편번호 조회 기능을 위한 무료 API들을 자동으로 선택했다.

 

Kai(카이)는 나에게 API, 데이터 모델, 폼, 스타일링을 수동으로 연결하도록 요구하지 않았다. 그 대신, 작업 한 번만에 스캐폴딩(Scaffolding)의 대부분을 처리했다.

디자인 타임(Design Time)에 보이는 이 앱의 모습은 다음과 같다:

 

3단계: 생성된 UI 검토 및 개선

일단, 애플리케이션이 컴파일되고 실행되자, 생성된 결과물은 원래의 디자인 참조 자료와 꽤 비슷해 보였다.

 

Kai(카이)가 만들어 낸 결과물들:

• '어두운 테마'가 적용된 VCL 인터페이스
• 스타일이 적용된 패널들과 라벨들
• 검색 기능
• API 통합(integration)
• 동적 충전소 결과물들
• 런타임에 생성된 UI 카드들

이 모든 것이 단 하나의 자연어 프롬프트에서 나왔다.

물론, 첫 번째 시도에서 완벽한 AI 생성 애플리케이션이 만들어지지는 않는다. 하지만, 그것 역시 이 절차의 일부이다. 생성된 충전소 카드들에서 일부 텍스트 간격 문제가 있었다. 그래서 런타임에 라벨들이 겹치는 현상이 발생했다.

나는 레이아웃 코드를 수동으로 추적하지 않았다. 그 대신, 나는 Kai(카이)에게 문제를 설명했다.

그러자 Kai(카이)는 문제를 식별하고 근본 원인을 설명했으며, 필요한 레이아웃 조정을 자동으로 만들어 냈다. 즉, 카드의 높이(height), 여백(Margin), 간격(spacing)을 늘려 주었다.

 
 

이 반복적인 루프(iterative loop)는 놀라울 정도로 자연스럽게 느껴졌다:

• 만들어 내기
• 실행하기
• 관찰하기
• 프롬프트 작성하기
• 개선하기

이 작업흐름은 궁극적으로 Kai(카이)를 통한 바이브 코딩을 강력하게 만드는 요소이다.

업데이트된 사항들이 보기 좋았지만, 나는 코드에서 한 가지 추가적인 변경을 수행했다. 수작업으로 Station Name 캡션의 글꼴 크기(font size)를 줄였다. 겹치는 텍스트들을 더욱 최소화하기 위해서 그랬다.

 

이것은 데모 애플리케이션을 위해, Kai(카이)가 생성한 코드의 일부이다:

 

이것은 최종적으로 실행된 애플리케이션이다 (위 변경 사항들을 적용한 후의 모습):

결론적으로, 나는 API 통합, 스타일이 적용된 UI 컴포넌트들, 사용 가능한 기능을 갖춘 실제 작동하는 VCL 애플리케이션을 생성할 수 있었다. 이 앱을 만드는데 걸린 시간은 전통적인 작업흐름에 비해 극히 일부 정도였다.

Kai(카이)는 RAD Studio(라드 스튜디오)를 협업 개발 환경으로 효과적으로 변화시켰다. 즉, RAD Studio 안에서 아이디어를 실현할 수 있다. 개념에서부터 작동하는 프로토타입 완성까지 믿을 수 없을 만큼 빠르게 진행되었다.

30일 무료 트라이얼에 여러분을 초대한다. Kai(카이)의 기능들을 직접 확인해 볼 수 있다: https://www.embarcadero.com/products/rad-studio/kai