파일 용량과 콘텐츠 표시의 판단 기준
페이지 무게를 줄이려면 이미지의 표시 크기·형식·압축과 웹 글꼴 크기를 조정하고, 큰 스타일시트·자바스크립트 파일을 축소 대상으로 검토합니다. 파일 용량이 줄었는지와 주요 콘텐츠가 실제로 빨리 표시되는지는 따로 확인해야 합니다.
운영자는 개발 담당에게 페이지가 내려받는 파일의 종류와 용량, 화면에서 사용하는 위치를 요청합니다. 큰 파일부터 삭제를 결정하지 말고, 어떤 설명과 기능에 필요한지 연결해 판단합니다. 제품 사진이나 본문 글꼴처럼 내용 전달에 직접 쓰는 파일과 특정 동작에만 필요한 파일은 축소 조건이 다릅니다.
구글 검색 센터는 이미지가 페이지 크기에 큰 영향을 줄 수 있으며, 이미지 최적화와 반응형 이미지 기술을 활용하도록 안내합니다. 운영자는 화면에서 필요한 선명도와 표시 크기를 정한 뒤 파일 크기를 줄일 여지를 찾습니다. 원본 이미지가 크다는 이유만으로 일괄 압축하면 작은 글씨나 제품의 세부 모습이 흐려질 수 있습니다.
| 리소스 종류 | 축소 검토 항목 | 유지해야 할 품질·기능 |
|---|---|---|
| 이미지 | 표시 크기에 맞는 파일, 형식, 압축 정도 | 세부 정보의 선명도와 필요한 화면 범위 |
| 웹 글꼴 | 사용하는 글꼴 파일과 굵기, 필요한 문자 범위 | 본문 가독성과 실제 문자의 정상 표시 |
| 스타일시트 | 사용하지 않는 규칙, 초기 화면에 불필요한 스타일, 축소·압축 | 화면 크기와 동작 상태별 배치 |
| 자바스크립트 | 파일별 사용처, 불필요한 코드, 실행 부담 | 콘텐츠 표시와 버튼·입력 기능의 정상 동작 |
웹 글꼴은 파일 크기와 화면에 표시하는 글자 크기를 혼동하지 않아야 합니다. 글자를 작게 표시하는 작업을 파일 축소로 취급하지 말고, 실제 사용하는 글꼴 파일과 그 구성을 개발 담당에게 요청합니다. 스타일시트도 화면에서 당장 쓰지 않는 규칙인지, 다른 화면이나 동작 상태에서 필요한 규칙인지 가려야 합니다.
큰 코드 파일의 축소 조건
구글의 웹 성능 문서는 큰 스타일시트가 준비되지 않으면 이미지 다운로드가 끝나도 표시가 늦어질 수 있다고 설명합니다. 사용하지 않는 스타일 삭제, 초기 화면에 중요하지 않은 스타일의 지연, 코드 축소와 압축을 스타일시트의 전송 크기를 줄이는 방법으로 제시합니다. 개발 담당은 각 방법을 적용할 파일과 영향을 받는 화면을 함께 기재해야 합니다.
같은 문서는 큰 자바스크립트 파일을 해석하고 실행하는 동안 이미지 표시가 기다릴 수 있다고 설명합니다. 따라서 자바스크립트는 전송 용량만으로 축소 우선순위를 정하지 않습니다. 파일이 담당하는 동작과 콘텐츠 표시 전에 수행하는 작업을 함께 요청하고, 줄일 수 있는 코드와 유지해야 하는 기능을 나눕니다.
리소스 목록과 변경 자료의 준비
마케팅 담당자는 작업 요청에 대상 페이지와 유지해야 할 이미지·문장·기능을 명시합니다. 개발 담당은 리소스별 전송 용량과 사용처를 정리하고, 공통 파일이면 함께 사용하는 다른 페이지도 기재합니다. 파일 이름과 용량만 있는 목록은 삭제 여부를 결정하기에 부족합니다.
- 개발 담당이 이미지·웹 글꼴·스타일시트·자바스크립트의 용량과 사용처를 수집합니다. 측정한 화면 크기와 파일 용량의 기준도 함께 기록합니다.
- 디자인 담당이 이미지의 필요한 표시 범위와 글꼴 사용을 정리합니다. 개발 담당은 이를 토대로 이미지·글꼴과 큰 코드 파일의 축소 후보를 제시합니다.
- 운영자가 유지 조건을 승인한 항목부터 개발 담당이 변경합니다. 변경 내용마다 영향을 받는 화면과 기능을 기록합니다.
- 개발 담당이 같은 조건에서 전후 용량을 측정합니다. 운영자와 디자인 담당은 품질을 판단하고, 주요 콘텐츠 표시와 필요한 동작의 결과를 별도로 기록합니다.
이미지 자료에는 화면에서 차지하는 크기와 확대해서 읽어야 하는 정보의 유무를 포함합니다. 글꼴 자료에는 본문·제목·버튼에 사용하는 종류와 굵기를 기재합니다. 코드 자료에는 파일을 호출하는 페이지와 연결된 기능을 포함해, 축소 작업의 영향 범위를 정합니다.
용량 자료를 받을 때는 원본 파일 크기인지 실제 전송된 크기인지 표시하도록 요청합니다. 서로 다른 기준으로 측정한 값을 같은 표에 넣으면 변경 효과를 잘못 판단할 수 있습니다. 변경 전후에는 동일한 기준을 사용하고, 측정 조건이 달라졌다면 그 이유를 기록합니다.
변경 결과의 분리 기록
완료 보고에는 줄인 파일 목록과 화면 결과를 함께 포함합니다. 아래 표는 기록 양식이며, 용량과 결과는 작업 담당자가 실제 측정과 테스트를 마친 뒤 입력합니다. 아직 테스트하지 않은 항목은 완료로 표시하지 않고 미실시 상태와 담당자를 기재합니다.
| 변경 항목 | 변경 전후 용량 | 품질·콘텐츠 표시 확인 결과 |
|---|---|---|
| 이미지 크기·형식·압축 | 같은 전송 기준으로 각각 기재 | 선명도, 잘림, 주요 이미지 표시 결과 기재 |
| 웹 글꼴 파일 구성 | 변경한 파일과 총량을 함께 기재 | 문자 누락, 굵기, 제목 줄바꿈 결과 기재 |
| 스타일시트 정비 | 대상 파일별 전후 용량 기재 | 화면별 배치와 주요 콘텐츠 표시 결과 기재 |
| 자바스크립트 정비 | 수정·제거한 파일의 용량 기재 | 콘텐츠 표시, 버튼, 입력 동작 결과 기재 |
운영자는 파일 축소 완료와 화면 테스트 완료를 별도의 상태로 관리합니다. 기능 문제가 남았다면 어떤 변경에서 발생했는지 개발 담당에게 전달합니다. 수정 후에는 해당 기능뿐 아니라 같은 파일을 사용하는 화면도 다시 테스트합니다.
파일 축소를 잘못 판단하는 경우
이미지의 표시 크기만 줄이고 내려받는 파일을 그대로 유지하면 파일 용량은 줄지 않습니다. 디자인 담당은 화면 배치 변경과 이미지 파일 변경을 따로 기재해야 합니다. 개발 담당은 해당 화면에서 실제 요청하는 파일이 수정 대상과 일치하는지 대조합니다.
이미지 형식 변경과 압축은 각각의 결과를 판단해야 합니다. 압축본은 배경의 색 변화, 경계선, 이미지 안의 작은 글씨 등 손상이 드러나기 쉬운 부분으로 품질을 평가합니다. 화면에 축소해 표시했을 때뿐 아니라 방문자가 필요한 정보를 읽는 상태에서도 판독 가능한지 테스트합니다.
웹 글꼴의 문자 범위를 줄이는 작업은 평소 사용하는 문장만으로 승인하지 않습니다. 운영자는 상품명·담당자명·외국어 표기처럼 실제 게시할 수 있는 문자를 테스트 자료에 포함합니다. 개발 담당은 축소한 글꼴에서 빠지는 문자와 대체 표시 결과를 기록합니다.
스타일시트의 미사용 판단은 최초 화면에만 한정하면 안 됩니다. 메뉴를 펼친 상태, 입력 오류가 발생한 상태, 화면 폭이 달라진 상태에서도 필요한 규칙이 있는지 테스트합니다. 공통 파일을 수정했다면 운영자가 지정한 다른 페이지의 상태도 작업 범위에 포함합니다.
용량 감소 뒤에도 표시가 늦는 경우
파일이 작아졌는데 주요 콘텐츠의 표시가 그대로라면 압축 강도를 더 높이는 작업부터 반복하지 않습니다. 구글의 웹 성능 문서는 이미지의 다운로드 시간을 줄여도 자바스크립트 때문에 표시를 기다리면 실제 표시 시점이 개선되지 않을 수 있다고 설명합니다. 개발 담당은 다운로드 완료와 화면 표시 사이에 어떤 작업이 남는지 조사합니다.
운영자는 지연되는 대상이 제목인지 대표 이미지인지 본문인지 구체적으로 전달합니다. 개발 담당은 해당 요소가 표시될 때 필요한 스타일과 스크립트를 연결해 기록합니다. 그 결과를 바탕으로 추가 작업이 파일 축소 범위에 속하는지, 별도의 표시 지연 문제인지 판단합니다.
변경을 승인할 때는 용량 감소량만 보고 모든 항목을 완료로 처리하지 않습니다. 이미지 품질이나 입력 기능에 문제가 있으면 해당 변경을 수정 대상으로 남깁니다. 파일은 줄었지만 표시가 빨라지지 않은 항목도 그 상태 그대로 기록하고, 성과로 과장하지 않습니다.
인라인 처리의 별도 판단
파일 요청을 줄이려고 이미지나 스타일을 페이지 문서 안에 넣는 작업은 별도로 판단합니다. 구글 검색 센터는 이미지 인라인 삽입이 요청을 줄일 수 있지만 페이지 크기를 크게 늘릴 수 있다고 안내합니다. 요청 수가 감소했다는 사실만으로 페이지 무게가 줄었다고 기록하지 않습니다.
구글의 웹 성능 문서는 작은 스타일시트에 인라인 처리를 고려할 수 있으며, 문서 안의 스타일은 이후 페이지 로드에서 캐싱의 이점을 받지 못한다고 설명합니다. 개발 담당은 외부 파일에서 제거한 내용과 문서에 추가한 내용을 함께 계산합니다. 운영자는 외부 파일 용량만 감소한 보고를 받지 말고, 문서까지 포함한 변경 결과를 요청합니다.
자주 묻는 질문
이미지 원본은 압축한 뒤에도 보관해야 합니까?
추가 편집이나 다른 크기의 이미지 제작이 필요하다면 원본을 보관하는 편이 좋습니다. 공개용 파일과 편집용 원본을 다른 위치에서 관리하고, 사이트에는 사용하기로 정한 파일이 전달되도록 합니다. 이미지 교체 담당자가 어느 파일을 사용해야 하는지도 기록합니다.
모든 이미지에 같은 압축 설정을 적용해도 됩니까?
일괄 처리는 가능하지만 같은 설정으로 품질 승인까지 처리하지는 않습니다. 사진과 도표, 글자가 포함된 이미지는 손상이 드러나는 부분이 다를 수 있습니다. 이미지 유형별로 승인할 샘플을 정하고, 읽어야 하는 정보가 있는 파일은 별도로 평가합니다.
글꼴 파일을 줄이기 위해 회사 지정 글꼴을 변경해야 합니까?
지정 글꼴 변경은 브랜드 사용 기준과 관련되므로 운영자가 단독으로 결정하지 않습니다. 먼저 필요한 굵기와 문자 구성을 유지하면서 파일을 줄일 수 있는지 개발 담당에게 묻습니다. 교체가 필요하다면 디자인 담당에게 제목·본문·버튼의 대체안을 요청해 승인 절차를 진행합니다.
외부 업체가 관리하는 코드도 수정 요청에 포함해야 합니까?
페이지가 내려받는 파일이라면 목록에는 포함하는 편이 좋습니다. 직접 수정할 권한이 없다면 외부 업체에 해당 파일의 용도와 축소 가능한 항목을 요청합니다. 회신이 없거나 변경이 불가능한 상태는 내부 작업의 누락과 따로 기록합니다.
게시한 이미지가 다시 커지는 일을 어떻게 예방합니까?
콘텐츠 등록 담당자가 사용할 이미지 규격과 품질 승인 방법을 문서로 정합니다. 새 파일을 등록할 때 편집용 원본을 그대로 사용하는지 검사하는 절차도 포함합니다. 등록 화면이나 전달 과정에서 파일이 달라질 수 있다면 실제 공개 파일을 기준으로 결과를 기록합니다.