AI 코딩 agent와 생성형 미디어 도구를 나란히 붙이면 웹사이트를 만드는 속도가 확실히 달라집니다. 문제는 결과물의 인상입니다. 대부분의 AI 웹사이트 빌더는 뻔한 카드 그리드와 예측 가능한 스톡 이미지, 로봇이 쓴 듯한 문구를 내놓습니다. 7개월 분량의 기업 AI 전환을 7일 만에 끝내겠다는 신규 서비스의 사이트를 만든 사례에서는, 이 한계를 피하기 위해 Claude Code를 중심으로 Supabase, Higgsfield, Ospry, Firecrawl, 21st.dev, Instantly, Expandi를 묶은 여덟 단계 작업 흐름을 썼습니다. 이 사례의 목표는 두 가지였습니다. 기업 고객에게 인상을 남기는 시네마틱 3D 사이트를 만드는 것, 그리고 폼을 채우지 않고 떠나는 방문자까지 연락 가능한 리드로 확보하는 것입니다. 다만 뒤에서 다시 짚듯이 방문자 식별은 국가별 개인정보 법규의 제약을 크게 받는 방식이라, 국내에 적용하려면 사전 검토가 필요합니다.
1단계와 2단계: 코드보다 먼저 타깃과 컨셉을 정합니다
첫 단계는 코드나 레이아웃을 만들기 전에 타깃 고객을 명확히 정의해 Claude Code에 알려 주는 것입니다. 이 사례에서는 세 개의 페르소나를 세웠습니다. 변화를 원하는 비즈니스 오너, 프로그램 스폰서가 될 만한 기업, 그리고 AI 에이전시를 운영하거나 컨설팅하는 사람입니다. 이 정의가 이후 모든 문구와 섹션 구성의 기준이 됩니다.
두 번째는 반복되는 랜딩 페이지 템플릿에서 벗어나는 컨셉 설계입니다. 소셜 미디어에서 화제가 된 3D 웹사이트 사례를 참고해 브랜드 권위를 끌어올리는 방향을 잡는 단계입니다. 이 사례에서는 Claude Code와 아이디어를 주고받은 끝에 AI 전환을 상징하는 은유로 중앙에서 맥동하는 3D 구체, 즉 orb를 선택했습니다. 흩어진 업무 데이터 소스를 하나의 지능 코어로 모은다는 이미지입니다. 완성된 컨셉에서는 레트로 스타일 텍스트 홈페이지가 타들어가듯 사라지고, 그 잔상이 빛나는 구체로 줄어들면서 인터랙티브 내비게이션 노드가 붙습니다. 다만 이 레트로 인트로는 다소 과하게 설계된 감이 있어 성급한 방문자에게는 부담이 될 수 있습니다.
3단계: Higgsfield MCP로 세로 사진을 시네마틱 영상으로
일반적인 AI 사이트와 완성도 높은 사이트를 가르는 가장 큰 차이는 진짜 같은 문구와 직접 만든 미디어입니다. 이 프로젝트에는 클라이언트 행사 영상이 아직 후반 작업 중이어서 16:9 가로 영상 자산이 없었습니다. 대신 세로 9:16 스마트폰 사진은 충분했습니다.
Higgsfield를 MCP(Model Context Protocol, AI 도구가 외부 서비스와 기능을 호출하도록 연결하는 규격)와 커스텀 connector로 Claude Code에 연결한 뒤, 자연어 지시만으로 세로 사진을 16:9 와이드 화면으로 확장(outpainting, 원본 바깥 영역을 채워 화면비를 넓히는 작업)하는 방식을 썼습니다. 이어 같은 스틸 이미지에 다섯 개 영상 생성 모델을 적용해 비교하는 과정을 거쳤습니다. Cinema Studio 3.0, Kling 3.0 Pro, MiniMax HQ, Seedance 2.5, Veo 3.1 Ultra입니다. 최종 선택은 Cinema Studio 3.0이었습니다. 색 보정이 안정적이고 움직임이 깔끔해 케이스 스터디 carousel(여러 카드를 좌우로 넘겨 보는 UI)에 쓸 배경 영상 루프로 적합했습니다. 창업자 리트릿의 자연스러운 사진, 직원 40명과 고객 400곳을 둔 회계법인 사례, 빌라 테라스 사진 같은 소재가 모두 이 방식으로 움직이는 와이드 영상이 됐습니다.
▲ 세로 사진의 와이드 확장
4단계: Mobbin과 21st.dev, Three.js로 UI 자산을 확보합니다
UI가 촌스러워지는 것을 막는 단계입니다. Mobbin(월 약 $10)은 실제 기업 사이트의 UI 사례를, 21st.dev(월 약 $20)는 미리 만들어진 웹 컴포넌트를 제공합니다. 두 서비스를 MCP로 Claude Code에 연결하면 대화형 지시만으로 컴포넌트 코드와 UI 패턴을 바로 검색할 수 있습니다.
이 사례에서는 3D 구체, 카드 레이아웃, 내비게이션 메뉴의 여러 변형을 한 번에 생성해 비교했습니다. 프런트엔드에는 Three.js가 들어가 실시간 3D 렌더링, 카메라 패닝, 마우스 호버 물리 효과를 맡았습니다. 덕분에 프런트엔드 기본 코드를 직접 짜지 않고도 인터랙티브 요소를 빠르게 만들고 골라낼 수 있습니다.
5단계: 인터랙티브 섹션과 애니메이션을 완성합니다
핵심 섹션은 세 가지입니다. 인터랙티브 3D orb hero section(페이지 맨 위에서 가장 먼저 보이는 대표 영역), 고객 사례 쇼케이스, 방법론 설명입니다. 쇼케이스 카드에는 modal overlay(현재 화면 위에 겹쳐 띄우는 창)를 달아 영상 루프와 스틸 사진, 성과 요약을 함께 보여 줍니다. 방법론 섹션은 다섯 단계로 구성됩니다. 감사(auditing), 데이터 중앙화, 워크스페이스 구축, 맞춤 앱 개발, AI agent 배포입니다. 애니메이션과 카메라 전환은 Claude Code와 Claude Fable 5를 조합해 여러 차례 피드백을 돌며 다듬는 과정을 거쳤습니다. 다만 무거운 3D 애니메이션은 모바일에서 성능이 떨어지기 쉬워 별도의 모바일 대응 작업이 필요합니다.
6단계와 7단계: 화려한 사이트의 전환 손실과 방문자 식별
시각적으로 강한 3D 사이트에는 대가가 따릅니다. 사용자의 시선이 분산되면서 일반적인 폼 제출 전환율이 떨어질 수 있습니다. 이를 상쇄하려고 이 사례에서 도입한 도구가 Ospry입니다. 폼 작성이나 로그인 없이 방문자를 식별하는 리드 인텔리전스 플랫폼입니다.
여기서 전제를 분명히 해 둘 필요가 있습니다. 방문자 식별은 방문자가 폼을 작성하지 않아도 신원과 연락처를 파악하는 방식이라 동의 요건 등 국가별 개인정보 법규의 영향을 크게 받습니다. 미국 내 트래픽에서는 식별률이 높지만 미국 외 트래픽에서는 효과가 크게 떨어집니다. 국내에 적용하려면 개인정보 보호법을 비롯한 관련 법규 검토가 먼저 이뤄져야 합니다.
Ospry는 미국 내 익명 웹 방문자의 약 40퍼센트를 식별한다고 밝히고 있습니다. 방문자 IP와 device fingerprint(브라우저와 기기 설정값을 조합해 기기를 식별하는 정보)를 데이터베이스 기록과 대조해 이름, 이메일 주소, 전화번호, LinkedIn URL을 확보합니다. 식별된 프로필 가운데 실제로 활용 가능한 연락처 비중은 약 80~85퍼센트로 설명됩니다. 회사 매출과 인원, 산업군을 기준으로 1점에서 100점까지 ICP(이상적인 고객 프로필) 적합도 점수도 계산합니다. 공개된 요금제는 다음과 같습니다.
| 요금제 | 비용 | 특징 |
|---|---|---|
| 30일 체험 | $1(30일) | 리드 15건 식별, 20건 보강 |
| Starter | 월 $100 | - |
| Pro | 월 $150 | - |
| Pro+ | 월 $250 | AI 보강과 ICP 점수 포함 |
| Agency | 월 $500 | 화이트라벨 |
리드 한 건당 보강 비용은 약 $0.18로 제시됐습니다. 다만 비용이 낮다는 점과 법적으로 문제가 없다는 점은 별개입니다. 도입 여부를 판단할 때는 가격표보다 동의 절차와 법규 요건을 먼저 확인하는 편이 안전합니다.
▲ 익명 방문자 식별 흐름
8단계: Firecrawl로 배포와 추적 스크립트 연동을 자동화합니다
사이트를 실제 도메인에 올릴 차례입니다. Ospry 연동 문서를 사람이 읽는 대신 문서 URL을 Claude Code에 넘기는 방식을 썼습니다. Claude Code가 Firecrawl 스크래핑 도구를 호출해 도움말 문서와 엔드포인트, 추적 스크립트 요구사항을 모두 읽어 들였습니다. 그다음 저장소를 자동으로 수정하고 추적 픽셀 코드를 삽입한 뒤 Cloudflare와 Vercel 배포 단계까지 진행했습니다. 이후 Ospry 대시보드에서 추적 스크립트가 실제로 방문자 이벤트를 잡는지 점검하며 1차 구축을 마무리하고, 며칠간 자연 유입 트래픽을 보내며 식별 정확도를 확인하는 과정을 거쳤습니다.
결과: 24시간 만에 194개 기업이 식별됩니다
모바일 대응 최적화를 마친 뒤 수집된 데이터에서, 트래픽이 들어온 24시간 안에 194개 기업이 식별됐습니다. 기업 피드에서는 직원 수와 위치, 연 매출 구간($100만에서 $5,000만 이상) 같은 정보를 볼 수 있습니다. 개별 방문자 프로필에는 로그인 없이도 페이지 조회, 버튼 클릭, 스크롤 깊이가 시각 정보와 함께 남습니다. ICP 조건에 정확히 맞는 사례도 나왔습니다. 통신 자문사를 운영하는 창업자 겸 CEO의 LinkedIn 프로필과 회사 이메일, 직함이 폼 제출 없이 확보된 것입니다.
이렇게 식별된 리드는 webhook(특정 이벤트가 생기면 다른 서비스로 데이터를 자동 전송하는 방식)으로 CRM이나 Expandi 같은 LinkedIn 아웃바운드 자동화 도구에 넘길 수 있습니다. ICP 점수가 70점 이상일 때 자동 아웃리치를 시작하는 것이 권장 기준으로 제시됐습니다. 참고로 Ospry가 공개한 데모 대시보드에는 누적 1,400개 기업과 657개 연락처가 잡혀 있습니다.
정리: 도구가 대신하는 것과 사람이 판단할 것
여덟 단계를 관통하는 결론은 분명합니다. Claude Code와 MCP connector를 조합하면 며칠 안에 에이전시급 3D 웹 경험을 만들 수 있습니다. Higgsfield로 만든 시네마틱 영상과 Mobbin, 21st.dev에서 가져온 UI 자산이 일반적인 AI 랜딩 페이지의 미적 한계를 넘게 해 줍니다. 사이트를 여기서 멈추지 않고 방문자 식별과 아웃바운드 자동화까지 연결하면, 웹사이트는 정적인 페이지가 아니라 고객 확보 흐름의 한 부분이 됩니다.
반대로 사람이 반드시 개입해야 하는 지점도 남습니다.
- 페르소나와 가치 제안은 코드를 생성하기 전에 직접 정의합니다.
- 마케팅 문구는 기본 생성 결과를 그대로 쓰지 말고 고객의 문제를 겨냥해 직접 쓰거나 크게 손봅니다.
- 영상 모델은 여러 개를 테스트해 색감과 움직임 안정성을 비교합니다.
- Three.js나 복잡한 캔버스 애니메이션을 쓴다면 모바일 뷰 대응을 별도 작업으로 넣습니다.
- 식별 도구에는 매출 규모와 직책 같은 ICP 필터를 걸어 관련 없는 트래픽에 아웃리치 비용을 쓰지 않게 합니다.
- 방문자 식별은 폼 작성 없이 방문자의 신원과 연락처를 파악하는 방식이라 동의 요건 등 국가별 개인정보 법규의 영향을 크게 받으므로, 국내 도입 전에는 개인정보 보호법 등 관련 법규 검토와 동의 절차 설계가 필요합니다.
속도는 도구가 만들고 방향은 사람이 정합니다. 타깃 정의와 카피, 모바일 대응, 그리고 개인정보 법규 확인은 자동화에 맡기지 말고 직접 챙기는 편이 안전합니다.