전체 과정을 녹화한 후, 단계별로 분석해서 여러분도 따라 할 수 있게 정리했습니다. 아래 사이트는 마치 프리랜서가 5자리 수 금액을 받고 제작한 것처럼 보입니다. 방문자 누구도 AI가 코드를 작성했다고 눈치채지 못합니다. 이 사이트를 실제로 운영하는 데 든 총비용: 약 60달러입니다.
GIF
첫째 - 솔직한 사실 확인
저는 여러분에게 환상을 팔려는 게 아닙니다. 그래서 방법론을 설명하기 전에, 현실과 그렇지 않은 것을 먼저 알려드리겠습니다.
현실인 것:
- Claude Code는 여러분의 설명을 바탕으로 사이트의 전체 코드를 처음부터 작성합니다. 템플릿이 아니기 때문에, 여러분의 사이트는 다른 수많은 Wix/Squarespace 클론처럼 보이지 않습니다. 이것이 결과물이 프리미엄 수준에 도달할 수 있는 핵심 이유입니다.
- 제가 사용하는 두 가지 스킬은 실제로 존재하며 무료입니다. 하나는 Anthropic이 만든 프론트엔드 디자인 입니다. 이 스킬은 백그라운드에서 실행되며, 가장 남용되는 AI 폰트와 레이아웃을 금지합니다. 다른 하나는 UI/UX Pro Max 로, 커뮤니티에서 제작된 스킬이며 필요할 때 바로 사용할 수 있는 수십 가지 UI 스타일, 컬러 팔레트, 폰트 페어링이 포함되어 있습니다.
- 이미지/비디오 워크플로우는 실제입니다. ElevenLabs 는 이제 주요 비주얼 모델들(GPT Image, Google Veo 3.1)과 Topaz 업스케일링을 하나의 탭 안에 통합했습니다. 제가 직접 확인했는데, 그들이 2025년 말에 이미지 및 비디오 분야로 사업을 전환했습니다. 따라서 한 페이지를 벗어나지 않고도 정지 이미지를 생성하고, 애니메이션화하고, 업스케일링할 수 있습니다.
- Claude Code는 월 20달러인 Claude Pro 요금제에 포함되어 있습니다 (연간 결제 시 17달러). 이 작업에 Max 요금제가 필요하지는 않습니다. 2026년 6월 기준으로 확인된 현재 정보입니다.
- 첫 해 도메인이 무료인 저렴한 호스팅 업체를 이용하면 연간 약 40~45달러 정도 소요됩니다.
마법이 아닌 것: "10,000달러"는 결과물의 가치이지, 여러분의 보장된 수익이 아닙니다. 이런 사이트를 에이전시에 의뢰하면 보통 5,000~15,000달러를 청구합니다. 여러분이 실제로 그만한 수익을 올릴 수 있을지는 여러분이 그것을 얼마나 잘 판매하느냐에 달려 있습니다. 돈에 관해서는 아래에서 더 자세히 다루겠습니다. 여기 있는 프롬프트들은 시작점일 뿐, 자판기가 아닙니다.
언급된 모든 도구는 실제입니다. 모든 가격은 2026년 6월 기준입니다.
10,000달러짜리 사이트와 200달러짜리 사이트를 가르는 요소
무엇을 만들기 전에, 먼저 목표를 설정해야 합니다. 저는 Claude에게 무엇이 사이트를 고급스러워 보이게 만드는지 물어봤고, 그 답은 3가지 그룹, 8가지 요소 로 정리됩니다.
취향 (Taste)
- 관점 (Point of view) — 실제 디자인 방향성이 있어야 하고, 무드 보드 수준이 아니어야 합니다.
- 타이포그래피 (Typography) — 의도적인 폰트 선택 (그리고 남용되는 폰트가 아닌 것)
- 색상 (Color) — 절제, 최대 4~5개의 헥스 값, 무지개색 금지
내용 (Substance) 4. 위계 (Hierarchy) — 크기가 눈에 띄는 순서를 정해줍니다 5. 이미지 (Imagery) — 맞춤 제작 또는 설득력 있는 AI 생성 이미지, 절대 스톡 이미지 잡동사니 금지 6. 카피 (Copy) — 절제되고 감각적이며, 사람이 쓴 것처럼, 형용사 나열 기계가 아니어야 합니다
느껴지는 품질 (Felt quality) 7. 모션 (Motion) — 커서 효과와 마이크로 인터랙션으로 사이트에 생동감을 불어넣습니다 8. 모바일 (Mobile) — 데스크탑을 축소한 버전이 아닌, 휴대폰에 맞게 디자인되어야 합니다
이 목록을 기억해두세요. 마지막에 여러분의 사이트를 이 8가지 항목에 비추어 스스로 평가하게 될 것입니다. 이 자기 평가 과정이 완성도 높은 결과물과 평범한 결과물을 가르는 유일한 방법입니다.
이 글이 적합한 사람
이 방법은 다음과 같은 경우에 효과적입니다:
- 지역 비즈니스(레스토랑, 체육관, 병원, 부동산 등)에 웹사이트를 판매하고 싶지만 코딩을 모르는 분
- 이미 프리랜서로 활동 중이며 결과물의 양과 가격을 10배로 높이고 싶은 분
- 자신의 비즈니스나 개인 브랜드를 위한 프리미엄 사이트를 원하는 분
- 집중해서 반나절을 투자할 수 있고, "한 번 클릭으로 완벽"을 기대하기보다는 반복 작업(iterate)을 기꺼이 할 의향이 있는 분
"버튼만 누르면 비즈니스가 해결된다"는 식의 장난감을 원한다면 이 방법은 적합하지 않습니다. 여러분의 브리핑 품질과, 결과물이 어딘가 부족해 보일 때 다시 요구하려는 의지가 바로 그 작업입니다.
필요한 것 (그리고 비용)
완성된 사이트 하나당 현실적인 총비용: 약 60달러 (Claude Pro 1개월 + 호스팅 + 1년 도메인).
전체 제작 과정, 단계별로
1단계 — Claude Code 설정하기
claude.com에서 Claude Pro에 가입하세요. 데스크톱 앱을 다운로드합니다 (왼쪽 아래 다운로드 아이콘 → Claude Code 섹션 → 데스크톱 앱 → 설치 프로그램 실행). 로그인합니다.
채팅 모드에서 코드 모드로 전환합니다 (왼쪽 상단 탭 또는 Cmd/Ctrl + 3).
컴퓨터 어디에든 새 빈 폴더를 만듭니다. 이 폴더가 작업 공간입니다. 채팅 상자 근처의 폴더 선택 버튼을 클릭하고 앱 안에서 이 폴더를 엽니다. Claude Code는 전용 폴더가 있을 때 가장 잘 작동합니다.
인터페이스는 자주 업데이트되므로, 버튼이 제가 설명한 위치에 정확히 없다고 해도 당황하지 마세요. 개념은 동일하니, 해당하는 기능을 찾으면 됩니다.
2단계 — 두 가지 스킬로 Claude 업그레이드하기
기본 상태의 Claude는 제너럴리스트입니다. 기본 디자인은 괜찮지만, 모든 AI 사이트에서 볼 수 있는 똑같은 폰트와 레이아웃을 사용합니다. 스킬이 이 문제를 해결해줍니다.
스킬 #1 설치 — 프론트엔드 디자인 (백그라운드 실행): Claude Code에 프론트엔드 디자인 스킬 링크를 다음 명령어와 함께 붙여넣으세요:
1이 스킬을 전역(global)으로 설치해 줘.
수정(edits)을 요청하면 허용합니다.
스킬 #2 설치 — UI/UX Pro Max (필요할 때 호출): Claude Code에 UI/UX Pro Max 링크를 다음 정확한 문구와 함께 붙여넣으세요. 문구가 중요합니다. 터미널을 통해 깔끔하게 설치되기 때문입니다:
1npm을 사용해서 이 플러그인을 전역(global)으로 설치해 줘.
수정(edits)을 허용합니다.
3단계 — 자동 모드 켜기
왼쪽 아래, 채팅창 아래에서 모드 선택기를 자동 모드(auto mode) 로 전환하세요. 이렇게 하면 Claude가 매 단계마다 허락을 구하며 멈추지 않고 작업할 수 있습니다. 자동 모드가 켜져 있고 두 스킬이 모두 설치되면, 이제 제작을 시작할 준비가 된 것입니다.
4단계 — 참고 자료 수집 (취향을 빠르게 잡는 방법)
시각적 취향을 말로 설명하는 것은 어렵습니다. 특히 디자인 초보자라면 더욱 그렇습니다. 참고 자료가 이 문제를 해결해줍니다: 여러분이 마음에 드는 사이트의 스크린샷을 Claude에게 주면, 그 분위기를 따라하게 할 수 있습니다. 취향을 설명하는 것보다 보여주는 것이 훨씬 쉽습니다.
참고 자료를 찾는 곳:
- Dribbble — 디자이너들이 자신의 작품을 올리는 곳
- Awwwards — 수상 경력이 있는 사이트들, 수준이 매우 높음
- Pinterest — 정확한 키워드로 검색, 예: "modern restaurant website design"
마음에 드는 사이트 3~5개를 찾아 스크린샷을 저장하세요. 그것들을 복사하는 것이 아니라, Claude에게 방향성을 보여주는 것입니다.
5단계 — 사이트를 구축하는 단 하나의 프롬프트
이것이 바로 전체 영상의 핵심을 하나의 동작으로 만든 것입니다. 디자인 스킬을 호출하고, 브리핑을 제공하고, 참고 스크린샷을 첨부한 후, 마법의 문장으로 마무리합니다.
제가 제작한 사이트는 시애틀의 한 레스토랑 사이트였습니다. 다음은 프롬프트 구조입니다. 여러분의 프로젝트에 맞게 브리핑 부분을 수정하세요:
1/ui-ux-pro-max23[비즈니스명 — 예: 시애틀의 고급 스테이크하우스]를 위한 단일 페이지 웹사이트를 구축해 줘.45방향성: [여러분의 언어로 분위기를 설명 — 예: 어둡고, 분위기 있는 고급스러움, 하지만 태평양 북서부의 느낌이 배어 있어야 함, 평범한 맨해튼 스테이크하우스가 아님].67섹션 (순서대로): [예: 히어로, 철학/스토리, 메뉴, 공간(the room), 예약].8갤러리나 예약 시스템은 필요 없음 — 위에서 아래로 스크롤되는 한 페이지면 됨.910비주얼 스타일을 위해 참조 스크린샷 3~5개를 첨부함.11그것들을 *복사*하지 말고, *느낌*을 따라잡아 줘.1213기술 스택: 단일 파일 정적 HTML/CSS/JS (React 사용 금지 — 간단하게 유지).1415코드를 작성하기 전에, 명확히 할 질문을 해 줘.
마지막 줄인 "명확히 할 질문을 해 줘" 가 Claude로 하여금 만들기 전에 멈추고 생각하게 만드는 핵심입니다. Claude는 약 7개의 질문을 가지고 돌아왔습니다: 사이트 이름, 스타일 방향, 어떤 섹션, 누가 카피를 쓸지, 기술 스택, 애니메이션 수준, 그리고 기타 등등입니다.
가장 중요한 부분은 Claude가 마치 메뉴판처럼 세 가지 스타일 방향을 제시했다는 점입니다. 저는 태평양 북서부의 느낌이 가미된 어둡고/분위기 있는 고급스러움, 다섯 개의 섹션, 갤러리 없음, 예약 시스템 없음 — 하나의 스크롤 페이지를 선택했습니다.
이 순간이 제작 과정 전체에서 가장 중요한 순간입니다. 여기서의 답변이 곧 전체 사이트가 됩니다. 지금 더 구체적일수록, 나중에 Claude와 씨름할 일이 줄어듭니다. 시간을 들여 충분히 고민하세요.
그런 다음 전송하세요. Claude는 코드를 한 줄 쓰기 전에 약 3분 동안 읽고 계획을 세운 후, 약 4~5분 동안 구축합니다. 결과물을 보기 위해 건너뛰어 보세요.
Claude의 후속 질문들
첫 번째 버전 공개
6단계 — 8가지 체크리스트로 스스로 평가하기
계속 다듬기 전에, 설정한 기준에 따라 사이트를 점검하세요. 8가지 체크리스트(이 글의 앞부분에 있음)를 Claude에 붙여넣고 물어보세요:
1여기 10,000달러짜리 웹사이트를 위한 8가지 체크리스트가 있어. 현재 사이트를 보고2각 항목이 어디에 해당하는지 솔직하게 말해 줘: 강함(strong), 보통(mixed), 또는 부족(missing).3가차 없이 평가해 줘.
제 사이트의 경우, Claude의 평가는 다음과 같았습니다: 관점 — 강함, 색상 — 강함, 위계 — 강함, 타이포그래피 — 보통, 그리고 이미지/모션/모바일/보이지 않는 요소들 — 모두 보통. 여러분도 비슷한 결과를 얻을 것이고, 괜찮습니다. 중요한 것은 무엇이 남았는지 정확히 아는 것입니다.
7단계 — 여기서부터 전문가 수준에서 고급스러움으로 넘어갑니다
이 장이 모든 차이를 만듭니다. 문제를 하나씩 고치지 마세요. 그러면 토큰만 낭비되고 결과물도 패치워크처럼 느껴집니다. 의도(intent)로 시작하고, 구체적인 사항보다는 의도로 이끌어가며, 한 번에 처리(batch)해 달라고 요청하세요.
다음은 제가 사용하는 정확한 프롬프트입니다:
1좀 더 정교한(hancrafted) 마이크로 인터랙션이 필요해. 아래쪽 섹션들이 약간 평범해 보여.2더 복잡하게 만들 필요는 없어. 그냥 더 고급스러워 보이게 해 줘. 개선 사항들을 모아서(batch) 제안하고3한 번에 모두 적용해 줘.
제가 Claude에게 무엇을 추가하라고 말하지 않고 어떻게 느껴지길 원하는지를 말하고 있다는 점에 주목하세요. Claude는 대부분의 사람들이 스펙을 작성하는 것보다 의도를 구체적인 내용으로 전환하는 데 더 능숙합니다. Claude는 한꺼번에 여러 개의 개선 사항을 제시했습니다: 사이트 전체에 필름 그레인(film grain) 효과, 섹션 사이에 움직이는 황동선(brass hairlines), 반짝이는 숯불 효과(glowing ember effect), 단어별 헤드라인 등장 효과. 다섯 가지 변경 사항, 하나의 프롬프트로 한 번에 처리되었습니다.
그런 다음 스스로 섹션별 패스를 진행하세요. 스크롤을 내리면서 여전히 밋밋하다고 느껴지는 섹션을 찾으세요. 항상 두어 개 정도는 있습니다. 그리고 섹션당 하나의 모션이나 커서 인터랙션을 Claude에게 요청하세요:
1[스토리] 섹션이 정적으로(stative) 느껴져. 여기에 우아한 마이크로 모션이나 커서 인터랙션을 하나 추가해 줘.2은은하고 세련되게 유지해 줘 — 시끄럽지 않으면서도 살아있는 듯하게.
첫 번째 시도가 너무 과하다면, 다시 요청하세요: "좀 더 은은하게 만들고, 약간의 지연(lag)을 추가해서 커서를 따라가게 해 줘." 제 사이트에서는 정적인 촛불 후광 효과가 부드러운 지연을 가지고 커서를 따라다니는 효과로 바뀌었습니다. 두 개의 프롬프트, 두 개의 섹션 — 이 한 겹의 차이가 고급스러워 보이는 사이트와 탐색할 때 고급스럽게 느껴지는 사이트를 구분짓는 요소입니다.
8단계 — 이미지: 직접 준비하거나 생성하세요
GIF
이미지는 Claude가 혼자서 완전히 해결할 수 없는 유일한 기둥입니다. 가장 좋은 옵션은 맞춤 사진 촬영입니다. 프로젝트 폴더에 넣고 Claude에게 무엇인지와 어디에 쓸 것인지 알려주세요.
사진 촬영 예산이 없나요? AI 생성 이미지는 이제 아무도 구분할 수 없을 정도로 훌륭해졌습니다. 이 과정을 빠르게 만드는 비결: 이미지 프롬프트를 직접 작성하지 마세요. Claude가 이미 여러분의 프로젝트를 알고 있으니, 프롬프트 작성을 Claude에게 요청하세요:
1이 사이트의 히어로 섹션을 위한 이미지 생성 프롬프트를 작성해 줘.2지금까지 구축한 분위기, 컬러 팔레트, 방향성과 정확히 일치해야 해.3프롬프트만 출력해 줘.
이 프롬프트를 이미지 생성기에 붙여넣으면 첫 시도에 브랜드에 맞는 결과물을 얻을 수 있습니다. ElevenLabs에서는 정지 이미지(GPT Image)를 생성하고, 그 프레임을 그대로 Google Veo 3.1에 넣어 애니메이션화하고, Topaz로 업스케일링할 수 있습니다. 이 모든 것이 하나의 탭 안에서 가능합니다. 최종 결과물을 프로젝트 폴더에 넣으세요.
9단계 — 21st.dev 에서 프로페셔널 컴포넌트 가져오기
GIF
눈에 띄는 시각적 요소(스크롤 효과, 화려한 히어로 등)가 필요할 때, 21st.dev는 실제 개발자들이 만든 무료 컴포넌트 라이브러리입니다. 마음에 드는 것을 찾아 Copy Prompt를 클릭하고, Claude Code에 붙여넣고, 여러분의 에셋을 첨부한 후, Claude에게 이걸로 히어로를 만들라고 지시하세요.
중요한 부분은 다음과 같습니다: Claude는 여러분의 아키텍처를 보호합니다. 제가 선택한 스크롤 컴포넌트는 React용으로 제작되었습니다. 제 프로젝트는 단순한 정적 사이트였기 때문에, Claude는 React 버전을 그대로 가져오는 것을 거부했습니다. 전체 프로젝트의 작동 방식을 바꿀 수 있기 때문입니다. 대신 일반 HTML로 동일한 효과를 재구축했습니다. (만약 프로젝트에 React가 정말로 필요하다면 — 대시보드, 체크아웃, 로그인 등 — Claude는 허락했을 것입니다. 여러분이 요청했다고 해서 무턱대고 망가뜨리지 않습니다.)
첫 번째 시도에서 효과가 제대로 작동하지 않았을 때 — 제 경우에도 그랬습니다 — 문제가 무엇인지 설명하기만 하면 됩니다:
1비디오는 나타나는데 컴포넌트가 의도한 대로 스크롤되지 않고 있어. 좀 더 깊이 파봐 —2브라우저에서 페이지를 열고, 실제로 무슨 일이 일어나고 있는지 검사하고, 진짜 원인을 고쳐 줘.
Claude는 직접 페이지를 열고, 실시간으로 검사하여 세 단계 깊이 숨겨진 실제 버그를 찾아냈습니다. 여기서 얻은 교훈: 계속 요구하세요. 무엇이 잘못되었고 무엇을 기대했는지 설명하면, Claude는 좀 더 자세히 들여다보도록 허용하면 거의 항상 문제를 해결할 수 있습니다.
10단계 — 카피, 폰트, 모바일 (빠른 승리 포인트)
GIF
카피: AI 카피는 기본적으로 너무 많이 설명합니다. 프리미엄 카피는 절제되고 감각적입니다. "Dry-aged ribeye. 16oz. 60-day. Hearth-fired."는 마치 셰프가 쓴 것처럼 읽힙니다. 프론트엔드 디자인 스킬은 Claude를 이 방향으로 유도하며, 이것이 모든 프로젝트에서 그 가치를 인정받는 이유입니다.
폰트: Inter라는 폰트 하나가 너무 남용되어 "AI가 만들었음"을 즉시 알리게 됩니다. 결과물에서 이 폰트가 보인다면:
1모든 곳에서 Inter를 덜 남용된 폰트로 교체해 줘. Geist가 괜찮은 선택이야. 헤드라인 폰트는 그대로 유지해 줘.
모바일: "반응형"은 "휴대폰에 맞게 디자인됨"과 같지 않습니다. 휴대폰이 데스크탑보다 여러분의 사이트를 훨씬 더 많이 보게 될 것입니다. 전용 패스를 요청하세요:
1모바일 전용 패스를 진행해 줘. 작은 화면에서 무엇을 숨길지, 무엇을 더 촘촘하게 만들지,2무엇의 크기를 조정할지 결정해 줘. 이것이 대부분의 사람들이 실제로 보게 될 버전이야.
제 사이트에서는 내비게이션이 접히고, 워드마크 간격이 더 좁아졌으며, 버튼에 더 작은 변형이 추가되었습니다. 이제 8가지 체크리스트 항목이 모두 완료되었습니다.
11단계 — 실제로 운영하기 (모두가 실수하는 부분)
현재 여러분의 사이트는 컴퓨터 안에만 존재합니다. 그 localhost URL은 여러분의 기기에서만 작동합니다. 다른 사람과 공유하려면 호스팅과 실제 도메인이 필요합니다.
첫 해 도메인이 무료인 호스트를 선택하세요. 단순한 정적 사이트(로그인, 체크아웃, 데이터베이스 없음)의 경우 가장 저렴한 "프리미엄/공유" 등급이면 충분합니다. 약정 기간을 12개월로 설정하세요. 이것이 무료 도메인을 받을 수 있는 최소 조건입니다. 원하는 도메인을 검색하여 등록하세요. 제 총 비용은 호스팅 + 도메인 + 이메일을 포함하여 연간 약 43달러였습니다.
Claude가 실제 백엔드(React를 허용하고, Node.js, 데이터베이스 등을 설정했다면)가 있는 무언가를 만들었다면,
비즈니스
등급을 대신 선택하세요. Node.js를 지원합니다. 9단계에서 Claude가 React를 수락했는지 거부했는지에 따라 필요한 요금제가 결정됩니다.
빈 페이지만 로드되는 실수 하나: 파일을 업로드할 때, 프로젝트 폴더 안에 있는 파일들을 압축(zip) 하세요. 폴더 자체를 압축하지 마세요. 프로젝트 폴더를 열고, 안에 있는 모든 항목을 선택한 후(Cmd/Ctrl + A), 압축합니다. index.html이 최상위 레벨에 있는 하나의 zip 파일이 되어야 합니다. 전체 폴더를 압축하면 호스트가 압축을 풀 때 디렉토리가 한 단계 더 깊어져서 도메인이 빈 화면을 보여줍니다.
호스트의 온보딩에서 기존 사이트 마이그레이션 → 백업 파일 업로드를 선택하고, 도메인을 선택한 후, zip 파일을 끌어다 놓고 제출합니다. 도메인을 클릭하면 — 짜잔, 여러분의 10,000달러짜리 사이트가 맞춤 URL로 실제 운영되고 있는 모습을 볼 수 있습니다.
이걸로 실제로 얼마나 벌 수 있을까요?
사이트 자체는 10,000달러 가치의 자산입니다. 이것이 실제 수익으로 전환되는 방법은 다음과 같습니다:
- 지역 비즈니스에 사이트 판매가 가장 빠른 길입니다. 레스토랑, 치과의사, 체육관, 부동산 중개인, 계약업자들은 일반적으로 프리미엄 단일 페이지 사이트에 1,000~5,000달러를 지불합니다. 오후에 하나 만들고 그에 맞게 청구하세요. 월 2명의 고객에게 각 2,000달러 = 시간제 기준 월 4,000달러입니다.
- 경험 많은 프리랜서 / 소규모 에이전시는 바로 이런 종류의 맞춤형, 애니메이션, 모바일 디자인 사이트에 대해 5,000~15,000달러를 청구하며, 이제 그것을 몇 주가 아닌 몇 시간 만에 제공할 수 있습니다. 마진이 핵심입니다.
- 제품화된 서비스: "프리미엄 원페이지 5일 안에 1,500달러"와 같은 고정 패키지를 판매하세요. 예측 가능하고 반복 가능하며, 여러 건을 동시에 진행할 수 있습니다.
- 자신의 브랜드: 자신을 위해 사용하는 경우, "수익"은 5자리 수처럼 보이는 사이트가 가져다주는 거래와 신뢰도입니다.
오늘 시작하는 사람의 현실적인 성장 곡선은 다음과 같습니다: 몇 주 내에 첫 유료 고객, 몇 달 내에 시간제 기준 월 1,000~5,000달러 (실제로 영업 활동을 한다면). 이제 사이트 제작 자체는 병목이 아닙니다. 판매가 병목입니다.
이 후에 여러분에게 어떤 변화가 있을까요?
GIF
이전에는 프리미엄 맞춤 웹사이트를 만든다는 것은 몇 달 동안 코딩을 배우거나 개발자에게 수천 달러를 지불하는 것을 의미했습니다. 이제는 기술적 장벽이 사라졌습니다. 여러분은 진짜 고급스러워 보이는, 완전 맞춤형, 애니메이션, 모바일 디자인 사이트를 오후에 만들 수 있으며, 그것을 팔거나 자신의 것을 진지하게 보이도록 사용할 수 있습니다.
여러분이 실제로 얻는 기술은 "코딩"이 아닙니다. 그것은 디렉팅(directing) 입니다. 즉, 고급스러움이 무엇인지 알고, 그것을 정확하게 브리핑하며, 올바른 결과가 나올 때까지 요구하는 능력입니다. 이 기술은 이 사이트 이후에 만드는 모든 사이트에 걸쳐 복리효과를 냅니다.
다음 단계 (오늘 바로 실행하세요)
- Claude Pro에 가입하고 데스크톱 앱을 설치하세요.
- 두 가지 스킬을 설치하고(2단계) 자동 모드를 켜세요.
- Dribbble 또는 Awwwards에서 참고 스크린샷 3~5개를 저장하세요.
- 5단계의 빌드 프롬프트를 실행하세요. "명확히 할 질문을 해 줘"를 포함해야 합니다. 그리고 신중하게 답변하세요.
참고 자료 수집이나 명확히 할 질문 단계를 건너뛰지 마세요. 결과물 품질의 80%가 여기서 나옵니다. 판매하는 것에 대해 고민하기 전에 하나의 사이트를 처음부터 끝까지 완성해보세요. 먼저 실제로 작동하는 것을 확인해야 합니다.
솔직한 한 마디
이것은 마법의 알약이 아닙니다. 실제 작업을 수행하는 진짜 도구입니다. 하지만 결과물은 여러분에게 달려 있습니다. 위의 프롬프트들은 스크립트가 아니라 시작점입니다. 템플릿처럼 보이는 사이트와 10,000달러처럼 보이는 사이트의 차이는 여러분이 가져오는 취향, 선택하는 참고 자료, 그리고 "충분히 괜찮다"고 받아들이지 않고 밋밋한 섹션에 대해 얼마나 자주 다시 요구하는지에 달려 있습니다.
Claude는 실행을 담당합니다. 여러분의 방향성과 노력이 결과를 결정합니다. 그것을 어떻게 활용할지는 전적으로 여러분의 몫입니다.
*
*즐겨찾기, 리트윗, 그리고 @thegreatest_sv 팔로우를 부탁드립니다. 더 많은 알파, AI 도구, 양질의 리서치를 얻으실 수 있습니다.면책 조항 (수익 및 정보) 본문에 표시된 수익 또는 통계는 제 리서치와 개인 경험의 예시이며, 여러분의 수익을 보장하지 않습니다. 결과는 니치, 콘텐츠 품질, RPM/CPM, 잠재고객 참여도, 일관성, 노력 및 기타 요인에 따라 다릅니다. 이는 재정, 세무, 법률 또는 전문가 조언이 아니며, 비즈니스 결정을 내리기 전에 적절한 전문가와 상담하시기 바랍니다.리소스 및 링크
Claude Code 도구 및 리소스: https://claude.com/
**프론트엔드 디자인 스킬 (Anthropic 제작):
**https://github.com/anthropics/skills/tree/main/skills/frontend-design
**UI/UX Pro Max 스킬:
**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
10K 웹사이트 체크리스트 (무료 PDF 다운로드): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view
디자인 참고 사이트
Dribbble: https://dribbble.com
Awwwards: https://www.awwwards.com
Pinterest:https://pinterest.com
