WebP jpg 변환 (또는 png) 하는 사이트 (보안 걱정 없음)

WebP를 jpg로 변환하는 사이트를 소개해드립니다. WebP라는 이미지 파일 포맷은 구글에서 개발했는데요. 압축률에 비해 이미지 퀄리티는 높아서 차세대 이미지 포맷으로 불리우고 있습니다. 높은 수준의 품질을 제공하고 있지만 막상 사용자들 사이에선 생소한 것으로 여겨지기도 하고 때로는 파일을 열 수 없어서 불편해하기도 합니다. 그래서 간단히 웹에 파일을 올리면 변환해서 내려 받을 수 있는 webP to Jpg, PNG 프로그램을 소개해드립니다. 

 

 

 

WebP Jpg, PNG 변환하기

webP 이미지를 jpg, PNG로 변환하는 프로그램을 직접 만들었습니다. 정확히는 chatGPT 를 활용해서 만들었습니다. 누구나 이런 변환 프로그램을 만들 수 있으니 chatGPT를 활용해서 직접 만들어보셔도 좋을 것 같습니다. 제가 만든 방법은 아래쪽에 소개하였습니다.

 

webP jpg(png) 변환 바로가기

 

webP to JPG, PNG 사용방법

 

반응형

 

webP를 JPG, PNG로 변환하는 프로그램 사용법은 아주 간단합니다.

1. 변환할 webP 이미지 파일을 준비합니다.

2. webP 변환 사이트에 업로드 합니다. (드래그앤드롭 또는 파일찾기로 업로드 할 수 있습니다.)

3. 업로드가 잘되면 이미지 샘플이 화면에 보입니다.

4. 변환할 최종 파일 포멧(jpg 또는 png)를 선택합니다.

5. 파일을 저장합니다.

 

참고로 제가 만든 webP to jpg, png 변환기는 자바스크립트로 되어 있고 파일을 저장하지 않기 때문에 브라우저로 웹에 올리는 작업을 하긴 하지만 사실상은 사용자의 pc에서 작동합니다. 따라서 보안 걱정은 하지 않으셔도 됩니다.

 

webP jpg 변환 프로그램 제작 팁

앞서 말씀드린 것처럼 chatGPT를 이용해서 webP jpg 변환 온라인 앱(사이트)를 만들었습니다. 처음부터 파일을 웹에 저장하지 않고 사용자 pc에서 작동하도록 만들고자 했습니다. 단점이라면 웹에 저장하지 않기 때문에 이전 작업이 남아 있다가 다시 사용할 수 있도록 하는 기능은 없습니다. 

 

webP jpg 변환기 javascript

chat GPT로 프로그램을 만들 때 가장 어려운 점은 오류가 있어도 무작정 오류가 없다고 하면서 거의 무한정 반복작업을 하는 경우가 많다는 것입니다. 그래서 테스트를 한없이 해야할 수도 있습니다. 짜증나는 상황은 덤입니다. 오류가 나는 이유를 어느정도 이해한다면 정확히 해당되는 문제를 chatGPT에 알려줘서 프로그램을 빠르게 개발할 수도 있을 것 같습니다. 

 

상단에 상수를 정의해준 영역입니다.

const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const resultArea = document.getElementById('result');
const downloadButton = document.getElementById('download-button');
const jpgRadio = document.getElementById('jpg');
const pngRadio = document.getElementById('png');

파일을 드래그앤드롭으로 추가하거나 파일을 직접 업로드하는 방식으로 가능하도록 되어 있습니다.

파일을 드래그앤 드롭으로 가져오는 javascript 부분입니다. 이 부분도 chatGPT 은근히 오류를 많이 냅니다. 

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault();
  dropZone.classList.add('dragover');
});

dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('dragover');
});

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  dropZone.classList.remove('dragover');

  const files = event.dataTransfer.files;

  handleFiles(files);
});

파일을 처리하는 자바스크립트는 아래와 같습니다.

function handleFiles(files) {
  resultArea.innerHTML = '';

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const fileType = file.type;

    if (fileType !== 'image/webp') {
      const errorElement = document.createElement('p');
      errorElement.innerText = `${file.name}은(는) WebP 파일이 아닙니다.`;
      resultArea.appendChild(errorElement);
      continue;
    }

    const reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = () => {
      const imageElement = document.createElement('img');
      imageElement.src = reader.result;
      resultArea.appendChild(imageElement);
    };
  }
}

파일을 불러올 때 이미지가 webP가 아니면 에러 메시지가 나오도록 되어 있습니다. 

 

이 밖에 다운로드 버튼처리하는 부분도 있지만 나중에 소스코드를 확인해보시면 될 거 같습니다.

 

정말 작은 크기의 프로그램이지만 생각보다 시간이 많이 걸려서 만든 프로그램입니다. 

webP 파일을 변환하고자 하는 분께 도움이 되었음 좋겠습니다.

 

webP jpg(png) 변환 바로가기

 

마치며,

webP를 익히 알고 있는 jpg, png로 변환하는 프로그램을 소개해드렸습니다. webP는 웹피라고 읽습니다. Wep+Picture의 줄임말입니다. 차세대 포멧이고 이제는 대부분의 브라우저들이 지원을 하지만 가끔 오래된 브라우저를 사용하는 PC 에서는 이미지가 나오지 않을 수도 있습니다. 웹에서 webP를 내려받았는데 막상 사용하기 곤란할 때는 가벼운 webP jpg변환 프로그램을 활용해주세요.

 

감사합니다.