Squarespace 요금제가 Core 이상이라면 댓글은 두 번 붙여넣으면 끝

가능한지는 요금제가 정한다

Squarespace(스퀘어스페이스) 요금제는 넷이고, 이 글의 기준선은 첫째와 둘째 사이에 있습니다. Basic 에도 Code Block 은 있습니다. 다만 이 블록이 받는 것은 일반 텍스트, HTML, Markdown, CSS 까지입니다. <script> 태그를 넣어도 실행되지 않습니다. 사이트 전체에 코드를 내보내는 Header, Footer 칸, 곧 code injection 도 Basic 에는 없습니다.

Squarespace 는 이 내용을 두 군데에 적어 두었습니다. 요금 비교표에는 Code injection 과 고급 코드 블록이 Basic 에서는 빠지고 Core, Plus, Advanced 에는 포함된다고 나옵니다. 도움말 센터도 같습니다. code injection 은 Core, Plus, Advanced 와 일부 구 결제 요금제에서 쓸 수 있고, 코드 블록 안의 자바스크립트나 iframe 은 Core, Plus, Advanced 그리고 판매가 끝난 Business, Commerce 등급에서 쓸 수 있다고 적혀 있습니다.

Business, Commerce Basic, Commerce Advanced 는 그 도움말 문서들에 아직 이름이 남아 있습니다. 지금은 판매하지 않는 구 요금제입니다. 사이트가 그중 하나를 쓰고 있다면 커스텀 코드는 이미 쓸 수 있고, 아래 내용도 그대로 적용됩니다.

패널을 열기 전에 댓글창부터 본다

패널은 둘, 하는 일은 서로 다르다

Squarespace 는 사이트 전체에 내보내는 코드와 페이지 안에 놓는 코드를 다른 곳에서 관리하며, 이 설치에는 양쪽을 하나씩 씁니다. 로더는 위젯이 뜰 수 있는 모든 페이지에 있어야 하므로 Code Injection 으로 갑니다. 마운트 요소는 댓글창이 놓일 지점을 표시하므로 페이지 본문의 Code Block 으로 갑니다.

첫 실수는 보통 이 둘을 뒤바꾸면서 생깁니다. 사이트 전체에 내보내는 Footer 칸에 마운트 div 를 넣으면 모든 페이지 아래쪽에 댓글창이 하나씩 생기고, 모두 같은 대화를 씁니다. 참고로 이 글의 패널 이름은 Squarespace 도움말 문서에 나오는 영어 표기를 그대로 적었습니다. 계정 언어를 한국어로 두면 같은 자리에 번역된 이름이 보이지만, 도움말 센터에서 해당 문서들을 한국어로 제공하지 않아 번역된 라벨을 옮겨 적지는 않았습니다. 괄호 안은 라벨이 아니라 그 칸의 역할입니다.

패널을 하나씩 열어 설치한다

1. squarespace.com 기본 주소도 도메인 하나로 센다

   Squarespace 사이트는 만들어진 날 something.squarespace.com 형태의 기본 주소를 받고, 커스텀 도메인을 연결하기 전까지 그 주소로 응답합니다. 따라서 체험판 사이트나 아직 실제 도메인을 붙이지 않은 개편 작업에서는 주소창에 표시되는 주소가 나중에 공개할 주소와 다릅니다. BootSignal 은 댓글창을 불러오기 전에 location.hostname을 site id 에 등록된 도메인 목록과 맞춰 봅니다. 따라서 이 둘은 이름이 두 개인 사이트 하나가 아니라 대시보드의 별개 항목 둘입니다. 지금 작업하는 주소를 넣고, 커스텀 도메인을 연결하는 날 그 주소를 추가한 뒤, 기본 주소로 아무것도 열리지 않게 되면 기본 주소를 지우면 됩니다. 대시보드는 도메인 옆에 site id 를 함께 보여 주는데, 이 글에서 BootSignal 쪽 값을 적어 넣는 자리는 그 문자열 하나뿐입니다.

2. 로더를 Code Injection 에 붙여넣는다

   Squarespace 대시보드에서 Website 를 열고, Website Tools 를 거쳐 Code Injection(사이트 전체에 코드를 내보내는 칸) 으로 들어갑니다. 태그는 FOOTER 칸에 넣고 저장합니다. Squarespace 는 이 칸의 내용을 사이트의 모든 페이지에서 닫는 body 태그 앞에 넣어 줍니다. Header 칸에 넣어도 되지만, Footer 에 두면 스크립트가 첫 화면을 그리는 과정을 가로막지 않습니다.

   코드복사

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>

3. 댓글창이 놓일 자리에 Code Block 을 넣는다

   해당 페이지나 블로그 글을 편집 상태로 열고, 본문 아래 섹션에 마우스를 올려 Add block 이나 + 버튼을 누른 다음 블록 메뉴에서 Code 를 고릅니다. 연필 아이콘을 눌러 블록 편집창을 열고 텍스트 칸에 마운트 요소를 붙여넣습니다. page-key는 그 글에만 해당하며 앞으로 바뀌지 않을 값으로 고쳐 씁니다. 글의 슬러그가 무난합니다.

   코드복사

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

4. Display Source 를 끄고 Apply, 그다음 저장

   블록 편집창에는 Display Source(소스를 글자로 보여 주기) 토글이 있습니다. 켜 두면 이 마크업을 눈에 보이는 글자로 표시하고, 끄면 실행합니다. 여기서는 꺼야 합니다. 블록에서 Apply 를 누르고 페이지를 저장합니다.

5. 시크릿 창에서 확인한다

   Squarespace 로그인 세션이 없는 상태에서 공개 주소를 엽니다. 사실을 알려 주는 화면은 그것뿐이며, 그 이유는 바로 뒤의 두 절에 있습니다.

붙여넣은 코드가 글자로 보이면 Display Source다

댓글창이 있어야 할 자리에 꺾쇠괄호가 그대로 한 줄 떠 있다면 원인은 이것입니다. 예외 없이 이것입니다. Code Block 은 두 가지 역할을 겸합니다. 마크업을 실행할 수도 있고, 독자에게 보여 주는 코드 예시로 표시할 수도 있습니다. Display Source 가 그중 어느 쪽으로 쓸지 정합니다. 켜 둔 채로 두면 Squarespace 는 <div data-bootsignal="comments">를 방문자에게 그대로 보여 줍니다.

이 토글은 사이트 설정이 아니라 블록 편집창 안에 있어 블록마다 따로 있습니다. 석 달 뒤에 추가하는 Code Block 도 자기 토글을 갖고 시작하므로 같은 문제에 또 걸릴 수 있습니다. 확인하는 데는 두 초가 걸립니다. 화면 쪽에서 원인을 찾으면 반나절이 갑니다. 고장 난 곳이 없기 때문입니다.

편집 화면은 설치 성공을 판단할 자리가 아니다

Squarespace 는 로그인한 세션과 방문자 세션을 다르게 다루며, 커스텀 코드가 바로 둘이 갈리는 지점입니다. 위젯이 고장 났다고 결론 내리기 전에 알아 둘 것이 넷 있습니다.

• 로그인한 상태에서는 스크립트가 돌지 않는 경우가 많습니다. Squarespace 도 담백하게 적어 두었습니다. 보안 조치로, 방문자에게는 보이는 코드가 로그인 상태에서는 나타나지 않을 수 있습니다.
• Code Block 편집창에는 Preview in Safe Mode 버튼이 있습니다. 임베드한 것만 따로 그려 주니, 적어도 마크업이 온전한지는 여기서 확인할 수 있습니다.
• 커스텀 코드가 편집기를 걸고 넘어지면 "We detected an error loading your site preview" 메시지와 Disable Scripts in Preview 버튼이 나옵니다. 그 버튼을 누르면 로그인한 동안에는 커스텀 코드가 그려지지 않고, 방문자에게는 그대로 보입니다. Squarespace 는 미리보기에서 스크립트를 다시 켜는 것을 권하지 않는데, 사이트 편집을 방해할 수 있기 때문입니다.
• Squarespace 세션이 없는 시크릿 창에서 열어 보는 것, 이 확인만이 질문을 끝냅니다.

구독은 하나, 블록은 나중에 몇 개든

댓글만 따로 팔지는 않습니다. 등록 도메인 하나에 월 $20 또는 연 $200, 이 한 줄이 카탈로그 전체를 아우릅니다. 오늘 기준 유료 위젯 34개, 그 옆의 무료 브라우저 도구 33개, 그리고 구독하는 동안 새로 나오는 것까지 포함됩니다. 이 금액의 어느 항목도 페이지뷰나 댓글 수를 세지 않으므로, 예상치 못하게 퍼진 글도 아무도 읽지 않은 글과 같은 값을 냅니다. Squarespace 사이트를 하나 더 두면 도메인이 하나 더 생기는 것이고, 도메인은 같은 대시보드에서 추가합니다.

Squarespace 에서 이것이 실제로 뜻하는 바는 두 번째 위젯에 필요한 것이 Code Block 하나뿐이라는 점입니다. 로더는 이미 Code Injection 에 있으므로 같은 글 아래에 별점을 붙이려면 새 블록에 div 하나만 넣으면 됩니다.

이 범주의 위젯 상당수가 반대로 하므로 분명히 적어 둡니다. 리뷰월은 별점 위젯이 실제로 받은 후기로만 벽을 채우며, 인용을 지어낼 방법이 아예 없습니다. 소셜 프루프 토스트는 사이트에 이미 쌓인 실제 활동만 다시 보여 주므로, 오하이오의 누군가가 방금 구매했다는 팝업을 만들어 내지 않습니다.

아직 설치보다 선택에 가까운 단계라면, 호스팅형 댓글 시스템은 대안 정리 지면 에서 가격까지 비교할 수 있습니다.

한 달 뒤에 발목 잡는 것들

• 글 하나에 thread id 하나입니다. data-thread-id 를 공유하는 Code Block 두 개는 대화도 공유합니다. 글 슬러그를 그대로 쓰면 다음에 사이트를 열어 보는 사람에게도 규칙이 바로 보입니다.
• 간격이나 폭 때문에 블록 주변에 CSS 를 쓸 일이 생기면 Code Injection 헤더가 아니라 CSS Editor 에 넣습니다. Squarespace 는 Ajax 페이지 로딩 탓에 주입한 CSS 가 적용되지 않을 수 있다고 경고하면서, 이런 경우에는 CSS Editor 를 쓰라고 안내합니다.
• Code Block 하나에 최대 400 KB, 문자로는 약 300,000자가 들어갑니다. 한 줄짜리 마운트가 거기 닿을 일은 없지만, 나중에 더 무거운 것을 붙여넣는다면 그게 천장입니다.
• 버전 7.0 사이트에만 해당하는 이야기입니다. Index 안에 들어 있는 페이지의 코드는 그려지지 않을 수 있습니다. Squarespace 가 안내하는 우회로는 그 페이지를 Index 밖으로 빼내고 로그아웃한 뒤 확인하는 것입니다.
• 커스텀 코드는 Squarespace 지원 범위 밖이고, 플랫폼 업데이트가 코드 기반 커스터마이즈를 깨뜨릴 수 있다고 그들도 경고합니다. 템플릿을 바꾼 뒤의 확인은 내가 해야 할 몫입니다.

개편 점검표에 습관 하나를 넣어 두면 좋습니다. 템플릿이나 섹션을 손댄 뒤에는 글 하나를 시크릿 창으로 열어 댓글창이 그대로 있는지 확인합니다. 레이아웃이 바뀌면 Squarespace 가 블록을 옮기는데, 보이지 않는 섹션으로 들어간 Code Block 은 댓글까지 데리고 갑니다.