원문 캡처 · blog.crossui.com
원문 캡처 · blog.crossui.com

CrossUI Studio의 Community Templates에서 공개 GitHub 저장소를 지정하면 복제나 설치 없이 브라우저에서 프로젝트를 열 수 있다. 저장소 파일은 특정 커밋 시점의 사본으로 샌드박스에 불러오며, 수정 내용을 원본 저장소에 커밋하거나 푸시할 수는 없다.

Community Templates에서 Owner와 Repository를 입력하거나 GitHub 주소를 붙여 넣으면 링크를 만들 수 있다. 링크는 https://studio.crossui.com/app/sandbox/github~<owner>~<repo>/ 형식이며, 브랜치는 github~owner~repo@my-branch처럼 지정한다. 저장소가 공개돼 있으면 링크를 받은 사람도 계정 없이 볼 수 있다.

열린 사본은 나중에 저장소에 새 커밋이 올라와도 자동으로 갱신되지 않는다. 최신 내용을 보려면 링크를 다시 열어야 한다. 샌드박스 안에서 파일을 수정할 수 있지만 저장소로 되돌릴 쓰기 경로는 없다. 수정 내용을 보존하려면 Pro 기능인 Local Folder로 로컬 폴더를 열어 직접 커밋하거나, 자격 증명을 연결해 Git repository 방식으로 작업해야 한다.

링크 뒤에 파일 경로를 붙이면 특정 파일로 바로 이동할 수 있다. 예를 들어 material-kit-react의 대시보드 페이지나 분석 화면을 그리는 컴포넌트를 직접 열 수 있다. 직접 지정한 저장소도 github~owner~repo 뒤에 파일 경로를 붙이는 방식은 같다.

모든 저장소가 정상적으로 렌더링되는 것은 아니다. CommonJS만 제공하는 패키지, require("assets/img/x.png")를 사용하는 Create React App 프로젝트, 주변 코드와 세대가 다른 라우터 등이 실패 원인으로 제시됐다. 오류 카드에는 중단된 파일과 줄이 표시되며, 현재 지원 범위는 Community Templates 페이지 하단의 안내에서 확인할 수 있다.

바로 열어 볼 수 있도록 준비된 템플릿은 ant-design-pro, horizon-ui-chakra, mantine-admin, material-dashboard-react, material-kit-react, shadcn-admin 등 6개다. 예를 들어 shadcn-admin 샌드박스를 열 수 있다. 이전 글은 material-kit-react를 빌드 없이 미리 보고 편집하는 방법을 다뤘다.