Sealos Skills로 Open Design을 cloud에 배포하기

Open Design은 자신의 컴퓨터에서 돌리기엔 훌륭하지만, 로컬 URL은 본인에게만 열릴 뿐 팀이나 고객, 파트너에게는 열리지 않습니다. 이 가이드는 Sealos의 데모를 따라가는데, 여기서는 코딩 에이전트가 GitHub 저장소에서 Open Design을 띄우고, 이어서 Sealos Skills가 이를 공개 cloud URL로 배포합니다. 실제 실행 과정은 위 영상으로 보시거나, 계속해서 글 버전을 읽어 보세요.

로컬에서 실행 중인 Open Design: 오픈소스이자 agent-native한 디자인 작업 공간——온라인으로 옮기기 전의 출발점입니다.

Open Design란 무엇인가요?

Open Design은 오픈소스이자 agent-native한 디자인 작업 공간으로, 이미 사용 중인 코딩 에이전트 위에서 동작하는 Claude Design과 Figma의 대안입니다. 이 안내를 시작하기 전에 알아 두면 좋은 몇 가지가 있습니다.

• 오픈소스, Apache-2.0——모든 코드를 직접 읽어 보고, 원하는 곳 어디에든 셀프호스팅하세요.
• 로컬 우선, 셀프호스팅도 가능——자신의 컴퓨터에서 돌려도 되고, cloud로 옮겨도 됩니다(이 가이드가 하려는 일이 바로 그것입니다).
• 직접 에이전트와 key를 사용——Claude Code, Codex, Gemini 등을 통해 생성을 구동하며, 여러분 자신의 모델 접근 권한을 사용합니다.
• 프로토타입 그 이상——웹 페이지, 프로토타입, 대시보드, 슬라이드 덱 등 다양한 결과물을 하나의 작업 공간에서 만들 수 있습니다.

왜 Open Design을 cloud로 옮길까

소스에서 Open Design을 실행하면 작업 공간은 로컬 URL로 열립니다. 혼자 작업하기엔 더할 나위 없이 좋습니다——실행하고, 디자인하고, 결과를 실시간으로 미리 볼 수 있으니까요. 하지만 Sealos 데모가 지적하듯, 함정이 하나 있습니다——그 주소는 사실상 localhost라는 점입니다. 본인에게는 작동하지만, 다른 누구도 접속할 수 없습니다.

동료와 디자인을 공유하거나, 실제로 작동하는 프로토타입을 고객에게 건네거나, 외부 사용자가 결과물을 직접 경험하게 하려면 앱에 공개 URL이 필요합니다. 이것이 바로 이 가이드의 핵심입니다——Open Design을 로컬 작업 공간에서 온라인 서비스로 옮겨서, “로컬에서 실행”이 그저 시작일 뿐이게 만드는 것이죠.

GitHub 저장소에서 Open Design 띄우기

데모는 설치 문서를 손수 읽는 대신, 그 작업 전체를 코딩 에이전트(여기서는 Codex)에게 맡깁니다. 아이디어는 단순합니다——에이전트에게 Open Design GitHub 저장소를 알려주고 설치 작업을 맡기는 것이죠.

• 에이전트에게 저장소를 줍니다. GitHub 링크를 보내고 Open Design을 실행해 달라고 요청하세요. README와 빠른 시작 가이드를 읽고, 설치 단계를 파악해서 대신 실행해 줍니다.
• 로컬 URL을 엽니다. 실행이 끝나면 에이전트가 URL을 보여줍니다. 이를 열면 작업 공간이 로드됩니다——직접 명령어를 하나하나 입력해서 설치할 필요가 없습니다.

Open Design은 오픈소스이기 때문에 에이전트가 저장소를 직접 살펴볼 수 있습니다——프로젝트 구조, 어떻게 실행되어야 하는지, 무엇이 필요한지까지요. 바로 이것이 다음 단계인 cloud 배포를 수작업이 아니라 에이전트의 작업으로 만들어 주는 이유입니다.

작업 공간에서 디자인하기

작업 공간을 열면 이것이 평범한 채팅 도구가 아니라는 것을 곧 알아차리게 됩니다. 웹 페이지, 프로토타입, 대시보드, 덱 등 다양한 스킬 중에서 고를 수 있고, 결과물이 일관된 시각적 스타일을 갖도록 디자인 시스템을 선택할 수 있습니다.

데모는 프로토타입 스킬을 고르고 브리프를 붙여 넣자, 에이전트가 곧바로 작업을 시작합니다. 진행 중에는 창작 의도에 대해 물어보고, 원하는 대로 답하면 됩니다. 에이전트는 왼쪽에서 작업하고, 결과물은 오른쪽에서 실시간으로 미리 보여집니다——로컬 AI 디자인 작업 공간처럼 동작합니다.

작업 공간에서 생성된 랜딩 페이지——에이전트가 왼쪽에서 작업하고, 오른쪽에는 라이브 미리보기가 렌더링됩니다.

플러그인 허브에서 스킬과 디자인 시스템의 전체 카탈로그를 둘러볼 수 있으므로, 빈 캔버스에서 시작할 일은 없습니다.

플러그인 허브: 작업 공간의 결과물을 만들어 갈 때 적용할 수 있는 스킬과 디자인 시스템.

Sealos Skills로 Sealos Cloud에 배포하기

바로 여기서 로컬 URL 문제가 해결됩니다. 데모에서 Codex에게 내리는 다음 지시는 단순합니다——AI 에이전트를 위한 스킬 팩인 Sealos Skills를 사용해 Open Design 프로젝트를 분석하고 Sealos Cloud에 배포하라는 것이죠.

Sealos Skills는 에이전트에게 원래 없던 배포 노하우를 부여합니다. 데모가 실행하는 흐름은 다음과 같습니다.

1. 프로젝트를 분석합니다. 이 스킬은 프로젝트 구조, Docker 설정, 포트, 환경 변수를 살펴봅니다——앱이 cloud에서 어떻게 실행되어야 하는지를 결정짓는 세부 사항들이죠.
2. 배포 계획을 생성합니다. 그 분석을 바탕으로 Sealos Cloud용 배포 구성을 만들어 냅니다.
3. 확인하고 배포합니다. 계획이 문제없어 보이면, 확인을 요청받을 때 yes라고 답하세요. 그러면 자동으로 프로젝트를 Sealos Cloud에 배포합니다.
4. 공개 URL을 받습니다. 배포가 끝나면 Sealos가 공개 접속 링크를 돌려줍니다——더 이상 로컬 주소가 아닙니다. 팀원, 파트너, 외부 사용자 모두 이를 열어 직접 앱을 경험할 수 있습니다.

여기서 진짜 바뀐 것은 누가 그 일을 하느냐입니다. 오픈소스 프로젝트를 배포하는 일은 보통 많은 수작업 판단을 요구합니다——설정을 읽고, 포트를 맞추고, 환경 변수를 연결하고, 문제가 생기면 원인을 추적하는 식이죠. Sealos Skills는 이를 AI 에이전트가 처음부터 끝까지 실행할 수 있는 워크플로로 바꿔 줍니다——분석하고, 배포하고, 검증하고, 출시한다.

로컬 작업 공간에서 실제 운영되는 cloud 앱으로

이 시점에서 Open Design은 로컬 도구에서 온라인 서비스로 탈바꿈했습니다. 진짜 가치는 단순히 디자인을 작업 공간 밖으로 꺼내는 데 있는 것이 아니라, 많은 판단이 필요했던 수작업 배포가 에이전트가 반복적으로, 안정적으로 실행할 수 있는 일로 바뀌었다는 데 있습니다. 로컬에서 실행하는 것은 시작일 뿐이며, 다른 사람이 접속할 수 있어야 비로소 여러분의 작업물이 실제로 공유할 수 있는 것이 됩니다.

자주 묻는 질문

Open Design을 실행하려면 반드시 Sealos를 써야 하나요? 아니요. Open Design은 로컬 우선이라, 자신의 컴퓨터에서 실행해도 전혀 문제없습니다. Sealos는 이 데모에서 앱을 공개 URL로 접근 가능하게 만들기 위해 사용한 서드파티 cloud 호스트일 뿐입니다. Apache-2.0 아래 오픈소스이므로 원하는 방식으로 셀프호스팅할 수도 있습니다.

Sealos Skills는 무엇인가요? AI 에이전트를 위한 스킬 팩으로, 데모에서는 Codex를 구동하는 데 사용됩니다. 프로젝트의 Docker 설정, 포트, 환경 변수를 분석하고, 배포 계획을 생성하며, 앱을 Sealos Cloud에 게시하는 배포 노하우를 에이전트에게 부여합니다.

배포 과정에서 에이전트는 실제로 무엇을 하나요? 프로젝트 구조를 읽고, Docker 구성과 포트, 환경 변수를 확인한 뒤 배포 구성을 생성합니다. 그리고 확인을 받은 뒤 cloud에 배포하고 공개 URL을 반환합니다.

Open Design은 무료인가요? 네——Apache-2.0 라이선스 아래 오픈소스입니다. 연결한 코딩 에이전트의 모델/API 사용량, 그리고 선택적으로 사용하는 cloud 호스팅(예: Sealos) 비용만 지불하면 됩니다.

이 데모는 어떤 코딩 에이전트를 사용하나요? 데모에서는 Codex를 사용하지만, Open Design은 여러분이 연결하는 어떤 코딩 에이전트 위에서도 동작합니다——Claude Code, Codex, Gemini 등——여러분 자신의 key로요.

---

이 글 가이드는 Sealos의 데모를 바탕으로 합니다. 위의 전체 영상을 보시고, AI 에이전트를 활용한 cloud 배포에 대해 더 알아보려면 Sealos를 구독하세요.