웹사이트 마스터: 예약 받는 진짜 사이트

필라테스 스튜디오 원장의 아침을 상상해 보세요. 휴대폰을 열면 밤사이 들어온 예약 신청이 세 건. 사이트의 수업 시간표를 보고, 트레이너 소개를 읽고, 예약 폼을 채운 손님들입니다. 원장이 자는 동안 사이트가 영업을 한 겁니다.

이것이 구경거리 사이트와 일하는 사이트의 차이입니다. 이 코스에서 만드는 것은 후자입니다. 예쁜 것은 기본이고, 방문자를 예약이라는 행동까지 데려가는 구조를 짭니다.

16단계가 길어 보일 수 있지만, 각 단계는 실제 버튼 하나씩과 짝지어져 있습니다. 끝나면 여러분 손에는 남에게 보여 줄 수 있는 완성품이 남습니다.

맨땅에서 시작할 필요가 없습니다. 스튜디오의 템플릿으로 시작하기를 열면 웹, 앱, 게임, 영상까지 125종의 완성 예시가 갤러리로 펼쳐집니다. 하나하나가 실제로 작동하는 완성품이라서, 눌러 보는 것만으로 안목이 자랍니다.

지금 할 일은 쇼핑입니다. 아래 직접 해보기로 스튜디오를 열고, 내 아이디어와 결이 비슷한 템플릿을 두세 개 찜해 두세요. 이 템플릿 사용을 누르면 그 완성품이 내 작업대 위로 올라오고, 색과 글과 이미지를 바꾸고 싶다고 말하면 바로 내 것으로 바뀌기 시작합니다.

두 출발점에는 각각의 힘이 있습니다. 템플릿 출발은 빠릅니다. 구조와 디자인이 검증된 상태에서 내용만 갈아 끼우면 되니, 오늘 안에 결과물이 필요할 때 최고의 선택입니다. 백지 출발은 자유롭습니다. 프롬프트로 처음부터 그리니 구조 자체가 특별한 사이트, 예를 들어 스토리텔링형 브랜드 페이지에 어울립니다.

판단 기준은 이것입니다. 내 사이트가 업계의 표준 구조(소개, 갤러리, 가격, 예약)를 따라도 된다면 템플릿, 구조 자체가 차별점이어야 한다면 백지. 처음이라면 템플릿 출발을 권합니다. 표준 구조를 한 번 겪어 본 뒤에 백지가 진짜 자유로워집니다.

사이트는 섹션이라는 블록의 탑입니다. 필라테스 사이트라면 위에서부터 히어로(첫 화면), 스튜디오 소개, 수업 시간표, 트레이너 소개, 후기, 가격, 예약 폼, 오시는 길 순서가 정석입니다. 이 구조를 프롬프트나 리파인에서 그대로 말로 요청하면 됩니다.

순서에도 논리가 있습니다. 방문자는 위에서부터 '여기가 어디지(히어로)', '뭘 하는 곳이지(소개·시간표)', '믿을 만한가(트레이너·후기)', '얼마지(가격)', '해 볼까(예약 폼)' 순서로 마음이 움직입니다. 섹션 순서가 곧 설득의 순서인 셈입니다.

'후기 섹션을 가격 위로 올려줘'처럼 섹션 단위로 말하는 습관을 들이세요. AI와의 대화가 눈에 띄게 정확해집니다.

구조가 뼈라면 카피는 목소리입니다. 가장 공들일 곳은 히어로의 헤드라인 한 줄입니다. '○○ 필라테스입니다' 같은 자기소개보다 '하루 50분, 자세가 달라지는 시간'처럼 방문자가 얻을 것을 말하는 문장이 강합니다.

버튼 문구도 목소리입니다. '제출'보다 '수업 예약하기', '더 보기'보다 '시간표 확인하기'처럼 누르면 무슨 일이 생기는지 알려 주는 문구가 클릭을 만듭니다. 리파인에 '헤드라인을 고객이 얻는 가치 중심으로 3안 제안해줘'라고 부탁하면 AI가 카피라이터가 되어 줍니다.

사이트의 첫인상은 대부분 이미지가 결정합니다. 스튜디오에서는 이미지를 따로 구하러 다닐 필요 없이 그 자리에서 생성할 수 있습니다. '밝은 자연광의 필라테스 스튜디오 내부, 세이지 그린 톤'처럼 분위기까지 지정해 요청하면 사이트의 색감과 어울리는 이미지가 만들어집니다.

배치의 원칙은 역할입니다. 히어로에는 분위기를 전하는 넓은 이미지, 트레이너 소개에는 인물 이미지, 수업 소개에는 동작 이미지. 이미지가 글의 내용을 거들 때 사이트가 비로소 프로처럼 보입니다. 내 매장 사진이 있다면 그걸 쓰는 것이 언제나 최고입니다. 진짜는 생성 이미지가 못 이깁니다.

평범한 사이트를 특별하게 만드는 지름길이 스킬 라이브러리입니다. 3D 연출, 패럴랙스 스크롤, 차트, 스크롤 애니메이션 같은 검증된 기법들이 카테고리와 검색으로 정리되어 있고, 고르면 빌드에 그대로 들어갑니다.

사실 고르지 않아도 스튜디오가 프롬프트에 맞는 스킬을 자동으로 골라 조합해 줍니다. 그런데도 직접 고르는 법을 배우는 이유는, 특정 기법을 꼭 넣고 싶을 때 지정할 수 있어야 하기 때문입니다. 필라테스 사이트라면 스크롤에 따라 동작 사진이 부드럽게 나타나는 연출 하나로 급이 달라집니다.

아래 직접 해보기로 스킬 탐색·추가를 열어 검색창에 3D나 패럴랙스를 쳐 보세요. 지금 만드는 빌드 종류에 맞는 스킬만 추려서 보여 줍니다.

이제 방문자의 눈으로 볼 시간입니다. 폰 미리보기를 켜면 실제 크기의 폰 프레임 안에서 사이트가 열리고, 아이폰과 갤럭시를 나란히 놓고 비교할 수도 있습니다. 두 기종은 화면 비율과 둥근 모서리가 달라서, 한쪽에서 완벽한 레이아웃이 다른 쪽에서 어긋나기도 합니다.

확인 루틴은 세 가지입니다. 첫째, 헤드라인이 어색하게 줄바꿈되지 않는가. 둘째, 버튼이 엄지로 누르기 충분히 큰가. 셋째, 예약 폼이 스크롤 몇 번 안에 나오는가. 대부분의 방문자는 폰으로 들어오므로, 폰에서의 모습이 사실상 사이트의 진짜 모습입니다.

반응형이란 화면 크기에 맞춰 레이아웃이 스스로 재배치되는 성질입니다. PC에서는 3열로 늘어선 가격표가 폰에서는 1열로 쌓이는 식입니다. 스튜디오의 빌드는 기본적으로 반응형으로 만들어지지만, 내용을 많이 고치다 보면 어긋나는 지점이 생길 수 있습니다.

점검에서 찾은 문제는 리파인으로 해결합니다. '모바일에서 시간표가 잘려 보여. 모바일에서는 세로로 쌓이게 해줘'처럼 화면 크기와 증상을 함께 말하는 것이 요령입니다. 미리보기 창의 폭을 좌우로 늘였다 줄였다 하며 레이아웃이 따라 움직이는지 보는 것도 빠른 점검법입니다.

사이트가 완성됐다면 언어를 늘릴 차례입니다. 번역 기능은 보이는 텍스트 전체를 지정한 언어로 자연스럽게 옮기고, 디자인과 기능은 그대로 둡니다. 한국어로 완성한 필라테스 사이트가 클릭 몇 번으로 영어, 일본어, 중국어 버전을 갖게 됩니다.

관광객이 오는 동네의 매장, 해외 고객을 노리는 서비스라면 이 기능이 곧 매출입니다. 언어별 버전을 각각 저장해 두면 손님에 따라 골라 내보낼 수 있습니다.

말로 고치는 리파인 말고, 손으로 고치는 길도 있습니다. 클릭 편집을 켜면 미리보기의 요소를 직접 클릭해서 선택하고, 글자를 그 자리에서 바로 고칠 수 있습니다. 헤드라인 오타 하나 고치자고 채팅을 보낼 필요가 없어지는 겁니다.

드래그로 옮기고, 핸들을 잡아 크기를 바꾸고, 인스펙터에서 색과 간격을 정밀하게 조정하는 심화 기능도 있습니다. 자세한 것은 클릭 편집 전용 코스에서 다루니, 오늘은 켜서 글자 하나를 직접 고쳐 보는 것까지만 해 봅시다.

실수로 망가뜨릴까 걱정하지 마세요. 되돌리기가 있고, 최악의 경우에도 재생성은 무료입니다. 마음껏 만져 보는 사람이 빨리 늡니다.

사이트에 적힌 내용, 정말 다 맞을까요? AI가 쓴 초안에는 그럴듯하지만 부정확한 문장이 섞일 수 있습니다. 효과를 과장하는 표현이나 확인되지 않은 수치가 대표적입니다. 손님 앞에 서는 사이트라면 내보내기 전에 걸러야 합니다.

신뢰성 검증은 이를 4단계로 해냅니다. 1단계, 사이트 속 주장을 추출합니다. 2단계, 구글 검색과 대조해 사실을 확인합니다. 3단계, 코드를 샌드박스에서 실제로 실행해 봅니다. 4단계, 리포트와 수정 제안을 내놓습니다. 문제가 된 문장을 어떻게 고치면 되는지까지 제안해 주므로, 받아들일지 말지만 결정하면 됩니다.

완성한 빌드는 바이브캠퍼스 밖으로도 나갈 수 있습니다. 임베드 기능이 복사해 붙이기만 하면 되는 코드를 만들어 주고, 그 코드를 기존 홈페이지, 블로그, 쇼핑몰 소개 페이지 어디에든 붙이면 그 자리에 내 빌드가 나타납니다.

이미 운영 중인 홈페이지가 있는 사장님에게 특히 유용합니다. 홈페이지를 갈아엎지 않고도 예약 폼이나 이벤트 페이지 같은 새 기능을 액자 걸듯 추가할 수 있으니까요. 만들기는 스튜디오에서, 보여 주기는 어디서든. 이것이 임베드의 정신입니다.

이제 처음부터 끝까지 혼자 완주할 시간입니다. 아래 직접 해보기 버튼을 누르면 웨딩 포토그래퍼 포트폴리오 사이트 프롬프트가 채워져 있습니다. 풀스크린 갤러리, 패키지 가격, 문의 폼. 사진이 주인공인 사이트라 이 코스에서 배운 기술이 전부 쓰입니다.

천천히, 그러나 전 공정을 밟으세요. 완성하고 나면 아래 펼쳐보기에서 모범 경로와 대조해 보면 됩니다.

돌아보면 긴 길을 왔습니다. 템플릿 고르기에서 시작해 구조, 카피, 이미지, 스킬, 두 기종 점검, 반응형, 4개국어, 검증, 임베드까지. 이 전 공정을 아는 사람은 이제 웹사이트가 두렵지 않습니다. 필요할 때마다 꺼내 쓰는 무기가 됐으니까요.

이 무기는 여러분 사업에만 쓰라는 법도 없습니다. 주변의 가게, 지인의 스튜디오, 동네의 공방까지, 사이트가 필요한 곳은 어디에나 있습니다. 다음 코스에서는 데이터가 살아 있는 앱으로 한 단계 더 올라갑니다.