[JS] 영화진흥위원회 오픈API ( KOFIC-OPEN-API ) 사용하기

boyon99·2023년 2월 13일

develop

목록 보기

9/13

시작하며

영화 API을 활용하기 위해 찾아보던 중 영화진흥위원회 오픈 API를 발견하였다. 이 API는 박스오피스 순위를 볼 수 있다는 점에서 유용하지만 포스터를 제공해주지는 않는다는 단점이 있다. 따라서 포스터 정보의 경우 다른 API를 사용해야 한다.

KOFIC-OPEN-API

제공서비스

일별 박스오피스
주간/주말 박스오피스
공통코드 조회
영화목록
영화 상세정보
영화사목록
영화사 상세정보
영화인목록
영화인 상세정보

다음과 같은 서비스를 제공하고 있다. 나는 이중 주간/주말 박스오피스와 영화목록 api를 활용해보았다.

1. 영화목록 API

요청

REST/SOAP 방식 중 선택적으로 호출가능하며 REST 방식의 응답형식은 XML과 JSON을 지원한다. 나는 이중 REST 방식으로 요청하였다.

기본 요청 URL는 http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.xml (또는 .json)이며 필수로 보내야 하는 요청 변수는 key이다.

따라서

let key = "?key="+process.env.key // 발급받은 키
const url = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json"
  + key

을 통해 api 주소를 요청받을 수 있다.

요청 변수	값	설명
key	문자열(필수)	발급받은키 값을 입력합니다.
curPage	문자열	현재 페이지를 지정합니다.(default : “1”)
itemPerPage	문자열	결과 ROW 의 개수를 지정합니다.(default : “10”)
movieNm	문자열	영화명으로 조회합니다. (UTF-8 인코딩)
directorNm	문자열	감독명으로 조회합니다. (UTF-8 인코딩)
openStartDt	문자열	YYYY형식의 조회시작 개봉연도를 입력합니다.
openEndDt	문자열	YYYY형식의 조회종료 개봉연도를 입력합니다.
prdtStartYear	문자열	YYYY형식의 조회시작 제작연도를 입력합니다.
prdtEndYear	문자열	YYYY형식의 조회종료 제작연도를 입력합니다.
repNationCd	문자열	N개의 국적으로 조회할 수 있으며, 국적코드는 공통코드 조회 서비스에서 “2204” 로서 조회된 국적코드입니다. (default : 전체)
movieTypeCd	문자열	N개의 영화유형코드로 조회할 수 있으며, 영화유형코드는 공통코드 조회 서비스에서 “2201”로서 조회된 영화유형코드입니다.(default: 전체)

다음과 같은 요청 변수를 추가할 수 있다. 예를 들면

let key = "?key="+process.env.key // 발급받은 키
let itemPerPage = "&itemPerPage=20" // itemPerPage
const url = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json"
  + key
  + itemPerPage

itemPerPage를 통해 받을 아이템 개수를 설정할 수 있다.

응답

응답 필드	값	설명
movieCd	문자열	영화코드를 출력합니다.
movieNm	문자열	영화명(국문)을 출력합니다.
movieNmEn	문자열	영화명(영문)을 출력합니다.
prdtYear	문자열	제작연도를 출력합니다.
openDt	문자열	개봉일을 출력합니다.
typeNm	문자열	영화유형을 출력합니다.
prdtStatNm	문자열	제작상태를 출력합니다.
nationAlt	문자열	제작국가(전체)를 출력합니다.
genreAlt	문자열	영화장르(전체)를 출력합니다.
repNationNm	문자열	대표 제작국가명을 출력합니다.
repGenreNm	문자열	대표 장르명을 출력합니다.
directors	문자열	영화감독을 나타냅니다.
peopleNm	문자열	영화감독명을 출력합니다.
companys	문자열	제작사를 나타냅니다.
companyCd	문자열	제작사 코드를 출력합니다.
companyNm	문자열	제작사명을 출력합니다.

다음 값들을 응답받을 수 있다. 나는 이중 movieNm nationAlt genreAlt prdtYear값을 받아 화면에 출력해보도록 하였다.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--css-->
  <link rel="stylesheet" href="./main.css">
  <!--js-->
  <script type="module" src="./searchMovieList.js" defer></script>
  <title>KOFIC-OPEN-API</title>
</head>
<body>

  <p class="api">searchMovieList</p>
  <div id="container">
  </div>
</body>
</html>

<div id="container">가 우리가 전달받은 데이터가 나타날 공간이다.

searchMovieList.js

let container = document.getElementById('container') // 요소를 담을 컨데이너 값 얻기

fetch(url)
  .then(response => response.json())
  .then(function (item) {
    for (let i = 0; i < 20; i++) {
      // div 생성 
      let div = document.createElement('div');
      div.id = 'movies'

      // api를 리스트에 담기
      let search_movie_list = item.movieListResult.movieList[i]

      // 요소 생성
      let movieNm = document.createElement('p');
      let nationAlt = document.createElement('p');
      let genreAlt = document.createElement('p');
      let prdtYear = document.createElement('p');

      movieNm.innerText = search_movie_list.movieNm // 영화명
      nationAlt.innerText = search_movie_list.nationAlt // 나라
      genreAlt.innerText = search_movie_list.genreAlt // 장르
      prdtYear.innerText = search_movie_list.prdtYear // 생성일

      // html에 요소 담기
      div.appendChild(movieNm);
      div.appendChild(nationAlt);
      div.appendChild(genreAlt);
      div.appendChild(prdtYear);
      container.appendChild(div);
    }

  });

index.html에서 생성한 div의 아이디값을 참고하여 변수에 담는다. 그 후 for문을 통해 전달받은 20개의 아이템 각각의 요소를 생성하고 값을 전달한 후 container에 값을 추가한다.

결과화면

다음과 같이 화면에 원하는 정보가 잘 출력되는 것을 확인할 수 있다.

2. 주간/주말 박스오피스 API

요청

기본 요청 URL는 http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.xml (또는 .json)이며 필수로 보내야 하는 요청 변수는 key와 targetDt이다.

따라서

let key = "?key="+process.env.key // 발급받은 키
let targetDt = "&targetDt=20220101" // targetDt
const url = "http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json"
  + key
  + targetDt

을 통해 api 주소를 요청받을 수 있다.

응답

요청 및 응답 인터페이스는 주간/주말 박스오피스 API 서비스
에서 확인할 수 있다. 나는 movieNm openDt rank을 활용하여 화면에 출력해보았다.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--css-->
  <link rel="stylesheet" href="./main.css">
  <!--js-->
  <script type="module" src="./searchWeekly.js" defer></script>
  <title>KOFIC-OPEN-API</title>
</head>
<body>

  <p class="api">searchWeeklyBoxOfficeList</p>
  <div id="container">
  </div>
</body>
</html>

searchWeekly.js

let container = document.getElementById('container') // 소를 담을 컨데이너 생성


fetch(url)
  .then(response => response.json())
  .then(function (item) { 
    for (let i = 0; i < 20; i++) {
      // div 생성 
      let div = document.createElement('div'); 
      div.id = 'movies'

      // api를 리스트에 담기
      let search_movie_list = item.boxOfficeResult.weeklyBoxOfficeList[i]

      // 요소 생성
      let movieNm = document.createElement('p')
      let openDt = document.createElement('p')
      let rank = document.createElement('p')

      movieNm.innerText = search_movie_list.movieNm // 영화이름
      openDt.innerText = search_movie_list.openDt // 개봉날짜
      rank.innerText = search_movie_list.rank // 순위


      // html에 요소 담기
      div.appendChild(movieNm);
      div.appendChild(openDt);
      div.appendChild(rank);
      container.appendChild(div);
    }

  });