Claude Code로 온라인 슬라이싱 툴 제작…frontend-design 효과 비교

안녕하세요, 저는 멍젠(孟健)입니다. AI 프로그래밍으로 툴을 만들어 해외 시장에 진출하거나 콘텐츠 운영을 하려는 많은 분들이 프런트엔드를 직접 손으로 짜느라 시간과 노력을 낭비하고 있고, AI로 대충 찍어낸 페이지는 레이아웃이 못생기고 인터랙션이 엉망인 경우가 많습니다.

오늘은 5개의 프롬프트로, 코드를 한 줄도 직접 쓰지 않고 Claude Code를 활용해 전문가급 퀄리티를 갖추고 원본 이미지 그리드와 픽셀 표기를 지원하는 온라인 이미지 분할 도구를 만들어 보고, 제로 비용 배포 방안까지 함께 알아보겠습니다.

1. 깨끗한 작업 디렉터리 만들기

Windows Terminal을 열고 상단의 「+」를 클릭해 새 탭을 만든 뒤, 아래 명령어를 입력하여 바탕화면에 image-splitter-demo 폴더를 생성하고 그 안으로 이동합니다:

mkdir -Force "$HOME\Desktop\image-splitter-demo"; cd "$HOME\Desktop\image-splitter-demo"

2. Claude Code 실행

터미널에서 다음 명령어를 입력해 Claude Code를 실행합니다:

claude

이 디렉터리에서 처음 실행하면 터미널에 보안 검사 안내가 뜨는데, 키보드로 「Yes, I trust this folder」를 선택하고 엔터를 눌러 확인하면 깨끗한 초기 환영 화면으로 진입합니다.

3. 공식 오픈소스 프런트엔드 디자인 스킬 설치

AI가 만든 웹페이지가 기본의 투박한 느낌에서 벗어나게 하려면, 첫 단계로 전용 디자인 역량을 갖춰줘야 합니다. Claude Code 하단 입력창에 첫 번째 프롬프트를 붙여넣으세요:

지금 설치되어 있는 웹 디자인, UI 미화 관련 스킬(Skill)이 어떤 게 있는지 먼저 보여줘. 하나도 없으면 평이 좋은 오픈소스 프런트엔드 디자인 스킬을 하나 추천하고 설치까지 도와줘. 다 끝나면 결과를 알려줘.

Claude Code 하단 입력창에 이 프롬프트를 붙여넣고 엔터로 전송합니다. 약 1분 기다리면 Claude Code가 현재 환경을 검색하고 공식 오픈소스 프런트엔드 디자인 스킬 frontend-design을 자동으로 설치·활성화합니다.

4. 맨몸으로 첫 버전 작성: 순수 로컬 이미지 분할 도구

디자인 스킬이 실제로 얼마나 큰 역할을 하는지 확인하기 위해, 먼저 이를 호출하지 않고 Claude Code가 바로 기본 기능 버전을 작성하게 하여 index-v1.html 로 저장합니다. 입력창에 두 번째 프롬프트를 붙여넣으세요:

지금 운영용으로 이미지와 글을 일상적으로 올릴 때 진짜 쓸 「온라인 이미지 분할 도구」를 만들 거야(예를 들어 펑유취안, 샤오홍슈, 웨이보에 올리기 전에 큰 이미지를 9분할 그리드나 긴 이미지 조각으로 자르는 것). 우선 어떤 디자인 스킬도 쓰지 말고 바로 첫 버전을 만들어서 현재 폴더 아래 index-v1.html로 저장해줘. 필수 요구사항: 1. 셀프 미디어와 콘텐츠 운영하는 사람이 컴퓨터 브라우저에서 전체 화면으로 쓰는 것이고, 이 웹페이지 파일 하나만 열면 바로 쓸 수 있어야 하며, 모든 처리는 브라우저 로컬에서 완료되고 어떤 외부 웹사이트로도 전송되면 안 돼. 2. 반드시 있어야 할 기능: 이미지 한 장을 드래그하거나 클릭해서 업로드, 「9분할(3×3)」「4분할(2×2)」「세로 긴 이미지 3연속 분할(3×1)」 세 가지常用 분할 방식을 원클릭 선택, 웹페이지에서 바로 잘린 각 조각을 미리보기(번호 1-9 표시), 각 조각을 개별 클릭 다운로드, 「전체 원클릭 압축 다운로드(ZIP)」 버튼. 3. 분할과 무관한 삽화, 장식 그림, 가짜 사용자 후기, 지어낸 통계 수치, 분량 채우기용 소개 문구는 일절 넣지 말고, 첫 화면을 열면 바로 깔끔한 도구 조작 영역이 나와야 해. 다 만든 뒤 index-v1.html의 전체 파일 경로, 이번에 얼마나 걸렸는지, 얼마만큼의 할당량을 썼는지 알려줘.

Claude Code가 전속력으로 코드를 작성하기 시작했고, 스스로 Playwright를 호출해 브라우저 테스트까지 진행했습니다. 파일 작성 시작부터 테스트 완료까지 약 3.5분이 걸렸습니다.

5. 첫 버전 사용해보기: 기능은 되지만 비주얼이 매우 소박함

Chrome 브라우저에서 생성된 index-v1.html 을 열어봅니다. 첫 화면 중앙에는 점선으로 된 드래그 업로드 영역이 있고, 왼쪽의 「이미지 선택」 버튼을 클릭하거나 드래그 영역을 클릭하면 파일 선택 창이 열립니다.

로컬 테스트 이미지를 더블클릭해 선택해 불러오면, 오른쪽에 곧바로 9분할 조각 미리보기가 생성됩니다.

하지만 자세히 보니 이 버전은 기능은 제대로 동작하지만—이미지를 가운데에서 1346 × 1346 정사각형으로 잘라 약 449 × 449 픽셀의 PNG 9장으로 분할—전체적인 비주얼은 확실히 너무 소박하고 평면적입니다. 왼쪽 컨트롤 바는 빽빽하고, 조각 오른쪽 아래에는 「다운로드」 버튼이 바로 덮여 있어 시야를 가리며, 원본 이미지에는 아무런 그리드 선도 없어서 어디서부터 자르는지 전혀 알 수 없습니다.

6. 프런트엔드 디자인 스킬로 두 번째 버전 리팩터링

터미널로 돌아와, 방금 설치한 frontend-design 스킬을 지목해서 활성화하고 전문 데스크톱급 퀄리티의 작업대를 다시 만들어 index-v2.html 로 저장하도록 요구합니다. 세 번째 프롬프트를 붙여넣으세요:

방금 첫 버전은 기능은 갖췄는데 인터페이스가 너무 투박한 기본 웹페이지 같아. 이제 아까 네가 나열한(또는 방금 설치한) 그 웹 디자인 스킬을 지목해서 꼭 써서, 전문 소프트웨어 퀄리티의 온라인 이미지 분할 도구를 다시 디자인해서 다른 파일 index-v2.html로 저장해줘(index-v1.html은 덮어쓰지 마, 전후 차이를 비교해야 하니까). 기능 필수 요구사항은 방금과 같아(컴퓨터 브라우저 전체 화면용, 드래그 업로드, 9분할/4분할/긴 이미지 3연속 분할, 번호 표시 미리보기, 개별 다운로드와 전체 원클릭 ZIP 압축 다운로드, 무관한 장식과 지어낸 내용 없음), 다만 인터페이스 레이아웃, 색상 배색, 드래그 박스, 버튼 인터랙션과 분할 미리보기 영역은 모두 디자인 스킬의 높은 기준에 맞춰 다시 만들어줘. 다 만든 뒤 index-v2.html의 전체 파일 경로, 소요 시간과 소모량을 알려줘.

Claude Code는 깊이 생각하고 디자인 스킬을 호출해 리팩터링했으며, 그동안 Playwright로 여러 차례 시각 재검토와 미세 조정도 진행했습니다. 이번 라운드는 약 5.5분이 걸렸습니다.

브라우저에서 index-v2.html 을 열면 시각적 질감이 완전히 달라졌습니다: 전체가 전문적인 다크 그레이 바탕으로 업그레이드되고, 상단에는 분할 방식 전환과 단축키 안내가 통합되며, 중앙에는 인쇄 재단 표시가 있는 작업대가, 오른쪽에는 독립된 파일 내보내기 패널이 자리합니다.

중앙의 「이미지 선택」을 클릭해 같은 테스트 이미지를 불러오면, 중앙에는 9분할 조각이 가지런히 배열되고, 오른쪽에는 각 조각의 파일명, 용량, 개별 다운로드 버튼이 명확히 나열되며, 하단에는 원본 이미지 정보와 「전체 원클릭 ZIP 압축 다운로드」가 표시됩니다.

7. 흠 잡기와 정밀 최적화: 그리드, 픽셀 표기, 사용자 정의 행·열 추가

v2 버전은 질감이 이미 꽤 전문적이지만, 일상적으로 진짜 쓸 도구로서 써보니 불편한 점 세 가지를挑아냈습니다:

- 원본 이미지에 절단선이 없어 마음이 놓이지 않음;

- 잘린 작은 이미지에 번호만 표시되어 각각의 구체적인 픽셀 크기를 알 수 없음;

- 고정된 9분할은 너무 유연하지 못해, 셀프 미디어에서 긴 이미지를 올리거나 특수 레이아웃을 할 때 사용자 정의 행·열이 필요함.

터미널로 돌아가 이 세 가지 변경 사항을 Claude Code에 맡깁니다. 네 번째 프롬프트를 붙여넣으세요:

방금 브라우저에서 index-v2.html을 사용해 보면서 실제로 쓰기 불편한 세 가지를 골라냈으니, 한 차례 수정해 주세요: 1. 원본 이미지를 업로드한 뒤 원본 위에 어디서부터 자를지 분할선이 그려지지 않아 마음이 놓이지 않습니다. 원본 미리보기 위에 선명한 반투명 슬라이싱 격자선을 겹쳐 주세요. 2. 잘라낸 작은 이미지 미리보기 아래에 일련번호만 적혀 있어서 잘라낸 뒤 각 장이 몇 픽셀인지 알 수 없습니다. 각 작은 이미지 아래에 실제 가로세로 픽셀(예: 360 × 360 px)을 표시해 주세요. 3. 고정된 9분할과 4분할 외에 「사용자 지정 몇 행 몇 열」 숫자 입력 상자(1~6행, 1~6열)를 추가하고, 숫자를 바꾸면 격자선과 오른쪽의 잘린 작은 이미지가 실시간으로 따라 바뀌게 해 주세요. index-v2.html에서 바로 수정하고, 끝나면 어디를 고쳤는지, 전체 파일 경로, 소요 시간과 소모량을 알려 주세요.

Claude Code는 자동으로 좌우 분할 레이아웃으로 리팩터링했고, Playwright로 경계 테스트까지 마쳤으며, 소요 시간은 약 4분 50초였습니다.

index-v2.html을 새로 고치면 상단 툴바에 이미 「사용자 지정」 행/열 입력 상자와 조정 버튼이 추가되어 있습니다. 중앙의 「이미지 선택」을 클릭해 테스트 이미지를 다시 가져옵니다.

최적화된 세부 사항을 살펴보면: 왼쪽의 2511×1346 px 원본 이미지 위에 어두운 자르기 영역이 선명하게 표시되고, 반투명한 흰색 분할 격자가 겹쳐져 있습니다. 가운데에는 각 슬라이스 아래에 픽셀 크기가 정확히 표시되며, 9분할에서는 각 장이 448 × 448 px로 표시됩니다.

이때 상단의 「-」 버튼을 클릭해 행 수를 3에서 2로 바꿉니다.

인터페이스 전체가 즉시 연동됩니다. 왼쪽 절단 격자와 오른쪽 슬라이스가 실시간으로 2행 3열 총 6장으로 갱신되고, 각 작은 이미지 아래 표시도 실시간으로 673 × 673 px로 바뀝니다.

오른쪽 아래의 「한 번에 전체 패키징 다운로드 (ZIP)」를 클릭하면 페이지 하단에 「6장 패키징 다운로드 완료」 알림이 뜨고, 브라우저 오른쪽 위에 압축 파일이 정상적으로 저장됩니다.

8. 제로 비용 배포 방안과 설명 문서 확보

도구를 만들었으니 다른 사람이 주소를 열면 바로 쓸 수 있게 하려면 가장 간편한 방법은 무엇일까요? 터미널로 돌아가 5번째 프롬프트를 입력합니다:

도구는 다 만들었습니다. 유튜브에서 AI로 소프트웨어를 만드는 분들처럼 이 index-v2.html을 무료로 인터넷에 올려서, 다른 사람이 주소만 열면 바로 쓸 수 있는 온라인 도구로 만들고 싶은데, 가장 간편하고 서버를 살 필요가 없는 방법은 무엇인가요? 어디를 클릭해야 하는지 아주 쉬운 말로 단계별로 알려 주시고, 겸사겸사 현재 폴더에 간단한 설명 파일 README.md도 만들어 주세요.

소요 시간 1분 05초, Claude Code는 완전한 제로 비용 호스팅 방안을 출력하고 현재 디렉터리에 README.md를 생성했습니다.

방안에는 무료 호스팅 배포의 구체적인 절차가 제시되어 있습니다: 순수 브라우저 로컬 연산 단일 파일 HTML이기 때문에 서버를 살 필요도, 데이터베이스를 구성할 필요도 없고, 계정에 가입한 뒤 파일이 포함된 폴더를 끌어다 업로드하거나 공개 저장소에 푸시해 웹 페이지 브랜치를 켜면 무료 공개 접속 주소를 받을 수 있습니다.

다만 짚고 넘어갈 점은, 이번 실측에서는 Claude Code가 코드 생성부터 로컬 패키징까지의 전 과정을 검증하고 완전한 배포 절차 문서를 출력하게 한 것일 뿐, 실제로 외부 인터넷에 배포하지는 않았다는 것입니다. 외부에 공유하려면 제시된 절차에 따라 index-v2.html을 호스팅 백엔드에 끌어다 넣으면 됩니다.

마지막으로 제 판단을 말씀드리면:

1번째 스킬 설치부터 4번째 최적화 완료까지, 4차례의 핵심 생성과 리팩터링에 합계 약 14.5분이 소요됐습니다.

여러분의 컴퓨터에서 터미널과 Claude Code 환경을 구성할 수 없거나, 만들려는 것이 복잡한 백엔드 데이터베이스에 의존하는 시스템이라면 이 단일 파일 워크플로는 적합하지 않습니다;

하지만 아주 낮은 비용으로 십여 분 안에 시각적으로 전문적이고, 개봉 즉시 사용 가능하며, 서버 유지 비용이 제로인 해외 향(出海) 경량 도구를 만들고 싶다면, 신뢰할 수 있는 프런트엔드 디자인 스킬과 함께라면 Claude Code는 초급 프런트엔드 팀의 일을 충분히 대신 해낼 수 있습니다. 위의 1단계부터 그 5개 프롬프트로 직접 한 번 돌려 보셔도 됩니다.

👋 저는 멍젠(孟健)입니다. 전(前) 텐센트 T11, 전 바이트댄스 테크 리드였고, 지금은 전업으로 AI 프로그래밍을 하고 있습니다.

🔥 더 많은 AI 프로그래밍 실전:

- GitHub: @mengjian-github

- 칼럼: AI 프로그래밍 실전

- 이번 회차의 전체 목록: 댓글로 「切图工具」라고 답글을 남겨 주시면 받는 방법을 보내 드립니다

도움이 되셨다면? 좋아요+즐겨찾기가 최대의 지지입니다 🙏