기본 콘텐츠로 건너뛰기

3월 29, 2026의 게시물 표시

딸깍 한 번에 웹사이트 복제 — Claude Code /clone-website + Chrome MCP 비개발자 완전 가이드 2026

Photo by Ammar Devedžić on Unsplash URL 하나 던지면 Claude Code가 웹사이트를 통째로 복제합니다. 개발 지식 없어도 됩니다. /clone-website 한 줄이면 끝입니다. "이거랑 비슷하게 만들어줘"라고 말할 때, 레퍼런스를 직접 찾아서 설명하는 게 얼마나 번거로웠는지 아시잖아요. URL 복붙하고, 스크린샷 찍고, 디자인 요소 하나하나 설명하고… 저도 처음엔 이게 당연한 줄 알았어요. 그런데 이제 그냥 URL 하나만 던지면 됩니다. 광고 자리 (AdSense 승인 후 교체) /clone-website가 뭔가요? — 전과 후 Claude Code에 새로운 커뮤니티 스킬이 등장했습니다. 이름은 /clone-website . 마음에 드는 웹사이트 URL을 가리키고 이 명령어 하나만 입력하면, Chrome MCP(크롬 브라우저 자동화 도구)가 해당 사이트를 직접 열어서 분석하고, 디자인 요소와 구성 방식을 통째로 뽑아냅니다. ❌ 기존 방식 레퍼런스 사이트 스크린샷 찍기 → 색상 코드 직접 찾기 → 폰트 이름 검색 → AI에게 일일이 설명 → 수십 번 수정 ✅ /clone-website URL 입력 → /clone-website 실행 → Chrome MCP 자동 분석 → 디자인 토큰 + 컴포넌트 스펙 자동 추출 → 복제 완료 복제되는 것은 단순한 겉모습이 아닙니다. 색상, 폰트, 간격 같은 디자인 토큰 과 UI를 구성하는 각 요소의 컴포넌트 스펙 까지 전부 분석합니다. 결과물은 Next.js나 React 기반의 실제 작동하는 코드로 나옵니다. 작동 원리 4단계 — Chrome MCP가 핵심입니다 이 스킬이 가능한 이유는 Chrome MCP 덕분입니다. Chrome MCP는 Claude Code가 ...

코딩 없이 나만의 AI 비서 만들기 3편 (완결) — 텔레그램에 Claude 연결하는 완전 가이드

Photo by Eric Prouzet on Unsplash AI 비서 만들기 시리즈 3편 (완결) 이제 폰 텔레그램에서 메시지 한 줄로 Claude에게 일을 시킵니다. n8n 연결 30분이면 어디서든 AI 비서를 호출할 수 있습니다. 1편에서 Claude 계정을 만들고, 2편에서 Discord에 연결했습니다. 이번 3편은 시리즈의 마지막입니다. 텔레그램에 Claude를 연결하면 이동 중에도, 침대에서도, 폰 하나로 AI 비서를 쓸 수 있습니다. 텔레그램은 Discord보다 설치 편의성이 높고, 폰 사용이 훨씬 자연스럽습니다. 메시지를 보내면 Claude가 바로 답하는 구조를 n8n으로 만들겠습니다. 사전 준비: 2편에서 Claude API 키를 발급받고 n8n 계정을 만든 상태여야 합니다. 아직이라면 2편 먼저 읽기 → 광고 자리 (AdSense 승인 후 교체) Discord vs 텔레그램 — 뭐가 다른가 항목 Discord 텔레그램 폰 사용성 가능하지만 앱이 무거움 가볍고 빠름 알림 서버/채널별 설정 복잡 메시지 즉시 알림 봇 생성 Developer Portal 필요 텔레그램 앱에서 바로 가능 개인 사용 서버 생성 필요 봇과 1:1 대화 가능 속도 보통 매우 빠름 AI 비서를 폰으로 수시로 쓸 계획이라면 텔레그램이 더 편합니다. Discord는 팀 협업 채널에 AI를 붙일 때 유리하고, 텔레그램은 개인 AI 비서로 가장 적합합니다. 전체 연결 구조 텔레그램 앱에서...

코딩 없이 나만의 AI 비서 만들기 2편 — Discord에 Claude 연결하는 완전 가이드

Photo by Rogelio Gonzalez on Unsplash AI 비서 만들기 시리즈 2편 Discord 채팅창에서 Claude에게 바로 질문하고, 즉시 답변을 받습니다. n8n으로 연결하면 코딩 없이 30분 안에 완성됩니다. 1편에서 Claude 계정을 만들었다면, 이제 그 Claude를 Discord에 붙일 차례입니다. Discord 채널에 메시지를 보내면 Claude가 자동으로 답변하는 구조입니다. 회사 팀 채널에 AI 비서를 두거나, 혼자 쓰는 개인 서버에 만들 수도 있습니다. 이 글에서는 n8n이라는 자동화 도구를 사용합니다. 드래그앤드롭으로 연결하는 방식이라 코딩 지식이 전혀 없어도 따라할 수 있습니다. 사전 준비: 1편에서 Claude 계정 세팅을 완료한 상태여야 합니다. 아직 안 하셨다면 1편 먼저 읽기 → 광고 자리 (AdSense 승인 후 교체) 전체 구조 — 어떻게 연결되는가 만들 시스템의 구조는 이렇습니다. Discord 채널에 메시지 입력 → n8n이 메시지 감지 → Claude API로 전달 → Claude가 답변 생성 → n8n이 Discord 채널에 답변 전송 중간에서 n8n이 연결 다리 역할을 합니다. Discord와 Claude가 직접 연결되는 게 아니라, n8n이 메시지를 받아서 Claude에게 전달하고, Claude의 답변을 다시 Discord로 보내주는 방식입니다. 준비물 4가지 준비물 용도 비용 Discord 계정 메시지를 주고받을 채널 무료 Claude API 키 Claude에게 질문을 전달하는 열쇠 종량제 (소량 무료) ...

코딩 없이 나만의 AI 비서 만들기 1편 — 준비물 3가지와 Claude 계정 세팅 완전 가이드

Photo by Daniel Sturley on Unsplash AI 비서 만들기 시리즈 1편 코딩 몰라도 됩니다. 준비물 딱 3가지면 AI 비서를 만들 수 있습니다. 이 글에서 계정 세팅부터 첫 대화까지 단계별로 안내합니다. "AI 비서 만들기"라는 말을 들으면 막막하게 느껴지는 분들이 많습니다. 개발자나 할 수 있을 것 같고, 코드를 써야 할 것 같고, 어디서 시작해야 할지 모르겠다는 생각이 드는 게 당연합니다. 저도 처음엔 그랬습니다. 그런데 실제로 해보니 달랐습니다. Claude를 사용하면 코딩 경험이 전혀 없어도 나만의 AI 비서를 만들 수 있습니다. 이 시리즈는 딱 그 과정을 담습니다. 1편에서는 AI 비서가 무엇인지, 어떤 준비물이 필요한지, Claude 계정을 어떻게 세팅하는지 처음부터 안내합니다. 광고 자리 (AdSense 승인 후 교체) AI 비서란 무엇인가 — 쉽게 이해하기 AI 비서를 한 문장으로 정의하면 이렇습니다. "내가 시키는 일을 대신 해주는 AI 프로그램" 입니다. 카카오톡처럼 메시지를 보내면, 반대편에서 AI가 답하거나 행동합니다. 예약을 잡아주거나, 정보를 요약해주거나, 이메일 초안을 써줍니다. 기존의 AI 서비스(ChatGPT, Claude)와 다른 점은 내 상황에 맞게 세팅된다 는 겁니다. 일반 AI 사용 (Before): 매번 새 창 열기 → 내 상황 설명 → 질문 → 답변 받기 AI 비서 (After): 텔레그램/디스코드에서 메시지 입력 → 나에 대해 이미 아는 AI가 즉시 답변 → 24시간, 폰으로도, 내 업무 맥락 기억 차이가 보이시나요? AI 비서는 매번 처음부터 설명하지 않아도 됩니다. 내 직업, 내 업무 스타일, 내가 자주 쓰는 표현을 모두 기억한 채로 대화합니다. 이 시리즈로 뭘...

Claude 프롬프트 실전 가이드 — 비개발자도 바로 쓰는 5가지 패턴

Photo by Nguyen Minh on Unsplash Claude에게 잘 묻는 게 아니라, 맥락을 제대로 주는 것이 전부입니다. 비개발자가 바로 쓸 수 있는 프롬프트 패턴 5가지를 정리했습니다. Claude를 처음 쓸 때 가장 많이 하는 실수가 있습니다. "잘 물어봐야 잘 대답한다"는 생각에 프롬프트를 어떻게 쓸까 고민하는 것입니다. 실제로 중요한 건 따로 있습니다. Claude에게 상황을 얼마나 정확하게 알려주느냐 입니다. 맥락이 없으면 아무리 잘 쓴 문장도 엉뚱한 결과를 냅니다. 이 글에서는 코딩 지식 없이 바로 쓸 수 있는 프롬프트 패턴 5가지를 실제 예시와 함께 정리합니다. 광고 자리 (AdSense 승인 후 교체) 프롬프트 잘 쓰는 사람의 공통점 — 맥락 3가지를 먼저 준다 Claude를 잘 쓰는 사람들을 보면 공통점이 있습니다. 요청 전에 반드시 3가지를 먼저 알려줍니다. 1 나는 누구인가 직업, 상황, 배경. "나는 마케터입니다", "소규모 카페를 운영 중입니다" 처럼 Claude가 나를 알게 해줍니다. 2 결과물이 어디에 쓰이는가 SNS 게시물인지, 사내 보고서인지, 고객 이메일인지. 같은 내용이라도 쓰이는 곳에 따라 톤과 형식이 완전히 달라집니다. 3 원하는 형식은 무엇인가 리스트로 줄지, 문단으로 줄지, 표로 줄지. 말해주지 않으면 Claude가 임의로 선택합니다. 이 3가지만 있어도 Claude의 답변 품질이 눈에 띄게 달라집니다. 프롬프트 기술보다 맥락이 훨씬 중요합니다. 비개발자가 바로 쓰는 프롬프트 패턴 5가지 패턴 1. 역할 부여 — Claude를 전문가로 만들기 Claude에게 역할을 먼저 주면 그 역할에 맞는 수준으로 답변합니다. 기...