고급 코딩 기술을 사용해 사이트의 스타일과 디자인을 개선하세요.

Squarespace에서는 코딩이나 디자인 전문 지식이 없어도 웹사이트를 구축할 수 있습니다. 블록을 추가하면 코드를 직접 작성하지 않고도 HTML을 사이트에 추가할 수 있습니다. 마찬가지로, 스타일을 변경하면 사이트의 CSS가 변경됩니다. Squarespace 플랫폼은 강력하면서도 유연하며, 기본 제공 스타일 옵션을 사용해 대부분의 디자인 문제를 해결할 수 있습니다.

사이트를 조금 더 원하는 대로 맞춤 설정하려면 사용자 지정 코드를 사용할 수 있습니다. 사용자 지정 코드를 추가하기 전에 코딩 지식을 쌓는 것을 강력하게 권장합니다. 일부 코딩 변경 사항은 사이트의 기본 코드와 충돌할 수 있으며, 이러한 변경 사항의 스타일을 지정하기가 어려울 수 있습니다.

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

비디오 시청하기

사용자 지정 코드를 추가하는 방법

Squarespace는 클라이언트 측 코드를 사이트에 추가하는 기능을 지원합니다. 사용할 수 있는 옵션은 요금제에 따라 다릅니다. 체험판 기간 동안에는 모든 옵션을 사용할 수 있습니다.

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

코드 블록 VS 임베드 블록

임베드 블록은 oEmbed 표준을 사용하는 외부 사이트와 서비스에서 콘텐츠를 가져옵니다. 임베드 블록을 사용해 Facebook 게시물이나 Squarespace에서 지원하지 않는 호스트의 비디오 등의 기본적인 서드파티(타사) 콘텐츠를 사이트에 표시할 수 있습니다.

더 고급 수준의 사용자 지정 코드가 있다면 코드 블록을 사용하는 것이 가장 좋습니다. 코드 블록은 다용도로 사용할 수 있고, 코드를 HTML과 Markdown으로 렌더링할 수 있습니다. 코드 스니펫을 표시할 때도 코드 블록을 사용할 수 있습니다. 다음과 같은 코드 기반 사용자 지정에는 코드 블록을 사용하는 것이 일반적입니다.

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

HTML, JavaScript, CSS

사이트에 추가할 수 있는 일반적인 사용자 지정 코드 유형에 대해 더 알아보세요. 

HTML

웹 페이지에 콘텐츠를 추가하는 데 사용하는 코드입니다. 블록을 추가하면 사이트에 HTML이 추가됩니다. 

JavaScript

웹 페이지에 상호 작용을 추가할 때 사용하는 코드입니다. JavaScript는 백그라운드에서 작동하며 슬라이드쇼, 슬라이더, 라이트박스 등의 기능을 실행합니다.

CSS

CSS는 HTML로 작성된 웹 페이지에 스타일과 디자인을 적용할 때 사용하는 코딩 언어입니다. 모든 Squarespace 템플릿에는 CSS가 내장되어 있고, 모든 템플릿에서 조정 옵션과 스타일 옵션을 사용할 수 있습니다. 사이트 스타일을 변경하면 사이트의 CSS가 변경됩니다. 사이트에 사용자 지정 CSS를 적용하기로 결정했다면 최소한으로만 사용하세요.

CSS 에디터를 사용하여 사용자 정의할 수 있습니다.

• 글꼴
• 색상
• 배경

다음과 같은 요소를 맞춤 설정할 때는 CSS를 사용하면 안 됩니다.

• 패딩(여백)
• 마진
• 플로트
• 크기(블록, 이미지 또는 배너)
• 포지셔닝

사용자 지정 CSS는 128,000자로 제한됩니다.

블록에 대한 HTML 속성에 대해 알아보려면 개발자 문서를 방문하세요.

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

버전 7.0을 사용하는 고급 사용자는 Squarespace 개발자 플랫폼을 사용해 사이트 템플릿의 기본 코드에 액세스할 수 있습니다. 이 플랫폼은 개발자와 디자인 에이전시가 기존 템플릿을 수정하고 백지상태에서 새 템플릿을 만들 수 있도록 설계되었습니다.

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

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

사용자 정의 코드가 나타나지 않는 경우

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

• 계정에 로그인한 경우 - 보안상의 이유로 계정에 로그인한 상태에서는 방문자에게 코드를 표시되더라도 코드 블록에는 코드가 표시되지 않을 수 있습니다. 이 문제는 보안 연결(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

참고: 사용자 지정 코드는 Squarespace의 지원 범위를 벗어납니다. 따라서 Squarespace가 설정이나 문제 해결에 관한 지원을 제공할 수 없습니다. 또한, 코드 기반 솔루션의 경우 기능이나 Squarespace와의 완전한 호환성이 보장되지 않습니다. 여기에는 반응형 디자인이 모바일 기기에서 어떻게 표시되는지, 그리고 모든 템플릿에서 작동하는지 여부도 포함됩니다. CSS 사용자 지정은 플랫폼의 향후 업데이트에서 디스플레이 문제를 일으킬 수도 있습니다. Squarespace가 추가적인 지원을 제공할 수는 없지만 아래에서 올바른 방향을 제시하는 다양한 자료를 살펴볼 수 있습니다.

• 사용자 지정 코드를 추가하는 모범 사례를 알아보세요.
• 코드 기반 사용자 지정에 관한 일반 가이드를 읽어보세요.
• 고객 및 개발자 포럼인 Squarespace Forum을 방문하세요.
• Squarespace Expert를 고용하여 나의 사이트에 맞춤형 코드를 구축하는 데 도움을 받으세요.
• 비즈니스에 가장 적합한 맞춤형 솔루션 개발을 위해 Squarespace의 프리미엄 요급제와 엔터프라이즈급 요금제를 둘려보세요.