JavaScript로 영화 검색 및 모달창, 북마크 토글 구현하기

웹 개발의 매력 중 하나는 사용자와의 상호작용을 통해 풍부한 경험을 제공하는 것입니다. 이번 포스팅에서는 JavaScript를 활용하여 영화 검색 기능을 구현하고, 모달창을 만들어 사용자에게 정보를 제공하며, 북마크 버튼을 사용하여 즐겨찾기를 토글하는 기능까지 함께 살펴보도록 하겠습니다.

이 과정을 통해 JavaScript의 다양한 활용 가능성과 웹 애플리케이션 개발의 기초를 이해할 수 있을 것입니다.

영화 검색 기능 구현하기

영화 검색 기능은 사용자가 원하는 영화를 쉽게 찾을 수 있도록 도와주는 핵심 기능입니다. 이 기능을 구현하기 위해서는 외부 API를 사용하여 영화 정보를 가져오는 방법이 일반적입니다.

예를 들어, OMDB API(영화 데이터베이스 API)를 활용할 수 있습니다. API를 통해 검색 결과를 가져오고, 이를 사용자에게 깔끔하게 보여주는 방법에 대해 상세히 알아보겠습니다.

API 설정 및 요청

우선 OMDB API에 가입하여 API 키를 발급받습니다. 이후 JavaScript의 fetch 메소드를 사용하여 API에 요청을 보내고, 영화 목록을 받아오는 과정을 살펴보겠습니다.

javascript const apiKey = 'YOUR_API_KEY'; const searchMovie = async (query) => { const response = await fetch(`https://www.omdbapi.com/?s=${query}&apikey=${apiKey}`); const data = await response.json(); return data.Search; };

위의 코드는 사용자가 입력한 영화 제목에 대한 검색 요청을 보내고, 결과를 JSON 형식으로 받아오는 함수입니다. 여기서 YOUR_API_KEY 부분은 실제 발급받은 API 키로 교체해야 합니다.

검색 결과 표시하기

영화 검색 결과를 사용자에게 보여주기 위해 HTML 요소를 동적으로 생성하는 방법이 필요합니다. 검색 결과를 담을 컨테이너를 만들고, API에서 받아온 영화 정보를 기반으로 카드 형태로 표시하는 방법은 다음과 같습니다.

```javascript const displayMovies = (movies) => { const movieContainer = document.getElementById('movie-container'); movieContainer.innerHTML = ''; // 기존 내용 초기화

movies.forEach(movie => {
    const movieCard = document.createElement('div');
    movieCard.className = 'movie-card';
    movieCard.innerHTML = `
        <h3>${movie.Title}</h3>
        <p>${movie.Year}</p>
        <button onclick="openModal('${movie.imdbID}')">상세보기</button>
    `;
    movieContainer.appendChild(movieCard);
});

}; ```

여기서는 openModal 함수를 통해 사용자가 클릭한 영화의 상세 정보를 모달창에서 볼 수 있도록 설정합니다.

영화 검색 UI 구성

영화 검색 기능을 위해 사용자가 입력할 수 있는 검색창과 검색 결과를 표시할 컨테이너를 HTML로 구성합니다. 아래 표는 간단한 UI 설계를 보여줍니다.

요소	설명
검색 입력창	사용자가 영화 제목을 입력하는 필드
검색 버튼	검색 요청을 보내는 버튼
영화 목록 컨테이너	검색 결과를 표시하는 영역

```html

```

이렇게 구성된 UI를 통해 사용자는 영화 제목을 입력하고, 검색 버튼을 클릭하여 결과를 확인할 수 있습니다. 다음 단계로는 모달창을 구현해 보겠습니다.

모달창 구현하기

모달창은 사용자에게 추가적인 정보를 제공하는 데 유용한 인터페이스입니다. 특히 영화 상세 정보를 보여주는 데 적합합니다.

모달창을 구현하기 위해 HTML, CSS 및 JavaScript를 사용하여 클릭 시 화면에 표시되는 구조를 만들어 보겠습니다.

모달창 HTML 구조

모달창의 기본 구조를 HTML로 작성합니다. 아래와 같이 간단한 모달창을 만들 수 있습니다.

```html

```

위 코드에서는 모달창을 구성하는 요소들을 정의하였습니다. modal-title과 modal-description은 영화의 제목과 설명을 표시하는 부분입니다.

모달창 스타일링

CSS를 사용하여 모달창의 스타일을 설정합니다. 모달창은 기본적으로 화면 중앙에 위치해야 하며, 배경은 반투명하게 처리하여 사용자의 집중을 유도합니다.

```css .modal { display: none; / 기본적으로 숨김 / position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }

.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } ```

모달창 열기 및 닫기 기능

JavaScript를 활용하여 모달창을 열고 닫는 기능을 구현합니다. openModal과 closeModal 함수를 작성하여 사용자가 클릭했을 때 모달창이 열리고, 닫을 수 있도록 합니다.

``javascript const openModal = async (imdbID) => { const response = await fetch(https://www.omdbapi.com/?i=${imdbID}&apikey=${apiKey}`); const movie = await response.json();

document.getElementById('modal-title').innerText = movie.Title;
document.getElementById('modal-description').innerText = movie.Plot;
document.getElementById('modal').style.display = 'block';

};

const closeModal = () => { document.getElementById('modal').style.display = 'none'; }; ```

이렇게 구현된 모달창은 사용자가 선택한 영화의 상세 정보를 보여주고, 사용자가 닫기 버튼을 클릭하면 사라지게 됩니다.

모달창 UI 구성

모달창의 UI를 구성하는 요소를 아래 표에 정리할 수 있습니다.

요소	설명
모달 배경	모달창의 배경으로 반투명 처리됨
모달 내용	영화 제목과 설명이 포함된 영역
닫기 버튼	모달창을 닫는 역할을 수행하는 버튼

다른 내용도 보러가기 #1

북마크 버튼 토글 기능 구현하기

영화 검색 기능과 모달창의 구현이 완료되면, 마지막으로 북마크 버튼을 토글하는 기능을 추가해보겠습니다. 이 기능은 사용자가 좋아하는 영화를 저장하고, 이를 쉽게 관리할 수 있도록 도와줍니다.

북마크 버튼 구현

모달창 내에 북마크 버튼을 추가하여 사용자가 해당 영화를 북마크할 수 있는 기능을 구현합니다. 아래와 같이 HTML에 북마크 버튼을 추가할 수 있습니다.

html <button id="bookmark-button" onclick="toggleBookmark()">북마크</button>

북마크 저장 및 토글 기능

JavaScript를 사용하여 북마크를 저장하고 토글하는 기능을 구현합니다. 로컬 스토리지(localStorage)를 활용하여 사용자가 북마크한 영화 정보를 저장할 수 있습니다.

```javascript let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];

const toggleBookmark = () => { const movieID = document.getElementById('modal-title').innerText; if (bookmarks.includes(movieID)) { bookmarks = bookmarks.filter(id => id !== movieID); alert('북마크에서 제거되었습니다.'); } else { bookmarks.push(movieID); alert('북마크에 추가되었습니다.'); } localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); }; ```

위의 함수는 북마크 버튼을 클릭할 때마다 해당 영화가 북마크 목록에 추가되거나 제거되도록 합니다. 사용자는 알림을 통해 상태 변화를 확인할 수 있습니다.

북마크 관리 UI 구성

북마크 관리 UI를 위한 기본적인 요소는 다음과 같은 표로 정리할 수 있습니다.

요소	설명
북마크 버튼	모달창에서 북마크를 추가/제거하는 버튼
북마크 목록	사용자가 북마크한 영화 리스트를 표시하는 영역

이렇게 구현된 영화 검색, 모달창, 북마크 토글 기능은 사용자가 영화 정보를 쉽게 검색하고 관리할 수 있는 웹 애플리케이션을 완성하는 데 기여합니다. 각 기능을 통해 JavaScript의 다양한 활용 가능성을 체험할 수 있으며, 실제 웹 개발에 필요한 기본적인 기술을 익힐 수 있습니다.

이제 이 기능을 더 발전시켜서 추가적인 기능을 구현하거나, UI를 개선하는 등 다양한 방법으로 프로젝트를 확장해 나갈 수 있을 것입니다.

관련 영상

같이 보면 좋은 글