소개
요즘 챗GPT 앱을 만들고 있어요. 그런데 작업을 하다 보니… 디자인이 너무 마음에 안 드는 거예요 😓
피그마 메이크로 뚝딱뚝딱 디자인을 만들어서 GitHub에 올려놓고, 프로젝트에 클론까지 해봤지만 실제 화면에서는 어딘가 어색하고 손에 익지 않았어요. 그러다 문득, “그냥 이미지를 캡처해서 구현해주는 도구는 없을까?” 싶었죠.
그렇게 만난 게 바로 Pencil MCP였습니다. 제가 만든 디자인 캡처를 딱 넣었더니, 자동으로 컴포넌트를 인식하고, 배치하고, 색감까지 잘 잡아줬거든요 🧙
진행 방법
사용 도구
🖌️ Pencil MCP
🤖 Claude Code (바이브코딩 환경)
사용 과정
기존 디자인 캡처
아래는 제가 기존에 작업한 디자인을 캡처한 이미지입니다. 이걸 Pencil MCP에 넣었습니다.클로드코드에서 Pencil MCP연결 후, 샘플이미지 주입
자동 구성 결과 확인
Pencil MCP가 만들어준 결과는 다음과 같아요. 컴포넌트도 잘 구분되고, 잘 표현해줬어요. 안에 들어가는 화장품 이미지들이 원본이랑 달라서 고급스러운 느낌이 좀 덜하긴 하지만, 그건 사진을 교체하면 되니까 상관없구요코드 추출 및 적용
Claude Code에서 코드 정리 & 앱 프로젝트에 반영
설치 팁 (윈도우 유저 필수!)
# Pencil.dev 접속 후
# 맨 아래까지 스크롤 ⬇️
# 'VSCode에 추가' 버튼 클릭하면 설치 가능
결과와 배운 점
디자인 구현에서 오는 스트레스가 진짜 줄었어요. 바이브코딩을 하다 보면 코드만 잘 나와도 뿌듯한데, UI가 마음에 안 들면 흐름이 끊기거든요 😢
Pencil MCP 덕분에 이제는 캡처 한 장이면 꽤 완성도 있는 UI 컴포넌트를 바로 생성할 수 있어서, 디자인 → 코드 전환 루틴이 훨씬 매끄러워졌습니다.
앞으로는 디자인 초안 → 캡처 → Pencil MCP → Claude 정리 → 앱 반영의 루틴을 적극적으로 활용해보려고 해요!
도움 받은 글
🖇️ https://pencil.dev (Pencil MCP 공식 사이트)
꼭 써보세요.. 대박입니다 😎
