클로드 코드로 10분 만에! 역대급 웹사이트, '이 방법'으로 뚝딱 완성 (feat. Variant)

AI로 웹사이트 만들 때 뻔한 결과 나오는 이유와 해결법!

AI로 웹사이트 만들면 맨날 똑같은 보라색 그라데이션에 '혁신적인 솔루션', 'AI' 같은 문구만 보이지? 처음엔 그럴듯해 보이지만 금방 질릴 거야. 왜냐하면 AI가 너무 티 나게 만들었기 때문이지.

근데 똑같은 AI 도구를 써도 결과가 확 달라질 수 있어! 내가 7분 만에 만든 웹사이트를 보여줄게. 중요한 건 코드부터 치지 않았다는 거야.

1. 카피 먼저 잡기 (가장 중요!)

• 타겟 고객, 문제점, 검색 키워드 파악: AI한테 "이 서비스의 이상적인 고객은 누구고, 어떤 문제를 가지고 있으며, 어떤 키워드로 검색할까?"라고 물어봐.
  • 결과는 JSON 형식으로 받는 게 좋아. 구조화돼 있어서 AI가 나중에 더 잘 이해하거든.
  • 이렇게 고객의 페인포인트(힘든 점), 검색 키워드, 원하는 결과를 먼저 뽑아야 카피 방향이 흔들리지 않아.
• 페이지 구조별 카피 작성: 뽑아낸 정보를 바탕으로 AI한테 "히어로 섹션, 문제 제기, 서비스 소개, 고객 후기, CTA(행동 유도 문구)까지 페이지 구조별로 카피를 써줘"라고 요청해.
  • AI가 90%는 잘 써주지만, 마지막 10%는 꼭 직접 검수해야 해.
  • 좋은 카피의 핵심: 뻔한 말을 구체적인 숫자와 실제 상황으로 바꿔주는 거야.
    • 예시: "매일 3시간 반복 업무에 쓰고 계시죠?" (공감 유발)
    • 예시: "도입 4주 만에 운영 비용 40% 절감" (구체적인 숫자)
    • 예시: "CS 문의 하루 평균 127건" (구체적인 숫자)
    • 예시: "리포트 만드는 월요일이 사라졌습니다" (구체적인 경험)
    • 예시: "우리 회사에 자동화할 게 있을까? 30분이면 알 수 있습니다." (허들 낮추기)
• 카피 파일 저장: 이렇게 만든 카피는 마크다운 파일로 저장해두면 나중에 디자인할 때 그대로 붙여 넣을 수 있어. 건물이면 설계도가 끝난 거라고 생각하면 돼.

2. 디자인 잡기 (베리언트 활용)

• 베리언트(V0.internal) 사용: 텍스트를 넣으면 UI 디자인을 자동으로 만들어주는 도구야. 스크롤만 내려도 계속 새로운 디자인이 나오고, 마음에 드는 건 코드로도 뽑을 수 있어. 무료야!
• AI한테 바로 디자인 맡기지 않기: 클로드 코드한테 "예쁘게 만들어줘"라고 하면 뻔한 결과가 나오잖아. 베리언트로 먼저 디자인을 잡고, 클로드 코드는 코드만 짜게 역할 분리를 하는 게 중요해.
• 카피 붙여 넣고 톤 잡기: 베리언트에서 아까 만든 카피 파일의 히어로 카피 부분을 붙여 넣고 "강렬한 톤으로 잡아줘"라고 요청해.
  • 첫 섹션이 사이트 전체 톤을 결정해. 컬러, 폰트, 간격, 레이아웃 등을 여기서 정하고 다음 섹션을 이어서 만들어나가면 돼.
  • 마음에 드는 디자인을 선택하면, 그 디자인 시스템을 기반으로 "이 디자인을 기반으로 다음 섹션을 만들어줘"라고 요청할 수 있어. 이때 카피를 같이 넘겨주는 게 핵심이야. 그래야 AI가 멋대로 카피를 만들어서 디자인 톤이 깨지는 걸 막을 수 있지.
• 디자인 완성: 이런 식으로 카피와 디자인을 연결해서 각 섹션별로 디자인을 완성해나가면 돼.

3. 코드로 구현하기 (클로드 코드 활용)

• 디자인 코드 넘기기: 베리언트에서 만든 디자인을 클로드 코드로 넘겨. "오픈인" 버튼을 누르고 클로드 코드를 선택하면 돼.
• 클로드 코드 데스크탑 앱 활용:
  • 디자인 시스템 구축: 넘겨받은 디자인 코드를 기반으로 전체 디자인 시스템을 먼저 구축하라고 요청해.
  • 카피 적용: 아까 만든 카피 파일을 참조해서 텍스트를 교체하라고 해.
  • 이미지, 폰트, 컬러 적용: 브랜드 이미지, 폰트, 컬러를 적용해달라고 해.
  • 반응형 웹: Next.js와 Tailwind CSS로 반응형으로 만들어달라고 해.
• 역할 분리: 베리언트가 '크리에이티브 디렉터'라면, 클로드 코드는 '프론트엔드 엔지니어'야. 디자인 시스템을 먼저 확정하고, 그다음 코드를 짜는 거지.
• 결과 확인: 클로드 코드 데스크탑 앱에서는 실시간 프리뷰로 렌더링된 홈페이지를 바로 확인할 수 있어. 로그도 확인하고, 테마도 바꾸고, 기기별로 화면 테스트도 가능해서 디버깅과 테스트가 쉬워.

핵심 요약!

1. 카피부터 정리해! 문구가 흔들리면 디자인도 흔들려.
2. 디자인 톤은 히어로 섹션 하나에서 잡아! 폰트, 색, 밀도만 정하면 나머지는 같은 톤으로 쭉 가면 돼.
3. AI한테 한 방에 맡기지 말고 역할을 나눠서 써! 카피는 AI로, 디자인은 베리언트로, 코드는 클로드 코드로.

이 순서대로 따라 하면 AI로 웹사이트 만들 때 뻔한 결과 대신 훨씬 퀄리티 높은 결과물을 얻을 수 있을 거야!