SNS 숏폼 9:16 비율과 홈페이지, 쇼핑몰 이미지 사이즈 가이드

최근 숏폼 영상은 세로 9:16 비율이 표준이며, 해상도는 1080×1920이 기본입니다. 홈페이지나 쇼핑몰에서는 1:1, 4:5, 9:16 비율을 함께 사용하는 것이 안전하며, 콘텐츠가 잘리거나 왜곡되는 문제를 줄일 수 있습니다. 특히 15~30초 길이의 영상은 플랫폼 전반에서 반응이 좋고 완주율이 높아, 기획 단계에서 가장 우선 고려할 요소입니다. 다만 플랫폼별 최대 길이는 다를 수 있으므로, 업로드 대상에 따라 차이를 반영해야 합니다.

왜 중요할까?

대부분의 사용자는 스마트폰을 세로로 사용하며, 9:16은 모바일 화면을 꽉 채우는 비율로 시청 몰입도를 높입니다. 숏폼 콘텐츠는 SNS와 웹사이트를 오가며 소비되기 때문에, 동일한 화면 비율을 유지하면 품질 저하 없이 일관된 경험을 제공합니다. 이는 브랜드 이미지와 사용자 만족도를 동시에 향상시키는 데 효과적입니다.

플랫폼 현황

플랫폼	표준 비율	해상도	권장 길이	특이사항
틱톡	9:16	1080×1920	15~30초	1:1과 16:9도 가능하지만 세로형이 노출에 유리
인스타그램 릴스	9:16	1080×1920	15~30초	피드 미리보기에서는 4:5로 잘릴 수 있음
유튜브 쇼츠	9:16	1080×1920	15~30초	가로 비율 영상은 쇼츠로 분류되지 않음
페이스북 릴스	9:16	1080×1920	15~30초	플랫폼 정책에 따라 최대 길이가 변동될 수 있음
스냅챗 스포트라이트	9:16	1080×1920	10~30초	지역 및 정책에 따라 제한 조건이 상이함

웹사이트 제작 설계에 미치는 영향

핵심 체크포인트

비율 시스템화: 썸네일, 배너, 영상 영역을 1:1, 4:5, 9:16 비율로 고정하면 콘텐츠 일관성이 높아지고, 관리가 쉬워집니다.
임베드 블록: 9:16 전용 임베드 블록을 활용해 숏폼 콘텐츠를 웹페이지에 자연스럽게 연결합니다.
프리뷰 대비: 인스타그램 피드에서 자동으로 적용되는 4:5 비율을 고려해 핵심 콘텐츠가 잘리지 않도록 디자인합니다.
안전 영역 확보: 화면 상단과 하단 10% 영역에는 버튼, 자막, 로고 등을 배치하지 않아 콘텐츠 겹침을 방지합니다.
고해상도 원본: 4K 세로(2160×3840) 원본으로 제작한 뒤 필요에 따라 하향 변환하면 퀄리티를 유지한 다양한 출력이 가능합니다.
포맷 최적화: 이미지(WebP 또는 AVIF)와 영상(H.264 또는 H.265) 포맷을 활용해 용량과 속도 모두를 안정적으로 관리합니다.

권장 비율과 사이즈 맵

영역	비율	사이즈	비고
메인 히어로(PC)	16:9	1920×1080	모바일 화면에서는 4:5로 크롭되는 상황을 시뮬레이션해야 함
상품 썸네일	1:1	1200×1200	상품 리스트, 장바구니, 추천 영역 등 다양한 구성에 안전
컬렉션 카드	4:5	1080×1350	인스타그램 피드와의 호환성이 높음
숏폼 임베드	9:16	1080×1920	세로 화면에 맞춘 풀프레임 콘텐츠 삽입에 적합

반응형 구현 예시

비율 고정에는 aspect-ratio 속성을, 미디어 콘텐츠 정렬에는 object-fit: cover 속성을 사용하면 다양한 화면 크기에서 깔끔하게 보입니다.

.ratio-9-16 { aspect-ratio: 9 / 16; }
.ratio-4-5  { aspect-ratio: 4 / 5; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

.media-wrap { width: 100%; height: 100%; }
.media-wrap > img,
.media-wrap > video,
.media-wrap > iframe {
   width: 100%;
   height: 100%;
   object-fit: cover;
}