참고: 이 프로젝트는 AI 지원 코딩 (AI-assisted coding)으로 개발되었습니다.

온톨로지 (ontologies) 및 Microsoft Fabric IQ에 대해 학습할 수 있는 무료 오픈 소스 웹 애플리케이션입니다. 미리 구축된 온톨로지를 탐색하고, 시각적 에디터에서 자신만의 온톨로지를 설계하며, RDF/XML로 내보내고, 대화형 다이어그램을 공유하세요 — 이 모든 기능은 백엔드 의존성이 전혀 없는 완전한 정적 사이트 (static site)에서 제공됩니다.

Cytoscape.js 기반의 그래프를 통해 모든 온톨로지를 대화형 노드 및 에지 (node-and-edge) 다이어그램으로 렌더링합니다. 팬(Pan), 줌(Zoom), 노드 클릭을 통한 속성 검사 기능을 제공하며, 실시간 검색창을 사용하여 엔티티 (entities)와 관계 (relationships)를 필터링할 수 있습니다.

6개 도메인 (소매, 이커머스, 의료, 금융, 제조, 교육)에 걸쳐 공식 및 커뮤니티 기여 온톨로지로 구성된 큐레이션된 라이브러리입니다. 카테고리별 탐색, 이름 또는 태그별 검색, 클릭 한 번으로 온톨로지 로드 및 RDF 소스 확인이 가능합니다. 모든 온톨로지는 공유 가능한 딥 링크 (/#/catalogue/official/cosmic-coffee)를 가집니다.

처음부터 온톨로지를 생성하거나 기존 온톨로지를 편집할 수 있는 전체 화면 분할 창 에디터입니다. 아이콘, 색상, 타입 지정된 속성 (typed properties)을 사용하여 엔티티 타입을 추가하고, 카디널리티 (cardinalities)를 사용하여 관계를 정의하며, 작업 시 실시간으로 업데이트되는 라이브 그래프 미리보기를 확인할 수 있습니다. 실행 취소/다시 실행 (50단계), 실시간 유효성 검사 (validation), RDF/XML 또는 JSON 내보내기 기능을 포함합니다.

RDF/XML (OWL 클래스, 데이터 타입 속성, 카디널리티를 포함한 객체 속성)에 대한 완전한 라운드 트립 (round-trip) 지원을 제공합니다. .rdf / .owl 파일을 가져오고, Microsoft Fabric IQ가 기대하는 정확한 형식으로 내보내며, 자동화된 라운드 트립 테스트를 통해 충실도 (fidelity)를 검증합니다.

GitHub로 로그인 (디바이스 플로우, device flow)하여 디자이너에서 커뮤니티 카탈로그로 온톨로지를 직접 제출할 수 있습니다 — 앱이 리포지토리 (repo)를 포크(fork)하고, 브랜치를 생성하며, RDF + 메타데이터를 커밋하고, 자동으로 풀 리퀘스트 (pull request)를 생성합니다.

단일 <script> 태그만으로 어떤 웹 페이지에서도 대화형 온톨로지 뷰어를 렌더링하는 독립형 JavaScript 파일 (ontology-embed.js)입니다. 다크/라이트 테마, 다양한 로딩 방식 (카탈로그 ID, URL, 인라인 base64), 클릭하여 검사하기 기능을 지원합니다. 자세한 내용은 임베딩 가이드 (Embedding Guide)를 참조하세요.

개념적 학습 경로와 실습 랩 (hands-on labs)을 아우르는 9개의 코스를 제공하는 구조화된 학습 허브 (/#/learn):

Ontology Fundamentals (온톨로지 기초)— 핵심 개념을 다루는 6개의 아티클 (온톨로지란 무엇인가? → RDF/OWL → Fabric IQ → 첫 온톨로지 구축하기 → 디자인 패턴 (Design Patterns) → 기여하기).

7가지 도메인 학습 경로 (Domain Learning Paths)— Fourth Coffee, 이커머스 (E-Commerce), 금융 (Finance), 의료 (Healthcare), 제조 (Manufacturing), 대학 (University), 그리고 인사 시스템 (HR System). 각 경로는 단계별로 온톨로지를 구축하는 4개의 점진적인 아티클로 구성되어 있으며, 각 단계에서 새로운 엔티티 (entity)를 보여주는 라이브 임베디드 그래프 (embedded graphs)를 포함합니다.

IQ Lab: 리테일 공급망 (Retail Supply Chain)— 15개의 엔티티를 처음부터 구축하는 7단계 실습 랩 (6개의 점진적인 카탈로그 항목에 걸쳐 3개에서 15개의 엔티티로 확장).

모든 아티클은 ## 헤딩에서 슬라이드가 나뉘는 **프레젠테이션 모드 (presentation mode)**를 지원하며, 즉각적인 피드백이 제공되는 **대화형 퀴즈 (interactive quizzes)**를 포함합니다. 온톨로지 임베딩은 선택적인 차이점 강조 (diff highlighting) 기능과 함께 카탈로그로부터 라이브 그래프를 로드합니다.

다단계 지침, 힌트, 진행률 표시줄(progress bars), 그리고 업적 배지 (achievement badges)를 통해 사용자를 온톨로지 개념으로 안내하는 5단계의 점진적 퀘스트 (quests).

자연어 질문(예: "어떤 고객이 주문을 했나요?")을 입력하면 이것이 온톨로지 엔티티 및 관계에 어떻게 매핑되는지 확인할 수 있습니다 — 이는 Fabric IQ의 NL2Ontology 기능에 대한 미리보기입니다.

어디서든 ⌘K / Ctrl+K를 눌러 검색 가능한 커맨드 팔레트 (command palette)를 엽니다. 키보드에서 손을 떼지 않고도 카탈로그 (Catalogue), 디자이너 (Designer), 온톨로지 스쿨 (Ontology School), 가져오기/내보내기 (Import/Export), 도움말 (Help) 등으로 바로 이동할 수 있습니다. 빠른 도움말 액세스를 위해 ?를 누르세요. 화살표 키와 Enter 키로 팔레트를 탐색할 수 있습니다.

디자이너는 5가지 도메인 템플릿 (리테일, 의료, 금융, IoT, 교육)을 제공하여 신규 사용자가 빈 페이지를 마주하지 않도록 합니다. 각 템플릿은 속성(properties)을 가진 3개의 엔티티와 2개의 관계를 생성하며, 즉시 커스터마이징할 수 있는 상태로 제공됩니다.

처음 방문하는 사용자에게는 헤더 (Header), 그래프 (Graph), 퀘스트 (Quests), 인스펙터 (Inspector), 디자이너 (Designer)를 순차적으로 강조하는 스포트라이트 오버레이가 포함된 5단계 가이드 투어를 제공합니다. "다시 보지 않기" 옵션을 선택하면 localStorage에 저장되어 닫을 수 있습니다.

모든 페이지에 대해 공유 가능한 URL을 지원하는 클라이언트 사이드 해시 라우팅 (Client-side hash routing):

• Node.js 18+
• npm 9+

cd Ontology-Playground
npm install

npm run dev

http://localhost:5173 에 접속하세요.

npm run build

빌드 파이프라인 (build pipeline)은 카탈로그를 컴파일하고, 학습 콘텐츠 마크다운 (markdown)을 컴파일하며, 타입 체크 (type-checks)를 수행하고, 앱을 번들링 (bundles)하고, 임베드 위젯 (embed widget)을 빌드합니다. 출력물은 build/ 디렉토리에 생성됩니다.

npm test # 단일 실행
npm run test:watch # watch 모드

이 리포지토리 (repo)에는 main 브랜치로 푸시 (push)할 때마다 Azure SWA에 배포하는 GitHub Actions 워크플로 (workflow)가 포함되어 있습니다.

• Azure Portal에서 Static Web App 생성
• GitHub 리포지토리와 연결
• 배포 토큰 (deployment token)을 복사하여 GitHub secret AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_PLANT_0BB1D2910으로 추가
• main 브랜치로 푸시 — .github/workflows/azure-static-web-apps-green-plant-0bb1d2910.yml에 있는 워크플로가 나머지 과정을 처리합니다. 풀 리퀘스트 (pull requests)에 대한 PR 프리뷰 환경 (preview environments)은 자동으로 생성됩니다.

포크 (forks)에 이상적인 별도의 워크플로가 GitHub Pages로 배포합니다:

• 이 리포지토리를 포크 (Fork)
• Settings → Pages → Source로 이동하여 GitHub Actions를 선택
• main 브랜치로 푸시 — .github/workflows/deploy-ghpages.yml에 있는 워크플로가 빌드하여 https://<username>.github.io/<repo-name>/로 배포합니다.

VITE_BASE_PATH 환경 변수 (env var)는 GitHub Pages 빌드 중에 자동으로 /<repo-name>/로 설정되어 에셋 경로 (asset paths)가 올바르게 해결됩니다.

Ontology-Playground/
├── src/
│ ├── components/ # React 컴포넌트 (graph, designer, modals, learn page)
...

아래 표는 주요 최종 사용자(end-user) 및 기여자(contributor) 가이드를 나열합니다. 내부 계획 노트(예: docs/TODO-*.md)는 의도적으로 공개 문서 세트에 포함되지 않았습니다.

이 리포지토리(repository)에는 에이전트가 다음과 같은 작업을 안정적으로 수행할 수 있도록 하는 Copilot 커스터마이징 파일이 포함되어 있습니다:

• 고객의 RDF/OWL을 카탈로그 준비 형식으로 가져오기 (import)
• 점진적인 Ontology School 모듈 생성
• 레슨 콘텐츠를 사람의 검토 워크플로(human review workflows)를 통해 라우팅

포함된 에셋 (Included assets):

• 기술 (Skills):
  .github/skills/ontology-catalog-import/

— 외부/고객 RDF/OWL을 카탈로그 형식으로 가져오기
.github/skills/ontology-school-path-generator/

— 점진적인 Ontology School 모듈 생성
.github/skills/community-ontology-contribution/

— 올바른 디렉토리 구조, 메타데이터 및 검증을 갖춘 기여자 온톨로지를 catalogue/community/ 아래에 추가
.github/skills/name-generator/

— 승인된 CSV 픽스처(fixture)로부터 예시, 데모, 퀘스트, 테스트 및 샘플 데이터를 위한 인명 생성

• RDF 수집 지침 (RDF intake instruction):
  .github/instructions/rdf-intake.instructions.md

• 재사용 가능한 프롬프트 (Reusable prompts):
  .github/prompts/import-rdf-to-catalog.prompt.md

.github/prompts/generate-ontology-school-module.prompt.md

머지(Merge) 전 권장 검증 사항:

npm run qa:tutorial-content
npm run build

React 19+
TypeScript 5
Cytoscape.js— 그래프 시각화 (Graph visualization) (fcose 레이아웃)
Zustand— 상태 관리 (State management)
Vite— 빌드 도구 (Build tool)
Framer Motion— 애니메이션 (Animations)
Lucide Icons— 아이콘 라이브러리 (Icon library)
marked— 마크다운 컴파일 (Markdown compilation) (빌드 타임)

MIT

상표 (Trademarks)
이 프로젝트에는 프로젝트, 제품 또는 서비스에 대한 상표나 로고가 포함되어 있을 수 있습니다. Microsoft 상표 또는 로고의 승인된 사용은 Microsoft의 상표 및 브랜드 가이드라인 (Trademark & Brand Guidelines)을 준수해야 합니다. 이 프로젝트의 수정된 버전에서 Microsoft 상표 또는 로고를 사용하는 것은 혼동을 야기하거나 Microsoft의 후원을 암시해서는 안 됩니다. 제3자 상표 또는 로고의 모든 사용은 해당 제3자의 정책을 따릅니다.