단일 HTML 코드로 작동하는 원리
두 개의 이미지를 Data URI 형식으로 변환하여 생성되는 HTML 코드 안에 직접 포함시킵니다. 외부 라이브러리나 CDN, 별도의 서버 요청 없이 순수 자바스크립트(Vanilla JS)만으로 슬라이더 기능이 구현됩니다.
복잡한 설치 과정 없이 생성된 코드를 복사하여 블로그나 웹사이트에 붙여넣기만 하면 즉시 비포애프터 비교 기능을 사용할 수 있습니다.
이미지 최적화와 크기 제한
임베드 코드의 용량이 지나치게 커지는 것을 방지하기 위해, 업로드된 이미지는 최대 가로 1400 픽셀로 제한되며 JPEG 형식으로 재인코딩됩니다. 이 과정에서 약간의 화질 저하가 발생할 수 있습니다.
픽셀 단위의 정밀한 비교가 필요하거나 무손실 화질이 요구된다면, 생성된 코드 내부의 Data URI 문자열을 별도의 서버에 호스팅된 이미지 URL로 직접 교체하여 사용하시는 것을 권장합니다.
완벽한 비교 슬라이더를 만드는 팁
슬라이더가 자연스럽게 작동하려면 두 이미지의 크기와 피사체의 구도가 정확히 일치해야 합니다. 크기나 비율이 다른 두 이미지를 사용할 경우, 두 번째 이미지가 첫 번째 이미지의 비율에 맞춰 강제로 늘어나므로 결과물이 크게 왜곡될 수 있습니다.
또한 이미지가 코드 내에 포함되는 방식이므로, 여러 장의 이미지를 하나의 페이지에서 나열하는 갤러리 용도로는 HTML 문서 용량 문제로 인해 적합하지 않습니다.
자주 묻는 질문
한 페이지에 여러 개의 비교 슬라이더를 넣을 수 있나요?
권장하지 않습니다. 이미지가 코드 자체에 Data URI로 포함되기 때문에, 여러 개를 삽입하면 HTML 문서의 용량이 기하급수적으로 커져 페이지 로딩 속도가 크게 느려집니다. 한 페이지당 하나의 단일 슬라이더만 사용하는 것이 좋습니다.
두 이미지의 크기나 비율이 다르면 어떻게 되나요?
두 번째로 첨부한 이미지가 첫 번째 이미지의 크기에 맞춰 강제로 늘어나거나 줄어듭니다. 이로 인해 피사체가 왜곡되어 보일 수 있으므로, 반드시 원본 단계에서 두 이미지의 가로세로 픽셀을 동일하게 크롭하여 사용하시기 바랍니다.
더 높은 해상도의 원본 이미지를 슬라이더에 적용할 수 있나요?
기본 생성기에서는 코드 용량 관리를 위해 가로 1400 픽셀 제한과 JPEG 압축을 적용합니다. 고해상도 원본 유지가 필수적이라면, 임베드 코드를 복사한 뒤 HTML 소스 내의 이미지 데이터를 외부 서버에 호스팅한 고해상도 이미지 URL로 직접 수정하여 해결할 수 있습니다.
워드프레스나 티스토리 같은 블로그에서도 작동하나요?
네, 완벽하게 작동합니다. 생성된 코드는 외부 라이브러리 의존성 없이 순수 HTML과 자바스크립트로만 이루어져 있습니다. CMS의 HTML 편집 모드나 사용자 정의 HTML 블록에 코드를 붙여넣기만 하면 모든 최신 브라우저에서 슬라이더가 표시됩니다.
제가 등록한 사진이 외부 서버에 저장되나요?
전혀 저장되지 않습니다. ToolMole의 모든 이미지 처리와 소스 코드 생성 과정은 사용자의 브라우저 내에서만 로컬로 이루어집니다. 어떤 데이터나 파일도 외부 서버로 전송되거나 업로드되지 않으므로 비공개 문서 작업에도 안전하게 사용할 수 있습니다.
이 도구에 문제가 있거나 제안할 아이디어가 있나요? 의견 보내기