이미지 업로드 후 썸네일까지?! HTML로 실시간 미리보기 (+코드예제)

웹페이지를 만들다 보면 사용자에게 이미지 업로드 기능을 제공할 일이 종종 생깁니다. 그런데 단순히 업로드만 되는 것보다, 사용자가 업로드한 이미지를 즉시 미리보기로 보여준다면 훨씬 더 친절하고 직관적인 사용자 경험을 제공할 수 있습니다.
오늘은 HTML과 JavaScript를 활용해 이미지만 선택할 수 있게 하고, 업로드된 이미지를 썸네일로 미리 보여주는 방법을 소개합니다. 😊

 

 

HTML input file로 이미지 파일만 선택하게 하기 🎯

우선, 파일 업로드 input 태그에서 이미지만 선택할 수 있도록 만들어야 합니다.
accept 속성을 이용하면 아주 간단하게 구현할 수 있습니다.

<input type="file" accept="image/*">

 

반응형

 

 

JavaScript로 썸네일 미리보기 만들기 ✨

이미지 선택 후, 바로 아래에 썸네일을 띄워주는 방식은 사용자에게 큰 만족을 줄 수 있습니다. 아래는 실제로 썸네일이 보여지는 예제 코드입니다.

<input type="file" id="imageInput" accept="image/*">
<div id="preview"></div>

<script>
  const input = document.getElementById('imageInput');
  const preview = document.getElementById('preview');

  input.addEventListener('change', () => {
    preview.innerHTML = ''; // 기존 미리보기 제거
    const files = input.files;

    Array.from(files).forEach(file => {
      if (!file.type.startsWith('image/')) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '200px';
        img.style.marginRight = '10px';
        img.style.border = '1px solid #ccc';
        img.style.padding = '5px';
        preview.appendChild(img);
      };
      reader.readAsDataURL(file);
    });
  });
</script>

"지금 내가 업로드한 파일이 맞는지" 바로 확인할 수 있기 때문에 실수를 줄이고, 사이트에 대한 신뢰도도 자연스럽게 올라갑니다.

 

SMALL

 

 

깔끔한 디자인 팁 🎨

썸네일을 나열할 때는 간단한 스타일을 주는 것이 좋습니다. 예를 들어 아래와 같이 CSS를 추가하면 훨씬 정돈된 느낌을 줄 수 있습니다.

<style>
  #preview img {
    max-width: 200px;
    max-height: 200px;
    margin: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
</style>

 

 

마무리하며 🎬

이미지 업로드 기능 하나에도 이렇게 다양한 UX 요소가 숨어 있다는 사실, 알고 계셨나요?
간단한 코드지만 사용자 입장에선 큰 차이를 만들어냅니다.
지금 바로 HTML과 JavaScript로 이미지 썸네일 기능을 구현해보세요. 더 나은 웹 서비스를 만드는 데 한 걸음 더 가까워질 수 있습니다. 🚀