AI 웹사이트 디자인: 클라이언트에게 보내기 전 거쳐야 할 다섯 관문

AI 웹사이트 디자인: 클라이언트에게 보내기 전 거쳐야 할 다섯 관문

AI 웹사이트 디자인은 그럴듯한 홈페이지를 커피 한 잔 내릴 시간쯤이면 만들어 냅니다. 속도는 진짜입니다. 그래서 함정이기도 합니다. 생성된 페이지는 실제보다 훨씬 먼저 끝난 것처럼 보이고, 대비, 제목 순서, 좌우 반전 레이아웃, 디자인 토큰 관리 같은 미완성 부분은 출시 3주 뒤에 클라이언트가 발견하는 바로 그 부분입니다. 아래는 속도는 유지하고 문제는 줄이기 위해 우리가 쓰는 순서입니다. 다섯 개의 관문을 차례로 통과하며, 각 관문에는 명확한 통과 또는 실패 기준이 있습니다.

생성된 사이트는 왜 끝난 것처럼 보일까?

모델은 스크린샷에 보이는 것을 최적화하기 때문입니다. 히어로 영역, 기능 카드 세 개, 추천사 한 줄, 푸터. 이런 요소는 모두 통계적으로 익숙해서, 페이지 전체가 한눈에 전문적으로 보입니다. 하지만 스크린샷으로는 보이지 않는 것들이 사이트가 클라이언트 인수인계를 견딜지 결정합니다.

접근성부터 살펴보겠습니다. WebAIM Million 2026 보고서는 상위 100만 개 홈페이지의 95.9%에서 WCAG 2 실패가 감지되었고, 83.9%에서 텍스트 대비가 낮다고 밝혔습니다. 그런 웹으로 학습한 모델은 그 웹을 그대로 재현합니다. 크림색 배경에 옅은 회색 캡션을 아주 자신 있게 건네줄 겁니다.

두 번째 보이지 않는 문제는 디자인 결정이 어디에 살고 있는가입니다. 생성된 페이지는 색상, 크기, 간격을 마크업 곳곳에 고정된 값으로 흩뿌리는 경향이 있습니다. 다음 분기에 브랜드 블루를 바꾸면 블록 마흔 개를 뒤져야 합니다. 그 유지보수 비용은 모델이 아니라 프리랜서가 떠안습니다.

그래서 유용한 질문은 "AI가 이 사이트를 디자인할 수 있을까?"가 아닙니다. AI는 초안을 만들 수 있습니다. 유용한 질문은 "어떤 결정을 맡기고, 그 결과를 어디서 검사할 것인가?"입니다. 다섯 관문이 그 답입니다.

1관문: 도구를 열기 전에 브리프를 쓰세요

AI 결과물이 실망스러운 경우 대부분은 한 줄짜리 프롬프트로 거슬러 올라갑니다. "카사블랑카의 빵집 웹사이트"라고만 쓰면 모델은 대상 독자, 톤, 페이지 목록, 행동 유도 문구를 모두 지어낼 권한을 얻습니다. 그리고 본 적 있는 모든 빵집 사이트의 평균에서 그것들을 만들어 냅니다.

쓸모 있는 브리프는 반 페이지 안에 들어갑니다. 누가 방문하는지, 그리고 처음 10초 안에 무엇을 하러 왔는지. 반드시 존재해야 하는 페이지 세 개. 사이트가 존재하는 이유인 행동 하나(예약, 문의, 주문). 클라이언트가 좋아하는 사이트 두 개와 싫어하는 사이트 한 개. 사용 언어와 읽기 방향입니다. 사이트가 아랍어나 히브리어를 지원한다면, 레이아웃을 승인한 뒤가 아니라 지금 말해야 합니다.

마지막 줄이 생각보다 중요합니다. 우에서 좌로 읽는 방향은 번역 작업이 아니라 레이아웃의 속성입니다. 방향에 대해 아무 말도 듣지 못한 모델은 왼쪽 정렬 디자인에 아랍어 텍스트를 붙여 넣은 결과물을 만듭니다. 브리프에 방향을 적으면 도구가 제안하는 레이아웃이 달라집니다. 문장 하나면 충분합니다.

"현대적이고 깔끔하게"처럼 형용사만 있는 지시는 건너뛰세요. 정보가 없습니다. "신문 1면처럼 밀도 높고 기사 중심으로"라고 쓰면 훨씬 많은 정보가 전달됩니다.

2관문: 페이지가 아니라 방향을 요청하세요

이 작업 전체에서 AI를 가장 저렴하게 쓰는 방법은 탐색입니다. 서로 다른 방향 3에서 5개를 레이아웃과 글꼴 조합의 대략적인 형태로 요청한 뒤, 무엇이든 만들기 전에 고르세요. 스케치 여섯 장은 몇 분이면 됩니다. 클라이언트가 거부한 페이지를 다시 만드는 데는 오후 하나가 날아갑니다.

여기서는 비용을 낮게 유지하는 것이 핵심입니다. 방향마다 생성된 사진을 넣어 완성된 페이지를 렌더링하게 두지 마세요. 클라이언트는 사진에 반하고, 그다음에는 레이아웃과 사진을 구분하지 못합니다. 회색 박스와 실제 제목이면 충분합니다. 클라이언트가 회색 박스 레이아웃 세 개 중 하나도 고르지 못한다면 문제는 브리프였고, 그것을 공짜로 알게 된 것입니다.

도구의 종류가 중요하며, 솔직하게 말할 가치가 있습니다. 10Web 같은 풀 사이트 생성기는 프롬프트, URL 또는 Figma 파일로부터 완전한 WordPress 사이트를 만들며, 사이트 한 개 기준 연간 결제 시 월 10달러부터 시작합니다. Durable 같은 호스팅 빌더는 몇 가지 답변만으로 약 30초 만에 완성된 소규모 비즈니스 사이트를 만듭니다. 두 도구 모두 2관문에는 뛰어나지만, 디자인 결정을 노출하지 않고 소유하기 때문에 4관문에는 약합니다. 옵션을 보는 용도로 쓰세요. 수년간 유지보수할 사이트의 최종 빌드로 쓰는 것은 의심하세요.

3관문: 빌드 전에 디자인을 theme.json에 고정하세요

대부분의 워크플로우가 건너뛰는 관문이며, 유지보수할 수 있는 사이트와 데모만 가능한 사이트를 가르는 단계입니다. 방향이 정해지면 그 결정을 토큰으로 바꿔 theme.json에 적으세요. 색상 팔레트, 글꼴 패밀리와 크기, 간격 체계, 콘텐츠 너비입니다. 이후 모든 블록은 리터럴 값이 아니라 슬러그로 토큰을 참조해야 합니다.

theme.json 레퍼런스는 바로 이 목적을 위해 존재합니다. 블록 테마가 팔레트와 스케일을 선언하는 한 곳을 제공하고, 편집기는 이를 제어 항목으로 보여 줍니다. 브랜드 블루가 바뀌면 한 줄만 고치면 됩니다. 클라이언트가 사이트 에디터를 열면 자유로운 색상환 대신 여러분이 정한 팔레트에서 고르게 되며, 브랜드에 맞지 않는 수정이 한 범주 통째로 조용히 차단됩니다.

여기서 AI는 다른 방식으로 제 몫을 합니다. 선택한 방향을 주고 토큰 세트를 요청한 뒤, 두 가지 규칙으로 검사하세요. 모든 텍스트와 배경 쌍은 일반 텍스트 기준 4.5:1(WCAG AA 기준)에 도달해야 합니다. 모델의 주장을 믿지 말고 비율을 직접 계산하세요. 그리고 스케일은 작아야 합니다. 간격 단계는 다섯에서 여섯 개, 글자 크기는 여섯 단계면 충분합니다. 모델은 거의 비슷한 회색 열네 개를 내놓기를 좋아합니다. 그중 열한 개는 지우세요.

이 관문이 지켜졌는지 확인하는 실용적인 방법이 있습니다. 완성된 테마를 열고 어떤 템플릿에서든 헥스 코드를 검색하세요. 하나라도 나온다면, 결정 하나가 시스템 밖으로 새어 나간 것입니다.

4관문: 네이티브 블록으로 만들고 생성기는 루프 밖에 두세요

이제 빌드합니다. 모델이 제안한 구조는 대개 유지할 가치가 있습니다. 섹션 순서, 컬럼 논리, 밀집 영역과 여백 영역의 리듬 같은 것들이죠. 반면 그 마크업은 보통 유지할 가치가 없습니다. 승인된 구조를 코어 블록(Group, Columns, Cover, Query Loop)으로, 토큰을 사용해 다시 만들고, 생성된 결과물은 소스 파일이 아니라 참고용 밑그림으로 다루세요.

느려 보이지만 우리 경험으로는 두 번째 페이지부터 더 빠릅니다. 네이티브 블록은 토큰을 상속하고, 사이트 에디터에 반응하며, 클라이언트가 편집해도 제대로 동작하기 때문입니다. 스타일을 하드코딩한 생성 마크업은 이 모든 것과 싸웁니다. 페이지 빌더는 같은 거래의 반대편에 있습니다. Divi는 2026년 2월 Divi 5로 다시 나왔고, Pro 등급에서 연간 277달러에 Divi AI를 제공하며, 결과물은 Divi의 모듈 시스템 안에 머뭅니다. Divi를 표준으로 쓰는 에이전시에게는 정당한 선택입니다. 다만 블록 테마와는 다른 제품이며 이탈 비용이 다르므로, 그 이탈 비용을 견적에 반영해야 합니다.

빌드 안에서 AI 생성이 여전히 자리를 얻는 곳은 반복되는 층입니다. 가격 섹션의 변형, 실제와 비슷한 모양의 임시 문구, 클라이언트가 비교할 수 있는 대체 히어로 배치 같은 것들입니다. 이런 결과물은 각각 다듬고 등록해야 할 초안 패턴으로 다루고, 완성품으로 취급하지 마세요.

한 가지 솔직한 한계가 있습니다. 프로젝트에 실제 상호작용이 필요하다면(필터링된 아카이브, 커스텀 쿼리 로직, 자바스크립트 동작이 필요한 모든 것) 어떤 생성기도 그것을 감당하지 못합니다. 개발자가 그 부분을 작성해야 하고, AI의 기여는 가장자리에 머뭅니다.

5관문: 스크린샷이 보여주지 못하는 것을 감사하세요

모든 사이트에 같은 짧은 감사를 같은 순서로 실행하세요. 기분이 아니라 습관이 되도록 말입니다.

먼저 대비입니다. 텍스트가 이미지 위에 있는 경우, 그리고 모델이 고려하지 않은 비활성 상태와 호버 상태를 포함해 실제로 렌더링된 쌍을 확인하세요. 둘째는 제목 구조입니다. H1은 하나만 있어야 하고, 제목은 건너뛰지 않고 내려가야 하며, 크기가 크다는 이유만으로 고른 제목이 없어야 합니다. 셋째는 키보드입니다. 페이지 전체를 탭으로 이동해 포커스가 보이는지, 순서가 읽기 순서를 따르는지 확인하세요. 넷째는 의미를 가진 모든 이미지의 대체 텍스트이며, 의미가 없는 이미지에는 빈 대체 텍스트를 두세요.

다섯 번째 검사가 noonwp를 일반 체크리스트와 구분하는 항목입니다. 바로 방향입니다. 사이트에 아랍어나 히브리어 버전이 있다면 우에서 좌로 보여서 반전되지 않은 것을 찾으세요. 잘못된 방향을 가리키는 아이콘, 초점 피사체가 이제 텍스트와 겹쳐 버린 히어로 이미지, margin-left 대신 margin-inline-start 같은 논리 속성을 쓰지 않은 패딩. 이런 문제는 이 관문에서 찾으면 고치기 쉽고, 클라이언트 스크린샷에서 찾으면 난처합니다.

감사 증거를 보관하세요. 페이지마다 전후 쌍, 실패한 항목 메모, 바꾼 내용 메모를 남기세요. 그러면 "AI 보조"라는 모호한 주장이 구체적인 결과물이 됩니다. 그리고 주말에 생성기를 직접 써 본 클라이언트 앞에서 여러분의 수수료를 정당화하는 인수인계 문서의 한 단락이 되기도 합니다.

원프롬프트 사이트 빌더는 어떨까요?

이들에게도 자리는 있지만 좁습니다. 원프롬프트 빌더는 제안서용 일회성 프로토타입, 주말 행사용 랜딩 페이지, 무엇을 원하는지 설명하기 어려운 클라이언트를 위한 시각적 출발점을 만드는 데 좋은 방법입니다. Framer는 AI 사이트 생성기와 자유형 캔버스, 무료 요금제를 함께 제공하므로 빠르고 일회성인 시각 작업에 알맞고, Basic 요금제는 월 10달러부터 시작합니다.

사이트가 WordPress에서 돌아가야 하거나, 기술에 익숙하지 않은 클라이언트가 편집해야 하거나, 우에서 좌로 읽는 독자를 대상으로 하면 건너뛰세요. 결국 어차피 블록으로 다시 만들어야 하기 때문입니다. 프로토타입은 가질 만한 가치가 있었지만, 그 페이지는 출시할 가치가 없었습니다. 지금 가진 것이 둘 중 무엇인지 아는 것이 가장 많은 시간을 아껴 줍니다.

다음 브리프에서 시도해 볼 것

실제 진행 중인 프로젝트 하나를 골라 1관문과 3관문만 실행하세요. 반 페이지짜리 브리프를 쓰고, 페이지가 한 장도 존재하기 전에 선택한 팔레트와 스케일을 theme.json에 고정하세요. 시간을 재고, 지난번 사이트가 안정적인 디자인에 도달하기까지 걸린 시간과 비교하세요. 결과가 유효하다면 나머지 세 관문을 하나씩 추가하세요. 지난번에 출시한 사이트에서는 어떤 관문이 가장 큰 고통을 막아 줬을까요?