MCP로 Claude와 화면 설계하기
md 명세 파일은 한 번 넘기기에 좋습니다. 하지만 설계를 바꾸고 다시 내보내고 다시 넘기는 일이 반복되면, Claude가 프로젝트를 직접 보는 편이 빠릅니다. ScreenPath는 MCP(Model Context Protocol) 서버를 제공해, Claude가 프로젝트를 읽고 고칠 수 있게 합니다.
연결하기
ScreenPath MCP 서버 주소는 https://screenpath.dev/mcp입니다. 연결은 OAuth로 하며, 동의 화면에서 Claude가 볼 프로젝트와 권한(읽기 전용 또는 쓰기)을 고릅니다. MCP 연결은 Pro 플랜 기능입니다.
Claude 데스크톱·claude.ai
- 사용자 지정(Customize) › 커넥터(Connectors)를 엽니다.
- +를 누르고 사용자 지정 커넥터 추가(Add custom connector)를 고릅니다.
- 이름에 ScreenPath, 원격 MCP 서버 URL에 위 주소를 넣습니다.
- 열리는 창에서 Google로 로그인하고, 연결할 프로젝트를 고른 뒤 허용합니다.
Claude Code — 터미널에서 실행합니다.
claude mcp add --transport http --scope user screenpath https://screenpath.dev/mcp
그다음 Claude Code에서 /mcp를 열어 screenpath를 인증합니다. 자세한 안내와 문제 해결은 MCP 연결 안내에 있습니다.
Claude가 할 수 있는 일
- 읽기 — 프로젝트 개요, 화면, 디자인 규칙, 흐름, 계산된 배치, 지금 내가 고른 부품, 최근 바뀐 것, 댓글, 버전 목록을 읽습니다. md 명세를 바로 만들 수도 있습니다.
- 쓰기 — 화면·부품·묶음·액션(선)·변수·모션 프리셋·디자인 토큰·컴포넌트를 만들고 고칩니다. 여러 편집을 한 번에 묶어 실행할 수도 있습니다.
- 보면서 고치기 — 화면을 그림으로 그려 보고(
render_screen), 흐름을 눌러 따라가며 끊긴 길이나 반복을 찾습니다(simulate_flow). - 가져오기 — 이미 있는 앱 코드를 읽어 ScreenPath 프로젝트로 옮기는 도구도 있습니다.
읽기 전용으로 연결하면 Claude에게는 쓰기 도구가 아예 보이지 않습니다.
실시간으로 보인다
Claude가 바꾼 내용은 팀원의 편집과 같은 경로로 들어옵니다. 그래서 ScreenPath를 열어 두면 Claude가 고친 화면과 부품이 보라색으로 표시되며 바로 나타납니다. Claude의 편집 한 번은 되돌리기 한 번이라, 마음에 들지 않으면 바로 되돌릴 수 있습니다. 반대로 지도나 편집기에서 내가 고른 부품은 Claude가 "지금 선택"으로 읽을 수 있어서 "이거 버튼 두 개로 나눠 줘"처럼 짧게 요청할 수 있습니다.
써 볼 만한 요청
지금 프로젝트의 흐름을 보고 로그인 실패 시 갈 화면이 없으면 만들어서 이어 줘.
장바구니 화면에 빈 상태를 추가하고, "쇼핑 계속하기" 버튼을 상품 목록으로 연결해 줘.
이 프로젝트를 Next.js로 구현해 줘. 화면 이름과 경로는 ScreenPath에 있는 그대로 쓰고, 만든 파일을 화면에 연결해 둬.
마지막 요청처럼 코드와 화면을 이어 두면(소스 연결 키), 다음에 설계가 바뀌었을 때 Claude가 어느 파일을 고쳐야 하는지 압니다.
데이터는
ScreenPath는 서비스 운영을 위해 프로젝트 데이터를 AI 제공자에게 보내지 않습니다. Claude는 회원이 직접 연결하고 허용한 프로젝트만 읽고, 그 처리는 회원이 쓰는 Claude의 정책을 따릅니다. 연결은 설정에서 언제든 끊을 수 있습니다.