사이트의 페이지 섹션에 배경 이미지를 추가해 원하는 대로 설정하세요.

사이트 배경의 스타일을 지정하는 방법에는 여러 가지가 있습니다. 첫 번째 옵션은 페이지 섹션에 배경 이미지를 추가하고 다양한 이미지 효과로 이미지를 맞춤 설정하는 것입니다. 이 옵션은 브랜드 이미지에 맞는 페이지 배너와 시각적 요소를 만들 때 유용합니다.

이 가이드는 Squarespace에 업로드한 사진 및 기타 배경 이미지를 추가하고 사용자 지정하는 방법을 설명합니다. 사이트 배경 스타일 지정에서 모든 배경 스타일 지정 옵션에 대해 알아보세요.

이 가이드는 버전 7.1 전용입니다. 사이트가 버전 7.0을 사용 중인 경우 템플릿에 따라 배너 이미지와 배경 비디오를 추가하여 비슷한 효과를 낼 수 있습니다.

비디오 시청하기

시작하기 전에

• 자동 레이아웃, 포트폴리오 섹션, 모든 블록 섹션에서는 배경 이미지 추가 기능이 지원됩니다. 이러한 섹션에는 배경 비디오와 배경 아트를 추가할 수 있습니다.
• 갤러리 섹션에는 배경 이미지를 추가할 수 없지만, 배경색을 추가하거나 슬라이드쇼: 전체 레이아웃을 사용해 유사한 효과를 얻을 수 있습니다.
• 블로그, 코스, 이벤트, 스토어, 비디오 섹션에서는 배경 콘텐츠가 지원되지 않지만, 배경색을 추가할 수 있습니다.
• 섹션에 텍스트나 기타 콘텐츠가 포함되어 있는 경우 배경 앞에서도 여전히 표시되고 읽을 수 있는지 확인하세요. 텍스트 색상을 변경하려면 섹션의 색상 구성표에서 글꼴 조정을 사용하세요.
• 배경 이미지는 섹션에 있는 콘텐츠의 양과 방문자의 브라우저 화면 크기에 따라 자동으로 잘립니다. 이미지가 어떻게 잘리는지 선택하려면 이미지 블록을 사용하세요. 모바일에서 배경 이미지가 어떻게 표시되는지 알아보려면 내 사이트는 모바일 기기에서 어떻게 보이나요?로 이동하세요.

이미지 서식 지정 팁

사이트에 업로드하기 전에 이미지 형식을 확인하세요. 배경 이미지의 경우, 다음 가이드라인을 따라주세요.

• 너비가 1500px에서 2500px 사이인 이미지를 사용하세요.
• 파일 자체에 텍스트가 포함된 이미지를 사용하지 말고 이미지 위에 텍스트를 추가하세요.
• 이미지 위에 텍스트를 추가하고 싶다면 추상적인 패턴이 있는 이미지를 사용하세요.
• 이미지 파일 형식과 이미지 요구 사항은 이미지의 웹 표시 서식 지정 페이지를 참고하세요.

배경 이미지 추가

배경 이미지를 사용해 섹션에 오버레이된 텍스트, 기타 콘텐츠와 대비감을 줄 수 있습니다. 섹션이 페이지 상단에 있을 때는 배너를 만드세요.

섹션 배경 이미지를 추가하는 방법은 다음과 같습니다.

1. 페이지 패널을 열고 편집하려는 섹션이 있는 페이지를 클릭합니다.
2. 왼쪽 상단에서 편집을 클릭합니다.
3. 섹션 위에 커서를 올리고 연필 아이콘을 클릭한 다음 배경을 클릭하세요.
4. 이미지를 클릭한 후 +를 클릭하세요. 드롭다운 메뉴에서 이미지 소스를 선택해 이미지를 업로드하거나, 이전에 업로드한 이미지 재사용, 스톡 이미지 사용, 스톡 배경 사용 중 하나를 선택하세요.
5. (선택 사항) 이미지 효과를 클릭한 후 이미지 효과를 선택합니다.
6. (선택 사항) 배경 너비와 오버레이 투명도를 사용해 이미지 스타일을 지정합니다.
7. (선택 사항) 서식을 클릭해 섹션 높이, 콘텐츠 너비, 콘텐츠 정렬을 변경합니다.
8. (선택 사항) 색상 구성표를 클릭해 오버레이 및 추가된 콘텐츠의 색상 테마를 선택합니다. 자세한 내용은 색상 변경하기를 참고하세요. 이미지를 제거하면 오버레이가 섹션의 배경색이 됩니다.
9. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 나가기를 클릭한 후 저장을 클릭하여 편집기를 닫으세요.

이미지를 추가한 후, 다음을 수행할 수 있습니다:

• 이미지 위에 텍스트 또는 기타 콘텐츠 오버레이
• 이미지 스타일 지정
• 이미지 효과를 추가하십시오
• 이미지 편집
• 이미지의 초점을 설정하세요.
• 교체를 클릭해 이미지 변경
• 이미지 삭제

텍스트 또는 기타 콘텐츠 추가

배경 이미지 위에 텍스트 또는 기타 콘텐츠를 오버레이할 수 있습니다. 추가한 텍스트가 화면 크기나 모바일 기기에 따라 자동으로 조정되어 배경 이미지를 배너로 사용할 때 텍스트를 추가하고 싶다면 이 방법이 유용합니다.

팁: 사이트 상단에 텍스트만 있는 메시지를 원한다면 배너 대신 공지 표시줄을 추가하세요.

Squarespace는 이미지 파일 자체에 텍스트가 포함된 배경 이미지를 사용하는 것을 권장하지 않습니다. 그 이유는 다음과 같습니다.

• 컴퓨터가 텍스트를 읽을 수 없어 검색 엔진이 텍스트를 색인화해 결과로 표시할 수 없습니다.
• 브라우저 너비에 맞게 이미지 모양이 바뀌면서 텍스트 일부가 잘릴 수 있습니다.

텍스트 또는 기타 콘텐츠를 추가하는 방법은 다음과 같습니다.

1. 배경 이미지가 있는 페이지에서 편집을 클릭합니다.
2. 블록 추가 또는 삽입 지점을 클릭해 텍스트 블록을 추가합니다. 블록을 클릭해 텍스트를 추가한 후 서식 드롭다운을 사용해 단락 스타일을 선택합니다.
3. 섹션에 텍스트 블록이나 다른 콘텐츠를 추가합니다(예: 버튼 블록).
4. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 나가기를 클릭한 후 저장을 클릭하여 편집기를 닫으세요.

텍스트 스타일

배경 이미지에 텍스트가 표시되는 방식은 디자인 패널의 사이트 스타일 설정에 따라 설정됩니다.

• 사이트의 글꼴을 변경하려면 글꼴 패널에서 글꼴 팩과 기본 크기를 선택하세요. 스타일 지정으로 스크롤해 특정 텍스트에 스타일을 지정할 수 있습니다. 자세한 내용은 글꼴 변경하기를 참고하세요.
• 글꼴 색상을 변경하려면 색상 패널에서 팔레트와 테마를 선택하세요. 섹션 테마에서 연필 아이콘을 클릭해 테마 내 특정 요소에 스타일을 지정할 수 있습니다. 자세한 내용은 색상 변경하기를 참고하세요.

비디오 시청하기

배경 이미지 스타일 지정

배경 이미지의 스타일을 지정하려면 페이지에서 편집을 클릭하고 배너 섹션에서 연필 아이콘을 클릭한 후 배경을 클릭합니다. 여기에서 배경 너비와 오버레이 투명도를 설정할 수 있습니다.

배경 너비

배경 너비에는 다음과 같은 옵션이 있습니다.

• 여백 없음을 선택하면 이미지가 브라우저 창의 한쪽 가장자리에서 다른 쪽 가장자리까지 확장되어 사이트의 전체 너비에 걸쳐 이미지가 표시됩니다. 이 설정은 배너 이미지에 일반적으로 사용됩니다.
• 인셋을 선택하면 이미지가 약간 안쪽에 배치되며 이미지 주위에 테두리가 생성됩니다.

이미지를 인셋으로 설정하면 테두리 색상을 지정할 수 있습니다.

오버레이 투명도

오버레이 투명도를 사용해 배경 이미지에 오버레이된 색상의 투명도를 설정할 수 있습니다.

어느 정도의 투명도가 적당한지는 정해져 있지 않습니다. 다양한 설정을 시도해 보며 본인이 원하는 투명도를 찾아보도록 하세요. 일반적으로 섹션에 많은 양의 콘텐츠가 있는 경우에는 투명도를 낮게 설정하는 것이 좋습니다. 그러면 배경 이미지와 콘텐츠를 구분하는 데 도움이 됩니다.

투명도의 색상은 섹션 테마의 배경 오버레이 조정을 통해 설정할 수 있습니다. 자세한 내용은 색상 변경하기를 참고하세요.

참고: 배경이 투명한 .png 파일을 업로드하면 브라우저는 항상 이미지 뒤에 흰색 배경을 표시합니다. 이 배경색을 변경하려면 사이트에 이미지를 업로드하기 전에 서드파티(타사) 이미지 편집 소프트웨어를 사용해 이미지를 편집해야 합니다.

배경 이미지 크기 조정

배경 이미지의 높이를 변경하는 방법은 다음과 같습니다.

1. 페이지에서 편집을 클릭한 후 배경 이미지 섹션의 연필 아이콘을 클릭합니다.
2. 서식 탭의 섹션 높이에서 사전 설정된 높이 중 하나를 선택하거나 ...을 클릭해 원하는 높이를 설정합니다. 플루이드 엔진 섹션을 편집하는 경우 오른쪽 하단에서 파란색 화살표 아이콘을 클릭한 채 끌어당겨 섹션의 그리드 높이를 변경할 수 있습니다.
3. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 나가기를 클릭한 후 저장을 클릭하여 편집기를 닫으세요.

섹션 높이는 컴퓨터와 모바일 기기에서 배경 이미지가 잘리는 방식에 영향을 미칩니다. 원하는 모습을 얻으려면 다양한 높이를 테스트해 보는 것을 권장합니다.

클래식 에디터 섹션에서 배경 이미지 높이는 섹션에 있는 콘텐츠의 양에 따라 달라집니다. 콘텐츠 추가 없이 높이를 높이려면 여백 블록을 추가하세요.

배경 이미지는 일반적으로 사이트 너비에 맞게 확장되지만 주위에 테두리가 포함되도록 배경 이미지 스타일을 지정할 수 있습니다. 이렇게 하면 이미지 너비가 줄어든 것처럼 보입니다.

배경 이미지 효과 추가

배경 이미지를 추가한 후 효과를 추가해 이미지에 보다 스타일리시한 느낌을 줄 수 있습니다. 일부 효과는 애니메이션을 추가해 이미지가 항상 움직이게 만들고, 일부 효과는 방문자가 사이트에서 해당 섹션을 스크롤할 때만 표시됩니다.

이미지 효과를 추가하는 방법은 다음과 같습니다.

1. 섹션 편집기에서 배경 이미지를 추가한 후 배경 탭에서 이미지 효과를 클릭합니다.
2. 메뉴에서 효과를 선택합니다. 효과를 맞춤 설정하려면 설정 아이콘을 클릭해 세부 정보 패널을 엽니다. 효과에 적용한 모든 변경 사항은 사이트 미리 보기에 표시됩니다. 옵션에 관한 자세한 정보는 아래 섹션을 참고하세요.
3. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 나가기를 클릭한 후 저장을 클릭하여 편집기를 닫으세요.

다음 사항을 참고하세요.

• 이미지 효과는 WebGL을 지원하는 브라우저와 기기에서만 표시됩니다. WebGL은 기기의 그래픽 프로세서와 함께 작동하는 도구입니다. 브라우저가 이 기능을 지원하는지 테스트해 보려면 get.webgl.org로 이동하세요. 브라우저가 WebGL을 지원하지 않으면 섹션 배경은 정적으로 유지됩니다.
• 이미지 효과는 배경 아트 또는 배경 동영상에는 적용되지 않으며, 동영상에 모바일 대체 이미지가 사용되더라도 마찬가지입니다.

이미지 효과 스타일

다음과 같은 이미지 효과 중에서 선택할 수 있습니다.

• 없음 - 오버레이 투명도 설정을 제외하고 다른 효과는 적용하지 않음
• 액체 - 이미지에 물결 효과 적용
• 필름 그레인 - 이미지에 애니메이션 정적 오버레이를 추가합니다.
• 시차 - 방문자가 스크롤할 때 이미지가 움직임
• 굴절된 원 - 원형 패턴에 따라 이미지를 굴절시킴
• 굴절된 선 - 직선 패턴에 따라 이미지를 굴절시킴

세부 정보 패널에서 이미지 효과를 맞춤 설정할 수 있습니다. 세부 정보 패널을 열려면 이미지 효과를 클릭한 후 설정 아이콘을 클릭하세요.

옵션과 설정을 스크롤해 원하는 패턴을 찾으세요. 카테고리를 클릭하면 드롭다운 메뉴가 펼쳐져 더 많은 옵션을 확인할 수 있습니다. 이미지 효과의 유형에 따라 다른 카테고리가 표시됩니다.

예를 들어, 다음을 수행할 수 있습니다.

• 효과의 크기와 모양을 편집할 수 있습니다.
• 액체처럼 모션을 사용해 효과의 속도와 방향을 편집할 수 있습니다.

다른 세부 설정은 효과에 따라 다르며, 효과의 핵심 요소를 변경하는 슬라이더와 토글을 포함하고 있습니다. 설정을 무작위로 조합해 실험해 보려면 효과를 선택할 때 셔플 아이콘을 클릭하거나 효과의 세부 정보 패널에서 무작위를 클릭하세요.

각 효과를 테스트해보며 효과가 어떻게 보이고 사이트에서 어떻게 작동하는지 살펴보는 것을 권장합니다.

다음은 액체 효과가 적용된 섹션 배경 이미지의 예시입니다.

배경 이미지 제거

배경 이미지를 제거하는 방법은 다음과 같습니다.

1. 페이지에서 편집을 클릭한 후 배너 이미지 섹션의 연필 아이콘을 클릭합니다.
2. 배경을 클릭합니다.
3. 삭제를 클릭합니다.
4. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 나가기를 클릭한 후 저장을 클릭하여 편집기를 닫으세요.

섹션 배경을 배너로 사용

배경 이미지가 있는 페이지 상단 섹션은 시각적 포인트로 작용하며 콘텐츠의 전체적인 분위기를 설정할 수 있습니다. 일반적으로 이와 같은 이미지를 배너라고 부릅니다.

배너 이미지는 보통 섹션에 다른 콘텐츠 없이 단독으로 표시되거나 제목처럼 간단한 텍스트만 오버레이되어 있습니다. 비디오, 아트 등 다른 유형의 배경을 사용해 배너를 만들어 색다른 미학을 연출할 수도 있습니다.

배너를 사용하는 방법은 달라도 배경 이미지가 있는 섹션과 배너는 동일한 방식으로 작동하므로 아래 가이드에 설명된 단계에 따라 다양한 작업을 수행할 수 있습니다.

• 배너 이미지 추가
• 배너 이미지 위에 콘텐츠 오버레이
• 배너 이미지 스타일 지정
• 배너 이미지 크기 조정
• 배너 이미지 제거