블록 개발 킷

블록 개발 킷은 로컬 환경에서 이미 사용 중인 익숙한 AI와 함께 식스샵 웹사이트에 사용되는 블록, 페이지를 미리 보면서 개발하고, 실제 스토어에 적용까지 도와주는 개발 도구에요.

시작하기

Node.js를 다운받고 설치해주세요. (v24.x 버전 이상 필수)
환경에 맞는 블록 스타터 프로젝트를 다운로드 받아주세요.
Claude Code 사용 시
⬇️ 스타터 프로젝트 다운로드
Claude Desktop, Claude Code CLI, VSCode Claude Code Extension 등 Claude Code를 지원하는 환경에서 사용하실 수 있어요.
Cursor 사용 시
⬇️ 스타터 프로젝트 다운로드
Cursor에서 사용하실 수 있어요.
압축을 해제한 뒤 폴더명을 “멋진 사이트”처럼 구분하기 쉬운 프로젝트명으로 변경하시면 좋아요.
사용하시는 AI 환경에서 프로젝트 폴더를 열고 사용 환경에 따른 설정을 진행해주세요.
Claude Code 사용 시
별도의 설정 없이 바로 시작할 수 있어요.
Cursor 사용 시
Cursor 설정 페이지(Settings)의 MCP 탭에서 식스샵 블록 개발 킷(sixshop-block-dev-kit)을 활성화 해주세요.
각 환경에서 제공하는 AI에게 “웹사이트 개발을 시작하고 싶어” 같이 말을 걸고 개발을 시작하실 수 있어요.
프로젝트 개발이 완료되면 식스샵 MCP 앱과 연동해서 실제 스토어에 적용하실 수 있어요.

식스샵 MCP로 실제 스토어에 적용하기

블록 개발 킷과 식스샵 MCP를 함께 사용하시면, 개발한 블록과 페이지를 실제 스토어에 적용하는 과정까지 AI의 도움을 받아 진행하실 수 있어요.

개발된 블록, 페이지를 실제 적용하려는 스토어에 로그인 후 앱스토어에서 식스샵 MCP 앱을 설치해주세요.
AI에게 이 페이지의 링크와 함께 "식스샵 MCP 앱과 연동해서 실제 스토어에 적용하고 싶어"라고 말씀해주세요. 그러면 AI가 식스샵 MCP 앱과 연동할 수 있도록 도와줄 거예요.
Claude Code 사용 시
sh
```
MCP_CLIENT_SECRET=<CLIENT_SECRET> claude mcp add \
--transport http \
--client-id <CLIENT_ID> \
--client-secret \
--callback-port 8765 \
--scope project \
sixshop-mcp https://mcp.sixshop.io/mcp?store_id=<STORE_ID>
```
- 위 명령어를 사용하면 프로젝트에 식스샵 MCP 서버를 추가할 수 있어요. (--scope project → 프로젝트 폴더 내 .mcp.json에 적용)
- Claude 사용 환경을 재시작해야 적용될 수 있어요.
Cursor 사용 시
json
```
{
    "mcpServers": {
        "sixshop-block-dev-kit": {
            ...
        },
        "sixshop-mcp": {
            "url": "https://mcp.sixshop.io/mcp?store_id=<STORE_ID>",
            "auth": {
                "CLIENT_ID": "<CLIENT_ID>",
                "CLIENT_SECRET": "<CLIENT_SECRET>"
            }
        }
    }
}
```
- 프로젝트 폴더 내 .cursor/mcp.json 파일에 위와 같이 식스샵 MCP 서버 정보를 추가하면, Cursor에서 식스샵 MCP 서버와 연동할 수 있어요.
- Cursor 설정 페이지(Settings)의 MCP 탭에서 식스샵 MCP(sixshop-mcp)를 활성화한 뒤, Connect 버튼을 눌러 연동을 완료해주세요.

프로젝트 폴더의 구성

기본적인 프로젝트 폴더는 다음과 같은 구조로 구성되어 있어요.

blocks/         # 개발 중인 블록들이 저장돼요.
├── hero.sbm    # 블록의 코드 파일(.sbm)이에요.
├── hero.sbmc   # 블록의 설정 파일(.sbmc)이에요.
├── features.sbm
├── features.sbmc
└── ...
pages/          # 개발 중인 페이지들이 저장돼요.
├── home.yaml   # 페이지 파일이에요.
├── about.yaml
└── ...
AGENTS.md       # AI를 위한 프로젝트 지침 파일이에요.

blocks/ 안에 폴더를 추가로 만들어서 블록을 구분해 관리하실 수 있어요.
- 예#1): blocks/gallery/에 갤러리형 블록만 모아 놓기
- 예#2): blocks/home/에 홈 페이지에 사용되는 블록만 모아 놓기
pages/ 안에 폴더를 추가로 만들어서 페이지를 구분해 관리하실 수 있어요.
- 예#1): pages/brands/에 브랜드 소개 페이지 모아 놓기
AGENTS.md 필요한 경우 프로젝트 특성에 맞게 AI 지침을 수정해 사용하실 수 있어요.

업데이트 노트

v1.0.0
- 많은 신규 블록 문법들을 AI가 사용할 수 있도록 업데이트했어요.
- 커스텀 DB를 활용한 블록 제작 시 식스샵 MCP와 함께 잘 연계 사용되도록 개선되었어요.
- 부정확한 블록 검증과 이에 의한 AI 토큰 소모를 줄이기 위해서 블록 검증(validate_block) Tool 제공이 이번 버전부터 잠깐 중단됐어요.
v0.3.0
- 프리뷰에서 수정한 블록 설정을 파일로 저장할 수 있는 기능이 추가되었어요.
v0.2.0
- 블록 개발 킷이 릴리즈 되었어요.

LICENSE

이 내용을 참고해주세요.

블록 개발 킷 ​

시작하기 ​

식스샵 MCP로 실제 스토어에 적용하기 ​

프로젝트 폴더의 구성 ​

업데이트 노트 ​

LICENSE ​