York 템플릿 패밀리의 프로젝트 페이지는 우아한 포트폴리오 레이아웃을 만들기 위해 디자인된 사용자 지정 갤러리 뷰입니다. 프로젝트 페이지를 사용하여 눈길을 사로잡는 방식으로 텍스트와 이미지를 혼합한 레이아웃을 만들 수 있습니다.

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori 및 Taylor는 동일한 기본 구조와 기능을 공유합니다. 이 가이드는 모든 템플릿에 적용됩니다. 이 템플릿은 다양한 옵션을 제공하는 갤러리 페이지도 지원합니다.

버전 7.1는 프로젝트 페이지를 지원하지 않습니다. Squarespace 앱에서는 프로젝트 페이지를 추가하거나 편집할 수 없습니다.

프로젝트 페이지 설정

프로젝트 페이지를 설정하는 방법:

1. 페이지 패널을 엽니다.
2. + 아이콘을 클릭하여 프로젝트를 추가하세요.
3. 최상의 결과를 얻으려면 여러 이미지 또는 비디오를 추가하고 각 항목에 제목과 설명을 추가하세요.

이미지 및 비디오 추가

이미지와 비디오를 추가하는 방법:

1. 페이지 패널을 엽니다.
2. 왼쪽 패널에서 프로젝트 페이지를 클릭하세요.
3. 이미지를 업로드하고, 스톡 이미지를 추가하고, 비디오를 추가하세요. 모든 비디오에는 섬네일이 있어야 합니다.
4. 이미지 또는 비디오의 게시 상태를 설정하세요.

이미 업로드한 이미지와 비디오의 설정을 편집하려면 사이드 패널에서 이미지나 비디오를 두 번 클릭하세요.

레이아웃

사이트 스타일의 프로젝트: 레이아웃 섹션을 사용하여 레이아웃을 조정하세요.

• 이미지 정렬 - 모든 캡션과 이미지를 오른쪽, 왼쪽 또는 가운데로 정렬하세요.
• 이미지 간격 - 프로젝트의 각 이미지 사이의 간격을 조정하세요.
• 배너 간격 - 페이지 머리말과 첫 번째 이미지 사이의 간격을 조정하세요. 페이지: 인트로 텍스트 섹션의 텍스트 높이도 여기에 영향을 줄 수 있습니다.
• 전체 너비 세로 및 정사각형 허용 - 세로 및 정사각형 이미지를 주요 콘텐츠 영역의 너비로 표시하세요. 여백 없음 프로젝트가 선택되면, 이미지는 브라우저의 너비에 맞게 표시됩니다. 이 조정은 세로 및 정사각형 캡션 스타일이 기본 또는 오프셋으로 설정될 때 나타납니다.

참고: 프로젝트 페이지는 라이트박스나 딥링크 URL을 지원하지 않습니다. 프로젝트 페이지 이미지에 클릭스루 URL을 추가할 수 있으며, 이는 갤러리 블록이나 요약 블록에 연결될 때 작동하지만, 프로젝트 페이지 자체에서는 작동하지 않습니다. 프로젝트 페이지에서 작동하는 링크를 원한다면 이미지의 캡션에 링크를 추가하세요.

캡션 추가

제목과 설명 텍스트를 추가하거나 조정하려면 다음 단계를 따르세요.

1. 페이지 패널을 엽니다.
2. 프로젝트 페이지를 클릭하세요.
3. 사이드 패널에서 이미지를 두 번 클릭하세요.
4. 제목 및 설명 필드에 텍스트를 추가합니다.

제목과 설명은 가로 이미지의 경우 아래에, 세로 이미지와 정사각형 이미지의 경우 아래 또는 옆에 표시됩니다. 레이아웃은 사이트 스타일의 사이트 스타일의 프로젝트: 레이아웃 섹션에서 조정할 수 있습니다.

• 프로젝트 캡션 표시 조정 기능을 사용하여 모든 이미지 이름과 설명 텍스트를 표시하거나 숨길 수 있습니다.
• 가로 이미지 간격 축소는 캡션이 없는 가로 이미지 아래의 공간을 제거합니다.

사이트 스타일의 프로젝트: 글꼴 섹션에서 조정 기능을 사용해 이미지 제목과 설명의 텍스트 스타일을 지정하세요.

• 텍스트를 왼쪽, 오른쪽 또는 가운데로 정렬하려면 캡션 제목 정렬과 캡션 본문 정렬 조정을 사용하세요.
• 세로 또는 정사각형 이미지 옆에 표시되는 캡션의 경우, 이미지에 맞춰 대체 캡션 정렬 조정을 사용하세요.

이미지 정렬: 가운데를 선택하고 프로젝트 캡션 표시를 선택한 경우, 세로 및 정사각형 캡션 스타일과 가로 캡션 스타일 조정을 사용하여 캡션이 페이지에 표시되는 위치를 추가로 조정할 수 있습니다.

• 어느 조정이든 스탠다드를 선택하면 캡션이 이미지 바로 아래에 표시되고, 오프셋을 선택하면 캡션이 다음 이미지와 동일한 간격으로 더 아래로 이동합니다.
• 세로 및 정사각형 캡션 스타일: 대체를 선택하면 캡션이 세로 및 정사각형 이미지의 옆으로 이동합니다. 캡션은 왼쪽에서 오른쪽으로 번갈아 표시됩니다. 캡션이 없는 이미지는 가운데에 배치됩니다.
• 가로 캡션 스타일: 인셋을 선택하면 가로 이미지 아래의 캡션이 위로 이동하여 약간 겹치게 됩니다.

이미지 및 비디오 크기

프로젝트 페이지의 이미지는 여백 없음으로 설정되더라도 원본 크기보다 더 크게 늘어나지 않습니다. 이렇게 하면 이미지가 흐릿하거나 픽셀이 깨져 보이는 것을 방지할 수 있습니다.

• 일반적으로 프로젝트 페이지에서 이미지 크기는 이미지의 원본 크기에 의해 결정됩니다. 페이지에서 이미지가 더 크게 보이게 하려면 더 큰 크기의 이미지를 업로드하세요.
• 페이지에서 이미지 크기를 줄이려면 더 작은 크기의 이미지를 업로드하십시오.
• 사이트 외부 패딩(여백) 조정은 여백 없음으로 설정되지 않은 이미지의 너비에 영향을 미칠 수 있습니다.
• 비디오 너비는 호스팅 사이트에서 설정됩니다. 비디오 너비를 사용자 지정하려면 비디오 임베드 코드를 사용하고 코드 내에서 너비를 수동으로 설정하세요.
• 배너와 반응형 디자인에 대한 도움이 필요하면 모범 사례를 참고하세요.

여백 없음 이미지

여백 없음 이미지는 패딩(여백)을 무시하고 브라우저 가장자리까지 확장됩니다. 이를 활성화하려면 먼저 이미지가 충분히 큰지 확인하세요. 프로젝트 페이지의 이미지는 원본 크기보다 더 크게 늘어나지 않습니다. 또한 Squarespace의 반응형 디자인 최적화 방식으로 인해 이미지가 2500픽셀보다 넓게 표시되지는 않지만 최상의 결과를 얻으려면 최소 2500픽셀 너비의 이미지를 업로드하는 것이 좋습니다.

이미지가 충분히 큰 경우 사이트 스타일을 사용하여 여백 없음으로 만들 수 있습니다. 이 설정은 사이트의 모든 프로젝트 페이지에 영향을 미칩니다.

프로젝트 페이지에서 이미지는 다음과 같은 경우에만 여백 없음으로 표시될 수 있습니다.

• 이미지가 가운데에 배치됩니다.
• 캡션이 이미지 아래에 있습니다.
• 가로 이미지가 아닌 이미지를 여백 없음으로 설정하려면 먼저 가로 이미지를 여백 없음으로 설정해야 합니다.

모든 이미지를 여백 없음으로 표시하려면, 먼저 가로 이미지를 설정하세요.

1. 사이트 스타일을 열고 프로젝트: 레이아웃 섹션으로 스크롤하세요.
2. 이미지 정렬: 가운데를 선택하세요. 이렇게 하면 이미지가 가운데에 정렬됩니다.
3. 캡션이 없더라도 프로젝트 캡션 표시가 선택되어 있는지 확인하세요.
4. 여백 없음 프로젝트를 선택합니다. 이렇게 하면 풍경 이미지가 여백 없음으로 설정됩니다.

그런 다음 가로가 아닌 이미지를 설정합니다.

1. 세로 및 정사각형 캡션 스타일: 기본 또는 오프셋을 선택하세요. 이렇게 하면 캡션이 가로가 아닌 이미지 아래로 이동합니다.
2. 전체 너비 세로 및 정사각형 허용을 선택하세요. 이렇게 하면 가로가 아닌 이미지가 여백 없음으로 설정됩니다.
3. Save and refresh the page.

이미지 이동

페이지에서 이미지 순서를 변경하려면 페이지 패널 내에서 순서를 변경하세요. 프로젝트 페이지의 사이드 패널은 갤러리 페이지와 동일한 기능을 제공합니다.

이미지와 해당 제목 및 캡션을 프로젝트 페이지나 갤러리 페이지 간에 이동할 수 있습니다. 자세히 알아보려면 페이지 간 콘텐츠 이동을 방문하세요.

머리말 및 바닥글

이미지와 캡션 외에도 프로젝트 페이지는 다음을 지원합니다.

• 페이지 배너 - 페이지 상단에 표시되는 이미지 또는 비디오입니다.
• 페이지 제목, 설명 및 카테고리 텍스트 - 페이지 상단에 표시되는 텍스트입니다. 페이지 배너가 있는 경우, 이 텍스트는 이미지나 비디오 위에 표시됩니다.
• 머리말 및 바닥글 영역 - 페이지 상단과 하단에 위치한 영역으로, 자신만의 콘텐츠로 사용자 지정할 수 있습니다.

프로젝트 페이지에 대표 이미지가 없으면, 프로젝트 페이지에 처음 추가된 이미지가 자동으로 상단 배너 이미지로 설정됩니다. 대표 이미지를 추가해 이를 교체하거나, 사이트 스타일에서 프로젝트 배너 표시를 선택 해제해 모든 프로젝트 페이지에서 배너를 숨길 수 있습니다.

페이지 로딩 중

프로젝트 페이지의 이미지와 캡션은 페이지를 스크롤할 때 아래에서 위로 슬라이드되는 것처럼 보입니다. 이 효과를 제거하려면 이미지 및 캡션 계단식 표시 조정을 선택 해제하세요. 선택을 해제하면 이미지와 캡션이 대신 서서히 나타나는 방식으로 전환됩니다.

갤러리 페이지와 프로젝트 페이지 비교

프로젝트 페이지 외에도, 이 템플릿들은 표준 갤러리 페이지를 지원합니다.

프로젝트 페이지는 이미지와 텍스트를 혼합해 보여주기에 적합한 반면, 갤러리 페이지는 이미지와 비디오에만 집중하기에 이상적입니다. 프로젝트 페이지와 달리, 갤러리 페이지는 딥링크 URL, 클릭스루 URL, 라이트박스 기능을 지원합니다.

두 옵션을 모두 테스트해보려면, 이미지를 갤러리 페이지와 프로젝트 페이지 간에 이동할 수 있습니다.

참고: 갤러리 페이지는 페이지 배너 비디오를 지원하지 않습니다.

템플릿 전환하기

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor 이외의 템플릿으로 전환하면 프로젝트 페이지가 갤러리 페이지로 변환됩니다.

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor 템플릿으로 다시 전환하는 경우, 원래의 형식을 복원하려면 새 프로젝트 페이지와 갤러리 페이지를 생성하고 이미지들을 이동해야 할 수 있습니다.

모바일

모바일 기기와 좁은 브라우저에서는 콘텐츠가 하나의 열로 세로로 쌓여 표시됩니다.