Web Guide이미지 규격비율 표준썸네일 크기
이미지 크기와 비율 표준 정하기
규격이 정해져 있지 않으면 담당자가 올릴 때마다 화면이 달라집니다.
위치별로 크기와 비율을 정하고 관리자에 표시해 두면 이 문제가 사라집니다.
01위치별로 규격을 정한다
메인 배너, 목록 썸네일, 상세 대표, 본문 삽입 이미지는 각각 적정 비율과 크기가 다릅니다. 하나로 통일할 수 없습니다.
각 위치의 규격을 정하고 문서로 남기세요.
메인 배너
가로로 넓은 비율. 모바일용 별도 이미지가 필요할 수 있습니다.
목록 썸네일
정사각형이나 4:3, 16:9. 목록 전체가 같은 비율이어야 합니다.
상세 대표
16:9가 일반적. 콘텐츠 성격에 따라 조정.
본문 삽입
가로 폭 기준. 세로는 원본 비율을 유지하는 경우가 많습니다.
공유용(OG)
링크 공유 시 미리보기. 별도 비율이 있습니다.
아이콘·로고
정사각형. 여러 크기가 필요합니다.
02최대 용량도 정한다
비율만 정하고 용량을 정하지 않으면, 담당자가 원본 사진을 그대로 올려 페이지가 무거워집니다.
관리자에서 자동으로 압축하는 것이 가장 확실하지만, 없다면 최소한 안내라도 표시해야 합니다.
자동 압축업로드 시 시스템이 자동으로 줄입니다. 가장 확실합니다.
용량 제한일정 크기를 넘으면 업로드를 막습니다.
안내 표시업로드 화면에 권장 규격과 용량을 적어 둡니다.
자동 리사이즈큰 이미지를 올려도 시스템이 적정 크기로 줄입니다.
형식 변환가능하면 가벼운 형식으로 자동 변환합니다.
03비율이 안 맞는 이미지 처리
정해진 비율과 다른 이미지가 올라오면 어떻게 할지 정해야 합니다. 늘리면 왜곡되고, 여백을 채우면 어색합니다.
일반적으로는 비율을 유지하면서 넘치는 부분을 잘라 내는 방식을 씁니다.
늘려서 맞추기
비율이 왜곡됩니다. 인물이나 제품이 이상해 보입니다. 피해야 합니다
잘라서 맞추기
비율 유지 · 넘치는 부분을 잘라 냄 · 중요한 부분이 잘릴 수 있으므로 중심점 지정이 필요합니다
04관리자에 표시한다
규격을 문서로만 만들어 두면 담당자가 찾아보지 않습니다. 업로드하는 화면 바로 옆에 표시해야 지켜집니다.
권장 크기, 비율, 최대 용량, 형식을 한 줄로 적어 두면 충분합니다.
점검 항목
업로드 화면에 안내
'권장 1600×900, 최대 2MB, JPG·PNG'처럼 표시합니다.
미리보기 제공
올린 이미지가 실제로 어떻게 보이는지 보여줍니다.
자르기 도구
관리자에서 직접 자를 수 있으면 편합니다.
규격 불일치 경고
비율이 다르면 알려주고 확인을 받습니다.
운영 매뉴얼에도
매뉴얼에 규격 표를 포함합니다.
CHECK POINT
□ 위치별 이미지 비율이 정해져 있는가
□ 최대 용량이 정해져 있는가
□ 업로드 시 자동 압축이나 리사이즈가 되는가
□ 비율이 안 맞는 이미지의 처리 방식이 정해져 있는가
□ 왜곡 없이 잘라 내는 방식인가
□ 관리자 업로드 화면에 규격이 표시되어 있는가
□ 운영 매뉴얼에 규격 표가 있는가
#이미지 규격#비율 표준#썸네일 크기#자동 압축#리사이즈#관리자 안내#성능#홈페이지 디자인#웹비스타#홈페이지 제작