저는 지난 몇 주 동안 Next.js용 홈페이지 템플릿 17개를 만들었습니다. 법률, 치과, 이발소, 건축, 보석, 동물병원, 카페, 부티크 숙박 시설, 필라테스 스튜디오, 주거 계약업체 등 16개 산업 분야의 템플릿이었으며, 같은 히어로 섹션의 색상 변경 버전이 아닙니다.
저는 이 모든 과정에 AI를 많이 사용했습니다. AI가 실제로 잘한 부분과 계속 실패했던 세 가지 부분을 알려드립니다.
잘하는 것: 스캐폴딩(scaffolding). 섹션 골격, Tailwind 클래스, 반응형 브레이크포인트, alt 텍스트 등 지루한 60%의 작업입니다. 예전에는 오후가 걸리던 레이아웃이 이제는 40분 만에 완성됩니다.
할 수 없는 것 — 첫째: 페이지가 주장하는 바(claim)를 결정하는 것.
모든 홈페이지는 어떤 주장을 담고 있습니다. 법률 회사의 페이지는 '우리는 신중하다'라고 주장하고, 미용실의 페이지는 '나오면 기분이 좋을 것이다'라고 주장합니다. AI는 이 두 가지 모두에 대해 히어로 섹션을 기꺼이 생성하며 그것들을 동일하게 보이게 만듭니다. 저는 먼저 그 주장을 한 문장으로 작성해야 했고, 그렇지 않으면 결과물은 단순한 장식품에 불과했습니다.
둘째: 간격(spacing)은 값이 아니라 판단입니다.
AI는 안전하기 때문에 모든 곳에 py-16을 생성합니다. 모든 섹션의 리듬이 동일한 페이지는 템플릿처럼 보이며, 이는 구매자들이 피하려는 바로 그 모습입니다. 제 시간 중 절반은 리듬(rhythm)에 할애되었습니다: 큰 섹션 다음에는 타이트하게 붙이고, CTA(Call to Action) 앞에는 조용한 섹션을 배치하는 식입니다.
셋째: 요청하지 않은 부분을 망가뜨립니다.
섹션 하나를 요청하면 파일 여덟 개가 변경됩니다. 한 경우에서는 '정리' 작업이 CSS 변수를 제거하여 장식적인 요소를 조용히 죽여버렸습니다. 코드는 잘 작동했고, 타입 체크도 통과했습니다. 저는 휴대폰으로 전후(before and after) 스크린샷을 찍어보고서야 발견할 수 있었습니다.
그래서 제 작업 흐름은 지루할 정도로 수동적입니다: diff를 읽고, 파일 하나를 변경하고, 390px에서 스크린샷을 찍고, 반복합니다. 에이전트들은 빠르게 작성하지만, 검토(review)가 진짜 작업입니다.
모든 템플릿은 제가 배포하기 전에 동일한 관문을 통과해야 합니다: 콘솔 오류 없음, 390px에서 가로 오버플로우 없음, 최소 7:1의 텍스트 대비, 외부 이미지 도메인 없음. 지루하지만 필수적인 확인 사항들이며, 이것이 이 템플릿들을 단순히 예쁜 것 이상으로 사용 가능하게 만드는 이유입니다.
프론트엔드에 에이전트를 사용한다면, 제약 사항은 더 이상 생성 속도가 아닙니다. 바로 검증할 수 있는 속도입니다.
실제 페이지(및 소스)는 여기 있습니다: https://slice-templates-pool.vercel.app/