KMDB&KOBIS API를 활용하여 영화 포스터 가져오기 & 박스오피스 순위 만들기

이클립스 2022.12 버전을 사용했습니다.

아래의 코드 호출방법은 정답이 아니며 비효율적일 수 있습니다.

1. API 발급받기

 

먼저 박스오피스 순위를 받아오기 위해 KOBIS API를 발급합니다.

영화진흥위원회 오픈API

해당 페이지에 접속하셔서 로그인 후 키 발급 탭에서 인증키를 발급하시면 됩니다.

 

다음으로 포스터를 활용하기 위해 KMDB에서 API 인증키를 발급합니다.

KMDb - 한국영화데이터베이스

해당 링크로 들어가셔도 되고, 메인 홈페이지에서 옆의 메뉴를 통해

고객서비스 -> 오픈API안내 -> OPEN API - > 영화상세정보로 들어가셔도 됩니다.

들어가셔서 로그인 하시고 활용 방법과 목적 등을 적고 발급 신청을 하면 1~2일 사이에 발급됩니다.

확인은 마이페이지의 OpenAPI내역을 통해 확인 가능합니다.

 

2. 이제 만들어봅시다.

https://www.youtube.com/watch?v=QPEUU89AOg8

만약 아래 내용이 조금 헷갈린다면 (조코딩)님의 카카오톡 API 사용 강의 예제를 시청하고 오시는 것을 추천드립니다.

 

이클립스를 실행합니다.

그리고 새 웹 프로젝트를 만든 뒤, JSP 혹은 HTML 파일을 생성해줍니다. 어떤 파일이든 상관 없습니다.

 

가장 먼저 head 부분에 jquery를 사용하기 위하여 스크립트 부분을 추가시켜줍니다.

<script
  src="https://code.jquery.com/jquery-3.6.4.js"
  integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
  crossorigin="anonymous"
>
// 제이쿼리 사용 가능
</script>

 

이후 body 태그로 이동하여 박스오피스 포스터와 내용을 출력할 div 부분을 선언합니다.

  <div id="ranking">
            <div id = "dynamicDiv"></div>
  </div>

 

다음은 div안에 입력시킬 스크립트를 구현합니다.

<script>
  var moviecount = 10;
  // 순위 개수 출력하기 최대 10까지 가능

  var dateword;

  var today = new Date();
  var yesterday = new Date();
  yesterday.setDate(today.getDate() - 1);
  // 하루 전 날짜 출력

  var year = yesterday.getFullYear().toString(); // 현재 연도
  var month = (yesterday.getMonth() + 1).toString(); // 현재 월
  var date = yesterday.getDate().toString(); // 현재 일
  //string 값에 맞게 전부 변경

  if ((date.length == 1)) date = '0' + date;
  if ((month.length == 1)) month = '0' + month;
  dateword = year.toString() + month.toString() + date.toString();
  //YYYYMMDD 형식이기 때문에 월, 일이 한자릿수인 경우 앞에 0을 붙여준다.

  // 사용 용이하게 tempRow를 div 요소로 생성
  var tempRow = document.createElement("div");

  // tempRow에 오늘 날짜값을 넣어 맨 위에 출력하도록 한다.
  tempRow.innerHTML += '<div><br> ' + year + '-' + month + '-' + date + 
  '일 기준 박스오피스 순위<br><br></div>';
  dynamicDiv.appendChild(tempRow);

  $.ajax({
    url:
      'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/' +
      'searchDailyBoxOfficeList.json?key=내 인증 키 API' +
      dateword,
    success: function (result) {
      var movieList = result.boxOfficeResult.dailyBoxOfficeList;
      //전날 박스오피스 값 가져오기

      for (var i = 0; i < moviecount; i++) {
        // KMDB 호출 시작
        var movieopenday = movieList[i].openDt.replaceAll('-', '');
        // YYYY-MM-DD의 형태를 YYYYMMDD로 치환시킨다.

        $.ajax({
          url:
            'http://api.koreafilm.or.kr/openapi-data2/wisenut/search_api/search_json2.jsp?' +
            'collection=kmdb_new2&ServiceKey=내 API 인증 키' +
            '&sort=prodYear,1&releaseDts=' +
            movieopenday +
            '&detail=Y&query=' +
            movieList[i].movieNm,
          async: false, // 동기식으로 만들어줌으로써 코드를 순서대로 출력할 수 있게 만듭니다.
          // 사실 다음 요청이 있기 전까지 일시적으로 출력을 멈춤으로써 동기적 형식처럼 보이게 할 수 있습니다.
        }).done(function (msg) {
          jsonData = JSON.parse(msg); // 정렬되지 않은 문자열을 JSON 형식으로 파싱하여 JavaScript 객체로 변환합니다.

          var tempString = jsonData.Data[0].Result[0].posters;
          var posterurl = tempString.split('|');

          //여기에 포스터가 없을 경우 예외처리 추가하기

          $('#dynamicDiv').append("<div><img src='" + posterurl[0] + "'/></div><br>");
        });
        //종료

        $('#dynamicDiv').append(
          '<div>' + (i + 1) + '위</div><br><div>' + movieList[i].movieNm + '</div><br>'
        );
        $('#dynamicDiv').append('<div>' + '누적 관객수 : ' + movieList[i].audiAcc + ' 명 </div><br>');
      }
    },
    error: function () {
      alert('error');
    },
  });
</script>

 

끝입니다!

이상으로 모든 포스팅을 마치지는 않고,

 

주석과 함께 하나씩 뜯어 보겠습니다.

var moviecount = 10;
// 순위 개수 출력하기 최대 10까지 가능

 

moviecount를 통해 출력할 영화 개수를 받아옵니다. 기본은 10입니다.

 

var dateword;

var today = new Date();
var yesterday = new Date();
yesterday.setDate(today.getDate() - 1);
// 하루 전 날짜 출력

 

아래에 따로 쓰일 dateword 객체를 구현합니다.

그 다음 kobis의 박스오피스의 집계는 가장 최신 박스오피스는 하루 전이기 때문에 today와 yesterday를 이용해서 날짜 데이터 객체를 만든 뒤, today에  getDate()를 사용해 하루를 뺴주고, 이것을 yesterday의 객체에 입력시켜 어제 날짜를 구합니다.

 

var year = yesterday.getFullYear().toString(); // 현재 연도
var month = (yesterday.getMonth() + 1).toString(); // 현재 월
var date = yesterday.getDate().toString(); // 현재 일
//string 값에 맞게 전부 변경

 

구한 어제 날짜 값의 년, 월, 일 값을 추출한 뒤 String 타입으로 변경시킵니다.

 

if ((date.length == 1)) date = '0' + date;
if ((month.length == 1)) month = '0' + month;
dateword = year.toString() + month.toString() + date.toString();
//YYYYMMDD 형식이기 때문에 월, 일이 한자릿수인 경우 앞에 0을 붙여준다.

 

앞서 출력한 값들 중, 월, 일이 한자리 수일 경우, API 호출 시 오류가 발생할 수 있기 때문에 해당 값들에 0을 붙여 정리해줍니다. 이후 앞서 선언한 dateword 값에 모두 합쳐줍니다.

 

// 사용 용이하게 tempRow를 div 요소로 생성
var tempRow = document.createElement("div");

// tempRow에 오늘 날짜값을 넣어 맨 위에 출력하도록 한다.
tempRow.innerHTML += '<div><br> ' + year + '-' + month + '-' + date + 
'일 기준 박스오피스 순위<br><br></div>';
dynamicDiv.appendChild(tempRow);

 

이제 dynamicDiv밑에 출력될 div 객체를 tempRow 변수에 미리 저장합니다. 그 뒤 제목을 만들기 위해 innerHTML을 사용하여 tempRow의 값을 변환시키고,  appendChild를 이용하여 dynamicDiv 위에 붙여줍니다.

 

$.ajax({
url:
  'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/' +
  'searchDailyBoxOfficeList.json?key=내 인증 키 API' +
  dateword,
success: function (result) {
  var movieList = result.boxOfficeResult.dailyBoxOfficeList;
  //전날 박스오피스 값 가져오기

 

jquery의 ajax를 이용하여 API를 호출합니다. kobis에서 해당 링크에 내 인증키 API와 원하는 날짜(dateword)의 값을 입력시켜 데이터를 보내면. 성공했을 경우 result에 응답한 값이 담기는데, 여기서 박스오피스 정보만 추출합니다. 이렇게 영화 제목과 순위, 그리고 관객 수를 가져올 수 있습니다.

 

요청, 응답 데이터에 관한 자세한 내용은 여기서 확인하실 수 있습니다.

영화진흥위원회 오픈API

 

  for (var i = 0; i < moviecount; i++) {
    // KMDB 호출 시작
    var movieopenday = movieList[i].openDt.replaceAll('-', '');
    // YYYY-MM-DD의 형태를 YYYYMMDD로 치환시킨다.

 

이제 받아온 영화 정보로 영화 포스터 값을 가져와보겠습니다.  10개의 포스터를 전부 가져오기 위해 for문을 사용합니다. 그러면서 각 박스오피스 정보에서 날짜 값을 요청 데이터에 맞게 형식을 바꿔줍니다.

 

$.ajax({
          url:
            'http://api.koreafilm.or.kr/openapi-data2/wisenut/search_api/search_json2.jsp?' +
            'collection=kmdb_new2&ServiceKey=내 API 인증 키' +
            '&sort=prodYear,1&releaseDts=' +
            movieopenday +
            '&detail=Y&query=' +
            movieList[i].movieNm,
          async: false, // 동기식으로 만들어줌으로써 코드를 순서대로 출력할 수 있게 만듭니다.
          // 사실 다음 요청이 있기 전까지 일시적으로 출력을 멈춤으로써 동기적 형식처럼 보이게 할 수 있습니다.
        }).done(function (msg) {
          jsonData = JSON.parse(msg); // 정렬되지 않은 문자열을 JSON 형식으로 파싱하여 JavaScript 객체로 변환합니다.

 

이후 KMDB를 호출하기 위해 한번 더 ajax를 사용합니다.

앞선 것과 같이 내 API키를 입력해주고, 동명의 영화가 많을 경우를 대비하여 영화 개봉일까지 추가시켜서 데이터 값을 불러옵니다.

 

마찬가지로 데이터 요청, 응답 값은 여기서 확인이 가능합니다.

KMDb - 한국영화데이터베이스

 

여기서 async: false를 해주는 이유는 포스터와 글을 순서대로 배열하기 위함입니다. 만약 그렇지 않을 경우 포스터를 불러오는 속도가 느리기 때문에,  글자는 전부 위에 출력되고 포스터만 밑에 붙어서 나오는 기현상이 발생합니다.

이런 형식으로 출력되어버립니다.

 

마찬가지로 응답이 성공적으로 이루어지면 msg에 해당 값이 저장되는데, 여기서는 JSON형식의 데이터를 아예 문자열로 받아오기 때문에 이를 JSON형식으로 파싱하여 JavaScript 객체로 변환합니다.

 

          var tempString = jsonData.Data[0].Result[0].posters;
          var posterurl = tempString.split('|');

          //여기에 포스터가 없을 경우 예외처리 추가하기

          $('#dynamicDiv').append("<div><img src='" + posterurl[0] + "'/></div><br>");
        });

        $('#dynamicDiv').append(
          '<div>' + (i + 1) + '위</div><br><div>' + movieList[i].movieNm + '</div><br>'
        );
        $('#dynamicDiv').append('<div>' + '누적 관객수 : ' + movieList[i].audiAcc + ' 명 </div><br>');
      }
    },
    error: function () {
      alert('error');
    },
  });

 

받은 정보 값에서 포스터 부분만 따로 때와서, 모든 포스터 url을 분리해서 저장합니다. 이제 dyanmicDiv에 html명령어와 jquery를 활용해서 박스오피스 순서대로 포스터, 영화 제목명, 관객수를 추가해주시고, 앞서 선언했던 jquery 코드 마무리를 지어주시면 됩니다. 

완성 페이지

 

이렇게 해서 완성된 페이지는 위와 같습니다.

 

아래는 전체 코드 내용입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html lang="ko">
  <head>
    <title>박스오피스 정보</title>    
    <script
      src="https://code.jquery.com/jquery-3.6.4.js"
      integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
      crossorigin="anonymous"
    >
    </script>
    </head>
          <div id="ranking">
                    <div id = "dynamicDiv"></div>
          </div>
            <script>
              var moviecount = 10;

              var dateword;

              var today = new Date();
              var yesterday = new Date();
              yesterday.setDate(today.getDate() - 1);

              var year = yesterday.getFullYear().toString();
              var month = (yesterday.getMonth() + 1).toString();
              var date = yesterday.getDate().toString();

              if ((date.length == 1)) date = '0' + date;
              if ((month.length == 1)) month = '0' + month;
              dateword = year.toString() + month.toString() + date.toString();

              var my_div = document.getElementById('dynamicDiv');

              var tempRow = document.createElement("div");

              tempRow.innerHTML += '<div><br> ' + year + '-' + month + '-' + date + '일 기준 박스오피스 순위<br><br></div>';
              dynamicDiv.appendChild(tempRow);

              $.ajax({
                url:
                  'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=내 API' +
                  dateword,
                success: function (result) {
                  var movieList = result.boxOfficeResult.dailyBoxOfficeList;

                  for (var i = 0; i < moviecount; i++) {
                    var movieopenday = movieList[i].openDt.replaceAll('-', '');

                    $.ajax({
                      url:
                        'http://api.koreafilm.or.kr/openapi-data2/wisenut/search_api/search_json2.jsp?collection=kmdb_new2&ServiceKey=내 API' +
                        '&sort=prodYear,1&releaseDts=' +
                        movieopenday +
                        '&detail=Y&query=' +
                        movieList[i].movieNm,
                      async: false,
                    }).done(function (msg) {
                      jsonData = JSON.parse(msg);

                      var tempString = jsonData.Data[0].Result[0].posters;
                      var posterurl = tempString.split('|');

                      //여기에 포스터가 없을 경우 예외처리 추가하기

                      $('#dynamicDiv').append("<div><img src='" + posterurl[0] + "'/></div><br>");
                    });

                    $('#dynamicDiv').append(
                      '<div>' + (i + 1) + '위</div><br><div>' + movieList[i].movieNm + '</div><br>'
                    );
                    $('#dynamicDiv').append('<div>' + '누적 관객수 : ' + movieList[i].audiAcc + ' 명 </div><br>');
                  }
                },
                error: function () {
                  alert('error');
                },
              });
            </script>
</html>