ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 뚝뚝 끊기는 이미지 UX 개선 - Progressive 이미지
      Study/개발 2025. 4. 27. 17:25

      TL;DR

      1. Progressive 이미지를 통해 느린 이미지 로드로 인해 저하된 사용자 경험을 개선할 수 있다.
      2. JPG, PNG로 한번 만들어보기

      이미지의 용량이 크거나 네트워크가 느릴 때, 이미지가 위에서 아래로 끊기듯이 로드되어 사용자 경험을 저해할 수 있다.
      이 문제를 해결하기 위한 방법을 보다가 Progressive 방식을 알게 되었다.

      인터넷을 사용하다보면 이미지를 로드하는 방식에 차이가 있다.

      1) 앞서 말한 것처럼 이미지가 끊어지면서 로딩
      2) 흐린 이미지가 점점 선명해지면서 로딩

      후자가 바로 progressive 방식의 이미지이다.

      장점

      Progressive 방식의 이미지는 UX 상의 이점이 있다.

      1. 저사양 환경에서도 빠른 시각적 피드백
      2. 사용자가 로딩 중임을 인지하게 함으로써 이탈율 감소

      단점

      좋은 점만 있는 것은 아니다. UX 적으로는 분명 이점이 있지만, 몇가지 고려할 포인트가 있다.

      1. 오버헤드 증가 (파일 크기, 디코드 시간)
      2. 일부 브라우저 미지원 (Safari, IE8)

      하지만 체감 성능 차이에 오버헤드가 주는 영향은 다른 요소들에 비해 미미하다고 한다.
      특히, 주 고객층의 네트워크 환경이 느리거나 큰 이미지를 많이 사용하는 서비스의 경우 이미지 UX 최적화의 일환으로 사용할 수 있다.

      만들어보기

      준비물

      큰 이미지 - 클수록 느린게 티나기 때문에 좋다.

      진행 과정

      1. 원하는 경로로 이동
      2. 프로젝트 생성
      3. sharp 설치

      https://sharp.pixelplumbing.com/

       

      High performance Node.js image processing

      High performance Node.js image processing. The fastest module to resize JPEG, PNG, WebP and TIFF images.

      sharp.pixelplumbing.com

       

      nodejs의 이미지 처리 라이브러리
      sharp를 통해 progressive 형식 이미지를 만들것이다.

      npm install sharp
      1. converter.js 작성
      #!/usr/bin/env node  

const path = require("path");  
const sharp = require("sharp");  
const args = process.argv.slice(2);  
let input, output;

// arg 파싱  
for (let i = 0; i < args.length; i++) {  
  if ((args\[i\] === "-i" || args\[i\] === "--input") && args\[i + 1\]) {  
    input = args\[i + 1\];  
    i++;  
  } else if ((args\[i\] === "-o" || args\[i\] === "--output") && args\[i + 1\]) {  
    output = args\[i + 1\];  
    i++;  
  }  
}  

if (!input || !output) {  
  console.error("Usage: node converter.js -i input.jpg/png -o output.jpg/png");  
  process.exit(1);  
}  

// Determine output format by extension  
const ext = path.extname(output).toLowerCase();  
let pipeline = sharp(input);

// progressive로 output을 만든다.  
if (ext === ".jpg" || ext === ".jpeg") {  
  pipeline = pipeline.jpeg({ progressive: true });  
} else if (ext === ".png") {  
  pipeline = pipeline.png({ progressive: true }); // interlaced PNG  
} else {  
  console.error("Unsupported output format:", ext);  
  process.exit(1);  
}  

pipeline  
  .toFile(output)  
  .then(() => console.log(\`Converted and saved to ${output}\`))  
  .catch((err) => {  
    console.error("Error generating output image:", err);  
    process.exit(1);  
  });
      1. index.html 생성
      <!doctype html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <title>Progressive JPEG Test</title>  
  </head>  
  <body>  
    <h1>Progressive JPEG Test</h1>  
    <img src="http://localhost:8000/image.png" alt="Progressive JPEG example" />  
  </body>  
</html>
      1. 서버 생성 및 실행
      const express = require("express");  
const app = express();  
app.use(express.static("."));  
app.listen(8000, () => console.log("http://localhost:8000"));  
      # 이미지 변환  
node converter.js -i input.jpg -o output.jpeg  
node converter.js -i input.png -o output.png  
      # 서버 실행  
node server.js

      로컬호스트에 들어가보면 이미지를 확인할 수 있다.
      네트워크 throttle을 걸어두고 느린환경에서 실행해보면, 두 방식의 차이를 확연히 알 수 있다.
      확대해보면 더 잘 보이는데, 다음과 같이 점짐적으로 이미지가 차오르는 것을 볼 수 있다.

       

      progressive 이미지 로딩

      FE 개발하면서 직접 사용할 일은 많지 않아 보이지만, 알아두면 이미지 개선 요청 등에 대응하기 좋을 것이다.

      728x90
      저작자표시 (새창열림)

      'Study > 개발' 카테고리의 다른 글

      [Github MCP] Github 작업은 AI에게 맡겨보자  (2) 2025.04.29
      Neovim에서 Copilot 사용하기  (0) 2025.02.28
      [Naver D2] 고급 타입스크립트 세션 정리  (0) 2025.02.25
      JS 글자 수 세기 문제  (0) 2025.02.18
      더 이상 메인 에디터로 Neovim을 쓰지 않는 이유  (1) 2024.11.23

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바