Uno 플랫폼. 이제 AI를 탑재했습니다. | .NET Conf 2025

프로그래밍 C# / .NET
,
1

UNO 플랫폼 AI 에이전트 데모

핵심 문장 요약

  • UNO Platform은 C#/XAML 기반 크로스 플랫폼 앱에 AI 에이전트와 MCP, Hot Reload, Hot Design을 결합해 실행 중인 앱을 직접 수정·디자인하는 워크플로를 구현했습니다.
  • 문서/스캐폴딩 MCP, 앱 MCP, Hot Design Agent가 결합되어 날씨 앱 생성, Figma 디자인 변환, WPF 메모장 마이그레이션까지 에이전트가 스스로 계획하고 실행하며 코드를 수정합니다.
  • 에이전트는 빌드 오류, 네임스페이스 문제, Deprecated API까지 스스로 감지해 수정하고, 스크린샷과 UI 트리 스냅샷을 기반으로 실행 중인 앱의 상태를 이해합니다.
  • Windows 3.11 스타일 테마 적용, 타이틀바 확장, Linux 환경에서의 디자인 투 코드 등 다양한 시나리오를 하나의 AI 중심 개발 파이프라인으로 통합했습니다.
  • 전체 데모는 “에이전트가 앱을 보고 이해하고 고치며 이식하는” 경험을 중심으로, UNO Platform이 AI 기반 개발 워크플로의 실험장이라는 점을 보여줍니다.

상세 요약

1. UNO Platform과 AI 통합 개요

  • 발표자는 UNO Platform CTO 제롬 라보로, UNO Platform에 AI 기능을 결합한 최신 데모를 소개했습니다.
  • UNO Platform은 C#/XAML 기반으로 웹, 모바일, 데스크톱을 아우르는 크로스 플랫폼 프레임워크이며, .NET이 동작하는 거의 모든 환경을 대상으로 합니다.
  • 플랫폼은 오픈 소스이며, 2018년 이후 꾸준히 확장되어 왔고, 최근에는 AI 기능을 전면에 내세운 Studio 2.0을 출시했습니다.
  • UNO Platform Studio는 코어 프레임워크 위에 올라가는 생산성 도구 모음으로, 기존에는 IDE 기반 코드 작성과 Hot Design 기반 시각적 디자이너 두 가지 흐름을 제공했습니다.
  • 이번 세션의 핵심은 여기에 AI 에이전트와 MCP 서버를 결합해, 실행 중인 앱을 에이전트가 직접 보고 수정하는 워크플로를 보여주는 것입니다.

2. MCP 구성 요소와 Hot Design Agent

  • UNO 쪽에서 제공하는 MCP 구성 요소는 크게 세 가지로 설명되었습니다.
    • 문서/스캐폴딩 MCP: 최신 UNO Platform 문서와 예제를 기반으로, 에이전트가 정확한 정보를 참고하도록 돕는 역할을 합니다.
    • 앱 MCP: 실행 중인 앱에 대한 "눈과 손"을 제공해, 에이전트가 앱을 재시작하거나, 스크린샷을 찍거나, UI 트리를 읽어오는 등 직접 상호작용할 수 있게 합니다.
    • Hot Design Agent: Hot Design 도구에 통합된 에이전트로, 실행 중인 앱 안의 화면을 설계하고, 프롬프트를 기반으로 레이아웃과 내용을 반복적으로 조정합니다.
  • 이 모든 것은 Hot Reload 위에서 동작하며, Hot Reload는 다음과 같은 이유로 핵심 인프라로 강조되었습니다.
    • 실행 중인 앱에 UI·코드 변경을 빠르게 적용해 개발 루프를 단축합니다.
    • IDE, Hot Design, 에이전트 모두가 동일한 Hot Reload 파이프라인을 공유해, 한쪽에서 변경한 내용을 다른 쪽에서도 즉시 확인할 수 있습니다.
    • 복잡한 워크플로의 10번째 페이지 같은 깊은 네비게이션 상태에서도 앱 재시작 없이 화면을 수정할 수 있습니다.

3. Hot Design 기능과 에이전트 미리보기 모드

  • Hot Design은 “실행 중인 앱” 자체를 편집하는 도구로, 일반 디자이너처럼 정적인 미리보기만 보여주는 것이 아니라 실제 런타임 상태를 다룹니다.
  • 개발자는 트리 구조에서 UI 요소를 선택하고 속성을 수정하며, API 호출 결과까지 포함된 실제 화면 위에서 UI를 다듬을 수 있습니다.
  • 새롭게 추가된 Hot Design Agent는 다음과 같은 특징을 가집니다.
    • 프롬프트를 입력하면 특정 페이지에 대한 새로운 레이아웃과 스타일 제안을 생성합니다.
    • 제안 내용은 먼저 "미리보기"로 확인한 뒤, 개발자가 수락하면 실제 앱에 적용됩니다.
  • MCP 서버는 VS, VS Code뿐 아니라 Cursor, Cloud Code CLI, Open CodeX CLI, GitHub Copilot CLI 등 여러 도구와 호환되도록 설계되어, 다양한 IDE·환경에서 같은 에이전트 워크플로를 재사용할 수 있습니다.

4. Visual Studio 데모: 새 UNO 앱과 로그인 화면 생성

  • 첫 번째 실시간 데모에서는 Visual Studio에서 UNO 앱을 처음부터 생성하는 과정을 보여줬습니다.
  • UNO 확장을 설치한 후, 새 프로젝트 마법사를 통해 대상 플랫폼, 프레임워크, 프레젠테이션, 마크업, 기타 옵션을 선택해 앱을 생성했습니다.
  • 생성된 솔루션은 단일 프로젝트 구조를 기반으로 하며, 다음과 같은 구성이 강조되었습니다.
    • 플랫폼별 코드를 넣을 수 있는 영역
    • 프레젠테이션 계층과 서비스 계층용 폴더
    • 기본적으로 필요한 설정과 워크로드가 자동으로 구성되어 별도의 NuGet 추가 작업을 최소화했습니다.
  • 앱을 실행한 뒤, Hot Design 플레임 아이콘을 통해 Hot Design 화면으로 진입했습니다.
  • Hot Design 상단에 새로 추가된 “Agent” 모드에서 로그인 페이지를 위한 프롬프트를 붙여 넣고, 에이전트에게 “영감이 되는 로그인 화면” 생성을 요청했습니다.
  • 에이전트는 앱의 컨텍스트를 분석해 페이지 구조, 앱 이름, 문맥에 맞는 태그라인 등을 자동으로 추가했습니다.
  • 발표자는 오른쪽 섹션이 위쪽에 치우쳐 마음에 들지 않는다는 피드백을 주었고, 에이전트에게 "오른쪽 섹션을 수직 중앙 정렬"하라고 지시했습니다.
  • 에이전트는 해당 영역만 다시 조정해, 로그인 패널을 세로로 더 내려서 배치한 새로운 디자인을 제안했고, 이를 반복 적용해 원하는 디자인에 도달하는 과정을 보여줬습니다.

5. UNO Studio 앱과 환경 점검 기능

  • UNO Studio 앱은 개발자가 환경 구성을 쉽게 점검하도록 도와주는 도구로 소개되었습니다.
  • MCP 관련 기능이 무료와 프로로 나뉘며, 다음과 같이 구분되었습니다.
    • 인터랙션 관련 기능은 계정 생성만으로 무료 사용이 가능합니다.
    • Hot Design Agent와 일부 MCP 기능은 프로 플랜에 포함됩니다.
  • 또한 Visual Studio와 Rider, VS Code에 포함되는 “UNO Platform Status” 아이콘(우하단)은 다음을 점검해 줍니다.
    • 솔루션 복원 상태
    • 필요한 워크로드 설치 여부
    • Dev Server 실행 여부 등
  • 이를 통해 Dev Server와 IDE, 실행 중인 앱 사이 연결 상태를 가시화해, 에이전트와 Hot Design이 안정적으로 동작할 수 있는 환경을 확보합니다.

6. VS Code 데모: AI 기반 날씨 앱 자동 생성

  • 다음 데모는 VS Code 환경에서 UNO MCP 서버와 에이전트를 이용해 날씨 앱을 완전 자동으로 생성하는 과정을 보여줬습니다.
  • 준비 단계에서 UNO MCP 서버를 설정하고, 날씨 앱 생성을 위한 프롬프트 스니펫을 에이전트에 제공했습니다.
    • 프롬프트에는 UNO 앱 생성 방법, 원하는 UI 스타일(예: 깔끔한 모바일 UI), OpenWeather API 사용 지시 등이 포함되었습니다.
    • OpenWeather OpenAPI 정의를 함께 제공해, Kyota(OpenAPI 클라이언트)로 실시간 API 호출을 구현하도록 요청했습니다.
  • 에이전트는 다음과 같은 순서로 작업했습니다.
    • 현재 환경에서 Node 체크를 수행하고, 필요 시 설치 여부를 확인했습니다.
    • UNO 앱 생성 옵션(툴킷 사용 여부, 데스크톱 타깃, XAML 사용 등)을 문서와 MCP 정보로부터 스스로 결정했습니다.
    • 프로젝트를 생성하고, Kyota 설정을 추가해 OpenWeather API 클라이언트 코드를 만들어 냈습니다.
    • 앱의 현재 구조를 분석해 어디에 서비스와 모델, 뷰모델, 스타일을 추가할지 계획을 세웠습니다.
    • 생성할 기능 계획을 목록으로 제시한 뒤, 사용자의 승인(“계획대로 진행”)을 받은 후 실제 구현을 시작했습니다.
  • OpenWeather API 키를 입력받은 뒤, 에이전트는 적절한 위치(예: appsettings.json)를 판단해 키를 저장하도록 코드를 수정했습니다.
  • 이후 에이전트는 다음과 같은 코드를 순차적으로 생성·수정했습니다.
    • 날씨 데이터 모델과 서비스 클래스
    • OpenAPI 클라이언트 호출 래퍼
    • 뷰모델과 바인딩 코드
    • 로딩 상태를 표시하는 ProgressRing 등 UI 요소
    • 앱 전체 스타일과 테마 리소스

7. 자동 오류 수정과 API 선택

  • 첫 빌드에서 네임스페이스 오류와 잘못된 클라이언트 API 사용이 발생했습니다.
  • 에이전트는 빌드 출력을 읽고 다음과 같이 스스로 수정했습니다.
    • 누락된 네임스페이스를 찾아 적절한 using 구문을 추가했습니다.
    • 잘못된 인덱서 접근 방식 대신, 문서에 맞는 세 가지 메서드 호출을 사용하도록 수정했습니다.
    • ForgetAsync처럼 Deprecated되었거나 권장되지 않는 API 호출에 대해서는 경고를 감지하고, GetResponseAsync와 같은 권장 API로 교체했습니다.
  • 바인딩 오류도 감지해, 잘못된 바인딩 표현식을 올바른 프로퍼티와 모드로 재작성했습니다.
  • 이러한 과정을 반복하면서, 에이전트는 빌드-수정-재빌드 루프를 자동으로 수행해 최종적으로 앱이 정상 빌드되도록 만들었습니다.

8. 앱 MCP를 통한 실행 앱 검사와 디버깅

  • 앱이 빌드된 후, 에이전트는 앱 MCP를 이용해 다음과 같이 실행 앱과 상호작용했습니다.
    • Hot Reload를 사용해 앱을 실행했습니다.
    • 날씨 데이터가 보이지 않자, 스크린샷을 촬영해 현재 화면 상태를 확인했습니다.
    • 스크린샷을 분석한 결과 UI 구조는 올바르지만 데이터가 로드되지 않았음을 파악했습니다.
    • 설정 파일 로딩이 제대로 되고 있는지 확인해, 설정이 초기화되지 않은 문제를 찾아냈습니다.
    • 앱을 재시작하고 설정을 다시 적용한 뒤, 온도가 2°C로 표시된 스크린샷을 통해 결과가 올바른지 검증했습니다.
  • 에이전트는 UI 트리 스냅샷도 함께 가져와, 각 컨트롤과 바인딩 상태를 분석하며 디버깅에 활용했습니다.

9. Windows 3.11 스타일 테마 적용과 타이틀바 확장

  • 날씨 앱이 정상 동작한 이후, 발표자는 에이전트에게 "앱을 Windows 3.11 스타일로 바꾸자"고 요청했습니다.
  • 에이전트는 다음과 같은 스타일 변경을 수행했습니다.
    • Windows 3.11과 유사한 클래식 그레이 색상 팔레트를 정의했습니다.
    • 컨트롤 테두리, 배경색, 버튼 스타일 등을 레트로 UI에 맞게 조정했습니다.
    • 변경 사항을 반영하기 위해 앱을 다시 시작해 적용 결과를 확인했습니다.
  • 동시에 UNO 6.4에서 추가된 타이틀바 확장 기능도 데모했습니다.
    • 에이전트는 관련 문서를 통해 드래그 영역 설정, 타이틀바 영역 확장 방법을 학습했습니다.
    • 코드에 드래그 영역을 활성화하고 타이틀바를 확장하는 설정을 추가했습니다.
    • 다시 실행된 앱은 레트로 테마와 함께 타이틀바 영역까지 확장된 레이아웃을 보여줬습니다.

10. Cloud Code + Linux 데모: Figma 디자인 투 코드

  • 다음 데모는 Linux 환경에서 Cloud Code CLI를 이용한 디자인 투 코드 워크플로를 보여줬습니다.
  • 입력으로는 Figma에 있는 날씨 앱 디자인 링크를 사용했습니다.
  • 에이전트는 다음 과정을 자동으로 수행했습니다.
    • Figma 링크를 분석해 디자인 데이터를 가져왔습니다.
    • 해당 디자인의 스크린샷과 에셋을 다운로드했습니다.
    • 디자인을 기반으로 더미 데이터 모델과 UI 계층 구조를 구성했습니다.
    • 아이콘과 리스트 구성 등 Figma 상의 레이아웃을 UNO XAML로 표현했습니다.
  • 첫 빌드 후 실행된 앱은 전체적으로 디자인을 재현했지만, 상·하단 리스트의 아이콘이 의도와 다르게 표시되는 문제가 있었습니다.
  • 에이전트는 다음과 같은 식으로 문제를 수정했습니다.
    • 어디에 어떤 아이콘이 잘못되어 있는지 설명을 요청했습니다.
    • 답변에 따라 상단 리스트 아이콘 리소스를 교체했습니다.
    • 다시 Hot Reload를 통해 변경 사항을 즉시 반영해, 올바른 아이콘이 표시되는지 확인했습니다.
    • 동일 과정을 하단 리스트에도 적용해 최종적으로 Figma와 더 가까운 결과를 얻었습니다.
  • 이 과정은 UI 없이도 Cloud Code CLI와 Dev Server, Hot Design이 결합되어 동작하는 사례로, Linux·macOS 환경에서도 동일한 워크플로가 가능함을 보여줬습니다.
  • Hot Design을 통해 Linux에서도 실행 중인 앱의 템플릿과 속성을 수정하고, 줌 조절, 가시성 변경 등을 수행하는 모습도 함께 시연했습니다.

11. WPF NetPad 앱의 UNO 마이그레이션 데모

  • 마지막 데모는 5년 전 WPF로 만들어진 간단한 NetPad 앱을 UNO 앱으로 마이그레이션하는 과정이었습니다.
  • GitHub에 있는 WPF NetPad 소스 코드와, UNO 템플릿으로 만든 빈 앱을 준비해 두고, 에이전트에게 다음과 같은 작업을 요청했습니다.
    • 레거시 WPF 앱 구조와 기능을 분석해 마이그레이션 계획을 수립할 것
    • 설정 인프라, 입력 박스, 글꼴 대화 상자, 메뉴와 가속기 등 주요 기능을 UNO로 옮길 것
  • 에이전트는 다음 단계를 거쳤습니다.
    • 레거시 폴더와 새 UNO 앱 폴더를 모두 스캔해, WPF XAML과 코드비하인드 구조를 파악했습니다.
    • 마이그레이션 계획을 텍스트로 작성해 어떤 순서로 어떤 파일을 변환할지 정리했습니다.
    • 설정 저장소, 입력 다이얼로그, 글꼴 선택 다이얼로그 등을 UNO에 맞게 새로 구현했습니다.
    • 메뉴 바와 단축키(Accelerators)를 UNO에서 지원하는 방식으로 변환했습니다.
  • 빌드 과정에서는 WPF와 UNO의 컨트롤 차이 때문에 문제도 발생했습니다.
    • 예를 들어 UNO에서 지원되지 않는 ListBox를 사용한 부분은 ListView로 교체해야 했습니다.
    • 에이전트는 관련 오류를 읽고 적절한 컨트롤로 교체하는 코드를 작성했습니다.
  • 최종 빌드 후 실행된 앱은 원래 WPF NetPad와 매우 비슷한 UI를 보여줬습니다.
    • 메뉴 구조와 기능은 그대로 유지되었고, “About” 대화 상자의 텍스트만 UNO 플랫폼 버전을 포함하도록 변경되었습니다.
    • 에이전트는 실제 실행 중인 앱에 텍스트를 입력하고 메뉴를 클릭해 기능이 동작하는지 직접 검증했습니다.

12. Hot Reload를 통한 세부 수정과 메뉴 언더스코어 제거

  • 시연 과정에서 메뉴 항목 텍스트에 언더스코어가 표시되는 문제가 있었고, 이는 접근성 단축키 표기와 관련된 표시였습니다.
  • 발표자는 에이전트에게 메뉴 텍스트의 언더스코어를 제거해 달라고 요청했습니다.
  • 에이전트는 관련 XAML과 리소스를 찾아 언더스코어를 제거하고, Hot Reload를 통해 한 번에 모든 메뉴 텍스트를 갱신했습니다.
  • 변경 후 메뉴는 더 깔끔하게 표시되었고, 여전히 기능적으로는 원래 앱과 동일하게 동작했습니다.

13. 전체 정리

  • 세션 전체에서 공통적으로 강조된 점은 다음과 같습니다.
    • UNO Platform은 Hot Reload와 Hot Design을 중심으로, AI 에이전트와 MCP 서버를 결합해 실행 중인 앱을 직접 제어·수정하는 워크플로를 제공합니다.
    • 문서/스캐폴딩 MCP와 앱 MCP는 에이전트가 프레임워크 문서를 정확히 참고하고, 실행 중인 앱의 상태를 시각·구조적으로 이해하는 데 필요한 기반을 제공합니다.
    • 에이전트는 빌드 오류, 네임스페이스 문제, 잘못된 API 사용, 스타일·레이아웃 오류까지 전반적인 개발 작업을 스스로 탐색하고 수정하는 모습을 보였습니다.
    • 디자인 투 코드, 레거시 마이그레이션, 테마 변경, 실시간 UI 조정 등 다양한 시나리오가 하나의 통합된 AI 기반 개발 파이프라인 안에서 구현될 수 있음을 입증했습니다.
  • 발표자는 참석자에게 UNO Platform과 AI 에이전트 워크플로를 직접 시도해 보기를 권장하며 세션을 마무리했습니다.

태그

#UNO-Platform #AI-에이전트 #Hot-Reload mcp 크로스플랫폼