software

AI와 Uno Platform 도구를 사용해 100% 만든 새로운 Winamp 인터페이스

발행: (2025년 12월 5일 오후 02:42 GMT+9)
6 min read
원문: Dev.to

Source: Dev.to

내가 만든 것

내 앱은 1997년에 출시된 클래식 Winamp 미디어 플레이어를 리뉴얼한 것입니다. Uno Platform을 사용하면 단일 코드베이스로 크로스‑플랫폼 앱을 만들 수 있습니다. 나는 AI 도구만 사용해 전체 인터페이스를 만드는 도전에 나섰습니다.

내 설정

  • Visual Studio
  • Uno Platform MCP 서버
  • Uno Platform Hot Design
  • GitHub Copilot (GPT‑5)

데모

GitHub 저장소

최종 애플리케이션

최종 애플리케이션 (애니메이션)

AI 도구 활용

다음 영상을 보지 않으면 새로운 인터페이스를 시작하는 것이 얼마나 간단한지 믿기 어려울 것입니다. 나는 클래식 Winamp의 이미지를 Visual Studio에 그대로 붙여넣었습니다.

🔥 App MCP / Uno Platform MCP / GPT‑5 작동 영상 🔥

AI가 만든 인터페이스

초기 인터페이스는 100 % 정확하지는 않지만 매우 인상적이며 수시간의 작업을 절약해 줍니다.

그 다음에 앰프를 추가했습니다. 이미지를 붙여넣고 “SkiaSharp 기반 컨트롤을 만들고 애니메이션을 적용해 주세요”라고 프롬프트했습니다.

앰프

이전 컨트롤이 성공을 거두자 또 다른 이미지를 붙여넣고 “SkiaSharp 기반 파형 차트를 만들고 애니메이션을 적용해 주세요”라고 요청했습니다.

Winamp 클래식의 원본 파형

파형 오실로스코프

출력 결과에 깜짝 놀랐습니다. 별다른 프롬프트 없이 “밴드 슬라이더 위에 삽입해 주세요”라고 요청했을 뿐인데, 에이전트가 완벽한 클래스 이름 WaveOscilloscopeControl을 선택했습니다.

에이전트는 세 개의 SkiaSharp 기반 컨트롤을 만들었습니다:

나는 에이전트에게 이들을 애니메이션하도록 요청했습니다. 프롬프트는 단순히 “스크린샷을 기반으로 이 컨트롤을 만들고 애니메이션을 적용해 주세요”였습니다. 정말 놀라운 결과였습니다!

참고: Uno Platform Visual Studio 플러그인은 App MCP와 Uno Platform MCP를 모두 설치합니다.

나는 Uno Platform Hot Design의 도움으로 UI 조정을 수행했습니다. 어떤 컨트롤을 조정해야 할지 정확히 알면, Hot Design은 질문을 프롬프트하는 것보다 훨씬 편리하고 빠릅니다.

핫 디자인

App MCP 및 Uno Platform MCP 사용

App MCP

App MCP는 UI와 데이터를 분리하는 최선의 방법을 알고 있습니다. UI를 만든 뒤, 나는 하드코딩된 값을 ViewModel로 옮기고 대부분의 플레이어 명령을 구현하도록 요청했습니다.

MainViewModel.cs

Uno Platform MCP

Uno Platform MCP의 강력함을 보여주는 대표적인 예는 클래식 Windows 타이틀 바를 앱 내부에 삽입된 타이틀 바로 교체해 달라는 요청입니다.

내장 타이틀 바

var app = (App)Application.Current;
var window = app.MainWindow;
if (window is null) { return; }

window.ExtendsContentIntoTitleBar = true;
window.SetTitleBar(TitleBar);

var appWindow = window.AppWindow;
if (appWindow is not null)
{
    var tb = appWindow.TitleBar;
    tb.IconShowOptions = IconShowOptions.HideIconAndSystemMenu;
    tb.ButtonBackgroundColor = Windows.UI.Color.FromArgb(0x00, 0x00, 0x00, 0x00);
    tb.ButtonInactiveBackgroundColor = Windows.UI.Color.FromArgb(0x00, 0x00, 0x00, 0x00);
    tb.ButtonForegroundColor = Windows.UI.Color.FromArgb(0xFF, 0xCF, 0xCF, 0xCF);
}

크로스‑플랫폼 지원

이 애플리케이션은 Windows, macOS, 웹, Android, iOS, Linux에서 실행됩니다. 실제로 Uno Platform이 지원하는 모든 타깃에서 앱이 동작합니다. Skia 렌더링 지원 덕분에 가능한 일입니다.

개발 경험

과거에 나는 매우 구체적인 하위 작업에 AI를 사용한 적이 있습니다. 이번 도전에서는 수동 코딩 없이 완전한 인터페이스를 만들 수 있을지 스스로에게 물었습니다. 결과적으로 Visual Studio Copilot / Uno Platform Studio와 Uno Platform Hot Design을 활용해 이를 달성할 수 있었습니다.

나는 전문 디자이너는 아니지만, AI의 도움으로 UI가 매력적으로 보입니다. 놀랍게도 두 번의 저녁(각각 약 3시간)만에 도전을 완수했습니다 🤯. AI / Uno 도구가 없었다면 이 작업은 훨씬 더 오래 걸렸을 것입니다.

Back to Blog

관련 글

더 보기 »