Pencil MCP 설치와 사용

Pencil은 디자인 파일(.pen)을 읽고 만들고 다듬을 수 있게 해 주는 도구다. MCP(Model Context Protocol)라는 연결 방식을 통해 AI 도구가 디자인 파일에 직접 접근하므로, 디자인 작업과 코드 작업 사이의 경계를 한결 매끄럽게 이어 준다. 이 문서는 Pencil을 처음 접하는 사람이 MCP라는 개념을 이해하고, Pencil이 어떤 자리에서 어떤 역할을 하는지 그림을 잡도록 돕는다.

MCP란 무엇인가

MCP는 AI 도구가 외부 도구나 데이터에 표준화된 방식으로 연결되도록 정의한 규약이다. AI가 직접 모든 기능을 가지는 대신, 잘 정의된 통로를 통해 전문 도구에게 일을 맡기고 그 결과를 받아 온다. Pencil은 이 통로를 통해 "디자인 파일을 다루는 전문 도구" 역할을 맡는다. 덕분에 AI는 디자인 파일의 내부 형식을 몰라도, Pencil에게 적절히 요청하면 화면을 읽거나 만들 수 있다.

설치와 연동의 큰 그림

Pencil을 쓰려면 사용하는 AI 도구에 Pencil MCP 서버를 연결하는 과정이 필요하다. 구체적인 설정 방법은 도구와 버전에 따라 다르므로 공식 안내를 따르는 것이 가장 정확하지만, 큰 흐름은 대체로 다음과 같다.

▶연동의 일반적인 단계

첫째, AI 도구가 인식할 수 있도록 Pencil MCP 서버를 등록한다. 둘째, AI 도구를 다시 시작하면 Pencil이 제공하는 기능들이 사용 가능한 도구 목록에 나타난다. 셋째, 이후로는 "이 디자인 파일을 열어 줘", "이 화면을 만들어 줘"처럼 자연어로 요청하면 AI가 Pencil을 통해 작업을 수행한다. 정확한 등록 절차와 옵션은 설치 환경마다 다를 수 있으니, 최신 공식 문서를 기준으로 삼는 편이 안전하다.

디자인 파일을 다루는 방식

Pencil이 연결되면, 디자인 파일을 직접 편집기에서 열지 않아도 AI를 통해 다룰 수 있다. 화면의 구조를 살펴보거나, 새 화면을 만들거나, 특정 속성을 일괄로 바꾸는 작업을 자연어 요청으로 처리한다. 디자인과 구현이 같은 대화 안에서 오가므로, "디자인을 보고 코드로 옮기는" 단계의 마찰이 줄어든다.

다음 단계

Pencil의 핵심은 "디자인 파일을 AI 작업 흐름 안으로 끌어들이는 다리" 역할이다. MCP라는 연결 방식과 역할 분담의 구조를 이해하면, 다른 MCP 도구를 만났을 때도 같은 틀로 받아들일 수 있다. 다음 문서에서는 화면에서 UI를 추출하는 Stitch로 이어진다. 우선은 사용하는 AI 도구가 어떤 MCP 도구들과 연결돼 있는지 한 번 살펴보는 것부터 시작하길 권한다.