vscode-ui-sketcher

vscode-ui-sketcher란?

vscode-ui-sketcher는 UI 프로젝트를 생동감 있게 그려내기 위한 Visual Studio Code 확장(웹뷰 컴포넌트 포함)입니다. 리포지토리는 이 도구를 VS Code 워크플로 내에서 UI 디자인 작업을 인터랙티브하고 배포 가능한 형태로 전환하는 데 초점을 맞춥니다.

이 프로젝트는 오픈 소스이며 VS Code 확장과 별도의 웹뷰 앱을 모두 포함합니다. tldraw에서 영감을 얻었으며 draw-a-ui에서 UI 그리기 출발점을 참조합니다.

주요 기능

UI 스케칭을 위한 VS Code 확장 프로젝트: 일반적인 VS Code 워크플로의 일부로 에디터 내에서 UI 아이디어를 그릴 수 있는 방법을 제공합니다.
웹뷰 기반 편집 경험: 확장에는 전용 ui-sketcher-webview 패키지가 포함되어 그리기 UI가 웹뷰에서 실행됨을 나타냅니다.
pnpm을 사용한 재현 가능한 개발 환경: 종속성 설치(pnpm install)와 웹뷰 빌드(pnpm build 또는 pnpm build --watch) 지침이 포함됩니다.
VS Code 디버거를 통한 디버깅 지원: 리포지토리에서 VS Code 디버거를 사용해 확장을 실행할 것을 명시적으로 권장합니다.
브라우저 기반 웹뷰 개발: 개발자는 웹뷰를 직접 실행(pnpm --filter ui-sketcher-webview dev)하고 로컬 URL http://localhost:3174를 열 수 있습니다.
오픈 소스 라이선스(AGPL-3.0): 리포지토리에 AGPL-3.0 라이선스 파일이 포함되어 코드 사용 및 재배포 방식에 관련됩니다.

vscode-ui-sketcher 사용 방법

Visual Studio Marketplace에서 확장을 설치하거나(또는 Extensions 탭에서 “UI Sketcher” 검색).
확장을 열고 화면 지침에 따라 UI 프로젝트를 그리는 워크플로를 따르세요(리포지토리의 README와 확장 README가 참조되지만, 제공된 페이지 콘텐츠에는 상세한 제품 내 단계가 포함되지 않음).
기여나 개발 시: 리포를 클론하고 pnpm install로 종속성을 설치한 후 제공된 ui-sketcher.code-workspace 개발 환경에서 확장을 빌드하고 실행하세요.
웹뷰 작업 시: ./ui-sketcher-webview에서 pnpm --filter ui-sketcher-webview dev를 실행하고 브라우저에서 http://localhost:3174를 여세요.

사용 사례

레이아웃 반복 중 VS Code에서 UI 스케칭: 에디터를 떠나지 않고 인터페이스 구조를 초안으로 그릴 때 확장을 사용하세요.
그리기 경험 개발 또는 맞춤화: 기여자는 ui-sketcher-webview 패키지에서 작업하고 로컬 브라우저 URL로 변경 사항을 확인할 수 있습니다.
에디터 내 확장 동작 디버깅: VS Code 디버거로 확장을 실행하고 문제를 조사하세요.
개발 중 웹뷰 빌드 및 감시: 웹뷰 작업 시 빠른 피드백을 위해 pnpm build --watch를 실행하세요.
오픈 참조 구현 학습: 리포지토리 구조(확장 + 웹뷰 패키지, 워크스페이스 파일, 빌드 지침)는 유사한 VS Code 그리기 도구의 출발점으로 활용할 수 있습니다.

자주 묻는 질문

vscode-ui-sketcher를 어디에 설치하나요?

Visual Studio Marketplace에서 설치하거나 Extensions 탭에서 “UI Sketcher”를 검색하세요.

개발 중 별도로 실행할 수 있는 웹뷰 코드가 있나요?

네. 리포지토리에서 pnpm --filter ui-sketcher-webview dev로 웹뷰를 실행하고 http://localhost:3174를 여는 방법을 설명합니다.

소스에서 확장이나 웹뷰를 어떻게 빌드하나요?

페이지 콘텐츠에 따르면 ./ui-sketcher-webview에서 pnpm build(또는 pnpm build --watch)를 실행할 수 있습니다. 개발 시 “ui-sketcher.code-workspace 파일에서만 작업하세요”라고 안내합니다.

프로젝트 라이선스는 무엇인가요?

리포지토리에 AGPL-3.0 라이선스가 명시되어 있습니다.

대안

범용 UI 다이어그램 도구: 그리기나 다이어그램(종종 내보내기 기능 포함)에 초점을 맞춘 도구는 스케칭 워크플로를 대체할 수 있지만 VS Code 통합이 없을 수 있습니다.
디자인-투-코드용 다른 VS Code 확장 접근: UI 생성이나 모형을 타겟으로 한 확장은 유사한 목표를 달성할 수 있지만 워크플로와 렌더링/내보내기 옵션이 다릅니다.
웹 기반 협업 화이트보드/디자인 캔버스: 에디터 통합 워크플로 대신 브라우저 기반 그리기가 필요하다면 웹 그리기 캔버스가 대안이 될 수 있으며 VS Code 프로젝트 맥락 강조가 적습니다.
다이어그램/플로우 도구: 픽셀 수준 레이아웃보다 구조가 주된 사용자에게 다이어그램 도구는 UI 스케칭 캔버스보다 간단한 문서 우선 워크플로를 제공합니다.