마우스 커서 css로 변경시 Base64를 사용하기

자바스크립트로 특정 위치에서 오른쪽 마우스가 눌렸을 때 마우스 모양을 변경을 하는 기능이 추가되었다. 

클래스를 추가했고, 기능은 제대로 동작이 되는데 마우스 모양이 계속 변경이 되지 않는 이슈가 있었다. 

경로도 분명 잘 되었고 개발자도구에서도 이미지는 보이는데 왜 커서가 변경되지않았다.

찾아보니 브라우저가 읽어올때 캐싱이나 로드 실패의 경우도 있을거라는 추측이다. 

 

방법은 base64 형식으로 이미지를 변경해서 즉시 변경 할 수 있게 하는 방법이다. 

 

.custom-cursor {
	cursor: url('https://example.com/cursor.png'), auto;    
}

해당 방법으론 변경이 되지 않았고 

.custom-cursor {
     cursor: url('data:image/png;base64,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'),auto;
}

이처럼 Base64 형태로 인코딩해서 사용했더니 잘 출력이 되었다.

 

data:image/png;base64 형식이 보이는 이유는 무엇일까?

결론 부터 말하자면 브라우저는 Base64 데이터를 직접 처리하기 때문이다. 

data:image/png;base64 형식은 데이터 URL이라고 하며, 이미지를 문자열로 인코딩하여 CSS 속성에 직접 포함하는 방법이다.

 

 

어떻게 해서 보이게 되는 것일까?

1. 브라우저는 데이터 URL을 로컬 리소스처럼 즉시 처리를 한다.
2. 네트워크 요청이 필요하지 않기 때문에 접근성 문제가 없다.
3. 형식이 명확하게 지정되기 때문에 브라우저가 이를 바로 렌더링 할 수 있게 된다.

 

data:image/png;base64의 구조 ( 데이터 URL의 기본 구조 )

 

• data:: 데이터 URL을 나타냄.
• <MIME-type>: 데이터 형식 (예: image/png, image/svg+xml).
• ;base64: 데이터가 Base64로 인코딩되었음을 나타냄.
• <data>: Base64로 인코딩된 실제 데이터.

 

그렇다면 base64형식으로 변환하는 방법은?

1. 온라인 변환 도구를 사용한다. 내가 가진 이미지를 업로드 하고 변환된 문자열을 복사해서 사용하면 된다.

2. 자바스크립트에서 직접 변환이 가능하다. 

 

function convertToBase64(file) {
    const reader = new FileReader();
    reader.onload = function (event) {
        console.log(event.target.result); // Base64 문자열
    };
    reader.readAsDataURL(file);
}

// 사용 예제
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    convertToBase64(file);
});

 

 

위에서 언급했듯 브라우저가 리소스를 읽어올 때 로드에 실패를 할 수도 있다. 

base64형태를 사용하면 브라우저가 base64데이터를 직접 처리할 수 있기 때문에 오류를 방지 할 수 있게 된다.