커버 페이지는 단일 화면에 정보를 강렬하게 보여주는 스플래시 페이지입니다. 커버 페이지는 "공사 중" 알림, 제품 출시 공지, 방문자로부터 이메일 주소 수집 등의 용도로 유용합니다.

커버 페이지는 버전 7.0의 모든 웹사이트 및 커머스 요금제에서 사용할 수 있습니다. 현재 독립형 커버 페이지 요금제를 사용 중인 경우, 결제가 활성 상태인 동안 페이지는 계속 표시됩니다. 전체 사이트로 전환하거나 요금제를 취소하거나 만료되는 경우 커버 페이지 요금제로 돌아갈 수 없습니다.

커버 페이지는 버전 7.1에서는 제공되지 않습니다. 비슷한 디자인을 만들고자 한다면 특정 페이지에서 머리말과 바닥글을 숨길 수 있습니다. Squarespace 앱에서는 커버 페이지를 추가하거나 편집할 수 없습니다.

비디오 시청하기

커버 페이지 추가

다음 단계를 따라 커버 페이지를 추가하고 콘텐츠를 사용자 지정하세요.

1. 페이지 패널을 열고, +를 클릭한 후 커버 페이지를 선택하세요. 자세한 내용은 탐색에 페이지 추가를 참고하세요.
2. 레이아웃을 선택하세요.
3. 브랜딩, 텍스트 및 미디어를 추가하세요.
4. 버튼, 링크, 양식과 같은 작업을 추가하세요.
5. 페이지를 스타일링하세요.

다음 사항에 유의하세요.

• 방문자가 사이트를 방문했을 때 가장 먼저 보이는 페이지로 커버 페이지를 설정하려면 홈페이지로 설정하세요.
• 커버 페이지를 탐색 메뉴에서 제거하려면 페이지 패널에서 연결되지 않음 섹션으로 이동하세요. 이 방법은 방문자가 사이트에 들어오기 전에 한 번만 커버 페이지를 보게 하거나 별도의 랜딩 페이지로 사용하고자 할 때 유용합니다.
• 커버 페이지 전용 요금제를 사용하는 경우, 페이지 패널이 없으며 추가 페이지를 생성할 수 없습니다. 기본 메뉴에서는 단독 커버 페이지를 편집하기 위한 패널이 표시됩니다.

커버 페이지 레이아웃

각 커버 페이지 레이아웃은 고유한 기능과 스타일 설정을 갖춘 단일 페이지 템플릿처럼 작동합니다. 커버 페이지는 블록을 사용하지 않으며, 텍스트 및 버튼과 같은 디자인 요소는 고정된 위치에 표시됩니다. 이를 통해 커버 페이지를 아름답고 반응형으로 유지할 수 있습니다.

참고: 커버 페이지는 HTML 및 Markdown 형식을 지원하지 않습니다.

레이아웃을 변경하는 방법은 다음과 같습니다.

1. 커버 페이지 메뉴에서 레이아웃 변경을 클릭하세요.
2. 드롭다운 메뉴를 사용해 레이아웃을 카테고리별로 정렬하거나 모든 레이아웃을 선택해 전체를 볼 수 있습니다.
3. 레이아웃 위에 커서를 올리고 선택을 클릭해 새 레이아웃으로 설정하세요.
4. 페이지 상단의 저장을 클릭해 변경 사항을 적용하세요.

모든 목적에 맞게 커버 페이지 레이아웃을 조정할 수 있지만, 일반적인 테마에 맞게 디자인되어 있습니다. 다음과 같은 목적으로 이러한 레이아웃을 사용할 수 있습니다.

브랜딩 및 텍스트 추가

브랜딩 및 텍스트 패널을 사용하여 다음을 추가하세요.

• 로고 또는 브랜딩 텍스트
• 페이지 헤드라인
• 본문 텍스트

이 설정은 최소한의 정보로 최대한의 효과를 전달할 수 있도록 레이아웃 스타일과 함께 작동합니다.

다음 사항에 유의하세요.

• 브랜딩 및 텍스트 표시 방식은 레이아웃에 따라 다릅니다.
• 로고와 브랜딩 텍스트를 동시에 표시하는 것은 불가능합니다.
• 로고가 모범 사례를 따르고 있는지 확인하거나 Squarespace 로고로 새 로고를 만드세요.
• 다른 페이지와는 달리, 커버 페이지에 표시된 사이트 제목과 로고는 사이트의 홈페이지로 연결되지 않습니다.
• 브랜딩 텍스트는 SEO 제목과 다를 수 있으며, SEO 제목은 브라우저 탭과 검색 엔진 결과에서 페이지 이름으로 사용됩니다.

미디어 추가

미디어 패널을 사용하여 다음을 수행하세요.

• 배경 이미지를 업로드하십시오
• 스톡 이미지 추가
• 이전에 업로드한 이미지 재사용
• 반복 재생되는 배경 비디오 추가
• 배경색 설정

다음 사항에 유의하세요.

• 업로드하기 전에 이미지를 올바르게 포맷하세요.
• 내장된 이미지 편집기를 사용해 원본 이미지를 편집할 수 있습니다.
• 여러 이미지를 업로드하여 슬라이드쇼나 그리드 배경을 만들 수 있습니다.
• 고해상도 이미지를 대량으로 업로드하면 커버 페이지의 로드 시간에 영향을 줄 수 있습니다.
• 대부분의 레이아웃은 배경 비디오를 지원하며, YouTube 또는 Vimeo URL을 임베드하면 무음으로 반복 재생됩니다.
• 커버 페이지 슬라이드쇼에는 탐색 컨트롤을 추가하거나 전환 속도를 제어할 수 없습니다.
• 반응형 디자인으로 인해 이미지와 비디오는 항상 어느 정도 잘리게 되며, 특히 모바일에서 그렇습니다. 자르기의 양은 이미지의 높이, 브라우저의 너비, 그리고 선택한 레이아웃에 따라 달라집니다.

배경색 설정

이미지나 비디오 대신 단색 배경 색상을 표시하려면 없음을 선택하세요. 이미지가 미리 보기에서 사라집니다. 스타일 패널에서 배경 색상을 변경하세요.

동작 추가

작업 패널을 사용해 버튼, 탐색 링크, 양식 또는 뉴스레터 가입 옵션을 추가하세요. 커버 페이지에 작업 항목을 표시하고 싶지 않다면 해당 필드를 비워두세요.

다음 사항에 유의하세요.

• 버튼이나 탐색 링크는 추가할 수 있지만, 둘 다는 불가능합니다.
• 버튼은 최대 두 개, 탐색 링크는 최대 다섯 개까지 추가할 수 있습니다.
• 양식 또는 뉴스레터 가입 양식은 하나만 추가할 수 있습니다.

동작을 추가하는 방법은 다음과 같습니다.

1. 커버 페이지 메뉴에서 작업을 클릭하세요.
2. 작업 유형 선택 아래에서 작업 유형을 선택하세요.

버튼이나 탐색 링크 추가

버튼과 탐색 링크는 방문자를 Squarespace 사이트의 다른 페이지, 다른 웹사이트, 또는 다운로드 가능한 파일로 이동시킵니다. 버튼이나 탐색 링크를 추가하려면 다음 단계를 따르세요.

1. 작업 유형 선택 메뉴에서 버튼 또는 탐색을 선택하세요.
2. 첫 번째 필드에 라벨을 추가하세요. 포맷과 가독성을 위해 링크 라벨 텍스트는 짧게 유지하는 것을 권장합니다.
3. URL 필드를 클릭해 웹 주소를 입력하거나 아이콘을 클릭해 링크 편집기를 여세요. 외부 사이트, 다운로드 가능한 파일, 이메일 주소, 전화번호 또는 사이트 내 콘텐츠로 링크할 수 있습니다. 자세한 내용은 사이트에 링크 추가 문서를 참조하세요.
4. 패널 상단에서 저장을 클릭하여 모든 변경 사항을 게시하세요.

양식 또는 뉴스레터 가입 양식 추가

방문자는 버튼을 클릭해 오버레이로 열리는 양식 또는 뉴스레터 가입 양식을 작성할 수 있습니다. 양식이나 뉴스레터 가입 양식을 추가하려면 다음 단계를 따르세요.

1. 작업 유형 선택 메뉴에서 양식 또는 뉴스레터를 선택하세요.
2. 버튼 라벨 필드에 버튼에 표시할 텍스트를 입력하세요.
3. 양식 편집 또는 뉴스레터 가입 편집을 클릭해 콘텐츠를 구성하세요.
4. 양식의 경우, 양식 이름 필드에 이름을 추가할 수 있습니다. 이 이름은 양식이 라이트박스에서 열릴 때 방문자에게 표시됩니다. 뉴스레터 가입 양식에는 이름을 지정할 수 없으며, 기본적으로 "뉴스레터 양식"이라는 제목이 라이트박스에 표시되며 삭제할 수 없습니다.
5. 양식의 경우, 휴지통 아이콘을 클릭해 자리표시자 필드를 삭제하고, 하단의 + 버튼을 클릭해 새 필드를 추가할 수 있습니다. 방문자가 양식을 제출하려면 반드시 입력해야 하는 필드로 설정하려면 필수를 선택하세요. 뉴스레터 가입 양식에는 이메일 주소 필드만 제공됩니다.
6. 스토리지 탭을 클릭하여 제출 항목을 어디로 보낼지 설정하세요. 저장 옵션으로 이메일 캠페인 메일 발송 목록을 사용하는 경우, 구독자가 가입하면 확인 이메일을 받게 됩니다. 이 확인 이메일은 비활성화할 수 없습니다.
7. 고급 탭에서 제출 버튼 라벨을 사용자 지정하고, 제출 후 리디렉션을 설정하거나 제출 후 방문자에게 표시되는 메시지를 편집하세요. 일반 텍스트 또는 HTML을 사용하세요.
8. 편집기에서 저장을 클릭한 후, 패널 상단에서 다시 저장을 클릭해 변경 사항을 게시하세요.

팁: 양식 또는 뉴스레터 가입을 스토리지에 연결한 후, 페이지의 실시간 버전을 방문해 테스트 양식을 제출해보는 것을 권장합니다.

양식 배경색 추가

대부분의 레이아웃에서는 스타일 패널에서 사용자 지정 오버레이 색상 조정을 사용해 양식 또는 뉴스레터 가입 배경에 색상을 추가할 수 있습니다. 페이지의 다른 영역에서는 이 오버레이를 숨기고 싶다면 투명도 슬라이더를 사용해 투명하게 설정하세요. 방문자는 양식 또는 뉴스레터 가입 버튼을 클릭한 후에 오버레이를 보게 됩니다.

다음 사항에 유의하세요.

• Harbor 레이아웃에는 사용자 지정 오버레이 색상 또는 텍스트 뒤 배경 색상 설정이 포함되어 있지 않습니다. Harbor 레이아웃에서는 양식 또는 뉴스레터 가입 배경이 항상 연회색으로 표시됩니다.
• 일부 레이아웃에서는 미디어 패널에 이미지를 추가한 후에만 사용자 지정 오버레이 색상 옵션이 표시됩니다.

이러한 레이아웃에서는 양식 또는 뉴스레터 가입 배경이 텍스트 뒤 배경 색상 설정과 일치합니다.

• Backstory
• 카드
• Flagship
• Flash
• 포커스
• Monocle
• Session
• Spotlight
• Vignette

양식 숨기기

양식 또는 뉴스레터 가입을 숨기려면 버튼 라벨 텍스트를 모두 삭제하고 해당 필드를 비워두세요. 이후 다시 활성화하면 이전의 양식 필드는 그대로 유지됩니다.

소셜 아이콘 추가

소셜 아이콘을 표시하려면 커버 페이지 메뉴에서 소셜 링크를 클릭하고 소셜 아이콘 표시를 선택하세요. 소셜 아이콘은 소셜 링크 패널에 추가한 계정을 반영합니다. 아이콘의 위치는 레이아웃에 따라 다르지만 일반적으로 페이지 하단에 표시됩니다.

커버 페이지 스타일 설정

디자인을 사용자 지정하려면 커버 페이지 메뉴에서 스타일을 클릭하세요. 각 커버 페이지는 사이트 템플릿이나 다른 커버 페이지와는 독립적인 고유의 스타일 옵션을 가지고 있습니다.

다음 사항에 유의하세요.

• 레이아웃을 변경하면 모든 글꼴, 색상, 크기 설정이 해당 레이아웃의 기본값으로 재설정됩니다. 이전에 사용했던 레이아웃으로 다시 전환해도 스타일 조정은 초기화됩니다.
• 커버 페이지는 반응형 디자인으로 제작되었기 때문에 모바일 기기에서는 다소 다르게 보일 수 있습니다. 기기 화면 보기를 사용해 페이지가 모바일에서 어떻게 표시되는지 미리 볼 수 있습니다.

스타일 조정 변경

커버 페이지 메뉴에서 스타일을 클릭하세요. 스타일 조정을 사용해 커버 페이지를 사용자 지정할 수 있습니다. 변경 사항을 적용하면 페이지 미리 보기가 실시간으로 업데이트됩니다. 원하는 디자인을 찾기 위해 다양한 설정을 실험해보는 것을 권장합니다.

다음은 일반적인 커버 페이지 스타일 조정 목록입니다.

• 포지셔닝 – 콘텐츠의 위치를 페이지 내에서 조정합니다. 레이아웃에 따라 왼쪽, 가운데, 오른쪽 또는 위, 가운데, 아래 중에서 선택할 수 있습니다.
• 브랜딩 - 글꼴과 색상을 설정하세요.
• 제목 - 글꼴과 색상을 설정하세요.
• 본문 - 글꼴과 색상을 설정하세요.
• 배경 - (이미지나 비디오를 사용하지 않는 경우) 배경색과 페이지 테두리 옵션을 설정하세요.
• 이미지 스타일 (위치 레이아웃에는 해당 없음) – 스타일을 여백 없음 또는 그리드로 설정하고, 그리드 갤러리 밀도, 그리드 갤러리 비율 등 스타일 조정을 통해 그리드 모양을 조정할 수 있습니다. 자동 오버레이 색상과 자동 로딩 색상을 선택하거나 선택 해제 후 직접 색상을 설정할 수 있습니다. 로딩 색상에 대한 자세한 내용은 아래를 참고하세요.
• 버튼 - 모든 버튼의 글꼴, 스타일, 색상을 설정하세요.
• 소셜 아이콘 – 소셜 아이콘의 스타일과 색상을 설정합니다.
• 오디오 컨트롤 (오디오 레이아웃 전용) – 플레이어 스타일과 트랙의 글꼴 및 색상을 설정합니다.
• 비디오 컨트롤 (비디오 레이아웃 전용) – 플레이어의 스타일과 색상을 설정합니다.
• 지도 (위치 레이아웃 전용) - 지도 스타일을 설정하세요.

배경 이미지

대부분의 레이아웃은 전체 이미지 및 그리드 이미지 옵션을 포함합니다.

• 여백 없음을 선택하면 하나의 이미지가 커버 페이지 전체 배경을 채웁니다. 여러 이미지를 업로드하면 하나씩 순차적으로 슬라이드쇼 형식으로 표시됩니다.
• 그리드를 선택하면 반복되는 이미지로 배경 그리드를 생성할 수 있습니다. 이미지가 하나만 있을 경우, 해당 이미지가 반복되어 공간을 채웁니다.
  
  • 그리드 옵션은 Focus, Flagship, Harbor, Monocle 레이아웃에서는 사용할 수 없습니다.
  • Montage 레이아웃에서는 콘텐츠 바가 일부 이미지 위에 표시될 수 있습니다.
• 아래에 표시되는 스타일 조정을 사용해 종횡비, 이미지 방향 등을 설정할 수 있습니다.

로딩 색상

대부분의 커버 페이지 레이아웃은 로딩 색상 옵션을 제공하므로, 일반 배경색이나 이미지가 로드되는 동안 별도의 배경색을 표시할 수 있습니다. 슬라이드쇼에서 이미지가 전환될 때도 이 색상이 표시될 수 있습니다.

참고: Flagship, Focus, Harbor, Monocle 레이아웃은 로딩 색상을 지원하지 않습니다.

기본적으로 레이아웃은 자동 로딩 색상을 사용합니다. 이는 이미지나 비디오의 배경색을 기반으로 로딩 색상이 설정된다는 의미입니다. 여러 개의 배경 이미지를 사용하는 경우, 로딩 색상은 미디어 패널에 있는 첫 번째 이미지를 기반으로 설정됩니다.

직접 색상을 선택하려면 자동 로딩 색상의 선택을 해제하고 사용자 지정 로딩 색상을 클릭해 새 색상을 설정하세요.

로딩 색상을 비활성화하려면 사용자 지정 로딩 색상을 클릭한 후 투명 옵션을 선택하세요.

오버레이 색상

Harbor를 제외한 모든 레이아웃은 배경 이미지나 색상에 색조를 추가하는 오버레이 색상 옵션을 제공합니다. 기본적으로 레이아웃은 자동 오버레이 색상을 사용합니다. 자동 색상은 일반적으로 데모 이미지와 어울리는 회색 계열입니다.

사용자 지정 오버레이 색상을 사용하려면 자동 오버레이 색상의 선택을 해제하고, 사용자 지정 오버레이 색상을 클릭해 새 색상을 선택하세요.

양식 배경색으로 사용자 지정 오버레이 색상을 사용하되 페이지의 다른 영역에서는 숨기고 싶다면 투명도 슬라이더를 사용해 해당 색상을 투명하게 설정하세요.

FAQ

왜 텍스트 크기를 일정 크기 이상으로 키울 수 없나요?

커버 페이지의 텍스트, 로고, 버튼은 각 레이아웃이 지원하는 최대 너비까지만 확대할 수 있습니다. 이러한 제한은 콘텐츠가 겹치는 것을 방지하고 반응형 디자인을 보장하기 위함입니다.

좀 더 구체적으로 설명하면 본문 텍스트는 브라우저 너비가 1800픽셀보다 클 때 설정한 글꼴 크기로 표시됩니다. 브라우저 너비가 1800픽셀 이하일 경우, 본문 텍스트는 너비에 따라 최대 크기가 제한됩니다.

• 1800픽셀 너비: 27픽셀
• 1600픽셀 너비: 22px
• 1020픽셀 너비: 18px
• 760픽셀 너비: 17px
• 600픽셀 너비: 16px

예를 들어 본문 글꼴 크기를 30px로 설정해도 방문자의 브라우저 창이 최소 1801픽셀 이상이어야 실제로 30px로 표시됩니다. 그렇지 않으면 위 기준에 따라 자동으로 크기가 조정됩니다. 반대로 글꼴 크기를 13px로 설정하면 해당 크기가 제한보다 작기 때문에 항상 13px로 표시됩니다.

브랜딩 텍스트와 헤드라인 텍스트는 다르게 작동합니다. 이 텍스트들은 글꼴 크기를 “목표값”으로 간주하며, 브라우저의 높이와 너비에 따라 유동적으로 크기가 조정됩니다. 이 배율은 레이아웃에 따라 달라집니다.

커버 페이지에 맞춤형 코드를 추가할 수 있나요?

커버 페이지는 매우 의도적으로 설계되었으며, 커스텀 CSS 추가를 염두에 두고 제작된 것은 아닙니다. 커버 페이지의 스타일(글꼴 및 색상 등)을 조정하려면 스타일 패널을 사용하세요.

HTML이나 스크립트를 추가해야 할 경우, 커버 페이지 설정에서 페이지별 코드 주입을 사용해 추가할 수 있습니다. 자세한 내용은 사이트에 사용자 지정 코드 추가를 참고하세요.

재생 버튼은 프로젝터 레이아웃에서 위치를 변경합니다.

프로젝터 레이아웃에서는 본문 필드에 입력된 텍스트 양에 따라 재생 버튼의 위치가 달라집니다.

• 텍스트가 적은 경우 재생 버튼은 중앙에 유지됩니다.
• 텍스트가 일정 너비를 초과하면 재생 버튼은 왼쪽 상단으로 이동합니다.
• 이 위치는 브라우저 크기에 따라 달라질 수 있습니다.