AI 웹디자인은 이제 “프롬프트를 넣으면 사이트가 나온다” 정도의 이야기가 아닙니다. 더 중요한 변화는 디자인 기준을 먼저 시각화하고, 그 기준을 다른 AI에게 구현하게 하는 분업 방식입니다.
Read in English: AI Web Design Workflow: How to Build a Landing Page with ChatGPT Mockups and Claude Design
Darrel Wilson의 영상은 이 흐름을 잘 보여줍니다. 먼저 ChatGPT Sol로 웹사이트 스크린샷을 만들고, 그중 마음에 드는 시안을 Claude Design에 넘겨 반응형 웹페이지로 바꾸는 방식입니다. 초보자에게는 빠른 실험 도구이고, 실무자에게는 브리프와 구현 사이의 간격을 줄이는 방법입니다.
핵심은 “코드 생성”보다 “시각 기준 만들기”입니다
AI로 웹사이트를 만들 때 흔한 실수는 첫 프롬프트부터 “멋진 랜딩페이지를 HTML로 만들어줘”라고 요청하는 것입니다. 이렇게 하면 결과가 그럴듯해도 브랜드 톤, 이미지 방향, 섹션 밀도, 타이포그래피가 흔들리기 쉽습니다.
영상의 접근은 다릅니다. ChatGPT Sol에 먼저 업종, 분위기, 이미지 스타일, 레이아웃 조건을 넣어 완성된 웹사이트처럼 보이는 스크린샷을 만들게 합니다. 이 스크린샷은 AI에게 줄 수 있는 시각적 브리프가 됩니다.
1단계: ChatGPT Sol로 여러 개의 디자인 시안을 만듭니다
텍스트 프롬프트에는 단순히 “웹사이트를 만들어줘”가 아니라 구체적인 디자인 조건을 넣습니다. 예를 들면 이런 요소입니다.
- 업종과 사이트 목적
- 원하는 분위기와 브랜드 톤
- 히어로 섹션의 이미지 방향
- 세로·가로 텍스트 같은 레이아웃 특징
- CTA 버튼, 메뉴, 섹션 구성
- 고해상도 이미지 사용 여부
이 단계의 목적은 바로 배포할 코드를 얻는 것이 아닙니다. 여러 시안을 빠르게 비교하고, 가장 강한 방향을 고르는 것입니다.
2단계: 이미지 자산을 따로 뽑아 Claude에 넘깁니다
좋은 시안이 나와도 구현 단계에서 이미지가 placeholder로 바뀌면 결과물이 급격히 약해집니다. 그래서 영상에서는 스크린샷 속 이미지를 고해상도 파일로 추출해 ZIP 파일로 내려받습니다.
이 과정이 중요한 이유는 간단합니다. Claude Design이 레이아웃만 따라 하는 것이 아니라, 원래 시안의 분위기를 만든 이미지 자산까지 함께 사용할 수 있기 때문입니다.
실무에서는 이 단계에서 한 가지를 더 확인해야 합니다. AI가 만든 이미지의 상업적 사용 가능성, 인물 표현, 브랜드 유사성, 저작권 리스크를 반드시 검토해야 합니다.
3단계: Claude Design으로 시안을 반응형 웹페이지로 구현합니다
다음 단계는 선택한 스크린샷과 이미지 ZIP을 Claude Design에 올리는 것입니다. 영상에서는 원본 시안을 최대한 따라가도록 지시하고, 필요하면 Claude의 기본 디자인 시스템을 끄는 방식을 보여줍니다.
이때 프롬프트는 짧아도 됩니다. 중요한 것은 “이 이미지를 참고해서 비슷한 웹사이트를 만들어줘”가 아니라, 다음 기준을 함께 주는 것입니다.
- 원본 시안의 레이아웃을 우선 보존할 것
- 이미지 자산을 placeholder로 바꾸지 말 것
- 데스크톱과 모바일 반응형을 함께 고려할 것
- 메뉴, CTA, 섹션 순서를 실제 사이트처럼 연결할 것
- 이후 About, Services, Contact 페이지로 확장할 수 있게 구조화할 것
4단계: 홈페이지만 만들지 말고 사이트 구조까지 확장합니다
영상에서는 홈페이지를 만든 뒤 About, Services, Insight, Contact 같은 추가 페이지를 같은 디자인 언어로 생성합니다. 이 부분이 중요합니다. 랜딩페이지 하나가 예뻐도, 내부 페이지가 비어 있으면 실제 사이트로 쓰기 어렵습니다.
AI 웹사이트 제작은 “첫 화면이 예쁘다”에서 멈추면 안 됩니다. 최소한 다음 항목은 확인해야 합니다.
- 네비게이션 링크가 실제 페이지로 이어지는가
- 모바일에서 메뉴와 CTA가 자연스럽게 작동하는가
- Contact 폼, 버튼, 외부 링크가 정상 동작하는가
- 페이지별 카피가 중복되지 않는가
- SEO 제목과 메타 설명을 페이지별로 나눴는가
5단계: 카피와 애니메이션은 나중에 분리해서 다듬습니다
Claude가 만든 첫 결과물은 시작점입니다. 영상에서는 업종 정보를 다시 넣어 전체 텍스트를 맞춤화하고, 새·구름·인물 영상 같은 애니메이션을 추가합니다.
하지만 애니메이션은 신중해야 합니다. 배경 영상과 움직이는 오브젝트는 첫인상을 높일 수 있지만, 모바일 속도와 접근성을 떨어뜨릴 수 있습니다. 특히 작은 화면에서는 텍스트 가독성이 먼저입니다.
실무에서는 다음 순서가 안정적입니다.
- 구조와 섹션을 먼저 완성한다.
- 브랜드 카피를 사람이 검수한다.
- 모바일 레이아웃을 수정한다.
- 애니메이션을 최소 단위로 추가한다.
- 속도, 접근성, SEO를 마지막에 점검한다.
이 방식이 바꾸는 것은 도구가 아니라 작업 순서입니다
이 영상의 메시지는 “이제 디자이너와 개발자가 필요 없다”가 아닙니다. 오히려 사람의 역할이 더 앞단과 뒷단으로 이동한다는 뜻에 가깝습니다.
앞단에서는 좋은 시각 브리프를 만들고, 여러 시안 중 무엇을 선택할지 판단해야 합니다. 뒷단에서는 결과물이 실제 서비스 기준을 통과하는지 검증해야 합니다.
AI가 빨라진 만큼, 사람이 확인해야 할 기준도 명확해져야 합니다.
바로 따라 해볼 때의 체크리스트
- 한 번에 완성하려 하지 말고 시안 생성, 구현, 수정, 배포를 나눕니다.
- ChatGPT에는 “디자인 방향”을, Claude에는 “구현 기준”을 맡깁니다.
- 스크린샷뿐 아니라 이미지 자산도 함께 넘깁니다.
- 모바일 화면을 별도 프롬프트로 점검합니다.
- 실제 배포 전에는 링크, 폼, 속도, 접근성, SEO를 확인합니다.
함께 읽으면 좋은 글
- 바이브 코딩 입문자가 꼭 알아야 할 프론트엔드 기본 개념 15가지
- 바이브 코딩 입문자가 막히는 이유, 코딩보다 먼저 알아야 할 IT 지도
- AI 스킬 만들기, 파일 3개로 시작하는 Claude·GPT 업무 자동화
- AI 네이티브 전환법: 디지털 두뇌와 AI 에이전트로 일하는 방식 바꾸기
FAQ
Q1. ChatGPT Sol만으로 웹사이트를 완성할 수 있나요?
영상의 핵심은 Sol만으로 끝내는 것이 아닙니다. ChatGPT Sol은 디자인 시안과 이미지 자산을 만들고, Claude Design은 그 시안을 실제 웹페이지로 구현하는 분업 구조에 가깝습니다.
Q2. 왜 Claude에 바로 만들라고 하지 않고 스크린샷을 먼저 만드나요?
스크린샷은 레이아웃, 이미지, 타이포그래피, 분위기를 한 번에 전달하는 시각 브리프입니다. 텍스트만 줄 때보다 AI가 따라야 할 기준이 훨씬 구체적입니다.
Q3. 이 방식은 Figma를 대체하나요?
간단한 시안과 랜딩페이지 실험에서는 Figma 앞단의 일부 작업을 줄일 수 있습니다. 다만 팀 협업, 컴포넌트 관리, 디자인 시스템, 상세 UX 검증까지 완전히 대체한다고 보기는 어렵습니다.
Q4. AI가 만든 웹사이트를 바로 상업용으로 써도 되나요?
바로 쓰기보다는 검수 후 사용하는 것이 안전합니다. 이미지 권리, 반응형 품질, 접근성, 성능, 개인정보 폼 처리, 검색 최적화는 별도로 확인해야 합니다.
Q5. 초보자에게도 유용한 방식인가요?
유용합니다. 특히 디자인 감각이 부족한 초보자는 여러 시안을 먼저 보며 방향을 고를 수 있습니다. 다만 최종 결과를 그대로 믿기보다 체크리스트로 하나씩 검증해야 합니다.