SharePoint 최신 페이지의 이미지 크기 조정 및 크기 조정
Applies ToMicrosoft 365의 SharePoint

최신 페이지와 웹 파트는 디바이스 전체에서 완전히 반응하도록 설계되었으므로 웹 파트에 사용되는 이미지는 표시되는 위치, 사용되는 레이아웃 및 표시되는 디바이스에 따라 다르게 확장됩니다. 예를 들어 최신 페이지는 모바일 디바이스에서 멋지게 보이도록 설계되었으며 자동 이미지 크기 조정은 매력적인 환경을 만드는 데 도움이 됩니다.

디바이스 간 페이지 예제

가장 적합한 이미지 크기는 무엇인가요?

반응형 페이지 디자인으로 인해 이미지가 디바이스 및 레이아웃에서 특정 모양을 유지하도록 하는 픽셀 단위의 특정 높이 또는 너비가 없습니다. 이미지는 크기가 조정되고 자동으로 잘려 다양한 디바이스 및 레이아웃에서 최상의 결과를 표시합니다. 그러나 페이지에서 이미지가 멋지게 보이도록 하는 데 도움이 되는 몇 가지 지침이 있습니다.

페이지에 가장 적합한 이미지 크기를 찾는 것은 다음과 같은 요인에 따라 달라집니다.

  • 가로 세로 비율: 이미지 높이와 너비 간의 관계

  • 열 레이아웃: 페이지의 열 유형 및 수

  • 웹 파트 레이아웃: 이미지가 사용되는 웹 파트에 대해 선택한 레이아웃

가로 세로 비율

가로 세로 비율은 이미지의 너비와 높이 간의 관계입니다. 일반적으로 3:2, 4:3 또는 16:9와 같은 두 개의 숫자로 표현됩니다. 너비는 항상 첫 번째 숫자입니다. 예를 들어 16:9의 비율은 높이가 900픽셀인 1600픽셀이 될 수 있습니다. 또는 1920 x 1080, 1280 x 720 또는 16:9와 같게 계산할 수 있는 다른 너비/높이 조합일 수 있습니다. 가로 세로 비율 계산기는 온라인 및 일부 사진 편집 도구에서 찾을 수 있으므로 이미지의 가로 세로 비율을 결정하는 데 도움이 됩니다. 

16:9 및 4:3 가로 세로 비율의 예입니다.

대부분의 경우 최신 웹 파트의 이미지는 레이아웃에 따라 가로 세로 비율이 16:9 또는 4:3인 경우 레이아웃 및 디바이스에서 가장 잘 작동합니다.

열 레이아웃

페이지는 전체 너비 열, 한 열, 두 개의 열, 세 개의 열, 1/3 왼쪽 및 1/3 오른쪽 열과 같은 다양한 열 형식과 레이아웃이 포함된 섹션으로 배치할 수 있습니다. 열의 너비를 채울 것으로 예상되는 이미지에 대한 일반적인 규칙은 열이 배치된 열만큼 넓다는 것입니다. 예를 들어 한 열에 있는 이미지 웹 파트의 이미지는 너비가 1204픽셀 이상이어야 합니다.

다음은 각 열 레이아웃에 대한 너비 지침입니다.

레이아웃

너비(픽셀)

전체 너비 열

1920

하나의 열

1204

두 개의 열

열당 586개

세 개의 열

열당 380개

왼쪽 열의 3분의 1

왼쪽 열의 경우 380; 오른쪽 열의 경우 792

오른쪽 열의 3분의 1

왼쪽 열의 경우 792; 오른쪽 열의 경우 380

페이지의 반응성 특성으로 인해 전체 너비 열의 이미지는 항상 화면 크기에 따라 자동 높이로 화면의 전체 너비로 표시됩니다.

다른 열 레이아웃 내에 배치된 이미지의 높이는 가로 세로 비율에 따라 달라집니다. 다음은 16:9 및 4:3 가로 세로 비율(가장 가까운 픽셀로 반올림/아래로 반올림)에 대한 높이/너비 지침입니다. 이렇게 하면 모바일 디바이스에 맞게 적절하게 크기가 조정되는 너비와 높이로 이미지를 유지하는 데 도움이 됩니다. 예를 들면 다음과 같습니다.

종횡비

레이아웃

16 x 9

너비 x 높이(픽셀)

4 x 3

너비 x 높이(픽셀)

하나의 열

1204 x 677

1204 x 903

두 개의 열

586 x 330

586 x 439

세 개의 열

380 x 214

380 x 285

왼쪽 열의 3분의 1

왼쪽 열의 경우 380 x 446; 오른쪽 열의 경우 792 x 446

왼쪽 열의 경우 380 x 594; 오른쪽 열의 경우 792 x 594

오른쪽 열의 3분의 1

왼쪽 열의 경우 792 x 446; 오른쪽 열의 경우 380 x 446

왼쪽 열의 경우 792 x 594; 오른쪽 열의 경우 380 x 594

웹 파트 레이아웃

사용하는 웹 파트의 레이아웃도 이미지 크기 조정 방식에 영향을 줍니다. 다음 예제에서는 다양한 웹 파트와 사용할 수 있는 옵션 및 가로 세로 비율을 보여 줍니다.

Hero 웹 파트

타일 및 레이어 레이아웃의 가로 세로 비율은 다음과 같습니다.

  • 타일: 웹 파트의 높이가 8:3의 가로 세로 비율을 따르도록 조정되고 웹 파트 내의 이미지는 가로 세로 비율 4:3으로 조정됩니다.

  • 레이어: 개별 레이어는 가로 세로 비율 8:3으로 조정되고 각 레이어 내의 이미지는 16:9에 가까운 가로 세로 비율로 확장됩니다.

  • 모바일 디바이스에서 회전식 레이아웃은 16:9에 사용됩니다.

레이어 레이아웃(위쪽) 및 타일 레이아웃(아래쪽)에 표시된 이미지의 예는 다음과 같습니다.

레이어 및 타일 레이아웃의 Hero 웹 파트 이미지 예제

강조 표시된 콘텐츠 웹 파트

16:9는 회전목마, 필름스트립 및 그리드 레이아웃의 가로 세로 비율입니다.

다음은 16:9 가로 세로 비율의 예입니다. 첫 번째 이미지는 Filmstrip 레이아웃을 표시하고 두 번째 이미지는 그리드 레이아웃을 표시합니다.

Filmstrip 레이아웃을 사용하는 강조 표시된 콘텐츠 웹 파트입니다.

확장된 사진이 표시된 강조 표시된 콘텐츠 그리드 레이아웃입니다.

이미지 웹 파트

이미지는 웹 파트를 포함하는 섹션의 너비로 확장됩니다. 

다음은 16:9 가로 세로 비율을 사용하는 이미지 웹 파트의 이미지 예입니다.

회전식 16:9 비율을 사용하는 이미지 웹 파트의 이미지입니다.

또한 이미지 편집 도구를 사용하여 가로 세로 비율 또는 자유형 자르기를 변경하거나 크기 조정 핸들을 사용하여 이미지를 더 크거나 작게 만들 수 있습니다.

SharePoint 편집 도구에서 사진이 열립니다.

이미지 갤러리 웹 파트

다양한 레이아웃에서 다음 가로 세로 비율을 사용할 수 있습니다.

  • 브릭 및 회전식 레이아웃은 16:9, 1:1, 4:3 등 모든 이미지의 가로 세로 비율을 존중합니다. 

  • 그리드 레이아웃은 세 가지 가로 세로 비율(1:1 정사각형, 너비 16:9 및 표준 4:3)을 허용합니다.

첫 번째 이미지는 이미지 갤러리 웹 파트의벽돌 레이아웃을 보여 줍니다(16:9 및 1:1 가로 세로 비율 유지). 두 번째 이미지는 그리드 레이아웃(1:1 가로 세로 비율 사용)을 보여줍니다.

벽돌 레이아웃 옵션을 사용하는 이미지 갤러리 웹 파트입니다.

그리드 레이아웃 옵션을 사용하는 이미지 갤러리 웹 파트입니다.

뉴스 웹 파트

레이아웃에 따라 뉴스 웹 파트의 이미지는 4:3, 16:9 또는 21:9일 수 있습니다.

다음은 Top 스토리 및 회전식 레이아웃의 이미지 예입니다.

뉴스 레이아웃 이미지 예제

페이지 제목 영역

가로 또는 가로 세로 비율이 16:9 이상이고 크기가 1MB 이상인 경우 이미지가 가장 잘 보입니다. 또한 특히 그림이 썸네일, 뉴스 레이아웃 및 검색 결과에 사용되는 경우 그림의 가장 중요한 부분을 보기에 유지하도록 초점을 설정해야 합니다.

화자에서 포커스가 설정된 예제(원본 이미지 16:9)

페이지 제목 영역에 있는 16:9 이미지의 예입니다.

페이지 축소판 그림

페이지 축소판 그림이 검색 결과, 강조 표시된 콘텐츠 결과, 뉴스 게시물 등의 위치에 표시됩니다. 기본적으로 썸네일은 페이지 제목 영역 또는 페이지의 첫 번째 순서(예: 페이지 레이아웃의 왼쪽 위)에 있는 웹 파트에서 제공됩니다. 기본값을 재정의하고 페이지 축소판 그림을 변경할 수 있습니다. 이렇게 하면 가로 세로 비율이 16:9인 이미지를 사용하는 것이 가장 좋습니다.

예제(원본 이미지 16:9):

강조 표시된 콘텐츠 웹 파트의 페이지 축소판 그림 이미지 예제

빠른 링크 웹 파트

빠른 링크 웹 파트에는 6가지 레이아웃이 있습니다. 미리 설정된 가로 세로 비율은 다음과 같습니다.

  • 컴팩트, 목록, 타일: 1:1, 4:3

  • 필름스트립, 그리드, 버튼: 16:9

첫 번째 이미지는 빠른 링크 웹 파트의 컴팩트 레이아웃을보여줍니다. 두 번째 이미지는 Filmstrip 레이아웃을 사용하는 동일한 빠른 링크 웹 파트를 보여줍니다.

링크에 대한 썸네일 이미지를 보여 주는 빠른 링크 웹 파트입니다.

이미지의 16:9 비율을 보여 주는 빠른 링크 웹 파트입니다.

팁: 

사이트 헤더 이미지 권장 사항

페이지 외에도 확장 레이아웃에 사용자 지정 로고 또는 이미지를 추가할 수 있습니다. 이러한 요소에 대한 크기 권장 사항은 다음과 같습니다.

요소

설명

권장 사항

너비 x 높이(픽셀)

사이트 로고

업로드된 디자인에 따라 사각형이 아니고 투명할 수 있는 더 큰 로고입니다.

192 x 64 

형식: PNG, JPEG, SVG(SVG는 그룹에 연결된 사이트에서 허용되지 않음)

사이트 로고 축소판 그림

사이트 로고가 업로드되지 않거나 정사각형 형식이 필요한 위치에 있는 경우 사용되는 사각형 로고 축소판 그림입니다.

이 요소는 필수 요소입니다.

64 x 64 

형식: PNG, JPEG, SVG(SVG는 그룹에 연결된 사이트에서 허용되지 않음)

확장 레이아웃 사이트 로고

확장된 머리글 레이아웃에는 확장된 사이트 로고 너비가 있습니다.

300 x 64

형식: JPEG, PNG, SVG

확장 레이아웃 배경 이미지

확장 헤더와 함께 사용할 수 있는 새 배경 이미지입니다.

2560 x 164

형식: JPEG, PNG

도움이 더 필요하세요?

더 많은 옵션을 원하세요?

구독 혜택을 살펴보고, 교육 과정을 찾아보고, 디바이스를 보호하는 방법 등을 알아봅니다.

커뮤니티를 통해 질문하고 답변하고, 피드백을 제공하고, 풍부한 지식을 갖춘 전문가의 의견을 들을 수 있습니다.