
AI로 웹사이트를 만드는 것은 더 이상 어렵지 않습니다.
요약
Claude Code를 활용해 AI 느낌이 나지 않는 고품질 웹사이트를 제작하는 전략을 소개합니다. DESIGN.md 파일을 활용해 시각적 가이드라인을 제공하고, 적절한 모델 설정과 도구 연결을 통해 차별화된 결과물을 만드는 법을 다룹니다.
핵심 포인트
- DESIGN.md 파일을 통해 Claude에게 구체적인 디자인 가이드 제공
- Netlify와 Supabase를 연결하여 배포 및 데이터 관리 자동화
- 단순 코드 작성을 넘어 디자인 감각을 부여하는 프롬프팅 전략
- Claude Code의 폴더 권한 및 모델 설정을 통한 효율적인 개발
AI로 웹사이트를 만드는 것은 더 이상 어렵지 않습니다.
어려운 점은 바로 이것입니다:
당신이 만든 사이트가
AI로 만든 것처럼 보이지 않게 하는 것.
왜냐하면 모두가 똑같은 지점에서 막히기 때문입니다.
똑같은 그라데이션 (gradient).
똑같은 카드 (cards).
똑같은 내비게이션 바 (navbar).
똑같은 “저렴한 SaaS 템플릿” 같은 느낌.
Claude Code가 나빠서가 아닙니다.
대부분의 사람들은 Claude에게 단순히 코드만 작성하게 합니다.
디자인 감각을 주지 않습니다.
저라면 Claude Code를 다음과 같이 설정하겠습니다:
단일한 깨끗한 폴더를 생성하세요
비밀번호도 없고, 혼란도 없으며, 오직 프로젝트 권한만 자동화합니다
2분마다 “허용”을 누르며 제품을 구축하는 방식이 아닙니다
Netlify + Supabase를 연결하세요
하나는 배포를 담당하고, 하나는 사용자/데이터 측면을 처리합니다
Opus 4.8을 High Effort (높은 노력) 모드로 사용하세요
저렴해 보이는 결과물 대부분은 기본 모델 (default model)에서 나옵니다
Claude에게 역할을 명확히 부여하세요
“너는 나의 CTO야, 나는 코드를 읽지 않을 테니 네가 구축해”
Code 탭에서 폴더를 선택하세요
Claude가 오직 그 영역에서만 작업하도록 합니다
가장 중요한 파일을 추가하세요:
DESIGN.md
진정한 차별점은 여기서 발생합니다.
Claude에게 단순히
“랜딩 페이지 (landing page)를 만들어줘”라고 말하면
평범한 AI 템플릿이 나옵니다.
하지만 폴더 안에 DESIGN.md를 넣고
“모든 시각적 결정은 이것에 따라 내려줘”라고 말하면
결과물이 달라집니다.
여백의 사용이 달라집니다.
버튼의 언어가 달라집니다.
카드가 달라집니다.
제품의 느낌이 달라집니다.
이것이 Vibe coding (바이브 코딩)의 새로운 단계입니다:
작동하는 데모를 만드는 것이 아니라,
AI 냄새가 나지 않는 제품을 내놓는 것.
하나의 폴더.
하나의 올바른 모델.
하나의 DESIGN.md.
대부분의 사람들이 월 200달러를 지불하며 얻는 것을
당신은 이 논리로 한 오후 만에 구축할 수 있습니다.
[IMG:https://pbs.twimg.com/media/HLL25vDXQAAg5W8.jpg]
AI 자동 생성 콘텐츠
본 콘텐츠는 X @aladagberk (자동 발견)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기