deskweb-app

스타3

포크0

업데이트2026년 7월 24일 11:19

DeskWeb 일반 애플리케이션 생성 스킬. qooxdoo 프레임워크 기반 윈도우 앱(메모장, 엑셀, HWP뷰어, iframe앱 등)을 추가할 때 사용. 사용 사례: (1) 새로운 윈도우 앱 추가시, (2) 파일 연동 앱 구현시, (3) 외부 라이브러리 통합 앱 구현시, (4) iframe 기반 외부 URL 앱 추가시.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

psmon

psmon/DeskWeb

GitHub 저장소 열기 Creator 저장소 보기

다운로드

DeskWeb 일반 애플리케이션 생성 스킬

프로젝트 컨텍스트

DeskWeb은 qooxdoo v7.9 기반 Windows XP 스타일 웹 데스크톱
소스 경로: deskweb/source/class/deskweb/
프로젝트 가이드: prompt/deskweb/agent.md

Instructions

1. 앱 파일 생성

UI 컴포넌트를 deskweb/source/class/deskweb/ui/ 하위에 생성:

qx.Class.define("deskweb.ui.NewAppWindow", {
  extend: qx.ui.window.Window,

  construct: function() {
    this.base(arguments, "앱 이름", "deskweb/images/newapp.svg");
    this.set({
      width: 600,
      height: 400,
      showMinimize: true,
      showMaximize: true,
      allowMaximize: true,
      contentPadding: 0
    });
    this.setLayout(new qx.ui.layout.VBox());
    this._createUI();
  },

  members: {
    _createUI: function() {
      // UI 구성
    }
  }
});

2. Application.js에 등록 (3곳 수정 필수)

파일: deskweb/source/class/deskweb/Application.js

(a) _createDesktopIcons() - 바탕화면 아이콘 추가
(b) _openNewAppWindow() - 창 열기 메서드 추가
(c) _onStartMenuItemClick() - 시작 메뉴 항목 추가

3. 아이콘 생성

위치: deskweb/source/resource/deskweb/images/newapp.svg
SVG 형식으로 직접 제작

4. 파일 연동 앱인 경우

deskweb/source/class/deskweb/util/FileExtensionRegistry.js에 확장자 매핑 등록
StorageManager를 통한 localStorage 기반 파일 저장/로드
내 컴퓨터(MyComputerWindow)에서 더블클릭시 해당 앱으로 열리도록 연동

5. 외부 라이브러리 통합시

deskweb/source/resource/ 하위에 라이브러리 배치
Manifest.json 또는 HTML에서 스크립트 로드 설정
qooxdoo 클래스 내에서 @ignore 어노테이션으로 외부 전역 객체 참조

6. iframe 기반 앱

외부 URL을 로드하는 앱은 qx.ui.embed.Iframe 활용
favicon 아이콘 자동 로드 기능 포함
리사이즈 지원, 마지막 크기 기억

앱 유형별 참조 패턴

앱 유형	참조 파일	핵심 패턴
텍스트 편집기	NotepadWindow.js	localStorage 저장, 자동저장, 확장자 매핑
문서 뷰어	HWPViewerWindow.js	외부 라이브러리, 파서/렌더러 분리, 드래그앤드롭
스프레드시트	CalcWindow.js	엔진 분리(SpreadsheetEngine), 수식 파서, 튜토리얼
iframe 앱	AskBotWindow.js	qx.ui.embed.Iframe, favicon, 커스텀 앱 추가

공통 규칙

윈도우 창은 반드시 qx.ui.window.Window 상속
로직이 복잡하면 util/ 하위로 엔진 분리 (예: SpreadsheetEngine, FormulaParser)
반응형 디자인 적용 (창 리사이즈 대응)
세션 스토리지 개념 준수 (멀티 윈도우 지원)

빌드/테스트

cd deskweb && qx compile               # 소스 컴파일
qx serve --listen-port=8080            # 개발 서버 실행
# 접속: http://localhost:8080/deskweb/

이 저장소의 다른 Skills

같은 저장소

deskweb-convention

psmon/DeskWeb

DeskWeb 프로젝트 컨벤션 및 공통 패턴 스킬. 프로젝트 구조, 빌드, 테스트, 스토리지, 테마, 아이콘 관리 등 공통 규칙 참조시 사용. 사용 사례: (1) 프로젝트 구조/컨벤션 확인시, (2) 빌드/배포 절차시, (3) 스토리지/세션 관리시, (4) 아이콘/테마 커스텀시, (5) 바탕화면 기능 추가시.

2026-07-243

deskweb-game

psmon/DeskWeb

DeskWeb 게임 애플리케이션 생성 스킬. qooxdoo 프레임워크 내에서 Canvas/Three.js 기반 게임을 구현할 때 사용. 사용 사례: (1) 2D Canvas 기반 카드/보드 게임 구현시, (2) Three.js 3D 게임 구현시, (3) 게임 AI(LLM) 통합시, (4) 게임 상태 관리/저장시.

2026-07-243

deskweb-llm

psmon/DeskWeb

DeskWeb LLM/AI 통합 스킬. 브라우저 내 WebLLM 또는 외부 LLM API를 활용하는 기능 구현시 사용. 사용 사례: (1) 챗봇 앱에 LLM 연동시, (2) 게임 AI에 LLM 프롬프트 설계시, (3) AI-OS 기능(앱 제어, 자동화)시, (4) WebLLM 브라우저 내 모델 로드시, (5) 스트리밍 응답 구현시.

2026-07-243

name	deskweb-app
description	DeskWeb 일반 애플리케이션 생성 스킬. qooxdoo 프레임워크 기반 윈도우 앱(메모장, 엑셀, HWP뷰어, iframe앱 등)을 추가할 때 사용. 사용 사례: (1) 새로운 윈도우 앱 추가시, (2) 파일 연동 앱 구현시, (3) 외부 라이브러리 통합 앱 구현시, (4) iframe 기반 외부 URL 앱 추가시.
author	DeskWeb Team
date	"2026-03-07T00:00:00.000Z"

DeskWeb 일반 애플리케이션 생성 스킬

프로젝트 컨텍스트

DeskWeb은 qooxdoo v7.9 기반 Windows XP 스타일 웹 데스크톱
소스 경로: deskweb/source/class/deskweb/
프로젝트 가이드: prompt/deskweb/agent.md

Instructions

1. 앱 파일 생성

UI 컴포넌트를 deskweb/source/class/deskweb/ui/ 하위에 생성:

qx.Class.define("deskweb.ui.NewAppWindow", {
  extend: qx.ui.window.Window,

  construct: function() {
    this.base(arguments, "앱 이름", "deskweb/images/newapp.svg");
    this.set({
      width: 600,
      height: 400,
      showMinimize: true,
      showMaximize: true,
      allowMaximize: true,
      contentPadding: 0
    });
    this.setLayout(new qx.ui.layout.VBox());
    this._createUI();
  },

  members: {
    _createUI: function() {
      // UI 구성
    }
  }
});

2. Application.js에 등록 (3곳 수정 필수)

파일: deskweb/source/class/deskweb/Application.js

(a) _createDesktopIcons() - 바탕화면 아이콘 추가
(b) _openNewAppWindow() - 창 열기 메서드 추가
(c) _onStartMenuItemClick() - 시작 메뉴 항목 추가

3. 아이콘 생성

위치: deskweb/source/resource/deskweb/images/newapp.svg
SVG 형식으로 직접 제작

4. 파일 연동 앱인 경우

deskweb/source/class/deskweb/util/FileExtensionRegistry.js에 확장자 매핑 등록
StorageManager를 통한 localStorage 기반 파일 저장/로드
내 컴퓨터(MyComputerWindow)에서 더블클릭시 해당 앱으로 열리도록 연동

5. 외부 라이브러리 통합시

deskweb/source/resource/ 하위에 라이브러리 배치
Manifest.json 또는 HTML에서 스크립트 로드 설정
qooxdoo 클래스 내에서 @ignore 어노테이션으로 외부 전역 객체 참조

6. iframe 기반 앱

외부 URL을 로드하는 앱은 qx.ui.embed.Iframe 활용
favicon 아이콘 자동 로드 기능 포함
리사이즈 지원, 마지막 크기 기억

앱 유형별 참조 패턴

앱 유형	참조 파일	핵심 패턴
텍스트 편집기	NotepadWindow.js	localStorage 저장, 자동저장, 확장자 매핑
문서 뷰어	HWPViewerWindow.js	외부 라이브러리, 파서/렌더러 분리, 드래그앤드롭
스프레드시트	CalcWindow.js	엔진 분리(SpreadsheetEngine), 수식 파서, 튜토리얼
iframe 앱	AskBotWindow.js	qx.ui.embed.Iframe, favicon, 커스텀 앱 추가

공통 규칙

윈도우 창은 반드시 qx.ui.window.Window 상속
로직이 복잡하면 util/ 하위로 엔진 분리 (예: SpreadsheetEngine, FormulaParser)
반응형 디자인 적용 (창 리사이즈 대응)
세션 스토리지 개념 준수 (멀티 윈도우 지원)

빌드/테스트

cd deskweb && qx compile               # 소스 컴파일
qx serve --listen-port=8080            # 개발 서버 실행
# 접속: http://localhost:8080/deskweb/