최고의 성능을 위한 브라우저 호환 파일 형식
최근 업데이트
요즘 웹 브라우저는 예전과 달리 수많은 파일 형식을 지원해요. 약어도 너무 많아서 웹 브라우저가 지원하는 파일을 모두 나열하기도 어려워요. 하지만 브라우저에서 사용하는 파일 형식은 사이트에 영향을 주기 때문에 중요해요. 어떤 파일은 용량이 너무 커서 사이트 로딩 속도를 떨어뜨려요. 다른 파일은 더 가볍고 보기에도 좋지만, 품질은 낮아지는 대신 성능은 좋아지기도 해요.
파일 형식이 중요한 이유는 무엇일까요?
성능, 화면에 보이는 모습, 크기 조절 때문이에요. 사이트가 느려지는 건 원치 않으니 로딩 시간을 줄여 주는 형식을 사용해야 해요. 화면에 보이는 모습을 보면, 어떤 형식은 다른 형식보다 디테일이 더 풍부하고 품질도 높아요. 또 크기를 늘리거나 줄였을 때 제대로 보이지 않는 형식도 피하고 싶을 거예요. 작은 화면에서도 큰 화면에서도 보기 좋은 이미지가 필요해요.
웹 파일 형식의 기초부터 알아볼까요? 웹에서 가장 흔히 사용하는 파일 형식을 소개할게요.
1. 문서 파일
사람들이 보거나 다운로드할 수 있는 인증서나 콘텐츠를 제공하는 웹사이트라면 PDF 파일 형식을 사용하세요. 일부 사이트는 DOCX를 사용하지만, 이 파일은 파일을 여는 운영 체제와 프로그램에 따라 서식 문제가 생길 수 있어요. PDF를 사용하면 사용자가 의도한 모습 그대로 문서 파일을 다운로드할 수 있고, 내용을 수정하지 못해요. 또 다운로드할 때 문서의 모든 페이지가 하나의 파일에 그대로 담겨요. 내용을 바꿀 수 없어서 사용자가 계약서에 서명해야 할 때 특히 유용해요.
2. 오디오 파일
MP3
사이트 방문자와 공유하고 싶은 프레젠테이션이나 오디오 클립이 있나요? MP3 파일은 대부분의 웹 사용자가 가장 쉽게 이용할 수 있는 오디오 형식이에요. 대부분의 컴퓨터, 노트북, 태블릿, 스마트폰에서 MP3 파일을 재생할 수 있어요. 용량도 작아서 쉽게 다운로드할 수 있고 사이트 성능에도 영향을 주지 않아요.
3. 동영상 파일
동영상은 보통 용량이 좀 커서 사이트 성능에 영향을 줄 수 있어요. 동영상 용량이 아주 작다면 MP4 파일 형식을 사용하세요. 하지만 사이트에서 직접 호스팅하기보다는 YouTube에 업로드해 외부 서비스에서 호스팅하는 편이 더 좋아요. 이렇게 하면 웹사이트 저장 공간을 차지하지 않고 성능에도 영향을 주지 않아요. 게다가 모든 기기와 브라우저에서 YouTube에 접속할 수 있으니 방문자도 여전히 동영상을 볼 수 있어요.
4. 이미지 파일 형식
웹에는 시각적인 콘텐츠가 가득하고, 눈에 보이는 모든 그래픽은 이미지 파일이에요. 사이트에 흠잡을 데 없는 이미지를 올리려면 용도에 맞는 파일 형식을 사용해야 해요. 웹 이미지가 보기 좋지 않거나, 이메일에서 이미지가 빠지거나, 인쇄 결과가 나쁘면 곤란하겠죠. 웹사이트 운영자나 디자이너라면 어떤 이미지 파일 형식이 가장 적합한지 알아야 해요.
JPG/JPEG
아트워크나 온라인 사진을 다룰 때 JPG는 더 유연하게 활용할 수 있어요. 래스터 파일 형식으로 압축되기 때문에 다운로드용 이미지에 적합해요. 해상도와 압축률이 높아서 페이지가 빠르게 로드돼요. 또 온라인으로 이미지 미리보기를 보내야 한다면 JPEG는 이메일로도 보낼 수 있을 만큼 용량이 작아요.
하지만 웹에서 투명한 배경이 필요하다면 JPG는 배경이 불투명해요. PNG와 GIF가 훨씬 더 적합해요. 또 레이어를 지원하지 않으니, 레이어가 있는 편집 가능한 이미지가 필요하다면 PSD 파일을 사용하세요.
GIF
요즘 GIF는 땅콩버터처럼 즐거움을 주는 존재예요. 자꾸 더 찾게 되죠. 웹 애니메이션에 딱 맞고, GIF의 압축 방식 덕분에 파일 용량도 크게 줄어들어요. 또 투명도를 지원해서 어떤 배경 위에도 이미지를 배치할 수 있어요.
하지만 사진 수준의 품질이 필요하다면 GIF는 256색만 지원한다는 점을 기억하세요. 원하는 만큼 깊이 있는 이미지를 표현하지 못할 수도 있어요. 이럴 때는 JPG가 유용해요.
PNG
사이트에 고품질의 투명 이미지가 필요하다면 PNG가 적합해요. GIF보다 색상 깊이가 높지만 JPG보다는 낮아요. 가장 큰 장점은 파일 용량이에요. 특히 색상, 도형, 텍스트가 단순한 이미지라면 PNG의 용량을 아주 작게 줄일 수 있어요.
하지만 인쇄용으로 다운로드할 이미지라면 PNG를 사용하지 마세요. 화면에서 사용하도록 최적화되어 있고, 특히 아트워크는 JPG의 인쇄 품질이 더 좋아요.
AI 및 SVG
웹사이트에 로고, 아이콘, 브랜드 마스코트를 추가해야 할 때 AI/ SVG가 딱 맞아요. 편집하기 좋고, 이미지를 어떤 크기로 조절해도 높은 품질을 유지할 수 있어요. AI는 인쇄 작업에도 좋아서 명함, 포스터, 메모 카드, 전단지에 적합해요.
5. 여러 파일 묶기
ZIP
방문자가 WordPress 사이트에서 다운로드할 수 있도록 여러 파일을 묶어 제공하려면 ZIP 형식을 사용하세요. 파일을 하나씩 업로드해 사이트 저장 공간을 차지하게 하는 대신, 이 압축 파일 형식으로 묶어 보세요. 모든 파일이 압축률이 높은 하나의 파일로 묶여 공간을 덜 차지해요.
이 글이 사이트의 성능, 화면에 보이는 모습, 크기 조절을 최적화하려면 어떤 파일을 업로드해야 하는지 알아보는 데 도움이 되길 바라요.