프로젝트 02 / 08홈페이지제작 사례

AI빌더그룹 — 바이브 코딩 외주 에이전시 브랜드 사이트

기획부터 개발·검수까지 맡는 바이브 코딩 외주 에이전시의 브랜드 사이트입니다. 고객이 품는 의심을 순서대로 풀어 가는 메인 11개 섹션, 질문 3개로 맞는 빌더를 추천하는 매칭, 부담을 줄인 문의 폼까지 문의 전환을 목표로 설계했습니다.

화면 미리보기

AI빌더그룹 — 바이브 코딩 외주 에이전시 브랜드 사이트 화면

한 일

이 프로젝트에서 직접 설계하고 만든 범위입니다.

사용 기술

주요 화면

실제 운영 화면에서 잘라 왔습니다. 무엇을 왜 그렇게 만들었는지 함께 적습니다.

03
30초 빌더 매칭
무엇을 만드는지, 언제까지인지, 예산은 얼마인지 세 가지를 칩으로 답하면 진행 바와 함께 맞는 빌더 2명을 추천합니다. 직접 고르기 어려운 고객을 위한 두 번째 길입니다.
- 질문 3개
- 빌더 2명 추천
04
섹션마다 다른 움직임
'모든 섹션이 똑같이 움직이는 사이트'가 되지 않도록 역할에 맞춰 움직임을 나눴습니다. 문제 제기 구간은 화면을 붙잡고 카드를 하나씩 강조하고, 일하는 방식 4단계는 스크롤에 따라 차례로 켜집니다.
- 스크롤 고정 스토리
- 단계 순차 강조
- 물결 마키 리본

구조

검색하는 말과 찾는 순서에 맞춰 주소와 페이지를 나눈 방식입니다.

/Home11섹션
검증 방식 → 업계 문제 제기 → 일하는 방식 → 빌더 매칭 → 결과물 → 인사이트·영상 → FAQ → 문의 순서의 설득 흐름
/workWork3갈래
분야 필터로 직접 탐색, 질문 3개로 빠른 매칭, 빌더 프로필·기술 스택 열람
/insightInsight
외주 전에 읽을 글을 분류 사이드바와 썸네일 목록으로 모았습니다
/contactContact
진행 단계 안내와 칩 선택형 입력으로 문의 부담을 낮췄습니다

과정

고객 상황, 문제, 접근 방법, 실행, 결과 순서로 적습니다.

1
고객 상황
바이브 코딩으로 외주를 맡는 새 서비스를 알릴 사이트가 필요했습니다. 처음 보는 고객은 '목업만 잔뜩 보여 주는 곳 아닌가', '누가 만들고 누가 확인하는가'부터 묻습니다.
2
해결해야 했던 문제
AI로 빠르게 만든 비슷한 사이트가 많아, 첫 화면부터 실제 결과물과 일하는 방식으로 구별되어야 했습니다. 또 외주 문의는 금액과 범위에 대한 불안 때문에 마지막 단계에서 자주 멈춥니다.
3
목표와 접근 방법
고객의 의심이 생기는 순서대로 메인 섹션을 배치했습니다. 첫 화면에는 실제 제작 화면 콜라주를 두고, Work 페이지는 직접 고르는 고객과 추천받고 싶은 고객의 길을 나눴습니다. 문의 폼은 입력보다 안내를 먼저 보여 주도록 짰습니다.

실제 결과

6페이지, 메인 11개 섹션의 브랜드 사이트를 배포해 운영 중입니다. 어느 페이지에서든 문의 도크와 문의 페이지로 바로 이어집니다. 방문·문의 수치는 공개 동의를 받으면 이 페이지에 추가합니다.

배운 것과 제안

이 프로젝트에서 확인한 것만 적습니다.

AI빌더그룹 — 바이브 코딩 외주 에이전시 브랜드 사이트 페이지를 끝까지 읽으셨습니다.

지금 홈페이지 주소와 고민을 알려주시면 이 프로젝트와 비교해 무엇부터 할지 제안드립니다.

영업일 기준 1~2일 안에 답변드립니다.