영화 검색 기능 구현
영화 검색 기능은 사용자가 입력한 검색어에 따라 영화 정보를 제공하는 핵심 기능 중 하나입니다. 이를 위해 다양한 API를 활용하여 실시간으로 정보를 조회할 수 있는 시스템을 구축하였습니다.
API 호출을 통해 영화 정보를 가져오는 과정은 여러 단계를 포함하고 있으며, 각 단계에서의 주의사항과 구현 방법을 상세히 설명드리겠습니다.API 선택 및 데이터 구조
영화 정보를 제공하기 위해 선택한 API는 'OMDb API'입니다. 이 API는 영화 제목, 감독, 배우, 개봉 연도, 줄거리 등 다양한 정보를 제공하는데 유용합니다.
API를 사용하기 위해 회원가입 후 API 키를 발급받아야 하며, 이를 통해 요청을 보내고 응답을 받을 수 있습니다. API의 데이터는 JSON 형식으로 반환되며, 이 데이터를 효율적으로 처리하기 위해 데이터 구조를 미리 설계하는 것이 필요합니다.예를 들어, 다음과 같은 데이터 구조를 가질 수 있습니다.| 필드 | 설명 |
|---|---|
| Title | 영화 제목 |
| Year | 개봉 연도 |
| Rated | 평점 |
| Released | 개봉일 |
| Genre | 장르 |
| Director | 감독 |
| Actors | 배우 목록 |
| Plot | 줄거리 |
| Poster | 포스터 이미지 URL |
이와 같은 구조를 기반으로 영화 정보를 가져오고, 사용자가 쉽게 이해할 수 있도록 UI를 구성하는 것이 핵심입니다.
검색 기능 구현 과정
영화 검색 기능을 구현하기 위해 HTML, CSS, JavaScript를 사용하였습니다. 먼저, 기본적인 사용자 인터페이스(UI)를 제작하였습니다.
사용자가 검색어를 입력할 수 있는 입력창과 검색 버튼을 배치하였습니다.```html
```
검색 버튼을 클릭하면 JavaScript의 이벤트 리스너가 작동하여 API에 요청을 보냅니다. API 호출 후 응답을 받아와서 결과를 화면에 표시하는 방식으로 구현하였습니다.
아래는 간단한 API 호출 예시입니다.``javascript
document.getElementById('search-button').addEventListener('click', function() {
const query = document.getElementById('search-input').value;
const url =http://www.omdbapi.com/?apikey=YOUR_API_KEY&t=${query}`;
fetch(url)
.then(response => response.json())
.then(data => {
if (data.Response === "True") {
displayResult(data);
} else {
alert("영화를 찾을 수 없습니다.");
}
});
}); ```
이와 같이 검색 기능을 구현하여 사용자가 쉽게 원하는 영화를 찾을 수 있도록 하였습니다. 결과를 표시하는 displayResult 함수에서는 API로부터 받은 데이터를 기반으로 HTML 요소를 생성하여 화면에 나타내게 됩니다.
사용자 피드백 및 개선점
프로젝트 진행 중 사용자로부터 받은 피드백을 통해 몇 가지 개선점을 발견하였습니다. 첫째, 검색어를 입력할 때 자동완성 기능을 추가하면 사용자의 편의성을 높일 수 있다는 점이었습니다.
이를 위해 사용자가 입력하는 즉시 API를 호출하여 관련된 영화 목록을 제공하는 기능을 추가할 계획입니다. 둘째, 검색 결과의 디자인을 좀 더 세련되게 다듬어야겠다는 의견도 있었습니다.현재 결과는 단순한 텍스트 형태로 제공되지만, 포스터 이미지와 함께 보여주면 시각적으로 더 매력적일 것입니다. 이러한 피드백을 바탕으로 UI/UX 개선 작업을 진행할 예정입니다.모달창 구현
모달창을 구현하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. 영화 검색 기능에서 검색된 영화의 자세한 정보를 사용자에게 제공하기 위해 모달창을 활용하였습니다.
모달창을 통해 사용자는 영화의 세부 정보를 확인할 수 있으며, 이 기능은 사용자 인터페이스의 일관성을 유지하는 데 중요한 역할을 합니다.모달창 디자인 및 구조
모달창은 기본적으로 숨겨진 상태로 시작하여, 사용자가 특정 영화를 클릭했을 때 나타나는 구조로 설계하였습니다. 모달창의 HTML 구조는 다음과 같습니다.
```html
```
위와 같은 구조를 통해 모달창의 제목, 포스터 이미지, 줄거리를 표시할 수 있도록 하였습니다. 모달창의 배경은 반투명하게 설정하여 사용자에게 집중할 수 있는 환경을 제공합니다.
모달창 표시 및 닫기 기능 구현
모달창의 표시 및 닫기 기능은 JavaScript로 처리하였습니다. 사용자가 검색 결과에서 특정 영화를 클릭하면 해당 영화의 정보를 모달창에 로드하고, 모달창을 표시하게 됩니다.
아래는 모달창을 표시하는 예시 코드입니다.``javascript
function displayResult(data) {
const resultDiv = document.getElementById('result');
const movieDiv = document.createElement('div');
movieDiv.innerHTML =
${data.Title}
movieDiv.querySelector('.open-modal').addEventListener('click', function() {
document.getElementById('modal-title').innerText = data.Title;
document.getElementById('modal-poster').src = data.Poster;
document.getElementById('modal-plot').innerText = data.Plot;
document.getElementById('modal').style.display = "block";
});
} ```
모달창을 닫는 기능도 추가하여 사용자가 원하는 정보를 빠르게 확인하고 쉽게 닫을 수 있도록 하였습니다. 아래는 모달창을 닫는 예시 코드입니다.
javascript
document.querySelector('.close').addEventListener('click', function() {
document.getElementById('modal').style.display = "none";
});
이러한 방식으로 모달창을 구현하여 영화에 대한 세부 정보를 사용자에게 더욱 효과적으로 전달할 수 있게 되었습니다.
사용자 경험 개선
모달창을 구현한 후 사용자 경험에 대한 피드백을 받아보았습니다. 사용자들은 모달창을 통해 영화에 대한 정보를 쉽게 확인할 수 있다는 점에서 긍정적인 반응을 보였습니다.
하지만 몇몇 사용자들은 모달창이 열릴 때 애니메이션 효과가 없다는 점을 아쉬워했습니다. 따라서, 모달창이 열릴 때 부드럽게 나타나고 사라지는 애니메이션 효과를 추가할 계획입니다.또한, 모달창에서 영화에 대한 정보를 더 많이 제공할 수 있도록 추가적인 필드를 고려해보는 것도 좋은 방향성이 될 것입니다. 예를 들어, 감독이나 출연진의 정보를 별도로 표시하거나, 영화에 대한 평가 점수를 시각적으로 표현하는 방법도 고려할 수 있습니다.북마크 버튼 토글
북마크 기능은 사용자가 관심 있는 영화를 쉽게 저장하고 관리할 수 있도록 도와주는 중요한 기능입니다. 사용자가 특정 영화를 북마크할 수 있도록 버튼을 추가하고, 이 버튼을 통해 북마크 상태를 토글할 수 있는 기능을 구현하였습니다.
북마크 버튼 디자인 및 기능
북마크 버튼은 영화 검색 결과와 함께 표시되며, 사용자가 클릭할 때마다 북마크 상태가 변경됩니다. 버튼 클릭 시, 해당 영화의 정보를 로컬 스토리지에 저장하거나 삭제하는 방식으로 구현하였습니다.
아래는 버튼을 포함한 HTML 구조의 예시입니다.html
<button class="bookmark-button">북마크</button>
이 버튼의 클릭 이벤트를 처리하여 북마크 상태를 토글하는 로직을 추가하였습니다. 사용자가 버튼을 클릭할 때마다 영화 정보가 로컬 스토리지에 저장되고, 북마크 상태에 따라 버튼의 텍스트와 스타일이 변경됩니다.
로컬 스토리지 사용
로컬 스토리지를 활용하여 사용자가 북마크한 영화 정보를 저장하는 방법은 매우 간편합니다. 사용자가 북마크 버튼을 클릭할 때마다 해당 영화의 정보를 JSON 형식으로 변환하여 로컬 스토리지에 저장합니다.
아래는 북마크 기능을 구현하는 코드 예시입니다.```javascript let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
function toggleBookmark(movie) {
const index = bookmarks.findIndex(b => b.Title === movie.Title);
if (index > -1) {
bookmarks.splice(index, 1); // 이미 북마크 되어 있다면 제거
alert(${movie.Title}의 북마크가 삭제되었습니다.);
} else {
bookmarks.push(movie); // 북마크 추가
alert(${movie.Title}이 북마크에 추가되었습니다.);
}
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
```
이와 같은 방식으로 북마크 기능을 구현하여 사용자가 관심 있는 영화를 쉽게 관리할 수 있도록 하였습니다.
사용자 피드백 및 향후 개선 사항
북마크 기능을 구현한 후, 사용자들로부터 긍정적인 피드백을 받았습니다. 많은 사용자들이 자신이 관심 있는 영화를 쉽게 저장하고, 나중에 다시 찾아볼 수 있다는 점에서 큰 만족감을 보였습니다.
그러나 몇몇 사용자들은 북마크 목록을 확인할 수 있는 기능이 없다는 점을 아쉬워하였습니다. 따라서, 사용자가 북마크한 영화 목록을 별도로 확인하고 관리할 수 있는 페이지를 추가할 계획입니다.또한, 북마크 버튼의 시각적인 표현을 더욱 매력적으로 개선할 필요가 있습니다. 예를 들어, 북마크된 영화는 별 아이콘으로 표시되며, 사용자가 북마크 버튼을 클릭할 때 애니메이션 효과를 추가하면 더욱 직관적으로 사용할 수 있을 것입니다.결론
이번 2일차 진행기를 통해 영화 검색 기능, 모달창 구현, 북마크 버튼 토글 기능에 대한 상세한 과정을 공유하였습니다. 각 기능의 구현 과정에서의 어려움과 해결책, 사용자 피드백을 통해 개선해야 할 점들을 정리하며, 앞으로의 계획도 함께 논의하였습니다.
이러한 작업을 통해 사용자에게 더 나은 경험을 제공할 수 있는 방향으로 나아가고자 합니다. 계속해서 프로젝트를 발전시키며, 향후 더 많은 기능을 추가하여 사용자들에게 유용한 도구가 되도록 노력하겠습니다.
