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, 그 한 줄이 카탈로그 전체를 덮습니다. 오늘 기준 유료 위젯 31개, 그 옆의 무료 브라우저 도구 31개, 그리고 구독하는 동안 새로 나오는 것까지 포함입니다. 이 금액의 어느 항목도 페이지뷰나 댓글 수를 세지 않으니, 예상 못 하게 퍼져 나간 글이 아무도 읽지 않은 글과 같은 값을 냅니다. 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 은 댓글까지 데리고 갑니다.