프로젝트 개요
TMDB API를 활용하여 개인 영화 검색 사이트를 구축하는 과정에서, JavaScript를 사용하여 카드 리스트를 생성하는 프로젝트를 진행하고 있습니다. 이번 프로젝트는 다양한 영화 정보를 손쉽게 사용자에게 제공하고, 사용자 인터페이스(UI)를 통해 영화 검색 기능도 구현할 예정입니다.
이 글에서는 첫 번째 날의 작업 내용을 정리하고, 앞으로의 계획에 대해서도 이야기해 보겠습니다.
TMDB API란?
TMDB(The Movie Database) API는 영화, TV 프로그램, 인물에 대한 방대한 정보를 제공하는 API입니다. 사용자들은 TMDB API를 통해 최신 영화, 인기 영화, 장르별 영화 등의 정보를 손쉽게 검색하고 활용할 수 있습니다.
TMDB는 사용자들이 직접 영화 정보를 업데이트하고 공유할 수 있는 플랫폼으로, 사용자 생성 콘텐츠가 많은 특징이 있습니다. 이러한 API를 활용하여 영화 검색 사이트를 만드는 것은 개발자에게 매우 유익한 경험이 될 것입니다.
| 항목 | 설명 |
|---|---|
| API 이름 | TMDB API |
| 제공하는 데이터 | 영화 정보, TV 프로그램, 인물 정보 |
| 특징 | 사용자 생성 콘텐츠, 다양한 검색 기능 |
| 사용 언어 | RESTful API, JSON |
API 발급 받기
TMDB API를 사용하기 위해서는 먼저 API 키를 발급받아야 합니다. 발급 과정은 다음과 같습니다.
- TMDB 웹사이트에 가입하기: TMDB의 공식 웹사이트에 접속하여 사용자 계정을 생성합니다.
- API 신청하기: 로그인 후, 사용자 대시보드에서 ‘API’ 탭으로 이동하여 API 키를 신청합니다.
- API 키 확인하기: API 키가 승인되면, 대시보드에서 발급받은 API 키를 확인할 수 있습니다.
이 과정을 통해 발급받은 API 키는 영화 정보를 요청할 때 필요한 인증 토큰으로 사용됩니다. API 키를 안전하게 보관하고, 공개적으로 노출되지 않도록 주의해야 합니다.
프로젝트 환경 설정
이번 프로젝트는 HTML, CSS, JavaScript를 사용하여 구현될 것입니다. 다음은 환경 설정 과정에 대한 설명입니다.
- HTML 파일 만들기: 기본적인 HTML 구조를 설정하여 영화 검색 사이트의 뼈대를 구성합니다.
<head>태그에는 페이지 제목과 CSS 파일을 연결합니다.
“`html
“`
- CSS 파일 만들기: 스타일을 적용하기 위한 CSS 파일을 생성합니다. 기본적인 레이아웃과 디자인을 설정하여 사용자에게 보기 좋은 UI를 제공합니다.
“`css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
#app {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
padding: 20px;
}
“`
- JavaScript 파일 만들기: 영화 정보를 가져오고, 카드 리스트를 생성하는 JavaScript 파일을 작성합니다. 이 파일에서 TMDB API로부터 데이터를 요청하고, 응답받은 데이터를 화면에 표시하는 기능을 구현할 것입니다.
``javascripthttps://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=ko-KR&page=1`;
const API_KEY = 'YOUR_API_KEY';
const API_URL =
async function fetchMovies() {
const response = await fetch(API_URL);
const data = await response.json();
return data.results;
}
function createMovieCard(movie) {
const card = document.createElement(‘div’);
card.className = ‘card’;
card.innerHTML = <h2>${movie.title}</h2>;
<p>${movie.overview}</p>
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
return card;
}
async function displayMovies() {
const movies = await fetchMovies();
const app = document.getElementById(‘app’);
movies.forEach(movie => {
const movieCard = createMovieCard(movie);
app.appendChild(movieCard);
});
}
displayMovies();
“`
카드 리스트 만들기
영화 정보를 카드 형태로 표시하기 위해, 각 영화의 제목, 줄거리, 포스터를 포함한 카드 리스트를 만들어야 합니다. createMovieCard 함수를 통해 각 영화에 대한 카드 요소를 생성하고, 이를 DOM에 추가합니다.
| 카드 요소 | 설명 |
|---|---|
| 제목 | 영화의 제목 |
| 줄거리 | 영화의 간단한 줄거리 |
| 포스터 | 영화 포스터 이미지 |
이와 같이 카드를 생성하여 사용자에게 영화 정보를 쉽게 전달할 수 있습니다. 카드의 디자인은 CSS를 통해 꾸며질 것이며, 사용자는 직관적으로 정보를 확인할 수 있습니다.
결론 및 다음 단계
첫 번째 날의 작업을 통해 TMDB API를 활용하여 영화 정보를 가져오고, 이를 카드 형태로 표시하는 기본적인 구조를 갖추었습니다. 다음 단계로는 영화 검색 기능을 추가하고, 사용자 인터페이스를 개선하여 더 나은 사용자 경험을 제공할 것입니다.
이 프로젝트는 영화에 관심이 있는 사용자들에게 유용한 도구가 될 것이며, 개발자에게는 API를 활용하고 UI/UX를 설계하는 좋은 경험이 될 것입니다. 앞으로의 진행 상황에 대해서도 지속적으로 업데이트할 계획입니다.
