코드 주입, 코드 블록, 사용자 지정 CSS와 같은 사용자 지정 코드 옵션으로 사이트 디자인을 개선하세요.

사용자 지정 코드를 사용하여 사이트를 더욱 세밀하게 맞춤 설정할 수 있습니다. 사용자 지정 코드를 추가하기 전에 코딩 지식을 쌓는 것을 강력히 권장합니다.

팁: 사이트에 코드를 추가하는 것은 Squarespace 지원 범위를 벗어나는 고급 수정 작업입니다. 코딩에 대한 지식이 있고 추가적인 도움이 필요하다면 Squarespace Forum을 방문하세요. 보다 기술적인 질문에 답변할 수 있는 크리에이티브 전문가들의 커뮤니티 Squarespace Circle에 가입할 수도 있습니다. 코딩 지식은 없지만 사이트에 사용자 지정 코드를 추가하고 싶다면 Squarespace Expert를 고용하는 것을 고려해 보세요.

비디오 시청하기

코드 블록

특정 페이지에 코드 블록을 추가하여 레이아웃이나 디자인을 변경하고, 서드파티(타사) 위젯을 삽입하거나, 다른 블록만으로는 구현하기 어려운 방식으로 페이지를 맞춤 설정할 수 있습니다. 코드 블록을 사용하여 HTML과 Markdown을 렌더링하거나 코드 스니펫을 표시할 수도 있습니다.

코드 블록은 활용도가 높으며 HTML과 Markdown 형태로 코드를 구현해 줍니다. 코드 스니펫을 표시할 때도 코드 블록을 사용할 수 있습니다. 코드 블록은 다음과 같은 코드 기반 사용자 지정에 흔히 사용됩니다.

• Issuu 등의 서비스를 통해 문서 삽입
• MLS 검색 추가

모든 요금제에서 코드 블록은 일반 텍스트, HTML, Markdown, CSS 코드를 태그로 감싸 지원합니다.

코드 블록에 JavaScript 또는 iframe을 추가하는 기능은 코어 요금제, 플러스 요금제, 어드밴스드 요금제 및 일부 레거시(기존) 요금제에서 이용할 수 있습니다. 내게 맞는 Squarespace 요금제를 선택하는 방법에 대해 자세히 알아보세요.

코드 주입

코드 주입을 사용하여 사이트의 특정 부분을 개선하는 HTML 및 스크립트를 추가할 수 있습니다. 여기에는 실시간 채팅 서비스, 사용자 지정 이메일 서비스를 위한 도메인 인증, 또는 사이트 분석이 포함될 수 있습니다.

코드 주입은 코어 요금제, 플러스 요금제, 어드밴스드 요금제 및 일부 레거시(기존) 요금제에서 이용할 수 있습니다. 내게 맞는 Squarespace 요금제를 선택하는 방법에 대해 자세히 알아보세요.

CSS 에디터

CSS 에디터를 사용하면 기본 제공 스타일링 옵션 외에도 사이트를 사용자 지정할 수 있습니다. CSS는 글꼴, 색상 및 배경을 변경할 때만 사용해야 합니다. 다른 CSS 변경은 사이트에 문제를 일으킬 수 있습니다.

CSS 에디터는 모든 요금제에서 이용할 수 있습니다.

임베드 블록

임베드 블록을 사용하면 비디오, Tweet, 페이스북 게시물 등 외부 콘텐츠를 사이트에 추가할 수 있습니다.

임베드 블록은 oEmbed 표준을 사용하는 외부 사이트와 서비스에서 콘텐츠를 가져옵니다. 더 고급 수준의 코드나 사용자 지정 코드가 있다면 코드 블록을 사용하세요.

모든 요금제에서 임베드 블록을 사용할 수 있습니다.

서버 측 코드가 지원되나요?

아니요. Squarespace는 PHP, Ruby, Ruby on Rails, SQL을 포함한 서버 측 코드를 지원하지 않습니다.

Squarespace 개발자 플랫폼(7.0 버전 전용)

Squarespace 개발자 플랫폼은 기본 제공되는 사용자 지정 코드 도구를 넘어 개발자가 사이트를 사용자 지정할 수 있도록 지원하는 고급 도구입니다. 개발자 플랫폼은 수준 높은 코딩 지식을 갖춘 사람들을 위해 설계되었습니다. 이미 개발자 플랫폼을 사용 중이라면 개발자 문서를 방문하세요.

개발자 플랫폼은 버전 7.0의 코어 요금제, 플러스 요금제, 어드밴스드 요금제에서만 이용할 수 있습니다.

사용자 지정 코드를 붙여 넣을 수 없는 경우

코드를 붙여 넣는 데 문제가 있는 경우 키보드 단축키를 사용해 보세요. 붙여 넣을 영역을 클릭한 후 다음 키를 누르세요.

사용자 지정 코드가 표시되지 않는 경우

사용자 지정 코드가 표시되지 않을 경우 브라우저를 새로 고치세요. 그래도 코드가 표시되지 않는다면 다음과 같은 이유 때문일 수 있습니다.

• 계정에 로그인한 경우 - 보안상의 이유로 계정에 로그인한 상태에서는 방문자에게 코드를 표시되더라도 코드 블록에는 코드가 표시되지 않을 수 있습니다. 이 문제는 보안 연결(https://)을 통해 임베드된 JavaScript를 보려고 할 때 발생합니다. 이를 테스트해 보려면 시크릿 브라우저에서 사이트를 방문해 보세요.
• 코드가 색인 페이지에 있는 경우 - 색인 내 페이지에 코드를 추가한 경우, 코드가 렌더링되지 않을 수 있습니다. 이를 테스트해 보려면 페이지 패널로 이동해 색인에서 페이지를 제거한 후, 시크릿 브라우저를 사용해 사이트를 방문하세요.
• Ajax 로딩을 활성화한 경우 - 가끔 Ajax가 임베드된 사용자 지정 코드, 코드 기반 사용자 지정, 앵커 링크, URL 리디렉션과 충돌하는 경우가 있습니다. 이 문제를 해결하려면 Ajax 로딩을 비활성화해 보세요.

그래도 코드가 작동하지 않을 경우 코드와 코드가 작동하는 방식을 가장 잘 알고 있는 코드 소스에 문의하세요. 서드파티(타사) 코드는 Squarespace 지원 범위를 벗어나므로 Squarespace에서 추가적인 문제 해결을 지원할 수 없습니다.

CORS 오류가 발생하는 경우

브라우저에서 JavaScript를 사용해 요청을 하면 CORS(Cross Origin Resource Sharing) 오류가 발생합니다. 모든 요청은 서버 측 애플리케이션에서 시작되어야 합니다. Squarespace에서는 CORS 요청이 지원되지 않습니다.

코딩 리소스

다음은 Squarespace가 추천하는 신뢰할 수 있는 인기 웹사이트입니다. 튜토리얼, 문제 해결, 참고 가이드로 활용해 보세요.

• W3Schools
• Codecademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse