Pencil

디자인 파일을 다루는 Pencil MCP의 개념과 연동 흐름의 기본을 익힌다.

Pencil MCP 서버를 연결하고 AI 어시스턴트로 첫 디자인 파일을 만드는 과정을 단계별로 익힌다.

Pencil 편집 화면의 캔버스·프레임·레이어·속성 네 영역과 핵심 단축키를 익혀 첫 디자인을 다룰 준비를 한다.

.pen 파일을 Git에 커밋해 디자인을 코드처럼 버전 관리하는 워크플로와 베스트 프랙티스를 익힌다.

Pencil을 MCP로 Claude Code 같은 AI 어시스턴트에 연결해 .pen 디자인을 생성·수정하는 방법을 익힌다.

Pencil의 변수로 디자인 값을 한 번만 정의해 재사용하고, 테마로 light/dark 변형을 만든다.

Pencil에서 컴포넌트로 재사용 가능한 UI 블록을 만들고 슬롯으로 유연한 영역을 정의하는 방법을 익힌다.

Pencil의 디자인 라이브러리로 재사용 컴포넌트를 모아 여러 .pen 파일에서 공유하고 한 번에 갱신하는 방법을 익힌다.

Pencil에서 디자인을 코드로, 코드를 디자인으로 변환하는 양방향 작업 흐름을 익힌다.

Pencil에서 레이어 명명·그룹화·그리드 스냅을 활용해 AI가 읽고 수정하기 쉬운 디자인 구조를 만드는 법을 익힌다.

Pencil의 flexbox 기반 레이아웃과 SizingBehavior, 타이포그래피 변수로 화면 크기에 맞춰 늘어나는 디자인을 만드는 기본을 익힌다.

Figma 디자인을 Pencil로 가져오는 방법과 임포트 후 화면을 정돈하는 기본 흐름을 익힌다.

Pencil의 Script 노드로 .js 파일의 출력을 캔버스에 레이어로 렌더링하고 라이브로 편집하는 법을 익힌다.

Pencil CLI로 터미널에서 .pen 디자인을 생성·수정하고 CI/CD에 연결하는 헤드리스 자동화의 기본을 익힌다.

Pencil의 design-as-code 특성으로 변경을 추적하고, 흔한 연동·인증 문제를 진단해 해결하는 방법을 익힌다.