웹사이트 빌더 (HTML 위젯)

사용 중인 사이트 빌더가 Clodix에 직접 게시할 방법을 제공하지 않는 경우(Webflow, Squarespace, Framer, GoDaddy, Weebly, BigCommerce, Duda, Drupal, Joomla, Blogger, Lovable이 모두 여기에 해당해요) Clodix는 대신 짧은 코드 스니펫 하나를 드려요. 블로그를 표시하고 싶은 페이지에 한 번만 붙여 넣으면, 게시된 아티클이 자동으로 표시되고 방문자가 아티클을 클릭하면 전체 아티클 화면도 보여 줘요.

코드 가져오기

1. Settings → Publishing integrations를 열고 사용 중인 플랫폼의 타일을 클릭하세요(그 외 다른 사이트라면 HTML widget).
2. 표시된 스니펫을 복사하세요.

붙여 넣는 위치

플랫폼	위치
Webflow	Designer에서 페이지에 Code Embed 요소를 추가하고 스니펫을 붙여 넣은 다음 Save & Close를 클릭하고 사이트를 게시하세요.
Squarespace	블로그를 표시할 페이지에 Code Block을 추가하고 스니펫을 붙여 넣으세요.
Framer	페이지에 Embed(HTML) 레이어를 추가하고 스니펫을 붙여 넣은 다음 게시하세요.
GoDaddy	GoDaddy Website Builder에서 HTML 섹션을 추가하고 스니펫을 붙여 넣은 다음 게시하세요.
Weebly	Embed Code 요소를 페이지로 끌어다 놓고 Edit Custom HTML을 클릭한 다음 스니펫을 붙여 넣으세요.
BigCommerce	Page Builder에서 HTML 위젯을 추가하거나(또는 Script Manager 사용) 스니펫을 붙여 넣으세요.
Duda	Duda 편집기에서 HTML 위젯을 페이지로 끌어다 놓고 스니펫을 붙여 넣으세요.
Drupal	Full HTML 텍스트 형식으로 Custom Block을 추가하고 스니펫을 붙여 넣은 다음 페이지에 배치하세요.
Joomla	페이지에 Custom HTML 모듈을 추가하고 스니펫을 붙여 넣은 다음 저장하세요.
Blogger	Layout → Add a Gadget → HTML/JavaScript로 이동해 스니펫을 붙여 넣고 저장하세요.
Lovable	Lovable 채팅에서 "Create a Blog page at /blog and add this code to it exactly as it is"라고 요청하고 그 뒤에 스니펫을 붙여 넣은 다음 Publish하세요.
그 외 사이트	페이지의 아무 곳이든 </body> 바로 앞에 스니펫을 붙여 넣으세요.

일반 <div id="clodix-articles"></div>와 그 뒤의 스크립트 태그만 있으면, 이름이 알려진 빌더가 아니어도 똑같이 작동해요.

1. Clodix로 돌아와 I've added the code를 클릭하세요.

연결한 후

• Page where you added the widget 입력란을 채우면 Clodix가 앱 안에서 각 아티클의 실제 URL로 바로 연결해 줘요. 선택 사항이지만 유용해요.
• View live를 클릭하면 사이트가 열리고, 위젯에 아티클이 표시되는지 확인할 수 있어요.
• 새 아티클과 수정한 아티클은 위젯에 자동으로 반영돼요. 다시 게시할 필요가 없어요. Clodix는 위젯 스크립트를 최대 5분간 캐시하므로, 새 아티클은 처음에 표시되기까지 몇 분 걸릴 수 있어요.

"코드를 추가했는데 Clodix에서 내 사이트에 없다고 해요"

I've added the code를 클릭하면 위젯이 연결된 것으로 표시될 뿐이에요. 코드 옆의 상태는 방문자의 브라우저가 실제로 페이지에서 위젯을 처음 로드할 때 Not found on your site yet에서 Live on your site로 바뀌어요. 그때까지는 Your articles aren't showing on your site yet 배너도 표시돼요.

I've added the code를 클릭하면 Clodix가 코드 자체도 찾아봐요. 입력한 페이지, 홈페이지, 사이트맵에 있는 페이지를 확인해요. 코드를 찾으면 1분 안에 상태가 Live on your site로 바뀌고, 누구도 페이지를 방문할 필요가 없어요. 찾지 못하면 아래 목록을 차례로 확인해 보세요.

1. 빌더의 편집기가 아니라 일반 브라우저 창에서 게시된 페이지를 열어 보세요. 직접 페이지를 불러오는 것도 방문으로 집계돼요.
2. 붙여 넣은 뒤 사이트를 게시하세요. 대부분의 빌더는 붙여 넣은 코드를 초안이 아니라 게시된 사이트에서만 보여 줘요.
3. 올바른 종류의 블록을 사용하세요. 코드는 HTML, Embed code, Code Embed, Custom HTML 블록에 넣어야 해요(위 표 참고). 일반 텍스트 블록은 코드를 제거해 버려요. 페이지 소스에 <div id="clodix-articles">와 그 뒤의 스크립트가 있어야 해요.
4. 방문자가 보는 페이지인지 확인하세요. 메뉴에 있는 블로그 페이지여야 하고, 숨겨져 있거나 비밀번호로 보호돼 있으면 안 돼요. 다른 페이지에 붙여 넣었다면 아티클은 그 페이지에 표시돼요.
5. 캐시를 지우세요. 캐싱 플러그인, CDN, 호스트 캐시가 코드가 없는 이전 페이지를 계속 보여 줄 수 있어요.
6. 올바른 사이트인지 확인하세요. 계정에 사이트가 여러 개라면 사이트마다 고유한 코드가 있어요. 사용 중인 도메인의 사이트 코드를 붙여 넣으세요.

그래도 해결되지 않나요? 페이지 주소와 사용 중인 플랫폼을 알려 주시고 고객 지원에 문의하세요. 또는 코드를 사이트를 관리하는 분에게 전달하세요.

빌더 자체 편집기 안에서 위젯이 비어 보여요

정상적인 현상이에요. 많은 사이트 빌더(Wix, GoDaddy, Squarespace 등)는 편집하는 동안 붙여 넣은 코드를 샌드박스 미리보기 안에서 렌더링하기 때문에 위젯이 항상 채워지지는 않아요. 아티클을 보려면 빌더의 편집 화면이 아니라 게시된 사이트를 여세요. 위젯이 실제로 작동하는 곳이 바로 거기예요.

FAQ

SEO에 도움이 되나요?

아무것도 없는 것보다는 낫지만, 실제 게시물만큼 강력하지는 않아요. 위젯은 페이지가 로드된 뒤 JavaScript로 아티클을 페이지에 추가하기 때문에, 일부 검색 엔진과 대부분의 링크 미리보기 도구는 처음 로드할 때 빈 페이지로 인식해요. 플랫폼이 직접 게시를 지원한다면(WordPress, Shopify, Wix, Ghost, HubSpot) 그 방법을 사용하세요. 비교는 웹사이트 연결하기를 참고하세요.

위젯 스타일을 내 사이트에 맞출 수 있나요?

위젯은 페이지의 글꼴을 자동으로 따라가고, 뒤에 있는 배경에 맞춰 읽기 쉬운 텍스트 색상을 선택해요(또는 data-theme="light" / data-theme="dark"를 직접 지정할 수도 있어요). 현재로서는 그 이상의 세부적인 스타일 설정은 없어요.

새 아티클이 게시될 때마다 코드를 다시 붙여 넣어야 하나요?

아니요. 스니펫을 한 번만 붙여 넣으면, 새 아티클과 수정한 아티클이 몇 분 안에 자동으로 표시돼요. 따로 하실 일은 없어요.

작은 창 안에서 위젯이 스크롤되나요?

아니요. 방문자가 아티클을 열면 같은 페이지에서 전체 내용을 볼 수 있어요. 데스크톱과 휴대폰 모두에서 블록이 내용에 맞게 늘어나기 때문에 위젯 안에 스크롤바가 생기지 않아요.

코드를 직접 추가할 수 없어요.

사이트를 제작하거나 관리하는 분에게 스니펫을 전달하세요. 한 번만 추가하면 돼요. 그런 분이 없다면 support@clodix.ai로 사이트가 어떤 빌더를 쓰는지 알려 주세요.

위젯을 여러 페이지에 추가할 수 있나요?

네, 같은 스니펫을 원하는 만큼 여러 페이지에 붙여 넣을 수 있어요. 각 페이지에서 같은 아티클 목록을 불러와요.

관련 문서

• 웹사이트 연결하기
• 게시 문제
• RSS 피드