image 최적화 - by. UXKM

  • Gulp
  • Assets 세팅
  • image 최적화

요약 설명

이미지 최적화는 Gulp 작업뿐만 아니라 모든 웹 및 모바일 환경에서 권장되는 작업으로, 성능 향상에 도움이 됩니다.
Gulp를 사용하면 더 편리하게 이미지 최적화 환경을 설정할 수 있습니다.

6.3.1. 이미지 최적화가 필요한 이유

  1. 로딩 속도 개선

    최적화되지 않은 이미지는 파일 크기가 크기 때문에 웹 페이지의 로딩 속도를 늦출 수 있습니다. 이미지 최적화를 통해 파일 크기를 줄여 더 빠른 로딩을 구현할 수 있습니다.

  2. 대역폭 절약

    이미지 최적화는 파일 크기를 감소시키므로, 사용자가 데이터를 다운로드하는 데 필요한 대역폭을 절약할 수 있습니다. 특히 모바일 사용자와 저속 인터넷 연결을 갖고 있는 사용자들에게 도움이 됩니다.

  3. 검색 엔진 최적화 (SEO)

    웹 페이지의 로딩 속도는 검색 엔진 최적화에도 영향을 미칩니다. 최적화된 이미지를 사용하면 검색 엔진에서 더 긍정적으로 평가할 수 있습니다.

  4. 사용자 경험 향상

    이미지 최적화를 통해 웹 페이지의 성능이 향상되면 사용자 경험이 개선됩니다. 빠른 로딩 이미지는 사용자가 더 빨리 콘텐츠를 볼 수 있도록 도와줍니다.

6.3.2. 패키지 설치

터미널에서 아래 명령을 실행하여 gulp-image 패키지를 설치합니다.

gulp-imagemin

gulp-imagemin는 Gulp를 사용하여 이미지 최적화를 수행하는 플러그인으로, 다양한 이미지 형식을 지원하고 파이프라인을 활용하여 간편하게 이미지 최적화 작업을 자동화할 수 있습니다.

  • 이미지 최적화: gulp-imagemin는 다양한 이미지 최적화 도구 및 알고리즘을 사용하여 이미지를 압축하고 최적화합니다.
  • 다양한 이미지 형식 지원: JPEG, PNG, GIF, SVG 등 다양한 이미지 형식을 지원하며, 각 형식에 대한 최적화를 수행할 수 있습니다.
  • Gulp 파이프라인 통합: Gulp의 특성인 파이프라인을 활용하여 이미지 최적화 작업을 다른 Gulp 작업과 연결하여 자동화할 수 있습니다.
  • 옵션 설정: 사용자는 최적화 옵션을 설정하여 이미지 처리의 세부적인 동작을 조정할 수 있습니다.

gulp-newer

gulp-newer는 Gulp 플러그인 중 하나로, 변경된 파일만을 필터링하여 통과시키는 기능을 제공합니다. 변경된 이미지 파일만 최적화하여 전체 이미지를 다시 처리하지 않아도 되므로 빌드 시간을 단축할 수 있습니다.

  • 새로운 파일만 전달: 대상 디렉토리에 있는 파일을 기준으로 소스 파일과 대상 파일을 비교합니다. 소스 파일이 대상 파일보다 최신인 경우에만 해당 파일을 통과시킵니다.
  • 변경 감지: 파일의 수정 시간을 기준으로 변경 여부를 감지합니다. 이전 실행에서 생성된 대상 파일과 수정된 소스 파일을 비교하여 변경된 파일만을 선택합니다.
  • 빌드 최적화: 주로 이미지 최적화나 파일 복사와 같은 작업에서 사용되어 변경된 파일만을 선택하여 처리함으로써 빌드 시간을 최적화합니다.

6.3.3. gulpfile.babel.js 세팅 방향 선택

중요합니다!

이미지는 웹 사이트 대부분의 용량을 차지합니다.
본 커리큘럼에서는 하나의 이미지만 사용하기 때문에 큰 문제가 되지 않지만, 실제 웹사이트에서는 이미지 총 용량이 2~5MB를 넘는 경우가 흔합니다
이미지가 많고 용량이 클 경우, 이미지 최적화 작업으로 인해 Gulp의 초기 빌드 속도가 느려질 수 있습니다.

그래서 이번엔 두 가지 방식으로 gulpfile.babel.js를 세팅합니다.

  1. 실시간 이미지 최적화 프로세스 설정: image task가 실행될 때 이미지 최적화도 같이 진행됩니다.
    (단, 이미지가 많고 용량이 클 경우 그만큼 초기 빌드 시간이 늘어납니다.)
  2. 독립적인 이미지 최적화 프로세스 설정: image task가 실행돼도 이미지 최적화는 실행되지 않습니다. 이미지 최적화는 필요할 때 별도로 진행합니다.
    (필요할 때만 이미지 최적화를 실행하기 때문에 초기 빌드 속도에 영향을 미치지 않습니다.)

본 Gulp 커리큘럼은 조금 더 이해하기 쉬운 1번 방식으로 마무리되지만, 만약 실제 프로젝트에 사용하고 이미지가 많다면 2번 방식을 추천합니다.
※ 아래 세팅 방법 중에서 프로젝트에 가장 적합한 방법을 선택하여 진행해 주세요.

6.3.4-1. 실시간 이미지 최적화 프로세스 설정

gulpfile.babel.js 세팅

gulp dev 실행

gulpfile.babel.js 파일을 세팅한 후 터미널에서 아래 명령을 실행합니다.

Gulp가 샐행되고 터미널에 Gulp의 작업 내용이 출력됩니다.

gulp dev 실행시 터미널에 작업내용 출력

clean 다음으로 image task가 실행되고,
gulp-imageminvisual.png 파일을 어느 정도 최적화했는지에 대한 메시지가 출력됩니다.

6.3.4-2. 독립적인 이미지 최적화 프로세스 설정

gulpfile.babel.js 세팅

gulp dev 실행

gulpfile.babel.js 파일을 세팅한 후 터미널에서 아래 명령을 실행합니다.

Gulp가 샐행되고 터미널에 Gulp의 작업 내용이 출력됩니다.

gulp dev 실행시 터미널에 작업내용 출력

clean 다음으로 image task가 실행됩니다.
실시간 이미지 최적화 프로세스 설정과는 달리, 이미지 최적화 작업을 하지 않고 단순히 src의 이미지를 dist로 옮기는 작업만 진행하기에 image task의 작업 시간도 짧습니다.

gulp image_min 실행 (이미지 최적화)

프로젝트 작업 중 이미지 최적화가 필요한 시점에 gulp dev를 종료하지 않고, 새 터미널을 열고 아래 명령을 실행합니다.
(같은 폴더에 여러 개의 터미널 오픈이 가능합니다.)

image_min이 단독으로 실행되고 터미널image_min의 작업 내용이 출력됩니다.

gulp image_min 실행시 터미널에 작업내용 출력

visual.png에 대한 이미지 최적화가 진행되고, 이미지 최적화를 마친 image_min 프로세스는 자동으로 종료됩니다.

이렇게 이미지 최적화 프로세스를 별도로 실행하는 방식은, 빌드 시간 단축과 작업 효율성 측면에서 유리합니다. 다만, 이미지 최적화를 수동으로 실행해야 하는 번거로움이 있다는 단점도 존재합니다.
이처럼 각 방식에는 장단점이 있으며, 프로젝트의 성격이나 팀의 작업 방식에 따라 어떤 방식이 더 적합할지 판단해 선택하면 됩니다.

위의 두 가지 방법 외에도, 배포 단계에서만 이미지 최적화를 자동으로 실행하도록 설정할 수도 있습니다.
다만, 이 방법은 응용 단계에 해당하므로 본 커리큘럼에서는 다루지 않습니다.

6.3.5. 빌드된 image 결과물 확인

6.3.5.1. image가 적용된 브라우저 확인

image task를 세팅하기 전에는 브라우저에서 이미지를 찾지 못해 Console에 경고 메시지가 표시되었지만,
이제는 이미지가 정상적으로 표시되며 경고 메시지도 사라졌습니다.

image 적용 전
[image 적용 전]
image 적용 후
[image 적용 후]

또한, 이미지 용량이 886KB에서 854KB로 줄어든 것을 확인할 수 있습니다.

gulp-imagemin을 적용하여 visual.png의 이미지 용량이 886KB 에서 854KB 로 줄어듬

6.3.5.2. dist > assets 폴더와 image 파일 확인

dist > assets > images 폴더 안에 visual.png 파일이 있는 것을 확인할 수 있습니다.

빌드 후 dist > assets > image 폴더 확인

6.3.6. 로컬 작업을 위한 Gulp 세팅을 마치며

여기까지 우리는 로컬 환경에서의 Gulp 설정을 성공적으로 마쳤습니다.
처음 접하는 시스템과 언어로 낯설 수 있었지만, 웹 퍼블리싱을 위한 기본적인 세팅을 잘 완료했습니다.

아직 Gulp가 익숙하지 않고, 커리큘럼 없이 혼자 세팅하는 것은 당연히 어렵게 느껴질 수 있습니다.
하지만 앞서 설명했듯이, 한 번의 세팅으로 끝나는 것이 아니라 반복하고 응용하는 과정을 거치다 보면 점차 Gulp에 익숙해지고 자연스럽게 활용할 수 있게 될 것입니다.

Gulp는 여기까지만 해도 충분합니다. 다음 커리큘럼은 선택사항입니다.

다음 섹션에서는 gulp-gh-pages 패키지를 활용하여 Gulp로 빌드한 결과물을 GitHub에 배포하는 방법을 다룹니다.
이 과정은 git과 GitHub의 기본적인 사용법을 알고 있다는 전제 하에 진행됩니다.
따라서 Git이나 GitHub 사용이 익숙하지 않다면, 본격적인 커리큘럼을 따라가기 전에 git과 GitHub의 기본 개념과 사용법을 먼저 익히는 것을 권장합니다.

※ 다음 커리큘럼에서는 [실시간 이미지 최적화 프로세스로 설정]gulpfile.babel.js를 기준으로 이어서 진행하며, git과 GitHub를 설명하는 내용은 다루지 않습니다.