CodeApp JS - Power Apps 바이브 코딩(Vibe Coding)을 위한 나의 지름길

Code Apps는 현재 제가 Power Platform에서 가장 좋아하는 기능입니다. 이는 Microsoft의 AI 전략이 처음부터 지향했어야 할 방향인 "UI가 아닌 하단의 코드를 자동화하라"는 원칙을 따르고 있습니다. 왜냐하면 그것이 바로 LLM(대규모 언어 모델)이 잘하는 일이기 때문입니다.

하지만 저는 Code Apps에서 몇 가지 문제점을 발견했습니다:

• CLI(명령줄 인터페이스) 요구 사항이 누군가에게는 장벽이 됩니다.
• 프로세스가 단절되어 있습니다 (예: URL에서 connection id를 가져오는 과정).
• GitHub와 같은 리포지토리(repo)가 필요합니다 (또 다른 장벽).
• React는 특정 유스케이스에는 좋지만, 다른 경우에는 과합니다.

그래서 저는 이러한 문제들을 해결할 방법을 만들고 싶었습니다. 제가 원했던 것은 다음과 같습니다:

1. 대부분의 메이커(maker)들이 커넥터(connector)를 추가하지 않고도 빌드할 수 있는 방법
2. Copilot 및 기타 에이전트(Agents)가 처음부터 올바르게 빌드할 수 있도록 지원
3. CLI 명령어가 필요 없는 단순한 워크플로
4. 편집 가능한 코드를 플랫폼 내에 저장

콜아웃(Callout): 제가 TypeScript를 조금 다루긴 하지만, 저는 제 방식에 갇혀 있어 JavaScript를 선호합니다. 또한 저는 무언가를 만드는 것을 좋아합니다. 따라서 이 점을 지적하는 사람이 있다면, 아마도 "복잡한 작업은 LLM이 다 할 것이므로 (직접 코딩하는 것은) 굳이 필요하지 않다"라고 말하는 사람일 것입니다.

그래서 제 아이디어는 Power Apps SDK를 기반으로 구축된 Code Apps의 포크(fork) 버전을 만드는 것이었습니다.

이 프로젝트는 한동안 지지부진했으나, Microsoft가 Power Platform CLI의 NPM 버전을 출시하면서 모든 것이 하나로 합쳐졌습니다. 덕분에 외부 의존성 대신 제 솔루션 내부에서 이를 빌드할 수 있게 되었습니다.

1. CodeApp JS

제 계획은 SDK를 단순한 JavaScript (빌드 단계를 제거한) 파일로 변환하는 프로세스를 구축하여 그 위에 작업을 쌓아 올리는 것이었습니다. 아이디어는 다음과 같은 파일들을 갖추는 것이었습니다:

• power-apps-data.js - SDK
• codeapp.js - 헬퍼 함수(helper functions), 디버거(debugger), Dataverse 액션, 그리고 추후에는 Flow 액션
• connectors/ - 가장 많이 사용되는 모든 커넥터를 JavaScript로 변환하여 담은 폴더. 사용하기 쉬운 래퍼(wrapper)와 내장 디버거를 갖추게 됩니다.
• Index.js* - 모든 프로젝트 JavaScript가 위치하는 곳
• Index.html* - 앱 UI가 위치하는 곳
• power.config.json* - 앱 설정 세부 정보

_*이 파일들은 항상 필요한 표준 Code App 파일들입니다.

제가 생각한, 사용 사례의 90% 이상을 커버하는 기본 커넥터 (Connectors)는 다음과 같습니다:

• Dataverse
• Office 365 Outlook
• Office 365 User
• Office 365 Groups
• SharePoint
• SQL
• Teams

다음 단계는 LLM (Large Language Models)이 Code App을 구축하는 방식을 개선하는 것이었습니다. 기본적으로 LLM은 일반적인 웹 앱을 만들려고 하기 때문입니다. 그래서 저는 에이전트 (agent)와 스킬 (skills)이라는 두 가지 주요 영역을 만들었습니다.

agent.md 파일은 VS Code에서 설정할 수 있는 시스템 프롬프트 (system prompt)와 같습니다. 이는 LLM이 이것이 Code App임을 인지하고, 단순한 fetch() 함수 대신 SDK를 사용하는 등의 작업을 수행하도록 보장합니다. skill.md 파일은 각 커넥터별로 존재하며, LLM이 power.config.json 파일을 업데이트하고 어떠한 어리석은 실수도 하지 않도록 보장합니다.

이 모든 것들은 기초에서 시작되었으며, 앱을 구축하며 얻은 학습을 통해 점진적으로 개선되었습니다. 앱을 더 많이 만들수록 LLM에 학습시킬 수 있는 지식도 더 많아졌습니다.

이는 제작자 (maker)가 별도의 설정 없이도 바로 Code App을 구축할 수 있음을 의미하지만, LLM을 돕기 위해 데이터 소스 (datasources)에 대한 스키마 (schemas)를 추가해야 하며, 여전히 Power Platform에 게시하기 위해서는 하나의 CLI 명령어를 사용해야 했습니다.

2. 빌드 설정 (Build Setup)

이 시점에서 저는 1단계와 2단계를 완료했지만, 3단계와 4단계는 어떻게 될까요? 바로 이 지점이 제가 직접 구축해야 했던 부분입니다 (제가 가장 좋아하는 부분이죠 😎).

워크플로 (workflow)를 쉽게 만들기 위해서는 CLI 명령어를 대체해야 했고, 이는 새로운 UI (User Interface)가 필요함을 의미했습니다. 제가 선택한 접근 방식은 제 목표와는 이상하게도 모순되게도, CLI를 구축하는 것이었습니다.

제가 그렇게 결정한 데에는 3가지 이유가 있었습니다.

첫째, 명령어를 일괄 처리하거나 개선하고 새로운 명령어를 추가할 수 있기 때문입니다. 예를 들어, 새로운 커넥터를 추가하고 싶을 때 첫 번째 유효한 연결을 찾아 그것을 사용하도록 하는 명령어를 만들 수 있었습니다 (URL에서 연결 ID를 가져올 필요가 없게 된 것입니다).

둘째이자 가장 중요한 이유는, CLI가 모든 UI의 기반이 될 수 있기 때문입니다.

따라서 우리는 CLI(Command Line Interface)에서 사용되고, 이 CLI가 다시 다른 앱들에서 사용되는 Code App JS 파일들을 보유하게 됩니다. 이렇게 하면 제가 새로운 커넥터(Connector)나 SDK 업데이트를 통해 파일을 업데이트할 때 그 변경 사항이 연쇄적으로 적용되며, 만약 제가 새로운 명령어를 추가하여 CLI를 업데이트하면(예: call flow가 추가되었을 때처럼) 이 역시 하위로 연쇄 적용됩니다.

세 번째로, 저는 정말 정말로 CLI를 만들고 싶었습니다.

3. CAP CLI

CLI는 라이트(Light) 버전과 풀(Full) 버전으로 나뉩니다. 라이트 버전은 CLI 명령어들을 다루며, 풀 버전은 Copilot SDK를 내장하여 완전히 독립적인 에이전트 도구(Agent tool)로 작동할 수 있게 합니다.

Light - CLI 명령어

이론적으로 CLI 명령어는 프로세스를 더 효율적이고 단순하게 만들어야 하며, 제가 만든 명령어들은 다음과 같습니다.

CAP auth - Power Platform에 로그인합니다.
CAP environment - 모든 환경(Environment) 목록을 나열하고 선택할 수 있게 합니다. 선택 후에는 power.config.json 파일도 업데이트합니다.
CAP dataverse - Dataverse 테이블을 입력받아 power.config.json에 추가하고, 설정 파일에 스키마(Schema)를 추가합니다 (불필요하거나 불필요해진 파일도 삭제합니다).
CAP flow - 선택할 수 있도록 모든 플로우(Flow)를 나열하고, power.config.json에 추가하며 설정 파일에 스키마를 추가합니다 (불필요하거나 불필요해진 파일도 삭제합니다).
CAP deploy - 앱을 환경에 게시(Publish)합니다. 이 과정에서 먼저 power.config.json 파일을 config 폴더로 복사합니다 (이유는 나중에 알게 될 것입니다).
CAP deploy --debugger - 디버거(Debugger)를 켭니다. 이를 통해 앱 내에서 모든 커넥터 액션(Connector actions)을 확인하고 복사할 수 있습니다 (디버깅을 돕기 위해 LLM에 전달하기에 매우 좋습니다).
CAP connector - 커넥터를 입력받아 환경에서 첫 번째 연결 ID(Connection ID)를 찾고, TypeScript 코드를 가져와 변환한 뒤, 디버거 기능을 내장하여 커넥터 폴더로 이동시킵니다 (불필요하거나 불필요해진 파일도 삭제합니다).

CAP environment --와 같은 추가적인 단축키들이 더 있지만, 대략 어떤 느낌인지 이해하셨을 것입니다.

그것들은 Power Platform API의 표준 명령들이지만, 거기서 멈출 이유가 없기에 저만의 명령들을 몇 가지 추가했습니다.

CAP setup - 템플릿화된 모든 CodeApp JS 파일들을 프로젝트 폴더로 복사하고, name 등을 물어보며 power.config.json 파일을 설정합니다.
CAP table - 사용자(또는 LLM)가 Dataverse 테이블을 생성할 수 있게 해줍니다. 이름과 게시자(publisher)를 입력한 다음 필요한 만큼의 컬럼(어떤 타입이든 가능)을 추가할 수 있습니다.
CAP import - 제가 가장 좋아하는 기능이지만, 더 자세한 설명이 필요합니다.

CAP import는 목표 4의 핵심입니다. CodeApp JS에서 Vanilla JavaScript를 사용할 때의 가장 좋은 점은 빌드 단계(TypeScript를 JavaScript로 변환하는 과정)가 필요 없다는 것입니다. 따라서 CodeApp에 있는 코드는 바로 여러분이 작성한 코드입니다. 이는 이론적으로 솔루션(solution)을 내보내고(export), 압축을 풀면 여러분이 작성한(또는 Copilot이 작성한) 코드를 직접 볼 수 있음을 의미합니다. 한 가지 부족한 점은 power.config.json 파일입니다. 하지만 이 파일과 스키마(schemas) 같은 다른 가져오기 파일들을 dist 폴더 내의 config 폴더 같은 곳으로 복사한다면, 필요한 모든 것을 갖추게 됩니다.

그리고 그것이 바로 import가 하는 일입니다. 환경 내의 모든 Code App을 나열하고, 앱을 선택하면 해당 앱이 포함된 솔루션을 찾아 솔루션 압축 파일(.zip)을 내보냅니다. 솔루션을 확보하면 압축을 풀고, 코드를 가져와 프로젝트 폴더에 추가한 다음, 마지막으로 dist/config 폴더에서 power.config.json을 루트(root)로 복사합니다.

이제 Power Platform을 사용하여 개발 코드를 저장할 수 있습니다 😎

Full - Copilot

Full 버전은 Light 버전의 모든 기능을 포함하고 있을 뿐만 아니라, Copilot SDK가 내장되어 있어 VS Code나 다른 에이전트(agent) 도구가 필요하지 않습니다. CAP 단독으로 사용할 수 있으며(다시 말씀드리지만, 이를 기반으로 여러분만의 에이전트 도구를 구축할 수도 있습니다).

CAP copilot - GitHub Copilot 계정에 로그인합니다.
CAP model - 사용 가능한 모델을 확인하고 원하는 모델을 선택합니다.
CAP skills - 스킬 목록을 확인하고 상세 내용을 보기 위해 엽니다.
CAP instruction - 자신만의 instruction.md 파일을 생성합니다.
CAP - 상호작용 세션 (interaction session)을 엽니다. 모든 입력은 LLM (Large Language Model)으로 전송되는 프롬프트(prompt)이지만, / 접두사를 붙이는 경우는 CAP deploy와 같은 명령어를 위해 CLI (Command Line Interface)로 전달됩니다.
CAP-p - LLM에 일회성 프롬프트를 실행합니다 (Claude-p와 유사).
CAP session - 저장된 모든 세션을 확인하고 계속할 세션을 선택합니다.

보시다시피 10개씩 블록 단위로 반환하도록 성공적으로 전환되었습니다. 다만 언제나 그렇듯, 로드된 총합(loaded total)이 10만 표시되는 작은 버그가 있네요 🤦‍♂️

4. 사용 방법

솔직히 말해서, CLI가 멋지긴 하지만 개발하기에 최선의 방법은 아닙니다 (에헴, 미안해 Claude Code). 그래서 저는 어떻게 사용하고 있을까요?

현재 저는 이 CLI를 기반으로 직접 만든 VS Code 확장 프로그램 (Extension)을 사용하고 있습니다.

CAP - Code Apps

저에게 이것은 로우코드 (Low-Code)와 AI의 완벽한 조합입니다. Dataverse 테이블을 추가하거나 배포하는 것과 같은 작업을 완료하는 데 필요한 모든 버튼을 갖추고 있습니다 (화면 하단 참조).

그리고 모든 코드 작성을 AI에게 위임합니다 (우리가 Power Apps에서 하는 방식과 비슷합니다. 우리는 버튼과 상호작용하고, 대부분의 코드는 Microsoft 개발자들이 제공하는 사전 구축된 코드에 위임합니다).

또한 몇 가지 추가적인 이점이 있습니다.

• VS Code에서 Copilot을 사용하면 Copilot SDK를 통해서는 활성화되지 않는 Gemini Pro 3와 같은 추가 모델을 사용할 수 있습니다.
• CLI의 경우, SDK를 사용하기 위해 관리자가 Copilot을 활성화해야 하고 사용자가 CLI를 설치해야 하지만, VS Code 확장 프로그램 (Ext)은 보통 클릭 한 번이면 됩니다.
• 저는 VS Code에 익숙하기 때문에 쉽게 사용할 수 있습니다.

여기에 제가 이것을 사용하여 앱을 빌드하는 데모 영상이 있습니다 (저는 유튜버가 아니므로 제작비 투입을 기대하지 마세요. 그리고 약간 지루할 수 있으니 배속 재생을 권장합니다 ㅎㅎ).

하지만 저는 모든 Code App을 멋진 UI와 함께 한 곳에서 찾을 수 있도록 오케스트레이션 (Orchestration) 앱을 작업 중입니다.

5. 직접 시도해 보세요