최신 페이지와 웹 파트는 여러 장치에서 완벽하게 반응하도록 설계되었으므로 웹 파트에 사용되는 이미지는 표시되는 위치, 사용되는 레이아웃 및 보고 있는 장치에 따라 다르게 크기가 조정됩니다. 예를 들어, 최신 페이지는 모바일 장치에서 멋지게 보이도록 디자인되었으며 자동 이미지 크기 조정은 매력적인 환경을 만드는 데 도움이 됩니다.
어떤 이미지 크기가 가장 적합합니까?
반응형 페이지 디자인 때문에 이미지가 여러 장치 및 레이아웃에서 특정 모양을 유지할 수 있도록 하는 특정 픽셀 높이 또는 너비가 없습니다. 이미지는 다양한 장치와 레이아웃에서 최상의 결과를 표시하기 위해 자동으로 크기가 조정되고 잘립니다. 그러나 페이지에서 이미지가 멋지게 보이는지 확인하는 데 도움이 되는 몇 가지 지침이 있습니다.
페이지에 가장 적합한 이미지 크기를 찾는 것은 다음 요인에 따라 달라집니다.
- 가로 세로 비율: 이미지의 높이와 너비 사이의 관계
- 열 레이아웃: 페이지의 열 유형 및 개수
- 웹 파트 레이아웃: 이미지가 사용되는 웹 파트에 대해 선택한 레이아웃
가로 세로 비율
가로 세로 비율은 이미지의 너비와 높이 사이의 관계입니다. 일반적으로 3:2, 4:3 또는 16:9와 같은 두 숫자로 표현됩니다. 너비는 항상 첫 번째 숫자입니다. 예를 들어 16:9 비율은 너비 1600픽셀, 높이 900픽셀이 될 수 있습니다. 또는 1920 x 1080, 1280 x 720 또는 16:9와 같게 계산할 수 있는 다른 너비/높이 조합이 될 수 있습니다. 온라인과 일부 사진 편집 도구에서 이미지의 가로 세로 비율을 결정하는 데 도움이 되는 가로 세로 비율 계산기를 찾을 수 있습니다.
대부분의 경우 최신 웹 파트의 이미지는 레이아웃에 따라 가로 세로 비율이 16:9 또는 4:3일 때 레이아웃과 장치에서 가장 잘 작동합니다.
열 레이아웃
페이지는 전체 너비 열, 1열, 2열, 3열, 1/3 왼쪽 및 1/3 오른쪽 열과 같은 다양한 열 형식과 레이아웃을 포함하는 섹션으로 배치할 수 있습니다. 열의 너비를 채울 것으로 예상되는 이미지의 일반적인 규칙은 이미지의 너비가 배치되는 열과 같아야 하는 것입니다. 예를 들어 한 열의 이미지 웹 파트에 있는 이미지의 너비는 1204픽셀 이상이어야 합니다.
다음은 각 열 레이아웃에 대한 너비 지침입니다.
| 레이아웃 | 픽셀 단위의 너비 |
|---|---|
| 전체 너비 열 | 1920 |
| 한 열 | 1204 |
| 두 열 | 열당 586개 |
| 세 개의 열 | 열당 380개 |
| 왼쪽 열 1/3 | 왼쪽 열의 경우 380; 오른쪽 열의 경우 792 |
| 오른쪽 열 1/3 | 왼쪽 열의 경우 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 |
| 왼쪽 열 1/3 | 왼쪽 열의 경우 380 x 446; 오른쪽 열의 경우 792 x 446 | 왼쪽 열의 경우 380 x 594; 오른쪽 열의 경우 792 x 594 |
| 오른쪽 열 1/3 | 왼쪽 열의 경우 792 x 446; 오른쪽 열의 경우 380 x 446 | 왼쪽 열의 경우 792 x 594; 오른쪽 열의 경우 380 x 594 |
웹 파트 레이아웃
사용하는 웹 파트의 레이아웃은 이미지 크기 조정 방법에도 영향을 미칩니다. 다음 예제에서는 다양한 웹 파트와 사용할 수 있는 몇 가지 옵션 및 가로 세로 비율을 보여줍니다.
| Hero 웹 파트 | 타일 및 레이어 레이아웃의 가로 세로 비율은 다음과 같습니다.
|
| 강조 표시된 콘텐츠 웹 파트 | 16:9는 회전식, 필름 스트립 및 그리드 레이아웃의 가로 세로 비율입니다. 다음은 16:9 가로 세로 비율의 예입니다. 첫 번째 이미지는 필름 레이아웃을 표시하고 두 번째 이미지는 그리드 레이아웃을 보여줍니다. 
|
| 이미지 웹 파트 | 이미지는 웹 파트를 포함하는 섹션의 너비로 확장됩니다. 다음은 16:9 가로 세로 비율을 사용하는 이미지 웹 파트의 이미지 예입니다. 
이미지 편집 도구를 사용하여 가로 세로 비율을 변경하거나 자유형 자르기를 사용하거나 크기 조정 핸들을 사용하여 이미지를 더 크게 또는 더 작게 만들 수도 있습니다. 
|
| 이미지 갤러리 웹 파트 | 다음 가로 세로 비율을 다양한 레이아웃에서 사용할 수 있습니다.
|
| 뉴스 웹 파트 | 레이아웃에 따라 뉴스 웹 파트의 이미지는 4:3, 16:9 또는 21:9가 될 수 있습니다. 다음은 톱 스토리 및 캐러셀 레이아웃의 이미지 예입니다. 
|
| 페이지 제목 영역 | 이미지는 가로 또는 가로 세로 비율이 16:9 이상이고 크기가 1MB 이상일 때 가장 잘 보입니다. 또한 특히 그림이 축소판, 뉴스 레이아웃 및 검색 결과에 사용될 때 그림의 가장 중요한 부분을 볼 수 있도록 초점을 설정해야 합니다. 예(원본 이미지 16:9) 스피커에 초점이 설정된 경우: 
|
| 페이지 축소판 그림 | 페이지 축소판은 검색 결과, 강조 표시된 콘텐츠 결과, 뉴스 게시물 등의 위치에 표시됩니다. 기본적으로 축소판 그림은 페이지 제목 영역 또는 페이지의 첫 번째 순서에 있는 웹 파트(예: 페이지 레이아웃의 왼쪽 위)에서 가져옵니다. 기본값을 재정의하고 페이지 축소판 그림을 변경할 수 있습니다. 이때 가로 세로 비율이 16:9인 이미지를 사용하는 것이 가장 좋습니다. 예(원본 이미지 16:9): 
|
| 빠른 링크 웹 파트 | 빠른 링크 웹 파트에는 6개의 레이아웃이 있습니다. 사전 설정된 가로 세로 비율은 다음과 같습니다.
|
팁
페이지 제목 영역 또는 Hero 웹 파트에 이미지를 추가할 때 항상 표시하려는 이미지 영역에 초점을 설정하는 것이 가장 좋습니다. 이 두 시나리오의 초점을 설정하는 방법에 대한 자세한 내용은 Hero 웹 파트 사용 및 SharePoint 사이트에서 최신 페이지 만들기 및 사용을 참조하세요.
사이트 머리글 이미지 권장 사항
페이지 외에도 확장된 레이아웃에서 사용자 지정 로고 또는 이미지를 추가할 수 있습니다. 다음은 해당 요소에 대한 크기 권장 사항입니다.
| 요소 | 설명 | 권장 사항 너비 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 |