1. 마젠토와 이미지 최적화의 중요성 🖼️

여러분~ 쇼핑몰 운영하시는 분들 주목! 요즘 온라인 쇼핑몰에서 이미지가 얼마나 중요한지 다들 아시죠? 고객들이 제품을 실제로 만져볼 수 없으니까 이미지가 곧 제품의 첫인상이자 구매 결정에 초강력 영향을 미치는 요소예요!

근데 말이죠, 고화질 이미지는 좋은데 웹사이트 로딩 속도를 확 늦추는 주범이기도 합니다. 😱 2025년 현재 통계에 따르면 웹페이지 로딩 시간이 3초를 넘어가면 방문자의 약 53%가 이탈한다고 해요. 헉소리 나죠?

특히 마젠토(Magento)는 강력한 e커머스 플랫폼이지만, 기본 이미지 처리 시스템이 좀... 음... 솔직히 말하면 2025년 기준으로는 많이 구식이에요. ㅋㅋㅋ 그래서 우리가 직접 손을 봐야 하는 상황! 🛠️

재능넷에서도 마젠토 쇼핑몰 최적화 서비스를 찾는 분들이 많은데요, 이미지 최적화는 그중에서도 가장 효과가 확실한 부분이에요. 이 글을 끝까지 따라오시면 여러분도 직접 고성능 이미지 최적화 모듈을 개발할 수 있을 거예요!

2. 마젠토 이미지 처리 아키텍처 이해하기 🏗️

자, 이제 본격적으로 마젠토의 이미지 처리 시스템을 까보자구요! ㅋㅋㅋ 모듈 개발하기 전에 기존 시스템을 이해해야 제대로 된 최적화가 가능하니까요~

2.1 마젠토 2.4.7 (2025년 최신버전) 이미지 처리 흐름

마젠토는 기본적으로 이미지를 다음과 같은 방식으로 처리해요:

1. 관리자가 이미지 업로드 → pub/media/catalog/product 폴더에 원본 저장
2. 이미지 요청 시 → Magento\Catalog\Model\Product\Image 클래스가 처리
3. 리사이징/워터마크 등 적용 → cache 폴더에 저장
4. 브라우저에 이미지 전송

근데 이 과정에서 몇 가지 심각한 문제가 있어요:

2.2 마젠토 이미지 관련 핵심 클래스 및 인터페이스

모듈 개발 전에 알아두면 좋은 마젠토 이미지 관련 핵심 클래스들이에요:

// 이미지 처리의 중심 클래스
\Magento\Catalog\Model\Product\Image

// 이미지 설정 관리
\Magento\Catalog\Model\Product\Media\Config

// 이미지 업로드 처리
\Magento\MediaStorage\Model\File\Uploader

// 이미지 리사이징 및 처리
\Magento\Framework\Image
\Magento\Framework\Image\Adapter\AdapterInterface

2025년 마젠토 2.4.7에서는 이미지 처리 파이프라인이 약간 개선되었지만, 여전히 최신 웹 표준에는 많이 부족해요. 그래서 우리가 직접 모듈을 만들어야 하는 거죠! 💪

이제 마젠토의 이미지 처리 구조를 알았으니, 우리만의 고성능 이미지 최적화 모듈을 개발해볼까요? 🚀

3. 고성능 이미지 최적화 모듈 개발 준비하기 🛠️

자, 이제 진짜 개발 시작해볼게요! 먼저 모듈 개발을 위한 준비부터 해볼까요? 개발 환경 세팅부터 모듈 구조 설계까지 차근차근 알아봅시다~

3.1 개발 환경 세팅

2025년 기준으로 마젠토 모듈 개발을 위한 최적의 환경은 다음과 같아요:

특히 2025년에는 Docker 기반 개발 환경이 완전 대세예요! 로컬 환경 설정 고민 없이 바로 개발 시작할 수 있거든요. ㅋㅋ

3.2 모듈 기본 구조 만들기

우리 모듈의 이름은 Vendor_ImageOptimizer로 할게요! 기본 구조를 만들어 봅시다:

app/code/Vendor/ImageOptimizer/
├── Api/
│   └── ImageOptimizerInterface.php
├── Block/
│   └── Product/
│       └── View/
│           └── Gallery.php
├── Console/
│   └── Command/
│       └── OptimizeImages.php
├── Controller/
│   └── Adminhtml/
│       └── System/
│           └── Config/
│               └── TestConnection.php
├── Helper/
│   └── Data.php
├── Model/
│   ├── ImageOptimizer.php
│   ├── Config.php
│   └── Adapter/
│       ├── WebP.php
│       ├── Avif.php
│       └── Jpeg.php
├── Observer/
│   └── ProductImageSaveAfter.php
├── Plugin/
│   └── CatalogProductImagePlugin.php
├── Setup/
│   ├── InstallSchema.php
│   └── UpgradeSchema.php
├── etc/
│   ├── adminhtml/
│   │   └── system.xml
│   ├── config.xml
│   ├── di.xml
│   ├── module.xml
│   └── events.xml
├── view/
│   ├── adminhtml/
│   │   ├── templates/
│   │   └── web/
│   └── frontend/
│       ├── templates/
│       │   └── product/
│       │       └── view/
│       │           └── gallery.phtml
│       └── web/
│           ├── js/
│           │   └── image-optimizer.js
│           └── css/
│               └── image-optimizer.css
├── composer.json
└── registration.php

우와, 폴더 구조가 좀 복잡해 보이죠? ㅋㅋㅋ 하지만 걱정 마세요! 하나씩 차근차근 설명해 드릴게요~ 😉

3.3 모듈 등록하기

먼저 registration.php와 module.xml 파일로 모듈을 등록해야 해요:

// registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_ImageOptimizer',
    __DIR__
);</code>

// etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ImageOptimizer" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"></module>
            <module name="Magento_MediaStorage"></module>
        </sequence>
    </module>
</config>

sequence 태그는 우리 모듈이 Catalog와 MediaStorage 모듈 이후에 로드되도록 해줘요. 이미지 처리 관련 모듈이니까 이 두 모듈에 의존하거든요!

3.4 의존성 설정하기

이제 composer.json 파일을 만들어 필요한 외부 라이브러리를 설정해 볼게요:

{
    "name": "vendor/module-image-optimizer",
    "description": "고성능 이미지 최적화 모듈",
    "type": "magento2-module",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "require": {
        "php": "~8.2.0||~8.3.0",
        "magento/framework": "103.0.*",
        "rosell-dk/webp-convert": "^2.9.0",
        "spatie/image-optimizer": "^1.7.0"
    },
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Vendor\\ImageOptimizer\\": ""
        }
    }
}

여기서 rosell-dk/webp-convert와 spatie/image-optimizer는 2025년 기준 가장 인기 있는 PHP 이미지 최적화 라이브러리예요. 이 라이브러리들을 활용해서 개발 시간을 단축시킬 수 있어요! 일일이 다 구현하려면 머리 빠질 것 같잖아요~ ㅋㅋㅋ

3.5 모듈 설치 및 활성화

모듈 기본 구조를 만들었으면 마젠토에 설치하고 활성화해야 해요:

bin/magento module:enable Vendor_ImageOptimizer
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:clean

이제 기본 준비는 끝났어요! 다음 단계로 넘어가서 실제 기능을 구현해 볼까요? 💻

4. 이미지 최적화 핵심 기능 구현하기 🔧

자, 이제 진짜 핵심 기능을 구현해볼 차례예요! 먼저 이미지 최적화의 핵심 인터페이스부터 만들어 볼게요.

4.1 이미지 최적화 인터페이스 정의

모듈의 핵심 기능을 정의하는 인터페이스를 만들어 봅시다:

// Api/ImageOptimizerInterface.php
<?php namespace Vendor\ImageOptimizer\Api;

interface ImageOptimizerInterface
{
    /**
     * 이미지 최적화 실행
     *
     * @param string $imagePath 원본 이미지 경로
     * @param array $options 최적화 옵션
     * @return string 최적화된 이미지 경로
     */
    public function optimize($imagePath, array $options = []);
    
    /**
     * 이미지를 WebP 형식으로 변환
     *
     * @param string $imagePath 원본 이미지 경로
     * @param int $quality WebP 품질 (0-100)
     * @return string WebP 이미지 경로
     */
    public function convertToWebP($imagePath, $quality = 80);
    
    /**
     * 이미지를 AVIF 형식으로 변환
     *
     * @param string $imagePath 원본 이미지 경로
     * @param int $quality AVIF 품질 (0-100)
     * @return string AVIF 이미지 경로
     */
    public function convertToAVIF($imagePath, $quality = 75);
    
    /**
     * 반응형 이미지 생성
     *
     * @param string $imagePath 원본 이미지 경로
     * @param array $dimensions 생성할 이미지 크기 배열 [width, height]
     * @return array 생성된 이미지 경로 배열
     */
    public function createResponsiveImages($imagePath, array $dimensions);
}</code>

인터페이스를 만들면 의존성 주입(DI)을 통해 코드를 더 유연하게 만들 수 있어요. 마젠토는 DI를 적극 활용하는 프레임워크니까요! 😎

4.2 설정 모델 구현

다음으로 모듈 설정을 관리할 Config 클래스를 만들어 봅시다:

// Model/Config.php
<?php namespace Vendor\ImageOptimizer\Model;

use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Store\Model\ScopeInterface;

class Config
{
    const XML_PATH_ENABLED = 'vendor_image_optimizer/general/enabled';
    const XML_PATH_WEBP_ENABLED = 'vendor_image_optimizer/formats/webp_enabled';
    const XML_PATH_AVIF_ENABLED = 'vendor_image_optimizer/formats/avif_enabled';
    const XML_PATH_JPEG_QUALITY = 'vendor_image_optimizer/quality/jpeg_quality';
    const XML_PATH_WEBP_QUALITY = 'vendor_image_optimizer/quality/webp_quality';
    const XML_PATH_AVIF_QUALITY = 'vendor_image_optimizer/quality/avif_quality';
    const XML_PATH_LAZY_LOADING = 'vendor_image_optimizer/features/lazy_loading';
    const XML_PATH_CDN_ENABLED = 'vendor_image_optimizer/cdn/enabled';
    const XML_PATH_CDN_URL = 'vendor_image_optimizer/cdn/url';
    
    /**
     * @var ScopeConfigInterface
     */
    private $scopeConfig;
    
    /**
     * @param ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;
    }
    
    /**
     * 모듈이 활성화되었는지 확인
     *
     * @param int|null $storeId
     * @return bool
     */
    public function isEnabled($storeId = null): bool
    {
        return $this->scopeConfig->isSetFlag(
            self::XML_PATH_ENABLED,
            ScopeInterface::SCOPE_STORE,
            $storeId
        );
    }
    
    /**
     * WebP 변환이 활성화되었는지 확인
     *
     * @param int|null $storeId
     * @return bool
     */
    public function isWebPEnabled($storeId = null): bool
    {
        if (!$this->isEnabled($storeId)) {
            return false;
        }
        
        return $this->scopeConfig->isSetFlag(
            self::XML_PATH_WEBP_ENABLED,
            ScopeInterface::SCOPE_STORE,
            $storeId
        );
    }
    
    // 나머지 getter 메소드들...
}

설정 클래스를 통해 관리자 패널에서 모듈 설정을 쉽게 변경할 수 있게 해줄 거예요. 이제 실제 관리자 설정 화면을 만들어 볼까요?

4.3 관리자 설정 화면 구현

관리자 설정 화면을 위한 system.xml 파일을 만들어 봅시다:

// etc/adminhtml/system.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="vendor" translate="label" sortorder="100">
            <label>Vendor Extensions</label>
        </tab>
        <section id="vendor_image_optimizer" translate="label" type="text" sortorder="110" showindefault="1" showinwebsite="1" showinstore="1">
            <label>Image Optimizer</label>
            <tab>vendor</tab>
            <resource>Vendor_ImageOptimizer::config</resource>
            <group id="general" translate="label" type="text" sortorder="10" showindefault="1" showinwebsite="1" showinstore="1">
                <label>General Settings</label>
                <field id="enabled" translate="label" type="select" sortorder="10" showindefault="1" showinwebsite="1" showinstore="1">
                    <label>Enable Module</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="optimization_level" translate="label" type="select" sortorder="20" showindefault="1" showinwebsite="1" showinstore="1">
                    <label>Optimization Level</label>
                    <source_model>Vendor\ImageOptimizer\Model\Config\Source\OptimizationLevel</source_model>
                    <depends>
                        <field id="enabled">1</field>
                    </depends>
                </field>
            </group>
            <group id="formats" translate="label" type="text" sortorder="20" showindefault="1" showinwebsite="1" showinstore="1">
                <label>Image Formats</label>
                <field id="webp_enabled" translate="label" type="select" sortorder="10" showindefault="1" showinwebsite="1" showinstore="1">
                    <label>Enable WebP Conversion</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="vendor_image_optimizer/general/enabled">1</field>
                    </depends>
                </field>
                <field id="avif_enabled" translate="label" type="select" sortorder="20" showindefault="1" showinwebsite="1" showinstore="1">
                    <label>Enable AVIF Conversion</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <depends>
                        <field id="vendor_image_optimizer/general/enabled">1</field>
                    </depends>
                </field>
                <!-- 추가 설정 필드들... -->
            </group>
            <!-- 추가 설정 그룹들... -->
        </section>
    </system>
</config>

이제 관리자 패널에서 모듈 설정을 쉽게 변경할 수 있어요! 스토어 → 설정 → 구성 메뉴에서 'Vendor Extensions' 탭 아래에 'Image Optimizer' 섹션이 생겼을 거예요.

4.4 이미지 최적화 모델 구현

이제 실제 이미지 최적화를 수행할 모델 클래스를 구현해 봅시다:

// Model/ImageOptimizer.php
<?php namespace Vendor\ImageOptimizer\Model;

use Vendor\ImageOptimizer\Api\ImageOptimizerInterface;
use Vendor\ImageOptimizer\Model\Config;
use Magento\Framework\Filesystem\DirectoryList;
use Magento\Framework\App\Filesystem\DirectoryList as AppDirectoryList;
use Magento\Framework\Filesystem;
use Magento\Framework\Filesystem\Driver\File;
use Psr\Log\LoggerInterface;
use WebPConvert\WebPConvert;
use Spatie\ImageOptimizer\OptimizerChainFactory;

class ImageOptimizer implements ImageOptimizerInterface
{
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @var DirectoryList
     */
    private $directoryList;
    
    /**
     * @var Filesystem
     */
    private $filesystem;
    
    /**
     * @var File
     */
    private $file;
    
    /**
     * @var LoggerInterface
     */
    private $logger;
    
    /**
     * @var OptimizerChainFactory
     */
    private $optimizerChainFactory;
    
    /**
     * @param Config $config
     * @param DirectoryList $directoryList
     * @param Filesystem $filesystem
     * @param File $file
     * @param LoggerInterface $logger
     * @param OptimizerChainFactory $optimizerChainFactory
     */
    public function __construct(
        Config $config,
        DirectoryList $directoryList,
        Filesystem $filesystem,
        File $file,
        LoggerInterface $logger,
        OptimizerChainFactory $optimizerChainFactory
    ) {
        $this->config = $config;
        $this->directoryList = $directoryList;
        $this->filesystem = $filesystem;
        $this->file = $file;
        $this->logger = $logger;
        $this->optimizerChainFactory = $optimizerChainFactory;
    }
    
    /**
     * {@inheritdoc}
     */
    public function optimize($imagePath, array $options = [])
    {
        try {
            if (!$this->config->isEnabled()) {
                return $imagePath;
            }
            
            $absolutePath = $this->getAbsolutePath($imagePath);
            
            if (!$this->file->isExists($absolutePath)) {
                $this->logger->error("Image not found: {$absolutePath}");
                return $imagePath;
            }
            
            // Spatie의 이미지 최적화 라이브러리 사용
            $optimizerChain = $this->optimizerChainFactory->create();
            $optimizerChain->optimize($absolutePath);
            
            $this->logger->info("Image optimized: {$absolutePath}");
            
            return $imagePath;
        } catch (\Exception $e) {
            $this->logger->error("Image optimization failed: " . $e->getMessage());
            return $imagePath;
        }
    }
    
    /**
     * {@inheritdoc}
     */
    public function convertToWebP($imagePath, $quality = 80)
    {
        try {
            if (!$this->config->isWebPEnabled()) {
                return $imagePath;
            }
            
            $absolutePath = $this->getAbsolutePath($imagePath);
            $webpPath = $absolutePath . '.webp';
            
            if (!$this->file->isExists($absolutePath)) {
                $this->logger->error("Image not found: {$absolutePath}");
                return $imagePath;
            }
            
            // WebP 변환 라이브러리 사용
            WebPConvert::convert($absolutePath, $webpPath, [
                'quality' => $quality,
                'metadata' => 'none',
            ]);
            
            $this->logger->info("Image converted to WebP: {$webpPath}");
            
            return str_replace($this->directoryList->getRoot(), '', $webpPath);
        } catch (\Exception $e) {
            $this->logger->error("WebP conversion failed: " . $e->getMessage());
            return $imagePath;
        }
    }
    
    /**
     * {@inheritdoc}
     */
    public function convertToAVIF($imagePath, $quality = 75)
    {
        // AVIF 변환 로직 구현...
        // 참고: PHP 8.1 이상에서는 GD 라이브러리가 AVIF를 지원합니다
    }
    
    /**
     * {@inheritdoc}
     */
    public function createResponsiveImages($imagePath, array $dimensions)
    {
        // 반응형 이미지 생성 로직 구현...
    }
    
    /**
     * 상대 경로를 절대 경로로 변환
     *
     * @param string $path
     * @return string
     */
    private function getAbsolutePath($path)
    {
        if (strpos($path, $this->directoryList->getRoot()) === 0) {
            return $path;
        }
        
        return $this->directoryList->getRoot() . '/' . ltrim($path, '/');
    }
}

이 클래스는 외부 라이브러리를 활용해 이미지 최적화와 WebP 변환을 수행해요. 실제 프로덕션 환경에서는 더 많은 예외 처리와 최적화가 필요하겠지만, 기본 구조는 이렇게 잡을 수 있어요!

4.5 의존성 주입 설정

이제 di.xml 파일을 통해 의존성 주입을 설정해 봅시다:

// etc/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <!-- 인터페이스와 구현체 연결 -->
    <preference for="Vendor\ImageOptimizer\Api\ImageOptimizerInterface" type="Vendor\ImageOptimizer\Model\ImageOptimizer"></preference>
    
    <!-- Spatie 이미지 최적화 라이브러리 팩토리 -->
    <virtualtype name="Vendor\ImageOptimizer\Model\OptimizerChainFactory" type="Magento\Framework\ObjectManager\Factory\Dynamic\Developer">
        <arguments>
            <argument name="instanceName" xsi:type="string">Spatie\ImageOptimizer\OptimizerChain</argument>
        </arguments>
    </virtualtype>
    
    <!-- 카탈로그 이미지 모델에 플러그인 적용 -->
    <type name="Magento\Catalog\Model\Product\Image">
        <plugin name="vendor_image_optimizer_product_image" type="Vendor\ImageOptimizer\Plugin\CatalogProductImagePlugin" sortorder="10" disabled></plugin>
    </type>
</config>

이제 기본적인 이미지 최적화 기능이 구현되었어요! 다음 단계로 넘어가서 더 고급 기능을 추가해 볼까요? 😊

5. WebP 및 AVIF 지원 추가하기 🖼️

이제 최신 이미지 포맷인 WebP와 AVIF를 지원하는 기능을 더 자세히 구현해 볼게요! 이 부분이 2025년 기준으로 가장 중요한 최적화 요소 중 하나예요!

5.1 브라우저 호환성 감지 기능

먼저 사용자의 브라우저가 WebP나 AVIF를 지원하는지 감지하는 JavaScript 코드를 만들어 봅시다:

// view/frontend/web/js/image-optimizer.js
define([
    'jquery'
], function ($) {
    'use strict';
    
    return function (config) {
        /**
         * WebP 지원 여부 감지
         * @returns {Promise}
         */
        function detectWebP() {
            return new Promise(function(resolve) {
                var webpImg = new Image();
                webpImg.onload = function() { resolve(true); };
                webpImg.onerror = function() { resolve(false); };
                webpImg.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
            });
        }
        
        /**
         * AVIF 지원 여부 감지
         * @returns {Promise}
         */
        function detectAVIF() {
            return new Promise(function(resolve) {
                var avifImg = new Image();
                avifImg.onload = function() { resolve(true); };
                avifImg.onerror = function() { resolve(false); };
                avifImg.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=';
            });
        }
        
        /**
         * 브라우저 지원 정보를 쿠키에 저장
         */
        function storeFormatSupport() {
            Promise.all([detectWebP(), detectAVIF()]).then(function(results) {
                var webpSupported = results[0];
                var avifSupported = results[1];
                
                // 쿠키에 지원 정보 저장 (30일간 유효)
                document.cookie = 'webp_supported=' + (webpSupported ? '1' : '0') + '; path=/; max-age=2592000';
                document.cookie = 'avif_supported=' + (avifSupported ? '1' : '0') + '; path=/; max-age=2592000';
                
                // HTML 클래스에 지원 정보 추가
                if (webpSupported) {
                    $('html').addClass('webp-support');
                }
                if (avifSupported) {
                    $('html').addClass('avif-support');
                }
            });
        }
        
        // 초기화
        storeFormatSupport();
        
        // 이미지 소스 교체 기능
        function updateImageSources() {
            var webpSupported = $('html').hasClass('webp-support');
            var avifSupported = $('html').hasClass('avif-support');
            
            $('img[data-src-avif][data-src-webp][data-src-original]').each(function() {
                var $img = $(this);
                var src;
                
                if (avifSupported && $img.attr('data-src-avif')) {
                    src = $img.attr('data-src-avif');
                } else if (webpSupported && $img.attr('data-src-webp')) {
                    src = $img.attr('data-src-webp');
                } else {
                    src = $img.attr('data-src-original');
                }
                
                $img.attr('src', src);
            });
        }
        
        // DOM 로드 후 이미지 소스 업데이트
        $(document).ready(function() {
            updateImageSources();
        });
        
        return {
            updateImageSources: updateImageSources
        };
    };
});

이 JavaScript는 사용자의 브라우저가 WebP와 AVIF를 지원하는지 감지하고, 지원하는 경우 해당 포맷의 이미지를 제공해요. 이제 이 JavaScript를 로드하는 레이아웃 파일을 만들어 봅시다:

// view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referencecontainer name="before.body.end">
            <block class="Magento\Framework\View\Element\Template" name="vendor_image_optimizer_js" template="Vendor_ImageOptimizer::js.phtml"></block>
        </referencecontainer>
    </body>
</page>

// view/frontend/templates/js.phtml
<script type="text/x-magento-init">
{
    "*": {
        "Vendor_ImageOptimizer/js/image-optimizer": {
            "enabled": <?= $block->escapeJs($block->helper('Vendor\ImageOptimizer\Helper\Data')->isEnabled()) ?>
        }
    }
}
</script>

5.2 AVIF 변환 기능 구현

이제 앞서 만든 ImageOptimizer 클래스의 convertToAVIF 메소드를 구현해 봅시다:

/**
 * {@inheritdoc}
 */
public function convertToAVIF($imagePath, $quality = 75)
{
    try {
        if (!$this->config->isAvifEnabled()) {
            return $imagePath;
        }
        
        $absolutePath = $this->getAbsolutePath($imagePath);
        $avifPath = $absolutePath . '.avif';
        
        if (!$this->file->isExists($absolutePath)) {
            $this->logger->error("Image not found: {$absolutePath}");
            return $imagePath;
        }
        
        // PHP 8.1 이상에서는 GD 라이브러리가 AVIF를 지원합니다
        if (function_exists('imageavif')) {
            $imageInfo = getimagesize($absolutePath);
            $mimeType = $imageInfo['mime'] ?? '';
            
            switch ($mimeType) {
                case 'image/jpeg':
                    $image = imagecreatefromjpeg($absolutePath);
                    break;
                case 'image/png':
                    $image = imagecreatefrompng($absolutePath);
                    break;
                case 'image/webp':
                    $image = imagecreatefromwebp($absolutePath);
                    break;
                default:
                    $this->logger->error("Unsupported image type: {$mimeType}");
                    return $imagePath;
            }
            
            // AVIF로 변환
            imageavif($image, $avifPath, $quality);
            imagedestroy($image);
            
            $this->logger->info("Image converted to AVIF: {$avifPath}");
            
            return str_replace($this->directoryList->getRoot(), '', $avifPath);
        } else {
            // PHP 8.1 미만이거나 GD에 AVIF 지원이 없는 경우
            // 외부 도구(예: avifenc)를 사용하여 변환할 수 있습니다
            $this->logger->warning("AVIF conversion not supported by current PHP version");
            return $imagePath;
        }
    } catch (\Exception $e) {
        $this->logger->error("AVIF conversion failed: " . $e->getMessage());
        return $imagePath;
    }
}

AVIF는 차세대 이미지 포맷으로 WebP보다도 더 뛰어난 압축률을 제공해요. 2025년 기준으로 대부분의 최신 브라우저가 지원하지만, 여전히 일부 구형 브라우저는 지원하지 않기 때문에 대체 이미지를 제공하는 것이 중요해요!

5.3 이미지 태그 수정을 위한 플러그인

이제 마젠토의 제품 이미지 태그를 수정하여 WebP와 AVIF 이미지를 제공하는 플러그인을 만들어 봅시다:

// Plugin/CatalogProductImagePlugin.php
<?php namespace Vendor\ImageOptimizer\Plugin;

use Magento\Catalog\Block\Product\Image as ProductImage;
use Vendor\ImageOptimizer\Api\ImageOptimizerInterface;
use Vendor\ImageOptimizer\Model\Config;
use Magento\Framework\App\Request\Http;

class CatalogProductImagePlugin
{
    /**
     * @var ImageOptimizerInterface
     */
    private $imageOptimizer;
    
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @var Http
     */
    private $request;
    
    /**
     * @param ImageOptimizerInterface $imageOptimizer
     * @param Config $config
     * @param Http $request
     */
    public function __construct(
        ImageOptimizerInterface $imageOptimizer,
        Config $config,
        Http $request
    ) {
        $this->imageOptimizer = $imageOptimizer;
        $this->config = $config;
        $this->request = $request;
    }
    
    /**
     * 제품 이미지 HTML을 수정하여 WebP/AVIF 지원 추가
     *
     * @param ProductImage $subject
     * @param string $result
     * @return string
     */
    public function afterToHtml(ProductImage $subject, $result)
    {
        if (!$this->config->isEnabled()) {
            return $result;
        }
        
        $imageUrl = $subject->getImageUrl();
        
        // 이미 최적화된 이미지인지 확인
        if (strpos($imageUrl, '.webp') !== false || strpos($imageUrl, '.avif') !== false) {
            return $result;
        }
        
        try {
            // WebP 및 AVIF 변환 경로 생성
            $webpUrl = '';
            $avifUrl = '';
            
            if ($this->config->isWebPEnabled()) {
                $webpPath = $this->imageOptimizer->convertToWebP($imageUrl);
                $webpUrl = str_replace($imageUrl, $webpPath, $imageUrl);
            }
            
            if ($this->config->isAvifEnabled()) {
                $avifPath = $this->imageOptimizer->convertToAVIF($imageUrl);
                $avifUrl = str_replace($imageUrl, $avifPath, $imageUrl);
            }
            
            // 쿠키를 통해 브라우저 지원 여부 확인
            $webpSupported = $this->request->getCookie('webp_supported', '0') === '1';
            $avifSupported = $this->request->getCookie('avif_supported', '0') === '1';
            
            // 브라우저가 지원하는 최적의 포맷 선택
            $bestImageUrl = $imageUrl;
            if ($avifSupported && !empty($avifUrl)) {
                $bestImageUrl = $avifUrl;
            } else if ($webpSupported && !empty($webpUrl)) {
                $bestImageUrl = $webpUrl;
            }
            
            // HTML 수정
            $search = 'src="' . $imageUrl . '"';
            $replace = 'src="' . $bestImageUrl . '" ' .
                       'data-src-original="' . $imageUrl . '" ' .
                       (!empty($webpUrl) ? 'data-src-webp="' . $webpUrl . '" ' : '') .
                       (!empty($avifUrl) ? 'data-src-avif="' . $avifUrl . '" ' : '');
            
            return str_replace($search, $replace, $result);
        } catch (\Exception $e) {
            // 오류 발생 시 원본 HTML 반환
            return $result;
        }
    }
}

이 플러그인은 제품 이미지 HTML을 가로채서 WebP와 AVIF 버전의 이미지 URL을 추가해요. 그리고 사용자의 브라우저가 지원하는 최적의 포맷을 선택해서 보여줘요. 완전 스마트하죠? ㅋㅋㅋ

5.4 이미지 포맷 전환 테스트

이제 다양한 브라우저에서 이미지 포맷 전환이 제대로 작동하는지 테스트해 볼 차례예요. 다음과 같은 방법으로 테스트할 수 있어요:

1. Chrome DevTools의 Network 탭에서 이미지 요청 확인
2. Firefox, Safari, Edge 등 다양한 브라우저에서 테스트
3. 모바일 기기에서 테스트
4. 이미지 크기 비교 (원본 vs WebP vs AVIF)

일반적으로 AVIF는 원본 대비 50-80%, WebP는 25-50% 정도 파일 크기를 줄일 수 있어요. 이 정도면 웹사이트 로딩 속도에 엄청난 영향을 미치겠죠? 👍

6. 반응형 이미지 및 지연 로딩 구현 📱

이제 모바일 최적화를 위한 반응형 이미지와 페이지 로딩 속도를 더 개선하기 위한 지연 로딩(Lazy Loading) 기능을 구현해 볼게요!

6.1 반응형 이미지 생성 기능 구현

먼저 ImageOptimizer 클래스의 createResponsiveImages 메소드를 구현해 봅시다:

/**
 * {@inheritdoc}
 */
public function createResponsiveImages($imagePath, array $dimensions)
{
    try {
        $absolutePath = $this->getAbsolutePath($imagePath);
        
        if (!$this->file->isExists($absolutePath)) {
            $this->logger->error("Image not found: {$absolutePath}");
            return [];
        }
        
        $pathInfo = pathinfo($absolutePath);
        $extension = strtolower($pathInfo['extension'] ?? '');
        $baseName = $pathInfo['filename'];
        $dirName = $pathInfo['dirname'];
        
        // 지원되는 이미지 형식 확인
        if (!in_array($extension, ['jpg', 'jpeg', 'png', 'gif'])) {
            $this->logger->error("Unsupported image format: {$extension}");
            return [];
        }
        
        $result = [];
        
        foreach ($dimensions as $dimension) {
            $width = $dimension['width'] ?? 0;
            $height = $dimension['height'] ?? 0;
            
            if ($width <= 0 && $height <= 0) {
                continue;
            }
            
            // 새 이미지 경로 생성
            $newFileName = "{$baseName}_{$width}x{$height}.{$extension}";
            $newFilePath = "{$dirName}/{$newFileName}";
            
            // 이미지 리사이징
            $this->resizeImage($absolutePath, $newFilePath, $width, $height);
            
            // 최적화 및 WebP/AVIF 변환
            $this->optimize($newFilePath);
            $webpPath = '';
            $avifPath = '';
            
            if ($this->config->isWebPEnabled()) {
                $webpPath = $this->convertToWebP($newFilePath);
            }
            
            if ($this->config->isAvifEnabled()) {
                $avifPath = $this->convertToAVIF($newFilePath);
            }
            
            // 결과 배열에 추가
            $result[] = [
                'width' => $width,
                'height' => $height,
                'path' => str_replace($this->directoryList->getRoot(), '', $newFilePath),
                'webp' => $webpPath,
                'avif' => $avifPath
            ];
        }
        
        return $result;
    } catch (\Exception $e) {
        $this->logger->error("Creating responsive images failed: " . $e->getMessage());
        return [];
    }
}

/**
 * 이미지 리사이징 헬퍼 메소드
 *
 * @param string $sourcePath
 * @param string $destinationPath
 * @param int $width
 * @param int $height
 * @return bool
 */
private function resizeImage($sourcePath, $destinationPath, $width, $height)
{
    try {
        $imageFactory = $this->objectManager->create('Magento\Framework\Image\Factory');
        $image = $imageFactory->create($sourcePath);
        
        $image->constrainOnly(true);
        $image->keepAspectRatio(true);
        $image->keepFrame(false);
        $image->resize($width, $height);
        $image->save($destinationPath);
        
        return true;
    } catch (\Exception $e) {
        $this->logger->error("Image resize failed: " . $e->getMessage());
        return false;
    }
}

이 메소드는 원본 이미지를 다양한 크기로 리사이징하고, 각 크기별로 WebP와 AVIF 버전도 생성해요. 이렇게 하면 다양한 디바이스에 최적화된 이미지를 제공할 수 있어요!

6.2 반응형 이미지 HTML 구현

이제 picture 태그를 사용하여 반응형 이미지 HTML을 생성하는 Block 클래스를 만들어 봅시다:

// Block/Product/View/ResponsiveImage.php
<?php namespace Vendor\ImageOptimizer\Block\Product\View;

use Magento\Framework\View\Element\Template;
use Vendor\ImageOptimizer\Api\ImageOptimizerInterface;
use Vendor\ImageOptimizer\Model\Config;

class ResponsiveImage extends Template
{
    /**
     * @var ImageOptimizerInterface
     */
    private $imageOptimizer;
    
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @param Template\Context $context
     * @param ImageOptimizerInterface $imageOptimizer
     * @param Config $config
     * @param array $data
     */
    public function __construct(
        Template\Context $context,
        ImageOptimizerInterface $imageOptimizer,
        Config $config,
        array $data = []
    ) {
        $this->imageOptimizer = $imageOptimizer;
        $this->config = $config;
        parent::__construct($context, $data);
    }
    
    /**
     * 반응형 이미지 HTML 생성
     *
     * @param string $imagePath
     * @param string $alt
     * @param bool $lazyLoad
     * @return string
     */
    public function getResponsiveImageHtml($imagePath, $alt = '', $lazyLoad = true)
    {
        if (!$this->config->isEnabled()) {
            return '<img src="'%20.%20%24imagePath%20.%20'" alt="' . $this->escapeHtmlAttr($alt) . '">';
        }
        
        // 반응형 이미지 크기 정의
        $dimensions = [
            ['width' => 320, 'height' => 0],  // 모바일
            ['width' => 768, 'height' => 0],  // 태블릿
            ['width' => 1024, 'height' => 0], // 데스크탑
            ['width' => 1440, 'height' => 0]  // 대형 디스플레이
        ];
        
        // 반응형 이미지 생성
        $responsiveImages = $this->imageOptimizer->createResponsiveImages($imagePath, $dimensions);
        
        if (empty($responsiveImages)) {
            return '<img src="'%20.%20%24imagePath%20.%20'" alt="' . $this->escapeHtmlAttr($alt) . '">';
        }
        
        // picture 태그 생성
        $html = '<picture>';
        
        // 각 크기별로 source 태그 추가
        foreach ($responsiveImages as $image) {
            // AVIF 소스
            if (!empty($image['avif'])) {
                $html .= '<source type="image/avif" .>';
            }
            
            // WebP 소스
            if (!empty($image['webp'])) {
                $html .= '<source type="image/webp" .>';
            }
            
            // 원본 소스
            $html .= '<source .>';
        }
        
        // 기본 이미지 태그
        $lazyAttr = $lazyLoad ? 'loading="lazy"' : '';
        $html .= '<img src="'%20.%20%24responsiveImages%5B0%5D%5B'path'%5D%20.%20'" .>escapeHtmlAttr($alt) . '" ' .
                 $lazyAttr . '>';
        
        $html .= '</source></source></source></picture>';
        
        return $html;
    }
}

이 Block 클래스는 picture 태그와 source 태그를 사용하여 브라우저가 지원하는 최적의 이미지 포맷과 화면 크기에 맞는 이미지를 자동으로 선택하도록 해요. 완전 스마트하죠? ㅋㅋㅋ

6.3 지연 로딩(Lazy Loading) 구현

이제 이미지 지연 로딩을 구현해 볼게요. 최신 브라우저는 loading="lazy" 속성을 지원하지만, 구형 브라우저를 위한 JavaScript 기반 지연 로딩도 구현해 봅시다:

// view/frontend/web/js/lazy-loader.js
define([
    'jquery',
    'domReady!'
], function ($) {
    'use strict';
    
    return function (config) {
        var options = $.extend({
            selector: 'img[data-lazy]',
            threshold: 200,
            placeholder: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"%3E%3C/svg%3E'
        }, config);
        
        /**
         * 이미지가 뷰포트에 있는지 확인
         * @param {Element} el
         * @returns {boolean}
         */
        function isElementInViewport(el) {
            var rect = el.getBoundingClientRect();
            
            return (
                rect.bottom >= 0 &&
                rect.right >= 0 &&
                rect.top <= (window.innerHeight || document.documentElement.clientHeight) + options.threshold &&
                rect.left <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }
        
        /**
         * 지연 로딩 이미지 로드
         * @param {Element} img
         */
        function loadImage(img) {
            var $img = $(img);
            var src = $img.attr('data-src');
            var srcset = $img.attr('data-srcset');
            var sizes = $img.attr('data-sizes');
            
            if (src) {
                $img.attr('src', src);
            }
            
            if (srcset) {
                $img.attr('srcset', srcset);
            }
            
            if (sizes) {
                $img.attr('sizes', sizes);
            }
            
            $img.removeAttr('data-src data-srcset data-sizes data-lazy');
            $img.addClass('lazy-loaded');
        }
        
        /**
         * 화면에 보이는 이미지 로드
         */
        function loadVisibleImages() {
            $(options.selector).each(function () {
                if (isElementInViewport(this) && !$(this).hasClass('lazy-loaded')) {
                    loadImage(this);
                }
            });
        }
        
        // 네이티브 지연 로딩 지원 확인
        var nativeLazyLoadSupported = 'loading' in HTMLImageElement.prototype;
        
        // 초기화
        function init() {
            if (nativeLazyLoadSupported) {
                // 네이티브 지연 로딩 사용
                $(options.selector).each(function () {
                    var $img = $(this);
                    var src = $img.attr('data-src');
                    var srcset = $img.attr('data-srcset');
                    var sizes = $img.attr('data-sizes');
                    
                    $img.attr('loading', 'lazy');
                    
                    if (src) {
                        $img.attr('src', src);
                    }
                    
                    if (srcset) {
                        $img.attr('srcset', srcset);
                    }
                    
                    if (sizes) {
                        $img.attr('sizes', sizes);
                    }
                    
                    $img.removeAttr('data-src data-srcset data-sizes data-lazy');
                });
            } else {
                // 자바스크립트 기반 지연 로딩 사용
                $(options.selector).each(function () {
                    $(this).attr('src', options.placeholder);
                });
                
                // 스크롤 이벤트 리스너 등록
                $(window).on('scroll resize', loadVisibleImages);
                
                // 초기 로드
                loadVisibleImages();
            }
        }
        
        // 초기화 실행
        init();
        
        return {
            loadVisibleImages: loadVisibleImages
        };
    };
});

이 JavaScript는 이미지가 화면에 보일 때만 로드하도록 해서 초기 페이지 로딩 속도를 크게 개선해요. 특히 제품 목록 페이지처럼 많은 이미지가 있는 페이지에서 효과가 큽니다!

6.4 반응형 이미지와 지연 로딩 통합

이제 반응형 이미지와 지연 로딩을 통합해서 제품 갤러리에 적용해 봅시다. 먼저 제품 갤러리 템플릿을 오버라이드해야 해요:

// view/frontend/layout/catalog_product_view.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceblock name="product.info.media.image">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Vendor_ImageOptimizer::product/view/gallery.phtml</argument>
            </action>
        </referenceblock>
    </body>
</page>

이제 갤러리 템플릿을 만들어 봅시다:

// view/frontend/templates/product/view/gallery.phtml
<?php /** @var $block \Magento\Catalog\Block\Product\View\Gallery */
/** @var \Vendor\ImageOptimizer\Block\Product\View\ResponsiveImage $responsiveImageBlock */
$responsiveImageBlock = $block->getLayout()->createBlock(
    \Vendor\ImageOptimizer\Block\Product\View\ResponsiveImage::class
);

$images = $block->getGalleryImages()->getItems();
$mainImage = current($images);
?>

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <?php if ($mainImage): ?>
        <div class="main-image-container">
            = $responsiveImageBlock->getResponsiveImageHtml(
                $mainImage->getUrl(),
                $block->escapeHtmlAttr($mainImage->getLabel()),
                true
            ) ?>
        </div>
    <?php endif; ?>
    
    <?php if (count($images) > 1): ?>
        <div class="gallery-thumbnails">
            <?php foreach ($images as $image): ?>
                <div class="thumbnail-item" data-role="thumbnail-item" data-image-url="<?= $image->getUrl() ?>">
                    = $responsiveImageBlock->getResponsiveImageHtml(
                        $image->getUrl(),
                        $block->escapeHtmlAttr($image->getLabel()),
                        true
                    ) ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins": ["Vendor_ImageOptimizer/js/gallery-mixin"],
            "lazyLoad": true,
            "magnifierOpts": {
                "enabled": false
            }
        }
    },
    "*": {
        "Vendor_ImageOptimizer/js/lazy-loader": {}
    }
}
</script>

이렇게 하면 제품 갤러리의 모든 이미지가 반응형으로 제공되고, 지연 로딩이 적용되어 페이지 로딩 속도가 크게 개선돼요! 🚀

7. CDN 통합 및 캐싱 전략 🌐

이제 이미지 전송 속도를 더 개선하기 위한 CDN(Content Delivery Network) 통합과 캐싱 전략을 구현해 볼게요!

7.1 CDN 통합 설정

먼저 CDN 설정을 관리하기 위한 설정 화면을 추가해 봅시다:

// etc/adminhtml/system.xml (추가)
<group id="cdn" translate="label" type="text" sortorder="40" showindefault="1" showinwebsite="1" showinstore="1">
    <label>CDN 설정</label>
    <field id="enabled" translate="label" type="select" sortorder="10" showindefault="1" showinwebsite="1" showinstore="1">
        <label>CDN 사용</label>
        <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
        <depends>
            <field id="vendor_image_optimizer/general/enabled">1</field>
        </depends>
    </field>
    <field id="url" translate="label" type="text" sortorder="20" showindefault="1" showinwebsite="1" showinstore="1">
        <label>CDN URL</label>
        <comment>예: https://cdn.yourdomain.com</comment>
        <depends>
            <field id="enabled">1</field>
        </depends>
    </field>
    <field id="provider" translate="label" type="select" sortorder="30" showindefault="1" showinwebsite="1" showinstore="1">
        <label>CDN 제공업체</label>
        <source_model>Vendor\ImageOptimizer\Model\Config\Source\CdnProvider</source_model>
        <depends>
            <field id="enabled">1</field>
        </depends>
    </field>
    <field id="api_key" translate="label" type="obscure" sortorder="40" showindefault="1" showinwebsite="1" showinstore="1">
        <label>API 키</label>
        <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
        <depends>
            <field id="enabled">1</field>
        </depends>
    </field>
    <field id="test_connection" translate="label" type="button" sortorder="50" showindefault="1" showinwebsite="1" showinstore="1">
        <label>연결 테스트</label>
        <frontend_model>Vendor\ImageOptimizer\Block\Adminhtml\System\Config\TestConnection</frontend_model>
        <depends>
            <field id="enabled">1</field>
        </depends>
    </field>
</group>

이제 CDN 제공업체 옵션을 위한 소스 모델을 만들어 봅시다:

// Model/Config/Source/CdnProvider.php
<?php namespace Vendor\ImageOptimizer\Model\Config\Source;

use Magento\Framework\Data\OptionSourceInterface;

class CdnProvider implements OptionSourceInterface
{
    /**
     * 옵션 배열 반환
     *
     * @return array
     */
    public function toOptionArray()
    {
        return [
            ['value' => 'cloudflare', 'label' => __('Cloudflare')],
            ['value' => 'akamai', 'label' => __('Akamai')],
            ['value' => 'cloudfront', 'label' => __('AWS CloudFront')],
            ['value' => 'fastly', 'label' => __('Fastly')],
            ['value' => 'bunny', 'label' => __('Bunny CDN')],
            ['value' => 'custom', 'label' => __('사용자 정의')]
        ];
    }
}

이제 CDN URL을 사용하여 이미지 URL을 변환하는 기능을 구현해 봅시다:

// Helper/Data.php (추가 메소드)
/**
 * 이미지 URL을 CDN URL로 변환
 *
 * @param string $url
 * @return string
 */
public function convertToCdnUrl($url)
{
    if (!$this->config->isCdnEnabled()) {
        return $url;
    }
    
    $cdnUrl = $this->config->getCdnUrl();
    if (empty($cdnUrl)) {
        return $url;
    }
    
    // 이미 CDN URL인 경우 변환하지 않음
    if (strpos($url, $cdnUrl) === 0) {
        return $url;
    }
    
    $baseUrl = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_WEB);
    
    // 상대 URL을 절대 URL로 변환
    if (strpos($url, 'http') !== 0) {
        $url = $baseUrl . ltrim($url, '/');
    }
    
    // 기본 URL을 CDN URL로 교체
    return str_replace($baseUrl, rtrim($cdnUrl, '/') . '/', $url);
}

7.2 이미지 캐싱 전략 구현

이제 이미지 캐싱 전략을 구현해 봅시다. 먼저 캐시 헤더를 설정하는 플러그인을 만들어 봅시다:

// Plugin/ImageCacheHeadersPlugin.php
<?php namespace Vendor\ImageOptimizer\Plugin;

use Magento\Framework\App\Response\Http;
use Magento\Framework\App\Request\Http as Request;
use Vendor\ImageOptimizer\Model\Config;

class ImageCacheHeadersPlugin
{
    /**
     * @var Request
     */
    private $request;
    
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @param Request $request
     * @param Config $config
     */
    public function __construct(
        Request $request,
        Config $config
    ) {
        $this->request = $request;
        $this->config = $config;
    }
    
    /**
     * 이미지 요청에 캐시 헤더 추가
     *
     * @param Http $subject
     * @param callable $proceed
     * @param string $name
     * @param string $value
     * @return Http
     */
    public function aroundSetHeader(Http $subject, callable $proceed, $name, $value)
    {
        // 원래 메소드 실행
        $result = $proceed($name, $value);
        
        // 모듈이 비활성화되었거나 이미지 요청이 아닌 경우 무시
        if (!$this->config->isEnabled() || !$this->isImageRequest()) {
            return $result;
        }
        
        // 이미지 요청인 경우 캐시 헤더 설정
        if ($name === 'Content-Type' && $this->isImageContentType($value)) {
            // 캐시 유효 기간 설정 (1년)
            $subject->setHeader('Cache-Control', 'public, max-age=31536000, immutable');
            $subject->setHeader('Expires', gmdate('D, d M Y H:i:s \G\M\T', time() + 31536000));
        }
        
        return $result;
    }
    
    /**
     * 현재 요청이 이미지 요청인지 확인
     *
     * @return bool
     */
    private function isImageRequest()
    {
        $path = $this->request->getPathInfo();
        return (
            strpos($path, '/media/catalog/') !== false ||
            strpos($path, '/media/wysiwyg/') !== false ||
            strpos($path, '/media/customer/') !== false
        );
    }
    
    /**
     * Content-Type이 이미지인지 확인
     *
     * @param string $contentType
     * @return bool
     */
    private function isImageContentType($contentType)
    {
        return (
            strpos($contentType, 'image/') === 0 ||
            strpos($contentType, 'application/octet-stream') === 0
        );
    }
}

이제 이 플러그인을 등록해 봅시다:

// etc/di.xml (추가)
<type name="Magento\Framework\App\Response\Http">
    <plugin name="vendor_image_optimizer_cache_headers" type="Vendor\ImageOptimizer\Plugin\ImageCacheHeadersPlugin" sortorder="10" disabled></plugin>
</type>

7.3 CDN 퍼지(Purge) 기능 구현

이제 이미지가 업데이트될 때 CDN 캐시를 퍼지(무효화)하는 기능을 구현해 봅시다:

// Model/Cdn/PurgeManager.php
<?php namespace Vendor\ImageOptimizer\Model\Cdn;

use Vendor\ImageOptimizer\Model\Config;
use Magento\Framework\HTTP\Client\Curl;
use Psr\Log\LoggerInterface;

class PurgeManager
{
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @var Curl
     */
    private $curl;
    
    /**
     * @var LoggerInterface
     */
    private $logger;
    
    /**
     * @param Config $config
     * @param Curl $curl
     * @param LoggerInterface $logger
     */
    public function __construct(
        Config $config,
        Curl $curl,
        LoggerInterface $logger
    ) {
        $this->config = $config;
        $this->curl = $curl;
        $this->logger = $logger;
    }
    
    /**
     * CDN 캐시 퍼지 실행
     *
     * @param string|array $urls
     * @return bool
     */
    public function purge($urls)
    {
        if (!$this->config->isCdnEnabled()) {
            return false;
        }
        
        $provider = $this->config->getCdnProvider();
        $apiKey = $this->config->getCdnApiKey();
        
        if (empty($provider) || empty($apiKey)) {
            $this->logger->warning('CDN 설정이 완료되지 않았습니다.');
            return false;
        }
        
        // 문자열인 경우 배열로 변환
        if (!is_array($urls)) {
            $urls = [$urls];
        }
        
        try {
            switch ($provider) {
                case 'cloudflare':
                    return $this->purgeCloudflare($urls, $apiKey);
                case 'cloudfront':
                    return $this->purgeCloudFront($urls, $apiKey);
                case 'fastly':
                    return $this->purgeFastly($urls, $apiKey);
                case 'bunny':
                    return $this->purgeBunny($urls, $apiKey);
                default:
                    $this->logger->warning('지원되지 않는 CDN 제공업체: ' . $provider);
                    return false;
            }
        } catch (\Exception $e) {
            $this->logger->error('CDN 퍼지 실패: ' . $e->getMessage());
            return false;
        }
    }
    
    /**
     * Cloudflare 캐시 퍼지
     *
     * @param array $urls
     * @param string $apiKey
     * @return bool
     */
    private function purgeCloudflare($urls, $apiKey)
    {
        $zoneId = $this->config->getCloudflareZoneId();
        if (empty($zoneId)) {
            $this->logger->warning('Cloudflare Zone ID가 설정되지 않았습니다.');
            return false;
        }
        
        $endpoint = "https://api.cloudflare.com/client/v4/zones/{$zoneId}/purge_cache";
        
        $this->curl->addHeader('Authorization', 'Bearer ' . $apiKey);
        $this->curl->addHeader('Content-Type', 'application/json');
        
        $this->curl->post($endpoint, json_encode([
            'files' => $urls
        ]));
        
        $response = json_decode($this->curl->getBody(), true);
        
        if (isset($response['success']) && $response['success'] === true) {
            $this->logger->info('Cloudflare 캐시 퍼지 성공');
            return true;
        } else {
            $this->logger->error('Cloudflare 캐시 퍼지 실패: ' . json_encode($response));
            return false;
        }
    }
    
    // 다른 CDN 제공업체에 대한 퍼지 메소드들...
}

이제 이미지가 업데이트될 때 CDN 캐시를 퍼지하는 옵저버를 만들어 봅시다:

// Observer/ProductImageSaveAfter.php
<?php namespace Vendor\ImageOptimizer\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Event\Observer;
use Vendor\ImageOptimizer\Model\Cdn\PurgeManager;
use Vendor\ImageOptimizer\Model\Config;
use Psr\Log\LoggerInterface;

class ProductImageSaveAfter implements ObserverInterface
{
    /**
     * @var PurgeManager
     */
    private $purgeManager;
    
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @var LoggerInterface
     */
    private $logger;
    
    /**
     * @param PurgeManager $purgeManager
     * @param Config $config
     * @param LoggerInterface $logger
     */
    public function __construct(
        PurgeManager $purgeManager,
        Config $config,
        LoggerInterface $logger
    ) {
        $this->purgeManager = $purgeManager;
        $this->config = $config;
        $this->logger = $logger;
    }
    
    /**
     * 제품 이미지 저장 후 CDN 캐시 퍼지
     *
     * @param Observer $observer
     * @return void
     */
    public function execute(Observer $observer)
    {
        if (!$this->config->isEnabled() || !$this->config->isCdnEnabled()) {
            return;
        }
        
        try {
            $product = $observer->getEvent()->getProduct();
            
            if (!$product || !$product->getId()) {
                return;
            }
            
            $imageUrls = [];
            
            // 제품 이미지 URL 수집
            $mediaGallery = $product->getMediaGalleryImages();
            if ($mediaGallery) {
                foreach ($mediaGallery as $image) {
                    $imageUrls[] = $image->getUrl();
                }
            }
            
            if (!empty($imageUrls)) {
                $this->logger->info('제품 이미지 CDN 캐시 퍼지 시작: ' . $product->getSku());
                $this->purgeManager->purge($imageUrls);
            }
        } catch (\Exception $e) {
            $this->logger->error('제품 이미지 CDN 캐시 퍼지 실패: ' . $e->getMessage());
        }
    }
}

이제 이 옵저버를 등록해 봅시다:

// etc/events.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_save_after">
        <observer name="vendor_image_optimizer_product_image_save_after" instance="Vendor\ImageOptimizer\Observer\ProductImageSaveAfter"></observer>
    </event>
</config>

이제 CDN 통합과 캐싱 전략이 구현되었어요! 이렇게 하면 이미지 로딩 속도가 전 세계 어디서나 빨라지고, 서버 부하도 줄어들어요. 완전 대박이죠? ㅋㅋㅋ

8. 성능 테스트 및 최적화 📊

자, 이제 우리가 만든 이미지 최적화 모듈이 실제로 얼마나 성능을 개선하는지 테스트해 볼 차례예요! 데이터는 거짓말을 하지 않으니까요~ ㅋㅋㅋ

8.1 성능 테스트 도구

다음과 같은 도구를 사용하여 성능을 테스트할 수 있어요:

8.2 A/B 테스트 설정

정확한 성능 개선 효과를 측정하기 위해 A/B 테스트를 설정해 봅시다:

1. 테스트 A (기존 방식): 마젠토 기본 이미지 처리 사용
2. 테스트 B (최적화 방식): 우리의 이미지 최적화 모듈 사용

테스트를 위한 명령줄 도구를 만들어 봅시다:

// Console/Command/TestPerformance.php
<?php namespace Vendor\ImageOptimizer\Console\Command;

use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Input\InputOption;
use Symfony\Component\Console\Output\OutputInterface;
use Vendor\ImageOptimizer\Model\Config;
use Vendor\ImageOptimizer\Api\ImageOptimizerInterface;
use Magento\Framework\App\State;
use Magento\Catalog\Model\ResourceModel\Product\Collection;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
use Magento\Catalog\Helper\Image as ImageHelper;

class TestPerformance extends Command
{
    /**
     * @var Config
     */
    private $config;
    
    /**
     * @var ImageOptimizerInterface
     */
    private $imageOptimizer;
    
    /**
     * @var State
     */
    private $appState;
    
    /**
     * @var CollectionFactory
     */
    private $productCollectionFactory;
    
    /**
     * @var ImageHelper
     */
    private $imageHelper;
    
    /**
     * @param Config $config
     * @param ImageOptimizerInterface $imageOptimizer
     * @param State $appState
     * @param CollectionFactory $productCollectionFactory
     * @param ImageHelper $imageHelper
     */
    public function __construct(
        Config $config,
        ImageOptimizerInterface $imageOptimizer,
        State $appState,
        CollectionFactory $productCollectionFactory,
        ImageHelper $imageHelper
    ) {
        $this->config = $config;
        $this->imageOptimizer = $imageOptimizer;
        $this->appState = $appState;
        $this->productCollectionFactory = $productCollectionFactory;
        $this->imageHelper = $imageHelper;
        parent::__construct();
    }
    
    /**
     * {@inheritdoc}
     */
    protected function configure()
    {
        $this->setName('vendor:image-optimizer:test-performance')
            ->setDescription('이미지 최적화 성능 테스트')
            ->addOption(
                'sample-size',
                null,
                InputOption::VALUE_OPTIONAL,
                '테스트할 제품 수',
                10
            );
            
        parent::configure();
    }
    
    /**
     * {@inheritdoc}
     */
    protected function execute(InputInterface $input, OutputInterface $output)
    {
        try {
            $this->appState->setAreaCode(\Magento\Framework\App\Area::AREA_FRONTEND);
            
            $sampleSize = (int) $input->getOption('sample-size');
            
            $output->writeln("<info>이미지 최적화 성능 테스트 시작 (샘플 크기: {$sampleSize})</info>");
            
            // 제품 샘플 가져오기
            $products = $this->getProductSample($sampleSize);
            
            if (count($products) === 0) {
                $output->writeln("<error>테스트할 제품이 없습니다.</error>");
                return 1;
            }
            
            $output->writeln("<info>" . count($products) . "개 제품으로 테스트합니다.</info>");
            
            // 테스트 A: 기존 방식
            $output->writeln("\n<comment>테스트 A: 기존 방식</comment>");
            $this->config->setEnabled(false); // 모듈 비활성화
            $resultA = $this->testImagePerformance($products, $output);
            
            // 테스트 B: 최적화 방식
            $output->writeln("\n<comment>테스트 B: 최적화 방식</comment>");
            $this->config->setEnabled(true); // 모듈 활성화
            $resultB = $this->testImagePerformance($products, $output);
            
            // 결과 비교
            $output->writeln("\n<info>결과 비교:</info>");
            $output->writeln("총 이미지 크기 (기존): " . $this->formatBytes($resultA['totalSize']));
            $output->writeln("총 이미지 크기 (최적화): " . $this->formatBytes($resultB['totalSize']));
            $output->writeln("크기 감소: " . round((1 - $resultB['totalSize'] / $resultA['totalSize']) * 100, 2) . "%");
            $output->writeln("처리 시간 (기존): " . round($resultA['totalTime'], 2) . "초");
            $output->writeln("처리 시간 (최적화): " . round($resultB['totalTime'], 2) . "초");
            
            return 0;
        } catch (\Exception $e) {
            $output->writeln("<error>테스트 실패: " . $e->getMessage() . "</error>");
            return 1;
        }
    }
    
    /**
     * 제품 샘플 가져오기
     *
     * @param int $sampleSize
     * @return array
     */
    private function getProductSample($sampleSize)
    {
        /** @var Collection $collection */
        $collection = $this->productCollectionFactory->create();
        $collection->addAttributeToSelect(['name', 'sku', 'image'])
            ->addAttributeToFilter('image', ['notnull' => true])
            ->addAttributeToFilter('image', ['neq' => 'no_selection'])
            ->setPageSize($sampleSize);
            
        return $collection->getItems();
    }
    
    /**
     * 이미지 성능 테스트
     *
     * @param array $products
     * @param OutputInterface $output
     * @return array
     */
    private function testImagePerformance($products, $output)
    {
        $totalSize = 0;
        $totalTime = 0;
        
        foreach ($products as $product) {
            $output->write("제품 테스트 중: " . $product->getSku() . " ... ");
            
            $startTime = microtime(true);
            
            // 다양한 이미지 유형 테스트
            $imageTypes = ['product_page_image_small', 'product_page_image_medium', 'product_page_image_large'];
            
            foreach ($imageTypes as $imageType) {
                $imageUrl = $this->imageHelper->init($product, $imageType)->getUrl();
                
                // 이미지 크기 가져오기
                $imageSize = $this->getImageSize($imageUrl);
                $totalSize += $imageSize;
                
                // 최적화 모듈이 활성화된 경우 최적화 실행
                if ($this->config->isEnabled()) {
                    $this->imageOptimizer->optimize($imageUrl);
                }
            }
            
            $endTime = microtime(true);
            $totalTime += ($endTime - $startTime);
            
            $output->writeln("완료 (" . round($endTime - $startTime, 2) . "초)");
        }
        
        return [
            'totalSize' => $totalSize,
            'totalTime' => $totalTime
        ];
    }
    
    /**
     * 이미지 크기 가져오기
     *
     * @param string $imageUrl
     * @return int
     */
    private function getImageSize($imageUrl)
    {
        // URL에서 로컬 경로로 변환
        $baseUrl = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_WEB);
        $localPath = str_replace($baseUrl, BP . '/', $imageUrl);
        
        if (file_exists($localPath)) {
            return filesize($localPath);
        }
        
        return 0;
    }
    
    /**
     * 바이트 형식화
     *
     * @param int $bytes
     * @return string
     */
    private function formatBytes($bytes)
    {
        $units = ['B', 'KB', 'MB', 'GB', 'TB'];
        
        $bytes = max($bytes, 0);
        $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
        $pow = min($pow, count($units) - 1);
        
        $bytes /= pow(1024, $pow);
        
        return round($bytes, 2) . ' ' . $units[$pow];
    }
}

이 명령어를 등록해 봅시다:

// etc/di.xml (추가)
<type name="Magento\Framework\Console\CommandList">
    <arguments>
        <argument name="commands" xsi:type="array">
            <item name="vendor_image_optimizer_test_performance" xsi:type="object">Vendor\ImageOptimizer\Console\Command\TestPerformance</item>
        </argument>
    </arguments>
</type>

8.3 성능 테스트 결과 분석

2025년 기준으로 일반적인 마젠토 쇼핑몰에서 우리의 이미지 최적화 모듈을 적용했을 때 다음과 같은 성능 개선을 기대할 수 있어요:

와우! 이 정도면 완전 대박이죠? ㅋㅋㅋ 특히 모바일 사용자 경험이 크게 개선되어 전환율도 증가할 거예요!

8.4 추가 최적화 팁

성능을 더 개선하기 위한 추가 팁을 알아볼까요?

1. 이미지 스프라이트 사용: 작은 아이콘들을 하나의 이미지로 합쳐서 HTTP 요청 수 줄이기
2. CSS background-image 최적화: 중요하지 않은 배경 이미지는 지연 로딩 적용
3. 이미지 사전 로딩: 중요한 이미지는 <link rel="preload"> 사용
4. 이미지 크기 제한: 관리자가 업로드할 수 있는 이미지 크기 제한 설정
5. LQIP(Low Quality Image Placeholders): 이미지 로딩 전에 저품질 플레이스홀더 표시

이러한 추가 최적화를 적용하면 성능을 더욱 개선할 수 있어요! 🚀

9. 실제 사례 분석 및 적용 팁 💼

이론은 충분히 배웠으니, 이제 실제 사례를 통해 어떻게 이미지 최적화 모듈을 적용하고 어떤 결과를 얻었는지 알아볼까요? 실전 경험이 가장 중요하니까요! 😉

9.1 패션 쇼핑몰 사례

패션 쇼핑몰은 고화질 이미지가 정말 중요하죠! 하지만 그만큼 최적화의 효과도 크답니다. 특히 모바일 사용자가 많은 쇼핑몰에서는 이미지 최적화가 매출에 직접적인 영향을 미쳐요!

9.2 전자제품 쇼핑몰 사례

전자제품 쇼핑몰은 복잡한 제품 갤러리와 고해상도 이미지가 많아서 최적화의 효과가 더 크게 나타나요. 특히 서버 부하 감소 효과가 뚜렷하게 나타났네요!

9.3 대규모 종합 쇼핑몰 사례

대규모 쇼핑몰에서는 확장성과 자동화가 핵심이에요. 초기 투자 비용은 크지만 ROI도 그만큼 크답니다! 특히 글로벌 고객을 대상으로 하는 경우 CDN 통합이 필수적이죠.

9.4 실제 적용 시 주의사항

이미지 최적화 모듈을 실제로 적용할 때 주의해야 할 점들을 알아봅시다:

9.5 재능넷에서 이미지 최적화 전문가 찾기

직접 모듈을 개발하는 것이 부담스럽다면, 재능넷에서 마젠토 이미지 최적화 전문가를 찾아보세요! 다양한 경험과 전문 지식을 갖춘 개발자들이 여러분의 쇼핑몰에 맞는 최적화 솔루션을 제공해 드릴 거예요.

재능넷에서는 마젠토 개발자뿐만 아니라 웹 성능 최적화 전문가, CDN 설정 전문가 등 다양한 분야의 전문가를 만나볼 수 있어요. 여러분의 쇼핑몰에 딱 맞는 전문가를 찾아보세요!

10. 마젠토 이미지 최적화의 미래 🔮

마지막으로, 2025년 이후 마젠토 이미지 최적화 기술의 미래 트렌드를 살펴볼까요? 앞으로 어떤 기술이 중요해질지 미리 알아두면 경쟁에서 앞서갈 수 있을 거예요!

10.1 AI 기반 이미지 최적화

AI 기술이 이미지 최적화에 어떻게 적용될지 알아봅시다:

AI 기술은 이미지 최적화의 게임 체인저가 될 거예요! 특히 개인화된 이미지 제공은 사용자 경험을 크게 향상시킬 수 있어요.

10.2 새로운 이미지 포맷

WebP와 AVIF 이후에 등장할 새로운 이미지 포맷은 무엇일까요?

새로운 이미지 포맷은 더 작은 파일 크기와 더 좋은 품질을 제공할 거예요. 특히 JPEG XL은 2025년 이후 주류가 될 가능성이 높아요!

10.3 서버리스 이미지 처리

클라우드 기반 서버리스 아키텍처가 이미지 처리에 어떤 변화를 가져올까요?

서버리스 아키텍처는 확장성과 비용 효율성을 크게 개선할 거예요. 특히 트래픽 변동이 큰 쇼핑몰에 적합한 솔루션이 될 거예요!

10.4 마젠토의 미래 방향성

마젠토 자체는 이미지 최적화에 어떤 변화를 가져올까요?

마젠토는 Adobe 생태계와의 통합을 강화하면서, 이미지 최적화 기능도 더욱 발전시킬 거예요. 하지만 여전히 커스텀 모듈의 필요성은 계속될 거예요!

10.5 준비해야 할 것들

미래에 대비하여 지금 준비해야 할 것들은 무엇일까요?

1. 모듈 아키텍처 유연화: 새로운 이미지 포맷과 기술을 쉽게 추가할 수 있는 구조로 설계
2. API 기반 설계: 헤드리스 커머스와 PWA에 대응할 수 있는 API 중심 설계
3. AI 기술 학습: 기본적인 AI 이미지 처리 기술에 대한 이해 필요
4. 클라우드 서비스 활용: AWS Lambda, Google Cloud Functions 등 서버리스 기술 활용 방법 학습
5. 지속적인 성능 모니터링: 실시간으로 이미지 성능을 모니터링하고 최적화할 수 있는 시스템 구축

미래에 대비하려면 지속적인 학습과 기술 트렌드 모니터링이 필수예요! 기술은 계속 발전하니까요~ ㅋㅋㅋ

결론: 이미지 최적화로 쇼핑몰의 미래를 준비하세요! 🚀

지금까지 마젠토 쇼핑몰을 위한 고성능 이미지 최적화 모듈 개발에 대해 알아봤어요! 정말 긴 여정이었죠? ㅋㅋㅋ

이미지 최적화는 단순한 기술적 개선이 아니라, 비즈니스 성과에 직접적인 영향을 미치는 중요한 요소예요. 페이지 로딩 속도 개선, 사용자 경험 향상, 전환율 증가, 그리고 비용 절감까지... 모든 면에서 큰 효과를 볼 수 있어요!

2025년 현재, 모바일 쇼핑이 대세인 시대에 이미지 최적화는 선택이 아닌 필수가 되었어요. 특히 경쟁이 치열한 e커머스 시장에서 한 발 앞서나가기 위해서는 반드시 고려해야 할 요소죠!

이 글에서 소개한 기술과 방법론을 활용하여 여러분만의 고성능 이미지 최적화 모듈을 개발해 보세요. 직접 개발하기 어렵다면, 재능넷에서 전문가의 도움을 받는 것도 좋은 방법이에요!

마지막으로, 기술은 계속 발전한다는 것을 기억하세요. 오늘 최적화한 이미지도 내일은 더 최적화할 수 있는 방법이 나올 거예요. 지속적인 학습과 개선을 통해 항상 최고의 성능을 유지하세요! 💪

여러분의 마젠토 쇼핑몰이 빛의 속도로 로딩되는 그날까지, 화이팅! 😄