클로드코드로 홈페이지 만들기, 코딩 없이 10분

AI에 우리 가게가 나오려면, 홈페이지부터입니다

요즘 손님들이 검색하는 방식이 바뀌고 있습니다. 예전엔 네이버에 쳐보고 블로그를 읽었다면, 이제는 AI한테 그냥 물어봅니다. “○○동에서 허리 치료 잘하는 데 어디야” 하고 묻고, AI가 몇 군데를 골라서 답합니다.

그럼 AI는 그 답을 어디서 가져올까요. 웹에서 읽을 수 있고, 정보가 정리되어 있는 곳입니다. 상호와 위치, 무엇을 하는지, 얼마인지, 자주 묻는 질문까지 구조가 잡혀 있는 페이지가 인용되기 쉽습니다.

여기서 불리해지는 게 있습니다. 네이버 블로그는 바깥에서 잘 안 읽히고, 인스타는 사진 위주라 가져갈 글이 별로 없습니다. 둘 다 그 플랫폼 안에서는 잘 돌지만, 밖에서 우리 가게 정보를 긁어가기엔 맞지 않습니다.

결국 내가 직접 손댈 수 있고 구조를 잡을 수 있는 곳은 홈페이지 하나입니다.

그런데 홈페이지는 시작부터 벽입니다. 블로그나 인스타는 그냥 가입하고 올리면 되는데, 홈페이지는 어디서부터 손대야 할지 감이 안 옵니다. 견적을 받아보면 대부분 몇백이 나오고, 나중에 전화번호 하나 바꾸는 것도 업체에 연락해야 합니다. 그러다 미루고 결국 안 만듭니다.

오늘은 혼자서 꽤 쓸 만한 홈페이지를 만드는 방법을 알려드리겠습니다. 지난 글에서 다룬 클로드코드를 씁니다. 코딩은 한 줄도 안 합니다. 채팅으로 시키기만 합니다.

1단계. 따라 할 홈페이지를 하나 정합니다

맨땅에서 “예쁘게 만들어줘”라고 하면 결과가 안 좋습니다. 사람도 그렇습니다. 어떤 느낌인지 모르면 못 만듭니다.

그래서 마음에 드는 홈페이지를 하나 찾습니다. 같은 업종이면 제일 좋고, 아니어도 상관없습니다. 네이버나 구글에 “○○ 업종 + 홈페이지”로 검색해서 마음에 드는 곳을 하나 고르시면 됩니다.

고르셨으면 주소창의 주소를 복사해 둡니다. 그게 전부입니다.

따라 한다는 건 구성과 분위기를 참고한다는 뜻입니다. 남의 글이나 사진을 그대로 가져오면 안 됩니다. 내용은 우리 것으로 채웁니다.

2단계. 우리 가게 정보를 정리합니다

여기가 사실 제일 중요한데, 많이들 여기서 막힙니다. 클로드코드를 켜놓고 뭘 써야 할지 몰라서 가만히 있게 됩니다.

저희는 고객사 원고를 쓸 때 설문지를 하나 드립니다. 질문에 답만 하면 원고 재료가 모이는 방식입니다. 그중에서 홈페이지 만들 때 꼭 필요한 것만 10개로 줄여봤습니다.

상호명, 업종, 주소, 전화번호, 영업시간처럼 보면 바로 쓸 수 있는 것이 절반입니다. 문제는 나머지 절반인데, 여기서 결과물의 질이 갈립니다. 세 가지만 짚고 가겠습니다.

첫째, 우리만의 강점. 여기를 성의 없이 쓰면 결과물도 뻔해집니다. “친절합니다” 같은 말은 아무 데나 다 있어서 아무 도움이 안 됩니다. 사소해 보여도 구체적인 것이 낫습니다. 원장이 20년째 직접 본다든지, 주차가 30대 된다든지, 야간에도 한다든지. 이런 게 홈페이지에서 손님을 잡습니다.

둘째, 손님이 자주 묻는 것. 상담이나 전화로 자주 받는 질문을 그대로 적으시면 됩니다. “비용이 얼마나 드나요”, “아프지 않나요”, “주차 되나요” 같은 것들입니다. 이게 홈페이지 아래쪽 자주 묻는 질문이 됩니다. 앞에서 말씀드린 AI가 읽어가기 좋은 형태가 바로 이 부분이고, 손님이 전화하기 전에 미리 답을 보게 되니 응대도 줄어듭니다.

셋째, 쓰면 안 되는 표현. 병원이나 의원이시면 반드시 적으셔야 합니다. 의료 광고는 “최고”, “1등”, “완치” 같은 말을 쓰면 안 됩니다. 적어두지 않으면 AI가 보기 좋으라고 그런 말을 넣습니다. 미리 적어두면 알아서 피해서 만듭니다.

3단계. 클로드코드에 통째로 넣습니다

이제 클로드코드를 켭니다. 지난 글에서 만든 폴더를 그대로 열어도 되고, 새로 하나 만드셔도 됩니다.

채팅창에 1단계에서 복사한 주소와 2단계에서 채운 답을 같이 붙여넣고 시킵니다. 이렇게 쓰시면 됩니다.

마지막 세 줄이 중요합니다. “HTML 파일 하나로”라고 해야 더블클릭만으로 열립니다. 요즘은 손님 대부분이 휴대폰으로 보기 때문에 모바일 가독성도 꼭 넣으셔야 하고, “사진은 자리만 잡아줘”라고 하면 사진이 없어도 빈 곳 없이 완성됩니다.

저는 이렇게 넣어봤습니다.

이 글에 나오는 바른솔한의원은 설명을 위해 지어낸 업체입니다. 실제로 있는 곳이 아닙니다. 그리고 보시면 아시겠지만 정보도 많이 부족한 상태입니다. 원장 경력이나 시설, 실제 진료 과정 같은 게 다 빠져 있습니다. 여기에 우리 가게의 진짜 내용이 더 들어갈수록 결과물은 확실히 좋아집니다. 이건 어디까지나 “이 정도만 줘도 이만큼은 나온다”를 보여드리는 예시로 봐주세요.

4단계. 파일이 만들어지는 걸 지켜봅니다

보내고 나면 클로드코드가 알아서 일을 시작합니다. 참고한 홈페이지를 읽고, 구성을 잡고, 파일을 만듭니다. 화면에 글자가 계속 올라가는데 읽으실 필요 없습니다. 기다리시면 됩니다.

중간에 “파일을 만들어도 되냐”고 물어보면 허락해 주시면 됩니다. 지난 글에서 다룬 권한 확인입니다. 처음 몇 번만 물어보고 그다음부터는 편해집니다.

다 되면 무엇을 어떻게 만들었는지 요약해서 알려줍니다. 여기서 눈여겨볼 게 두 가지입니다.

하나는 규제 부분입니다. 10번에 적어둔 대로 최고·1등·완치 같은 말을 쓰지 않았고, 효과를 단정하는 문구도 넣지 않았다고 알려줍니다. 미리 적어두면 이렇게 알아서 피합니다.

다른 하나는 직접 채워야 할 자리입니다. 주소 번지수, 전화번호, 원장 경력처럼 제가 대충 넣은 것들을 “실제와 다르니 수정하라”고 짚어줍니다. 이걸 그대로 두면 안 됩니다.

5단계. 더블클릭하면 내 홈페이지가 뜹니다

폴더를 열어보면 HTML 파일이 하나 생겨 있습니다. 그걸 더블클릭합니다.

인터넷 창이 열리면서 홈페이지가 나옵니다.

제가 쓴 건 “원장이 15년째 모든 진료를 직접 봅니다” 한 줄이었는데, 그게 첫 화면 문구가 되어 있습니다. 전화번호는 오른쪽 아래에 계속 떠 있고, 위쪽 메뉴도 진료 항목대로 잡혀 있습니다.

그리고 아래로 내려보면 자주 묻는 질문이 이렇게 정리되어 있습니다.

맨 처음에 말씀드린 부분이 여기입니다. 질문과 답이 짝을 지어 정리된 형태, 이게 AI가 읽어가기 좋은 구조입니다. 제가 8번에 적은 다섯 줄이 그대로 이렇게 자리를 잡았습니다.

이게 10분 전까지 없던 것입니다.

아직 내 컴퓨터에서만 보입니다. 남한테 주소를 보내도 안 열립니다. 인터넷에 올리는 건 2편에서 합니다.

6단계. 고치는 것도 채팅으로 합니다

여기서부터가 진짜입니다. 만든 걸 보면 반드시 고치고 싶은 데가 나옵니다. 그때 파일을 열어서 코드를 찾을 필요가 없습니다. 그냥 말하면 됩니다.

이런 식으로 시키시면 됩니다.

• 맨 위 색을 좀 더 진한 남색으로 바꿔줘
• 전화번호를 화면 제일 위에도 크게 넣어줘
• 가격표를 표로 만들어줘
• 휴대폰에서 글씨가 작아 보이니까 조금 키워줘
• 맨 위 사진 자리에 폴더에 넣어둔 사진 넣어줘

마지막 줄을 눈여겨봐 주세요. 아까 “사진은 자리만 잡아줘”라고 해서 지금은 빈칸으로 있는데, 가게 사진을 폴더에 넣고 말하면 그 자리에 들어갑니다. 사진을 직접 옮겨 붙일 필요가 없습니다. 지난 글에서 말씀드린 대로 이 채팅은 내 컴퓨터의 폴더를 직접 보기 때문입니다.

고치고 나면 아까 그 파일을 새로고침만 하면 바뀐 게 보입니다. 마음에 들 때까지 반복하시면 됩니다.

저는 초록색이던 걸 갈색 계열로 바꿔달라고 해봤습니다.

색만 바뀐 게 아니라 맨 위에 야간진료·주차 안내 줄이 하나 더 생겼습니다. 강점에 적어둔 내용을 눈에 띄는 자리로 올린 겁니다. 이런 건 시키지 않아도 알아서 하는데, 마음에 안 들면 그것도 말로 빼면 됩니다.

업체에 맡겼으면 전화하고, 기다리고, 비용이 붙었을 일입니다. 그게 말 한마디로 즉시 끝납니다. 홈페이지를 안 만들게 되는 진짜 이유가 만드는 비용이 아니라 고칠 때마다 드는 품이었는데, 그게 사라집니다.

여기까지 해보시면 감이 옵니다

오늘 한 건 홈페이지 한 장입니다. 그런데 해보시면 아실 겁니다. 같은 방식으로 두 번째, 세 번째도 만들 수 있습니다. 설문지만 다시 채우면 됩니다.

그리고 처음에 말씀드린 것으로 돌아가면, 10문항을 성의 있게 채운 게 그대로 값을 합니다. 상호와 위치, 하는 일과 가격, 자주 묻는 질문이 한 페이지에 정리되어 있는 것. 그게 AI가 읽어가기 좋은 형태입니다. 대단한 기술이 아니라 있어야 할 정보가 제자리에 있는 것이 전부입니다.

그리고 오늘 쓴 설문지는 10개짜리 요약본입니다. 저희가 실제로 고객사 원고를 쓸 때 받는 35문항짜리 원본이 따로 있습니다. 홈페이지뿐 아니라 블로그나 플레이스 글까지 한 번에 쓸 수 있는 양식인데, 홈페이지를 여러 개 편하게 운영하는 자세한 가이드와 함께 곧 무료로 배포하겠습니다. 오늘 글로는 극히 일부만 담았습니다.

그전에 우리 업종에 어떻게 붙일 수 있을지 궁금하시면 편하게 물어보세요.