Claude Code

Pencil Dev

Pencil — 그려서 만드는 바이브코딩

Claude Code로 웹페이지를 만들 때 가장 답답한 순간은, 머릿속에 보이는 수정 사항을 말로만 설명해야 할 때입니다. “버튼을 왼쪽으로 옮겨줘”, “여백을 좀 더 줘”라고 써도, 원하는 화면을 텍스트로 옮기는 일이 먼저 필요합니다. Pencil은 이 과정을 캔버스에 직접 그리는 방식으로 바꿉니다.

코드 에디터 안에 캔버스가 생긴다고 보면 됩니다. VS Code나 Cursor에 확장 프로그램으로 설치하면 에디터 안에서 네모를 놓고 텍스트와 색을 바꿀 수 있습니다. 그렇게 그린 디자인은 React나 HTML/CSS 코드로 생성됩니다.

새소식 이미지

캔버스에서 그린 UI가 코드로 이어집니다

바이브코딩은 “대시보드 만들어줘”라고 말하면 Claude가 코드를 짜고, 브라우저에서 결과를 확인하며 다시 텍스트로 고치는 방식입니다. 마음에 들지 않는 부분이 생길 때마다 이 과정을 반복해야 하니, 서너 번만 이어져도 꽤 피곤해집니다. Pencil은 이 반복을 캔버스에서 화면을 고치는 방식으로 바꿉니다.

Pencil에서는 캔버스에 요소를 직접 배치한 뒤 “이걸 React 코드로 만들어줘”라고 넘깁니다. 반대로 캔버스에서 Cmd + K를 누르고 “사이드바랑 메인 콘텐츠 있는 대시보드”라고 입력하면 AI가 캔버스 위에 그려주기도 합니다. 직접 그리기와 AI에게 맡기기를 오가는 방식입니다.

v0나 Bolt는 웹 브라우저에서 결과물을 바로 만들어 줘서 간편하지만, 내 프로젝트 코드와는 분리돼 있습니다. Pencil은 내 에디터 안에서 돌아가므로 만든 코드가 바로 프로젝트에 들어갑니다. 빠르게 실험할 때는 v0나 Bolt, 세밀하게 다듬어 가며 만들 때는 Pencil을 고르면 됩니다.

VS Code와 Cursor에서는 확장 프로그램으로 설치합니다

새소식52개 새소식
New
AI 코딩 에이전트의 화면을 디자이너의 기준으로 설계하는 Hallmark

Hallmark는 Claude Code·Cursor·Codex가 만든 웹 화면의 반복 패턴을 점검하는 스킬입니다. 기본 동작과 세 가지 명령의 쓰임, 설치 방법, 테스트 폴더에서 확인할 항목을 정리합니다.

Octigen, 매달 바뀌는 데이터만 넣어 PowerPoint 보고서를 다시 만듭니다

Octigen은 기존 PowerPoint 템플릿과 월별 Excel 파일을 연결해 반복 보고서를 만듭니다. 연결 구조를 만들 때는 AI가 변환 단계를 만들고, 다음 달부터는 같은 규칙으로 데이터를 채워 담당자가 숫자와 문구를 검토하는 흐름입니다.

AI에게 일반 사용자처럼 화면을 보게 하는 UX 피드백봇

ChatGPT 프로젝트에 일반 사용자 관점의 지침을 저장하고, Claude Design에서 여러 페르소나의 반응을 비교해 배포 전 화면의 혼란 지점을 찾는 흐름을 소개합니다.

Slack Workflow Builder로 채널의 반복 요청을 폼으로 받기

Slack Workflow Builder로 반복 요청을 정해진 질문으로 받고, 응답을 채널 메시지와 Google Sheets에 연결하는 흐름을 정리합니다.

Markdown 폴더는 그대로 두고 위키 화면만 얹는 LeafWiki

문서를 옮기지 않고 찾는 화면만 얹고 싶은 팀을 위해, LeafWiki 도입 전에 링크 변경·리싱크·로그인 모드에서 확인할 지점을 정리했습니다.

nanobot, 채팅에서 파일과 예약 작업을 처리하는 개인 AI 에이전트

nanobot은 채팅 요청을 파일 작업과 예약 실행으로 이어 주는 개인 AI 에이전트입니다. 회의록 정리와 알림을 예로, 맡길 범위와 확인할 항목을 살펴봅니다.

Meetily, 회의를 전사하고 요약하는 로컬 AI 회의록 도구

Meetily는 녹음과 전사를 기기에서 처리하고, 요약에는 로컬 AI나 사용자가 고른 API를 연결할 수 있는 회의록 도구입니다.

Codex 사용 분석: AI에게 질문하던 사람들이 일을 맡기기 시작했습니다

OpenAI의 Codex 사용 분석에서 비개발자 사용 급증과 위임 시간의 변화를 읽습니다. 수치의 전제를 확인하고, 내 업무에서 맡길 일을 고르는 기준까지 정리했습니다.

OfficeCLI, 매달 고치는 보고서 파일을 AI에게 맡기기

OfficeCLI는 Word, Excel, PowerPoint 파일을 AI 에이전트가 읽고 고치게 하는 단일 바이너리 도구입니다. 보고서 파일 한 건으로 시작해 결과물을 화면에서 확인합니다.

문서를 열기 전에, 먼저 ‘어디로 보낼지’ 정합니다

Document Classify는 문서 양식 대신 팀이 정한 분류 설명을 읽어 PDF·스캔본·이미지를 나눕니다. 문서 20건을 작은 표본으로 시험한 뒤, 어느 결과까지 자동으로 넘길지 정합니다.

Claude Tag, Slack 채널에서 팀의 일을 이어받다

Claude Tag는 Slack 채널의 대화를 이어서 읽고 팀의 반복 업무를 맡습니다. 어떤 업무부터 시작할지, 권한과 비용을 어떻게 관리할지 정리했습니다.

Pagecast로 보고서 파일을 링크로 공유하기

Pagecast는 AI 코딩 에이전트가 만든 HTML·Markdown 보고서를 Cloudflare Pages 링크로 발행해 공유하는 도구입니다. 파일 첨부 대신 웹 링크로 넘기는 절차와 주의점을 정리했습니다.

Ponytail: AI가 일을 크게 벌이지 않게 하기

Ponytail은 Claude Code나 Codex가 작은 수정까지 과하게 키우지 않도록 ‘덜 만들고 덜 건드리는’ 기준을 붙이는 스킬입니다. lite/full/ultra 모드와 Hooks 확인 기준을 함께 봅니다.

agent-handoff로 Claude Code와 Codex 사이에서 작업 넘기기

agent-handoff는 Claude Code와 Codex 사이에서 세션 맥락을 손으로 요약하지 않고 넘기는 도구입니다. 넘길 대화와 이어갈 에이전트만 고르면 작업 전환이 쉬워집니다.

Headroom: 긴 출력물을 Claude Code에 가볍게 넘기는 도구

Headroom은 Claude Code가 긴 로그나 실행 결과를 읽기 전에 먼저 압축해 넘기는 도구입니다. /compact와 달리 입력 단계의 컨텍스트 부담을 줄이는 선택지입니다.

Claude가 우리 사이트를 알고 있는지 확인하기

Claude나 Perplexity 같은 AI 답변에서 우리 사이트가 어떻게 읽히는지 Claude Code로 점검하는 geo-seo-claude 스킬입니다. SEO 점수보다 답변 원문과 인용 가능성을 확인하는 흐름입니다.