Facebook 커버 사진 컴퓨터·모바일 비율 차이

두 화면의 비율 차이와 커버 구성의 기준

두 비율을 숫자로 바꾸면 차이가 분명해집니다. 16:9는 가로가 세로의 약 1.78배이고, 2.4:1은 가로가 세로의 2.4배입니다. 모바일 화면이 컴퓨터 화면보다 훨씬 가로로 긴 틀을 쓰는 셈이어서, 한 장의 이미지를 두 틀에 맞추면 어느 한쪽에서는 위아래가, 다른 쪽에서는 좌우가 덜 보이게 됩니다.

안내는 어느 쪽이 얼마나 잘리는지 픽셀 단위로 밝히지 않습니다. 그래서 병원은 잘릴 수 있는 바깥쪽에는 배경만 두고, 글자와 로고는 가운데 쪽에 모은 원본을 만든 뒤, 실제로 두 기기에서 열어 판단하는 순서를 따릅니다. 병원 페이지를 찾는 환자가 컴퓨터로 들어올지 휴대전화로 들어올지는 병원이 정할 수 없으므로, 어느 한 화면에서만 온전한 커버는 절반의 준비에 그칩니다.

화면별 커버 사진 기준

위에서부터 읽으면 두 화면에서 다른 값은 첫 행의 표시 비율과 마지막 행의 가려지는 정도뿐이고, 최소 크기와 권장 파일 조건은 같습니다. 안내는 화면별 파일을 따로 다루지 않으므로, 한 장으로 두 비율을 모두 견디게 구성하는 편이 안전합니다.

권장 크기로 계산한 두 화면의 차이

안내가 가장 빨리 열린다고 든 851×315픽셀은 가로가 세로의 약 2.7배인 이미지입니다. 이 비율은 컴퓨터의 16:9보다도, 모바일의 2.4:1보다도 가로가 깁니다. 따라서 권장 크기 그대로 올린 이미지는 두 화면 어디에서도 원본 전체가 남김없이 보인다고 기대하기 어렵습니다.

높이 315픽셀을 그대로 두고 왼쪽부터 맞춘다고 가정하면, 16:9 틀에는 가로 560픽셀까지, 2.4:1 틀에는 가로 756픽셀까지 들어갑니다. 이 가정에서는 851픽셀 가운데 오른쪽 끝부분이 컴퓨터에서 더 많이 빠지고, 왼쪽에서 560픽셀 안쪽은 두 화면 모두에 남습니다. 이 원본은 두 틀보다 가로로 길어서, 높이를 기준으로 맞추면 위아래는 잘리지 않고 오른쪽만 화면에 따라 다르게 빠집니다. 다만 안내가 「크기가 조정될 수 있다」고도 적고 있어, 틀을 채우려고 이미지를 키우는 경우에는 위아래 가장자리도 잘릴 수 있습니다.

안내가 어느 방식을 쓰는지 정하지 않았으므로 두 경우를 함께 놓으면, 좌우로는 왼쪽에서 가운데까지, 위아래로는 가운데 띠가 가장 오래 남는 영역입니다. 병원 이름과 진료과처럼 꼭 읽혀야 하는 요소는 이 겹치는 영역에 두고, 오른쪽 끝과 위아래 가장자리에는 잘려도 뜻이 남는 배경만 채웁니다.

처음부터 모바일 비율인 2.4:1로 만든 원본을 예로 들어도 같은 결론이 나옵니다. 가로 1200픽셀, 세로 500픽셀로 만들면 모바일 틀에는 전체가 맞고, 높이를 그대로 두고 왼쪽부터 맞추는 가정에서는 컴퓨터 16:9 틀에 가로 약 889픽셀까지만 들어가 오른쪽 4분의 1 정도가 빠집니다. 어떤 비율로 만들든 한 화면에서는 일부가 빠진다는 점을 전제로 구성하는 것이 출발점입니다.

병원 커버 이미지를 구성하는 법

병원 커버에 흔히 쓰는 건물 외관 사진은 건물이 가운데 오도록 찍은 원본을 쓰는 편이 유리합니다. 건물이 화면 한쪽 끝에 붙은 사진은 어느 한 화면에서 간판이나 입구가 잘릴 수 있습니다. 대기실처럼 넓은 공간 사진도 정면 한쪽 면보다 공간 전체가 가운데로 모이는 구도가 두 비율에 함께 맞습니다. 프로필 사진을 병원 로고로 정했다면 커버는 건물이나 공간 사진으로 맡겨, 작은 원 안의 로고와 넓은 커버가 서로 다른 정보를 전하게 나누는 편이 좁은 화면에서도 덜 겹칩니다.

왼쪽 아래는 프로필 사진과 겹치는 부분이라 따로 비웁니다. 안내는 커버 사진의 왼쪽을 프로필 사진이 일부 가리고, 모바일에서는 약 40픽셀 정도를 가린다고 적고 있습니다. 왼쪽 정렬로 남는 영역과 프로필 사진이 가리는 영역이 모두 왼쪽에 있으므로, 핵심 요소는 왼쪽 끝이 아니라 왼쪽에서 조금 들어온 가운데 쪽으로 모읍니다.

글자를 넣는다면 짧게 씁니다. 커버가 잘리는 폭을 정확히 알 수 없는 상황에서 긴 문장은 끝부분이 사라질 수 있으므로, 병원 이름 한 줄과 진료과 한 줄 정도로 줄여 두 화면 모두에서 온전히 남는지 점검합니다. 전화번호나 진료 시간처럼 바뀔 수 있는 정보는 커버 글자로 넣기보다 페이지 정보 칸에 맡깁니다. 같은 안내는 로고나 텍스트가 든 사진은 PNG 파일이 가장 적합하다고 밝히므로, 글자를 얹은 커버는 PNG로 저장하는 쪽을 함께 따집니다. 사진 위에 글자를 얹을 때는 배경이 밝은 곳에 어두운 글자를, 어두운 곳에 밝은 글자를 두어 작은 화면에서도 읽히게 하고, 글자 크기는 모바일 화면에서 먼저 정합니다.

올린 뒤 두 화면에서의 점검

커버를 올린 뒤에는 컴퓨터 브라우저와 휴대전화 앱에서 병원 페이지를 각각 열어 같은 요소가 모두 남았는지 대조합니다. 커버 사진 추가 또는 변경 안내는 사진을 선택한 뒤 위아래로 끌어 위치를 조정하고 변경 사항을 저장하는 순서를 설명하므로, 한쪽 화면에서 간판이 잘렸다면 위치를 옮겨 다시 저장하고 두 화면을 다시 엽니다. 안내가 다른 화면에 맞게 사진이 잘리거나 크기가 조정될 수 있다고 적고 있으므로, 태블릿처럼 병원 직원이 쓰는 다른 기기가 있다면 그 화면도 한 번 더 엽니다.

점검할 때는 병원 이름, 로고, 건물 입구, 진료과 문구처럼 잘리면 안 되는 요소를 목록으로 만들고 화면마다 남았는지 표시합니다. 커버 사진은 모두 전체 공개로 설정되어 페이지를 방문하는 모든 사람이 열람할 수 있으므로, 환자 얼굴이나 개인정보가 화면 가장자리에 걸쳐 있지 않은지도 같은 단계에서 확인합니다.

원본 파일은 잘리기 전의 넓은 이미지로 보관하고, 점검에 쓴 기기와 날짜를 파일 이름 옆에 함께 기록합니다. 같은 원본에서 비율만 바꿔 [병원 블로그 글쓰기]의 대표 이미지도 만들고, 채널마다 병원의 첫 화면이 같은 사진으로 이어지게 합니다.

점검표 예시

위에서부터 읽으면 병원 이름과 개인정보 행은 두 화면에서 같은 질문을 던지고, 로고와 간판 행은 화면마다 다른 질문을 던집니다. 간판 행에서 컴퓨터는 좌우를, 모바일은 위아래를 묻는 것은 모바일 틀이 더 가로로 길어 틀을 채우려고 키우는 경우 위아래가 먼저 잘리기 때문입니다.