DOM 조작을 활용한 인스타그램 사진 필터링

작성: 2025년 06월 20일읽기: 약 3분

웹 개발에 관심이 많은 주니어 개발자 여러분, 인스타그램에서 사진을 멋지게 보이게 하는 필터 기능이 얼마나 매력적인지 알고 계시나요? 오늘은 바로 그 인스타그램 사진 필터링을 우리가 직접 만들어 볼 수 있는 방법, 즉 DOM(Document Object Model) 조작을 활용하는 방법에 대해 알아보겠습니다.

DOM은 웹 페이지를 구성하는 HTML과 XML 문서의 프로그래밍 인터페이스입니다. 간단히 말해, 우리가 JavaScript를 사용하여 웹 페이지의 구조, 스타일, 내용 등을 동적으로 변경할 수 있게 해주는 것이죠.

사진 필터링 기능 만들기

사진 필터링 기능을 만들기 위해, 우리는 먼저 HTML에서 이미지를 선택할 수 있도록 해야 합니다. 그 다음, JavaScript를 사용하여 해당 이미지에 다양한 효과를 적용할 수 있습니다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 조작 사진 필터링</title>
</head>
<body>
    <img id="photo" src="your-photo.jpg" alt="인스타그램 사진">
    <button id="filter-btn">필터 적용</button>

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

위의 코드에서는 img 태그를 사용하여 사진을 웹 페이지에 표시하고, button 태그를 사용하여 사용자가 필터를 적용할 수 있는 버튼을 만들었습니다.

JavaScript

document.getElementById('filter-btn').addEventListener('click', function() {
    var photo = document.getElementById('photo');
    photo.style.filter = 'grayscale(100%)';
});

JavaScript 코드에서는 getElementById 메소드를 사용하여 HTML에서 photo와 filter-btn을 선택합니다. 그 다음, addEventListener 메소드를 사용하여 버튼에 'click' 이벤트 리스너를 추가합니다. 버튼이 클릭되면, 사진에 회색조 필터(grayscale)가 적용됩니다.

이 코드는 매우 기본적인 예시입니다. 여러분은 photo.style.filter 값을 변경하여 다양한 필터 효과를 적용할 수 있습니다. 예를 들어, sepia(50%), blur(5px), brightness(150%) 등 다양한 CSS 필터 효과를 적용해 볼 수 있습니다.

마치며

DOM 조작을 통해 우리는 웹 페이지의 요소를 동적으로 변경할 수 있습니다. 오늘 배운 내용을 활용하여, 여러분만의 인스타그램 사진 필터링 기능을 만들어보세요. 웹 개발의 세계는 창의력을 발휘할 수 있는 무한한 가능성을 제공합니다. 실험을 두려워하지 마시고, 새로운 것을 시도해 보세요!

이제 여러분도 DOM 조작의 기초를 이해하고, 간단한 사진 필터링 기능을 구현할 수 있게 되었습니다. 계속해서 연습하고, 여러분의 웹 페이지에 멋진 기능들을 추가해 보세요. Happy coding!