현대 웹 개발에서 단순한 '이미지 90도 회전'은 단순한 동작을 넘어서 DOM 조작, 렌더링 메커니즘, 애니메이션 스케줄링, 브라우저 성능 최적화 등 다양한 기술의 융합을 요구한다. 특히 널리 사용되는 jQuery를 활용할 때는 간결한 문법의 장점을 살리되, 고성능 애니메이션 처리에 대한 내재적 한계를 인식하고 대응해야 한다.

선택자 설계: 기능보다는 구조적 사고

기본적으로 이미지를 선택하는 것은 `$('img')`로 시작하지만, 이는 단순한 코드 작성 이상의 의미를 지닌다. 특정 요소만 회전 가능하게 하려면 클래스나 속성을 기반으로 정교한 필터링이 필요하다.

$('.rotatable:not(.animating)')

이러한 선택자는 상태 관리를 시각화하는 도구이며, 추후 확장성과 유지보수성을 높인다. 보다 명확한 상태 표현을 위해 data-* 속성을 활용하는 것이 권장된다:

<img src="map.jpg" data-rotate-enabled="true" data-angle="0">

이를 통해 속성 기반 선택자가 가능해지고, 코드의 의도가 더 명확해진다.

애니메이션의 핵심: 제어의 본질

jQuery의 .animate()는 transform 속성에 직접 적용되지 않는다. 이유는 문자열 형태의 rotate(90deg)를 수치로 분해할 수 없기 때문이다.

해결책 1: step 콜백을 통한 수동 연동

$.fn.rotateTo = function(targetDeg, duration) {
    return this.each(function() {
        $(this).animate(
            { _angle: targetDeg },
            {
                duration: duration,
                step: function(now) {
                    const transform = `rotate(${now}deg)`;
                    $(this).css({
                        'transform': transform,
                        '-webkit-transform': transform
                    });
                }
            }
        );
    });
};

여기서 _angle는 가상의 수치 속성으로, 애니메이션 엔진을 작동시키며 step에서 실제 transform 값을 업데이트한다.

해결책 2: requestAnimationFrame 기반 고성능 애니메이션

function smoothRotate(element, targetAngle, duration) {
    const startAngle = getRotation(element);
    const startTime = performance.now();

    function frame(time) {
        const elapsed = time - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);
        const current = startAngle + (targetAngle - startAngle) * eased;

        element.style.transform = `rotate(${current}deg)`;

        if (progress < 1) requestAnimationFrame(frame);
    }

    requestAnimationFrame(frame);
}

이 방식은 화면 리프레시 주기에 맞춰 프레임을 처리하며, 비동기 작업에 영향받지 않아 더욱 부드럽다.

상대 회전 기능: +=90deg의 진실

다음과 같은 코드는 어떻게 작동할까?

$('#img').animate({ rotate: '+=90deg' }, 500);

이는 $.fx.step.rotate를 커스터마이징하여 구현된 기능이다. 초기값을 읽고, 상대값을 해석해 현재 각도에 누적하여 애니메이션을 수행한다. 이 덕분에 상태 변수를 따로 관리할 필요 없이 자연스럽게 반복 회전이 가능하다.

연속 클릭 문제: 큐 관리 전략

빠른 연타 클릭은 애니메이션 충돌을 유발한다. 이를 해결하기 위한 두 가지 접근법:

• .stop(true, false): 큐를 비우면서 현재 위치에서 진행
• debounce 패턴: 150ms 간격으로 마지막 클릭만 처리

두 방법을 결합하면 안정성과 반응성 모두 확보된다.

성능 최적화: 변형은 꼭 transform 사용

left, top 변경은 레이아웃 재계산을 유발하지만, transform: translateX()는 레이아웃 영향 없이 GPU 처리 가능하다.

또한 다음과 같은 스타일을 추가해 강제 가속을 유도할 수 있다:

.fast-transform {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

브라우저 호환성: 특성 검사 기반 대응

IE9 등 오래된 브라우저에서는 transform 미지원. 대신 DXImageTransform.Microsoft.Matrix를 사용하되, 반드시 특성 검사를 통해 결정해야 한다.

function supportsTransform() {
    return ['transform', 'WebkitTransform', 'MozTransform'].some(prop => 
        document.createElement('div').style[prop] !== undefined
    );
}

완전한 플러그인 구현

이 모든 원칙을 종합해 사용 가능한 플러그인으로 구성할 수 있다:

(function($) {
    $.fn.imageRotator = function(options) {
        const defaults = {
            step: 90,
            duration: 500,
            easing: 'swing',
            useGPU: true,
            direction: 'clockwise'
        };

        const settings = $.extend({}, defaults, options);

        return this.each(function() {
            const $el = $(this);
            let angle = parseFloat($el.data('angle')) || 0;

            if (settings.useGPU) {
                $el.css({
                    'transform-style': 'preserve-3d',
                    'backface-visibility': 'hidden',
                    'will-change': 'transform'
                });
            }

            function rotate() {
                const delta = settings.direction === 'clockwise' ? settings.step : -settings.step;
                const target = angle + delta;

                $el.stop(true, false).animate(
                    { _rotate: target },
                    {
                        duration: settings.duration,
                        easing: settings.easing,
                        step: function(now) {
                            $el.css('transform', `rotate(${now}deg)`);
                        },
                        complete: () => {
                            angle = target % 360;
                            $el.data('angle', angle);
                        }
                    }
                );
            }

            $el.on('click', rotate);
        });
    };
})(jQuery);

사용 예시:

$('.photo').imageRotator({ step: 45, duration: 800, direction: 'counterclockwise' });

이처럼 작은 기능 하나에도 깊이 있는 기술적 고민이 담긴다. 그것이 바로 우수한 개발자의 자세다.