무한 캔버스 UI 툴 ‘Pencil’ 등장: Claude Code 연동해 IDE에서 디자인과 코드 동기화

디자이너가 피그마에서 시안을 완성해 전달하면 개발자가 IDE에서 코드로 옮겨 적고, 텍스트나 색상 하나를 바꿀 때마다 커뮤니케이션 비용이 발생하는 일은 개발 현장의 오랜 골칫거리였습니다.

이러한 간극을 줄이기 위해 무한 캔버스와 Claude Code를 결합한 UI 툴 ‘Pencil’이 등장해 주목받고 있습니다. 독립적인 애플리케이션 형태지만 Claude Code 로그인을 거쳐야 사용할 수 있으며, 개발 환경(IDE)에 직접 통합되어 작동하는 것이 가장 큰 특징입니다.

IDE 안에 들어온 무한 캔버스

기존의 벡터 디자인 툴들은 코드베이스와 완전히 분리된 별도 공간에서 실행되었습니다. 반면 Pencil은 개발자가 일하는 IDE 내부에 직접 자리를 잡았습니다.

고정된 아트보드 규격에 얽매이지 않는 무한 캔버스를 지원해, 여러 화면으로 이어지는 복잡한 사용자 플로우나 대시보드, 방대한 디자인 시스템 전체를 한눈에 올려두고 자유롭게 확대·축소할 수 있습니다.

피그마(Figma) 파일을 불러와 작업할 수 있으며, 캔버스에서 직접 화면을 그리는 것도 가능합니다. 특히 돋보이는 부분은 인터랙티브한 시각 편집입니다. 캔버스에 놓인 카피 문구나 색상이 마음에 들지 않으면 마우스로 직접 잡고 수정할 수 있어, 굳이 코드를 뒤적이며 수치를 바꿀 필요가 없습니다.

연동된 Claude Code는 캔버스의 디자인 요소를 실제 코드베이스와 실시간으로 동기화합니다. 단순히 화면을 코드로 변환하는 데 그치지 않고, 반응형 레이아웃 구성이나 접근성, 성능 최적화에 대한 개선 코드까지 함께 제안합니다.

Claude 특유의 ‘파란색·보라색 UI’ 탈피

Claude를 이용해 웹 UI를 만들어 본 사람이라면 별다른 지시가 없을 때 뻔한 파란색이나 보라색 위주의 사이버틱한 화면이 나와 답답했던 경험이 있을 것입니다.

Pencil은 몇 가지 디자인 컴포넌트 라이브러리를 기본 내장하는 방식으로 이 문제를 풀었습니다. Claude가 지정된 컴포넌트 라이브러리의 스타일에 맞춰 프론트엔드 코드를 짜도록 유도해 모델 고유의 편향된 색감을 피하도록 만들었습니다.

구글의 Stitch와 비교하면 차이가 뚜렷합니다. Stitch는 화면을 고치려면 결국 코드를 수동으로 수정해야 하지만, Pencil은 캔버스에서 직관적인 시각 조작이 가능합니다. 다만 Pencil이 기본 제공하는 컴포넌트 선택 폭은 아직 제한적인 편이라, Gemini를 기반으로 더 다양한 미적 감각을 뽑아내는 Stitch에 비해 스타일의 다양성 면에서는 다소 아쉬움이 있습니다. 그럼에도 X와 링크드인에서는 디자이너와 엔지니어들의 작업 흐름이 획기적으로 개선되었다는 호평이 이어지고 있습니다.

왜 중요한가

우리는 Pencil이 AI 코딩 어시스턴트가 가야 할 시각적 작업 환경의 필요성을 정확히 짚어냈다고 봅니다. 프론트엔드 개발은 본질적으로 시각적인 작업인데, 텍스트 프롬프트 창이나 터미널 화면만으로는 미세한 인터페이스 조정에 한계가 명확했기 때문입니다.

1인 개발자나 풀스택 엔지니어에게 주는 실질적인 효용은 매우 큽니다. 피그마 결과물을 가져와 IDE 안에서 직접 마우스로 문구와 색상을 다듬고, Claude Code가 이를 즉시 깨끗한 코드로 정리해 준다면 프로토타입 제작 속도는 비약적으로 빨라집니다. 현재 프론트엔드 작업 비중이 높은 개발자라면 직접 체험해 볼 가치가 충분합니다.

업계 관점에서도 AI 개발 도구는 단순한 텍스트 기반 코드 생성을 넘어, 코드와 캔버스가 실시간으로 양방향 연동되는 이른바 ‘Vibe Design’ 작업 흐름으로 진화하고 있습니다.

컴포넌트 라이브러리로 AI의 디자인을 제어한 방식은 매우 영리하지만, 내장 템플릿이 빠르게 늘어나지 않는다면 결과물이 획일화될 수 있다는 숙제도 안고 있습니다. Claude Code 계정이 반드시 필요하다는 점 역시 진입 장벽입니다. 하지만 디자인 캔버스를 IDE 안으로 끌어들여 개발과 디자인 사이의 벽을 허문 시도는 매우 올바른 방향을 가리키고 있습니다.