Ontology Playground: 브라우저에서 온톨로지를 배우고 설계하는 오픈소스 웹 앱 (feat. Microsoft)

Ontology Playground 소개

Ontology Playground는 온톨로지(ontology)와 Microsoft Fabric IQ를 익히기 위한 무료 오픈소스 웹 애플리케이션입니다. 미리 만들어 둔 온톨로지를 그래프로 열어 보고, 시각 편집기에서 직접 설계하고, RDF/XML로 내보내고, 상호작용 가능한 다이어그램을 공유하는 과정을 한 화면에서 다룹니다. Microsoft가 공개한 저장소이고 프로젝트 이름 옆에 Preview 표기가 붙어 있으며, 저장소 첫 줄에 AI 보조 코딩으로 개발했다는 안내가 함께 적혀 있습니다.

구조적으로 눈에 띄는 점은 백엔드가 없다는 것입니다. 전체가 정적 사이트로 동작해 GitHub Pages나 Azure Static Web Apps에 그대로 올릴 수 있고, 바로 열어 볼 수 있는 데모 도 그렇게 배포되어 있습니다. 선택 사항인 Azure OpenAI 기반 온톨로지 빌더를 켤 때만 api/ 디렉토리 의 Azure Functions 백엔드가 관여합니다.

온톨로지는 개체의 종류와 속성, 개체 사이의 관계를 정의하는 의미 모델이고, Fabric IQ 같은 플랫폼은 이 모델을 실제 데이터에 연결해 질의합니다. 이 저장소는 그 개념을 문서로 설명하는 대신 카탈로그와 편집기, 학습 코스, 퀴즈로 나눠 직접 만져 보게 하는 쪽을 택했습니다.

Ontology Playground의 주요 기능

  • 그래프 탐색: Cytoscape.js로 온톨로지를 노드와 엣지 다이어그램으로 그립니다. 이동과 확대는 물론 노드를 눌러 속성을 확인하고, 검색창으로 개체와 관계를 걸러 볼 수 있습니다.
  • 비주얼 디자이너: 좌우 분할 전체 화면 편집기에서 아이콘과 색, 타입이 붙은 속성을 가진 개체 타입을 추가하고 카디널리티를 지정한 관계를 정의합니다. 편집하는 동안 그래프 미리보기가 갱신되며, 50단계 실행 취소와 실시간 검증, RDF/XML·JSON 내보내기를 지원합니다.
  • RDF 왕복 지원: OWL 클래스와 데이터타입 속성, 카디널리티가 붙은 오브젝트 속성을 포함해 .rdf·.owl 파일을 가져오고 Fabric IQ가 기대하는 형식 그대로 내보냅니다. 왕복 변환의 정확성은 자동화된 테스트로 확인합니다.
  • 원클릭 카탈로그 PR: GitHub 디바이스 플로우로 로그인하면 디자이너에서 만든 온톨로지를 커뮤니티 카탈로그로 보낼 수 있습니다. 앱이 저장소를 포크하고 브랜치를 만들어 RDF와 메타데이터를 커밋한 뒤 풀 리퀘스트까지 자동으로 엽니다.
  • 임베드 위젯: ontology-embed.js 파일 하나로 어떤 웹 페이지에든 <script> 태그 한 줄만 넣으면 온톨로지 뷰어가 뜹니다. 다크·라이트 테마와 카탈로그 ID, URL, 인라인 base64 같은 여러 로딩 방식을 지원하며 자세한 사용법은 임베딩 가이드 문서 에 정리되어 있습니다.
  • 자연어 질의 실험실: "Which customers placed orders?" 같은 질문을 입력하면 그 질문이 온톨로지의 개체와 관계에 어떻게 대응되는지 보여 줍니다. Fabric IQ의 NL2Ontology 기능을 미리 체험하는 성격의 화면입니다.

Ontology Playground의 온톨로지 카탈로그

카탈로그는 여섯 개 도메인에 걸친 공식 온톨로지와 커뮤니티가 기여한 온톨로지를 함께 담고 있습니다. 카테고리로 훑거나 이름·태그로 검색해 한 번의 클릭으로 불러올 수 있고, RDF 원본도 그 자리에서 확인할 수 있습니다. 온톨로지마다 /#/catalogue/official/cosmic-coffee 같은 공유용 딥 링크가 붙습니다.

도메인 온톨로지 개체 수 관계 수
리테일 Fourth Coffee 6 7
이커머스 Online Retail 5 6
헬스케어 Clinical System 5 6
금융 Banking & Finance 5 6
제조 Industry 4.0 5 5
교육 University System 5 6

Ontology Playground의 온톨로지 스쿨

/#/learn 경로의 온톨로지 스쿨은 개념 학습 경로와 실습 랩을 아우르는 아홉 개 코스로 구성됩니다. 기초 과정인 Ontology Fundamentals는 온톨로지의 정의에서 시작해 RDF/OWL, Fabric IQ, 첫 온톨로지 만들기, 설계 패턴, 기여 방법까지 여섯 편의 글로 이어집니다.

여기에 Fourth Coffee와 이커머스, 금융, 헬스케어, 제조, 대학, 인사 시스템을 다루는 일곱 개 도메인 학습 경로가 붙습니다. 각 경로는 네 편의 글로 온톨로지를 단계적으로 쌓아 올리며, 단계마다 새로 추가된 개체를 보여 주는 그래프가 글 안에 삽입됩니다. 실습 쪽에는 리테일 공급망을 주제로 개체 3개에서 15개까지 확장해 나가는 일곱 단계짜리 IQ Lab이 준비되어 있습니다.

모든 글은 ## 헤딩을 기준으로 슬라이드가 나뉘는 발표 모드를 지원하고, 즉시 채점되는 퀴즈를 포함합니다. 학습 흐름을 보조하는 장치로는 힌트와 진행 표시줄, 배지를 갖춘 다섯 단계 퀘스트, 처음 방문자를 위한 다섯 단계 안내 투어, ⌘K 로 여는 명령 팔레트가 있습니다.

Ontology Playground 실행 방법

Node.js 18 이상과 npm 9 이상이 필요합니다. 개발 서버를 띄우면 http://localhost:5173 에서 열립니다.

cd Ontology-Playground
npm install
npm run dev

프로덕션 빌드는 카탈로그와 학습 콘텐츠 마크다운을 컴파일하고 타입 검사를 거친 뒤 앱과 임베드 위젯을 함께 번들링하며, 결과물은 build/ 에 생성됩니다.

npm run build
npm test

배포는 두 경로가 준비되어 있습니다. 기본 경로인 Azure Static Web Apps는 main 브랜치에 푸시할 때마다 동작하는 GitHub Actions 워크플로가 처리하고 풀 리퀘스트마다 미리보기 환경도 만들어 줍니다. 포크에는 GitHub Pages 워크플로가 더 적합하며, 이때 VITE_BASE_PATH 환경 변수가 저장소 이름에 맞춰 자동으로 설정됩니다.

Ontology Playground의 기술 스택

앱은 React 19와 TypeScript 5로 작성되었고 Vite로 빌드합니다. 그래프 시각화는 fcose 레이아웃을 쓰는 Cytoscape.js가, 상태 관리는 Zustand가 담당하며, 애니메이션에는 Framer Motion, 아이콘에는 Lucide를 사용합니다. 학습 콘텐츠 마크다운은 빌드 시점에 marked로 컴파일됩니다. 스타일은 Microsoft Fluent 계열의 다크·라이트 테마로 구성되어 있습니다.

저장소에는 Copilot 커스터마이징 자산도 함께 들어 있습니다. 외부 RDF/OWL을 카탈로그 형식으로 들여오는 스킬, 온톨로지 스쿨 모듈을 생성하는 스킬, 커뮤니티 온톨로지를 올바른 디렉토리 구조로 추가하는 스킬이 .github/skills/ 디렉토리 에 정의되어 있습니다.

Ontology Playground의 라이선스

Ontology Playground는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 다만 저장소에 포함된 Microsoft 상표와 로고의 사용은 Microsoft 상표·브랜드 가이드라인을 따라야 하며, 수정본에서 Microsoft가 후원한다는 인상을 주는 방식으로 써서는 안 된다는 별도 고지가 붙어 있습니다.

:framed_picture: Ontology Playground 라이브 데모

:books: Microsoft Fabric IQ 온톨로지 공식 문서

:github: Ontology Playground 프로젝트 GitHub 저장소

더 읽어보기




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: