[javascript] 드래그 앤 드롭 기능을 가진 웹 기반 사진 에디터 예제 구현하기

29 Nov 2023

javascript

이번에는 웹 기반의 사진 에디터를 만들어보겠습니다. 이 사진 에디터에는 드래그 앤 드롭 기능을 추가하여 사용자가 이미지 파일을 웹 페이지 위에 끌어다 놓을 수 있도록 할 것입니다. 사용자가 이미지를 드래그하면 에디터 창 안으로 이미지가 들어가게 되고, 사용자는 해당 이미지를 편집하거나 다른 작업을 수행할 수 있습니다.

1. HTML 구조 만들기

먼저 HTML을 사용하여 사진 에디터의 구조를 만들어 보겠습니다. 아래는 예시로 사용할 HTML 구조입니다.

<!DOCTYPE html>
<html>
<head>
    <title>사진 에디터</title>
</head>
<body>

    <div id="editor">
        <div id="dropzone">
            <p>이곳에 이미지를 드래그하세요!</p>
        </div>
        <div id="image-container">
            <!-- 이미지가 들어갈 공간 -->
        </div>
    </div>

    <script src="editor.js"></script>
</body>
</html>

위의 HTML 코드에서 <div id="editor">는 전체 사진 에디터를 감싸는 부모 컨테이너입니다. <div id="dropzone">은 드래그 앤 드롭 영역으로, 사용자가 이미지를 이 영역 위에 드래그하게 됩니다. <div id="image-container">는 실제로 이미지가 들어갈 공간입니다. 이 부분은 드래그 앤 드롭으로 이미지를 가져온 후 해당 이미지를 보여줄 것입니다.

2. 드래그 앤 드롭 기능 구현하기

드래그 앤 드롭 기능을 구현하기 위해 JavaScript 코드를 작성해야 합니다. editor.js 파일을 생성하고 아래의 코드를 추가해보겠습니다.

// 드래그 앤 드롭 이벤트 처리
const dropzone = document.querySelector('#dropzone');
dropzone.addEventListener('dragenter', handleDragEnter);
dropzone.addEventListener('dragover', handleDragOver);
dropzone.addEventListener('dragleave', handleDragLeave);
dropzone.addEventListener('drop', handleDrop);

function handleDragEnter(event) {
    event.preventDefault();
    dropzone.classList.add('dragover');
}

function handleDragOver(event) {
    event.preventDefault();
}

function handleDragLeave(event) {
    event.preventDefault();
    dropzone.classList.remove('dragover');
}

function handleDrop(event) {
    event.preventDefault();
    
    // 이미지 파일 가져오기
    const file = event.dataTransfer.files[0];
    
    // 가져온 이미지 파일을 image-container에 추가하기
    const imageContainer = document.querySelector('#image-container');
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    imageContainer.appendChild(img);
    
    dropzone.classList.remove('dragover');
}

위의 JavaScript 코드에서는 dragenter, dragover, dragleave, drop 이벤트에 대한 핸들러 함수를 작성했습니다. dragenter 이벤트가 발생하면 dropzone에 dragover 클래스를 추가하여 스타일을 변경합니다. dragover 이벤트는 기본 동작을 막기 위해 따로 처리하지 않습니다. dragleave 이벤트는 dragover 클래스를 제거하여 스타일을 원래대로 복원합니다. drop 이벤트에서는 가져온 이미지 파일을 image-container에 추가하여 화면에 보여줍니다.

3. CSS 스타일링

마지막으로 CSS를 사용하여 사진 에디터를 디자인해보겠습니다. CSS 파일을 생성하고 아래의 코드를 추가해주세요.

#editor {
    width: 500px;
    height: 500px;
    border: 2px dashed #ccc;
    text-align: center;
    padding: 20px;
}

#dropzone {
    width: 100%;
    height: 200px;
    background-color: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#dropzone.dragover {
    background-color: #e0e0e0;
}

#image-container {
    width: 100%;
    height: calc(100% - 220px);
    overflow: auto;
}

위의 CSS 코드에서는 dropzone과 editor의 스타일을 지정하였습니다. dropzone은 드래그 앤 드롭 영역의 스타일을 설정하며, dragover 클래스가 추가되면 배경색이 변경됩니다. editor는 전체 사진 에디터의 스타일을 설정하며, 가로 세로 크기, 테두리, 텍스트 정렬, 패딩 등을 지정하였습니다. image-container는 이미지가 보여지는 영역의 스타일을 지정하였으며, 스크롤이 생길 경우 영역 내부에 스크롤이 생깁니다.

마무리

이제 브라우저에서 HTML 파일을 열어보면 드래그 앤 드롭 기능을 가진 웹 기반 사진 에디터를 확인할 수 있습니다. 사용자가 이미지를 드래그하여 드롭 영역 위에 놓으면 해당 이미지가 사진 에디터창에 보여집니다. 이를 통해 사용자는 이미지를 편집하거나 다른 작업을 수행할 수 있습니다. 이 예제는 드래그 앤 드롭 기능을 구현하는 간단한 예제이며, 더 복잡한 에디터 기능을 추가하여 개발할 수도 있습니다.

참고 자료: