Claude Code가 HTML + Playwright로 인쇄 가능한 명함 디자인
Reddit 사용자가 실용적인 워크플로우를 공유했는데, Claude Code(AI 코딩 에이전트)가 처음부터 인쇄 가능한 명함을 완전히 디자인했습니다. 과정은 다음과 같습니다:
- Claude에 고양이 사진과 웹사이트 링크를 입력으로 제공했습니다.
- Claude가 HTML 명함 디자인을 생성한 후, Playwright(헤드리스 브라우저 자동화)를 사용하여 스크린샷을 찍고 레이아웃을 반복적으로 수정하여 사용자가 만족할 때까지 개선했습니다.
- 디자인이 확정된 후, 사용자는 Walmart에서 Avery 인쇄용 명함 용지(표준 천공 2x5 그리드 시트)를 구매했습니다.
- Claude는 인쇄 버튼과 Avery 템플릿에 맞는 2x5 그리드가 포함된 HTML 페이지를 생성했습니다. 해당 페이지는 카드 용지에 완벽하게 정렬되어 인쇄되었으며, 수동 조정이 필요 없었습니다.
전체 과정은 약 10분이 걸렸습니다. 사용자는 결과가 "기대 이상"이라고 보고했습니다.
주요 시사점
- Claude는 브라우저 자동화를 통한 반복적인 개선으로 시각 디자인과 인쇄 레이아웃을 연결할 수 있습니다.
- Playwright를 사용한 스크린샷 피드백을 통해 Claude는 사람의 개입 없이 레이아웃 문제를 스스로 수정할 수 있습니다.
- 최종 HTML 템플릿은 저렴한 Avery 명함 용지와 직접 호환되며, 전문 디자인 도구가 필요하지 않습니다.
이는 AI 코딩 에이전트를 소프트웨어 생성뿐만 아니라 실제 인쇄 제작에 활용한 좋은 예입니다.
📖 Read the full source: r/ClaudeAI
👀 See Also
화물 운전사, Claude 코드로 iOS 앱 개발하고 실용적인 교훈 공유
최소한의 코딩 경험만 있는 일본의 화물 운전사가 Claude Code를 사용하여 새로운 기록 보관 규정을 위한 iOS 앱을 구축하고 6개월 만에 앱 스토어에 출시했습니다. 그는 프롬프트 엔지니어링, Expo와 Supabase의 예상치 못한 비용, 번아웃 관리에 대한 구체적인 교훈을 공유합니다.
한 팀이 6자리 수 허브스팟 에이전시를 클로드 코드로 대체한 방법
한 중견 전자상거래 기업이 Claude Code를 활용하여 전체 HubSpot Enterprise 마이그레이션을 구축했으며, 부분 설비에 대한 2만~8만 유로의 에이전시 견적을 대체했습니다. 4개월 동안 6개의 커스텀 객체, 5개의 n8n 통합, KlickTipp 마이그레이션을 구축했으며, Claude Code가 코드와 문서를 모두 처리했습니다.
클로드 아티팩트를 활용한 프레젠테이션 제작: 전체 맥락 + 브랜드 자산
Claude가 코드베이스 컨텍스트, 브랜딩(Brandfetch) 접근 권한, 인기 디자인 라이브러리를 활용하여 Artifacts를 통해 바닐라 HTML/JS/CSS 프레젠테이션을 생성합니다. Google Slides나 PowerPoint 없이 세련되고 재구성 가능한 데크를 만듭니다.
ALMA 실험: 100달러와 지침 없이 자율 AI 에이전트를 두 달 동안 운영하기
한 개발자가 암호화폐 100달러, 인터넷 접속, 그리고 지침 없이 ALMA라는 AI 에이전트를 두 달간 운영했습니다. 이 에이전트는 인간의 개입 없이 135개의 독창적인 글을 작성하고, 자선 단체에 기부하며, 일관된 패턴을 발전시켰습니다.