코드는 짤 수 있다. 하지만, 세련된 버튼 하나 디자인할 수 없다.

그것이 바로 나라는 프론트엔드 엔지니어다!

이번에는 기술 기사입니다.

최근 화면 레이아웃부터 담당하는 기회가 늘어나고 있습니다만, 솔직히 말해서 디자인 도구는 거의 다룰 줄 모릅니다.

이미지 추출이나 기존 디자인의 문구·위치 수정 등은 마음만 먹으면 할 수 있지만, "처음부터 디자인을 해달라"고 하면 항상 난처한 표정을 짓게 됩니다. 오히려 코드로 직접 화면을 구성하여 디자인을 짜는 편이 더 특기일 정도입니다.

흔히 쓰이는 디자인 도구(Figma, Adobe XD, Photoshop, Illustrator)는 모두 어느 정도밖에 만지지 못해서, 막상 제작하려고 하면 손이 멈춰버립니다. 그 학습 비용을 지불해야 할지 고민하다가, 과거에는 Excel로 화면 디자인을 작성한 적도 있습니다.

하지만, 이제 무리해서 디자이너 흉내를 낼 필요는 없습니다. IDE에서 한 발짝도 나가고 싶지 않은 게으른 엔지니어를 위한 검증 비망록을 전달해 드립니다.

검증 기사는 이곳을 확인해 주세요.

현재 무료로 이용 가능합니다. 아래는 공식 사이트입니다.

Pencil의 최대 특징은 "디자인을 IDE(에디터)와 동일한 문맥에서 다루는 것"에 특화되어 있다는 점입니다. 이번에는 VS Code의 확장 기능을 사용하여 실제로 시도해 보았습니다.

VS Code 안에 Figma와 같은 디자인 도구의 화면이 탄생했습니다.

캔버스의 기본 구성은 왼쪽에 레이어, 중앙에 무한 캔버스, 오른쪽에 프로퍼티(Property)로, Figma 경험자라면 금방 익숙해질 수 있는 구성입니다.

여기서부터 AI에게 프롬프트(Prompt)를 던져 디자인 작성을 의뢰합니다. 구체적인 이미지를 전달하면 더 이미지에 가까운 것을 작성해 줍니다.

여기까지는 다른 AI 도구에서도 유사한 작업을 할 수 있지만, Pencil이 엔지니어에게 혁명적인 것은 지금부터입니다.

Pencil의 디자인 데이터는 .pen이라는 확장자를 가진 JSON 기반의 텍스트 파일로 저장됩니다.

즉, 일반적인 코드 파일과 마찬가지로 Git으로 차이 관리(버전 관리)가 가능합니다. "이전 디자인으로 되돌려줘"라는 요청을 받아도, Git의 커밋(Commit) 이력에서 용이하게 복원할 수 있습니다.

작성한 디자인을 바탕으로, 그대로 AI에게 코드 작성까지 의뢰할 수 있습니다. 브라우저의 디자인 도구와 에디터를 왔다 갔다 할 필요가 없습니다.

Cursor나 Claude Code와의 조합도 가능합니다.

통상적인 흐름에서는 코드로 변환된 후에 일부 변경이 생기면, 디자인 데이터는 오래되어 방치(진부화)되기 쉽습니다.

하지만 Pencil에서는 디자인 변수의 값과 CSS 커스텀 프로퍼티(CSS Custom Property, 예: --color-primary 등)가 양방향으로 동기화됩니다. 캔버스에서 색을 바꾸면 코드가 업데이트되고, 반대로 코드 측의 CSS 변수를 수정하면 디자인에 반영되는 용이한 동기화가 가능합니다.

※ 실시간 동기화는 아니기 때문에 변경은 수동으로 이루어지지만, 그 점 또한 AI에게 의뢰함으로써 해결할 수 있습니다.

미리 "규칙 문서(.md)"를 작성하여 AI에게 읽히면, 프로젝트의 품질 규칙에 따른 디자인 생성도 가능합니다.

또한, Figma에서 작성한 디자인 데이터를 임포트(Import)하는 것도 가능합니다.

AI 연동 도구로서 신경 쓰이는 보안이나 대응 기술에 대해서도 정리했습니다.

• 로컬 전용 MCP 서버: Pencil의 MCP 서버는 로컬 머신 상에서 동작하며, 디자인 데이터 자체가 원격 서버로 전송되는 일은 없습니다 (※ AI 기능을 사용할 때의 "프롬프트"만이 Claude 등에 전송됩니다)
• 대응 프레임워크: React (JS/TS), Next.js, Vue, Svelte, 순수 HTML/CSS 등
• 대응 스타일링·UI 라이브러리: Tailwind CSS, CSS 모듈, shadcn/ui, Radix UI, Material UI 등

디자인 도구로서 현 단계에서는 "높은 가능성은 있지만, 프로덕트의 성숙도는 이제부터"라는 인상입니다. 사용하는 데 있어 다음과 같은 점에는 주의가 필요합니다.

• 자동 저장 (Auto-save) 없음: 현재는 Cmd/Ctrl + S를 통한 빈번한 저장이 필수
• Undo/Redo가 제한적: 버전 이력에는 Git 커밋을 사용하는 것을 전제로 한 설계임
• 실시간 공동 편집 기능 없음: 어디까지나 「Git 기반의 협업」이 전제
• 기타 버그: Figma에서 복사/붙여넣기 시 이미지가 누락되거나, Linux (Wayland/Hyprland)에서 UI 결함이 보고되는 등
• 보안 설명은 명확하지만, MCP 서버 구현 리포지토리 자체는 현 시점에서 비공개

엔지니어 출신인 저에게 있어, 「하나의 도구(에디터)로 모든 것을 완결하고, Git으로 로그를 관리할 수 있다」는 Pencil의 메커니즘은 매우 매력적이었습니다.

물론, 본격적인 WEB 디자인이나 사진·일러스트를 다용하는 「보여주기 위한 디자인」을 작성할 경우에는 전용 디자인 도구 (Figma 등)가 압도적으로 사용하기 편리할 것입니다.

하지만 다음과 같은 케이스에서는 막강한 위력을 발휘합니다.

• 디자이너가 없는 프로젝트에서의 프로토타입 작성
• 사내용 관리 화면·시스템의 UI 설계
• 디자인 도구를 오가지 않고, 키보드에서 손을 떼고 싶지 않은 엔지니어
• 디자인에서 코드로, 그리고 코드에서 디자인으로

혼자서 UI를 구축하는 속도와 생산성을 폭발적으로 높이는 수단으로서, 꼭 한번 「Pencil」을 VS Code에 설치하여 즐겨보시기 바랍니다!