Electron Desktop App

웹컴포넌트 개발의
모든 단계
하나의 도구로

CALS 플랫폼 웹컴포넌트를 개발하고, 격리된 환경에서 미리보고, 실제 CALS에서 테스트하고, 클릭 한 번으로 배포하세요. 터미널에서 Claude Code를 바로 실행하여 AI와 함께 개발합니다.

macOS Windows 자동 업데이트
CALS WebComponent Dev Tool 데모 — 개발부터 배포까지 전체 워크플로우
Workflow

네 단계로 완성하는
웹컴포넌트 개발

개발부터 배포까지, 탭 하나씩 넘기며 완성합니다.

개발 탭 화면
Step 01

Claude Code와
함께 개발

터미널에서 Claude Code를 실행하고, 스크린샷을 드래그하면 AI가 CALS 표준에 맞는 웹컴포넌트 코드를 자동 생성합니다. DevGuide 7개 문서가 프롬프트에 자동 연동됩니다.

Features

개발자를 위해
설계된 기능들

반복되는 작업을 자동화하고, 개발에만 집중하세요.

Claude Code 연동 터미널

사전 설치된 Claude Code를 터미널에서 바로 실행하고, 스크린샷을 드래그 앤 드롭하면 AI가 CALS 웹컴포넌트 코드를 자동 생성합니다. 7개의 개발 가이드 문서가 프롬프트에 자동 연동되어 CALS 표준을 준수합니다.

$ claude
Claude Code v1.0 initialized
devGuide 문서를 읽고 첨부한 스크린샷을 CALS WebComponent로 개발해줘

자동 업데이트

새 버전이 릴리스되면 앱이 자동으로 감지합니다. 한 번의 클릭으로 최신 버전을 다운로드하고 적용할 수 있습니다.

크로스 플랫폼

macOS와 Windows 모두 지원합니다. Electron 기반으로 동일한 경험을 제공합니다.

Shadow DOM 격리

웹컴포넌트가 실제 동작하는 것과 동일한 Shadow DOM 환경에서 미리봅니다. 스타일 충돌 없이 정확한 결과를 확인하세요.

CALS 자동 로그인

CALS 환경 테스트 시 로그인 과정을 자동 처리합니다. webRequest 후킹으로 S3 요청을 로컬 서버로 리다이렉트합니다.

Getting Started

3단계로 시작하세요

01

다운로드 & 설치

플랫폼에 맞는 설치 파일을 다운로드합니다. macOS는 DMG, Windows는 설치 관리자를 제공합니다. 설치 후 바로 실행할 수 있습니다.

02

프로젝트 설정

Extension Path를 프로젝트 폴더로 지정하고, CALS 환경(호스트, 포트, 프로젝트 도메인)을 설정합니다. 프리셋으로 설정을 저장하면 프로젝트 전환이 편리합니다.

03

개발 시작

개발 탭에서 터미널을 열고 Claude Code를 실행합니다. 스크린샷을 붙여넣기만 하면 AI가 CALS 표준에 맞는 웹컴포넌트를 생성합니다.

지금 바로
개발을 시작하세요

CALS 웹컴포넌트 개발에 필요한 모든 것이 하나의 앱에 담겨 있습니다. 무료로 다운로드하고 바로 사용하세요.

v1.0.5 · 자동 업데이트 지원 · macOS 12+ / Windows 10+