I Studied 10,000 AI Websites…Here''s what I learned
Quick Summary
I Studied 10,000 AI Websites…Here’s what I learned를 중심으로, 거울 테스트: 첫 화면에서 방문자가 자신의 문제를 알아볼 수 있어야 한다. 누구를 위한 서비스인지, 어떤 결과를 얻는지를 핵심 판단 포인트로 압축 정리한다.
영상 보기
클릭 전까지는 가벼운 미리보기만 먼저 불러옵니다.
🖼️ 인포그래픽
🖼️ 4컷 인포그래픽
💡 한 줄 결론
I Studied 10,000 AI Websites…Here’s what I learned를 중심으로, 거울 테스트: 첫 화면에서 방문자가 자신의 문제를 알아볼 수 있어야 한다. 누구를 위한 서비스인지, 어떤 결과를 얻는지를 핵심 판단 포인트로 압축 정리한다.
📌 핵심 요점
- 거울 테스트: 첫 화면에서 방문자가 자신의 문제를 알아볼 수 있어야 한다. 누구를 위한 서비스인지, 어떤 결과를 얻는지, 다음에 무엇을 해야 하는지를 명확히 답한다.
- 형광펜 규칙: 강조색을 곳곳에 사용하면 중요한 버튼이 묻힌다. 배경·구조·강조에 60·30·10의 비중을 배정하고, 강조색은 클릭을 유도할 요소에 집중한다.
- 앞·중간·뒤의 레이어: 배경, 본문, 핵심 행동 요소를 서로 다른 깊이로 배치한다. 이미지의 경계 겹침과 중요한 요소의 부드러운 그림자로 시선의 우선순위를 만든다.
- 역할이 있는 모션: 애니메이션은 제품 설명, 다음 단계 안내, 상태 변화 전달 중 분명한 역할을 맡아야 한다. 첫 화면의 문구와 버튼은 즉시 읽히게 하고 모션 감소 설정을 존중한다.
- 무료 샘플: 문의를 요청하기 전에 퀴즈, 가격 추정기, 유용한 도구로 결과를 먼저 경험하게 한다. 고객이 구매 전에 반복해서 묻는 질문을 짧은 상호작용으로 해결하는 방식이다.
🧩 배경과 문제 정의
발표자는 AI 웹사이트 1만 개 이상을 살펴보고 수천 명의 웹사이트 제작 학습을 도왔다고 설명한다. 영상의 문제의식은 AI로 보기 좋은 페이지를 만드는 것과 실제 고객 행동을 이끄는 사이트를 만드는 것 사이의 차이다.
AI가 작성하는 일반적인 문구, 여러 곳에 퍼진 강조색, 평평한 배치, 과도한 애니메이션, 문의 양식으로 끝나는 구성이 주요 개선 대상으로 제시된다. 발표자는 이를 검수할 다섯 가지 패턴을 설명하며, 기업이 비용을 지불할 만한 웹사이트를 만드는 기준으로 연결한다.
🕒 시간순 섹션별 상세정리
1. 고객이 자신을 알아보게 하는 거울 테스트
- 발표자는 AI 웹사이트 1만 개 이상에서 얻은 다섯 패턴을 소개하며, 실제 성과를 만드는 사이트는 기업에 1,000달러에 판매할 수 있다고 주장한다. [00:24]
- Truckers Report 사례에서는 기존 전환율이 약 12.1%였고, CXL이 운전자 조사와 데이터 분석을 거쳐 고객 중심으로 페이지를 바꾼 뒤 기존 대비 79.3% 개선됐다고 보여준다. [01:14]
- 첫 화면은 누구를 위한 서비스인지, 어떤 결과를 얻는지, 다음 행동은 무엇인지 답해야 한다. 발표자는 이 답을 먼저 정리해 Claude에 전달하라고 권한다. [02:33]
2. 강조색을 중요한 행동에 집중하는 형광펜 규칙
- 강조색을 제목·아이콘·테두리·배경·버튼에 모두 사용하면 버튼이 눈에 띄지 않는다. 클릭을 원하는 요소에 구별되는 색을 집중하는 것이 핵심이다. [03:12]
- 자신의 AI Automation Society 사이트에서는 널리 사용하던 파란색을 줄이고 흑백 중심으로 바꾼 뒤, 주목할 요소에만 파란색을 남겼다고 보여준다. [03:25]
- 배경 60%, 텍스트·메뉴·카드 등 구조 30%, 버튼과 링크 등 강조 10%를 기준으로 삼고, 선택한 색상 코드와 배색 규칙을 Claude에 전달한다. [04:15]
3. 배경·본문·행동 요소에 깊이를 주는 레이어
- 평평하게 나열된 요소는 시선의 우선순위를 흐린다. 무대에 비유해 배경은 분위기, 중간은 본문, 앞은 핵심 행동 버튼을 맡도록 보여준다. [05:07]
- 실제 작업이나 제품 사진을 배경에 놓고, 이미지나 카드 일부가 다음 섹션의 경계를 넘게 하며, 중요한 버튼이나 카드에만 부드러운 그림자를 준다. [06:19]
- 발표자는 자신이 사용하는 무료 웹사이트 디자인 스킬 Scrollcraft를 보여준다. 스크롤 애니메이션, 레이어, 타이포그래피, 간격과 깊이를 다룬다고 보여준다. [06:45]
4. 고객의 과업을 돕는 목적 있는 모션
- 애니메이션은 제품을 보여 주거나 다음 단계로 시선을 안내하거나 상태 변화를 전달해야 한다. 발표자는 자신의 사이트에서 과했던 3D 회전 효과를 제거한 경험과, 패럴랙스가 재미를 높여도 사용성을 개선하지 않았다는 연구를 보여준다. [07:59]
- Apple AirPods Pro 페이지를 사례로 들어 제품의 여러 각도를 보여 주는 움직임을 보여준다. 화면마다 움직이는 대상을 하나로 제한하고, 첫 화면의 문구와 버튼은 나타나는 즉시 읽히게 하라고 권한다. [08:43]
- 움직임으로 불편을 느끼는 방문자를 위해 모션 감소 설정을 존중하고, 사이트에 끄기 선택지를 둘 수도 있다고 제안한다. [09:13]
5. 문의 전에 결과를 경험하게 하는 무료 샘플
- Doc Braces는 교정 비용 추정기를 제공했고, 도구 업체 Outgrow에 따르면 약 45%의 전환율을 기록했다. 발표자는 이용자가 자신의 정보를 넣어 만든 결과에 더 가치를 느끼는 현상을 IKEA 효과와 연결한다. [10:00]
- 퀴즈나 계산기는 끝까지 완료할 수 있을 만큼 짧고 쉬워야 한다. 서비스 선택 퀴즈와 가격 추정기를 예시로 제시한다. [10:30]
- Wise의 환율 계산, Zillow의 주택 가치 추정, Sherwin-Williams의 방 사진 기반 색상 미리보기 등을 보여준다. 고객이 구매 전에 반복해서 묻는 질문을 찾아 답하는 도구를 Claude로 제작하라고 권한다. [10:56]
6. AI 제작물을 검수하는 역량으로 마무리
- 발표자는 다섯 패턴을 적용하면 기업이 비용을 지불할 만한 AI 웹사이트를 만들 수 있다고 주장하며, AI가 대부분의 작업을 하더라도 사용자는 검수 방법을 알아야 한다고 강조한다. [11:04]
- 자신의 웹사이트 제작 과정을 보여 주는 후속 영상을 안내하고 인사하며 마친다. [11:17]
🧾 결론
- 발표자는 AI가 제작의 상당 부분을 맡더라도, 사람이 고객 관점에서 결과물을 검수해야 한다고 강조한다.
- 다섯 패턴은 방문자가 자신에게 맞는 서비스임을 이해하고 다음 행동으로 이동하도록 돕는 공통 기준이다.
- 색상·레이어·모션의 완성도는 핵심 문구와 행동 버튼을 더 잘 드러내는 방향으로 평가할 수 있다.
- 영상에 등장하는 전환 개선 수치는 개별 사례이며, 자신의 사이트에서도 같은 결과가 나오는지는 확인해야 한다.
📈 투자·시사 포인트
- AI 웹사이트 제작 사업에서는 고객 이해, 전환 문구, 행동 경로를 검수하는 역량이 유료 서비스의 가치 제안이 될 수 있다.
- 디자인 작업의 우선순위는 첫 화면의 메시지와 핵심 버튼, 구매 전 질문을 해결하는 도구를 중심으로 정할 수 있다.
- 계산기·퀴즈·미리보기는 방문자가 서비스의 효용을 직접 확인하게 하는 기능이므로, 제작 제안에 포함할 만한 요소다.
- 발표자가 언급한 1,000달러 판매 가능성은 사업 기회에 대한 주장이다. 실제 가격과 성과를 판단하려면 고객별 요구와 전환 결과를 확인해야 한다.
⚠️ 불확실하거나 확인이 필요한 부분
- 웹사이트 1만 개 이상을 연구했다는 설명에는 표본 선정 방식, 평가 기준, 분석 자료가 제시되지 않는다. 다섯 패턴을 통계적으로 검증된 법칙으로 단정하기 어렵다.
- Truckers Report의 전환 개선 79.3%, City Click의 가격 페이지 클릭 증가 90%, Campaign Monitor의 가입 증가 31.4%는 영상에서 인용한 사례다. 원문 실험의 기간·표본·변경 범위와 지표 정의를 확인해야 한다. 특히 79.3%는 기존 대비 상대 개선율로 소개된다.
- Doc Braces의 약 45% 전환율은 계산기 제공 업체 Outgrow의 설명으로 소개된다. 어떤 행동을 전환으로 집계했는지와 적용 대상이 명확하지 않다.
- 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
- 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
- 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.
✅ 액션 아이템
- 타깃 고객, 고객이 얻을 결과, 다음 행동을 각각 한 문장으로 정리해 AI에 전달하고 첫 화면의 문구를 검수한다.
- 현재 강조색이 사용된 위치를 살펴보고, 핵심 버튼과 필요한 링크가 가장 잘 드러나도록 배색을 정리한다.
- 배경·본문·핵심 행동 요소의 깊이를 구분하고, 겹치는 이미지가 버튼이나 문구를 가리지 않는지 확인한다.
- 애니메이션마다 역할을 적어 보고 목적이 불분명한 효과를 제거한다. 첫 화면의 문구와 버튼이 즉시 읽히는지도 점검한다.
❓ 열린 질문
- 우리 사이트의 첫 화면은 어떤 고객의 어떤 문제를 가장 먼저 드러내야 하는가?
- 방문자가 구매 전에 가장 궁금해하는 질문 중 짧은 도구로 답할 수 있는 것은 무엇인가?
- 현재의 색상·레이어·애니메이션 중 핵심 행동을 돕는 요소와 주의를 분산시키는 요소는 각각 무엇인가?
