웹사이트 구축하고 검색엔진 상위 노출하기 2편
삼류 웹디의 웹마스터 코스프레
지난번에 이어 2번째 글 시작합니다. 이번에는 무료 호스팅을 받고 TMDB 오픈 API의 데이터를 내가 만든 웹페이지에 출력하는 방법을 서술합니다. 이제부터 보다 쉬운 설명을 위해 이미지가 많아질 테니 튜토리얼을 본다 생각하시고 한 번쯤 따라 해 보세요. 어려운 용어 사용을 최대한 자제했으니 읽는데 그나마 수월하길 바랍니다. 학원과 학교에서 HTML/CSS/JS를 배웠다면 할 수 있으며 개발을 잘 몰라도 시도해볼 수 있습니다. 하루 3~4시간, 길게 잡아 한 달 정도면 해당 스킬을 습득할 수 있습니다. 저는 2주 정도 투자해 구축을 완료했고, 이후 한 달 정도 모니터링만 하고 방치했습니다. 누구나 할 수 있습니다.
무료 웹호스팅 받기 - 닷홈(https://www.dothome.co.kr/web/free/index.php)
닷홈의 영업사원이 아닙니다. 초심자가 스터디 목적으로 쓰기엔 가장 무난합니다학원을 수료하셨다면 닷홈 계정을 갖고 계실 가능성이 있다 봅니다. 국내 무료 호스팅 중 가장 무난한 서비스를 제공하며, 도메인(약 15,000원)을 구매하면 1년 동안 1기가 용량의 트래픽 무제한 호스팅을 이용할 수 있습니다. 가입하고 무료 호스팅을 신청합니다. 도메인은 아직 구매하지 마세요. 단순 공부가 목적이라면 필요 없습니다.
이후 마이페이지(마이 닷홈)로 들어가 FTP정보를 확인하고 드림위버, VSCode, 웹 스톰 등의 IDE툴에 FTP를 연결해둡니다. 파일 질라 같은걸 쓰셔도 됩니다. FTP 설정이 처음이라면 사용 가능한 툴을 설치하시고 해당 툴의 FTP 설정 방법을 검색해보세요. 어도비 CC를 결제해서 쓰고 있다면 드림위버를 쓰셔도 됩니다. 자, 이제 호스팅은 받아 두었으니 TMDB의 영화 오픈 API를 만지러 가봅니다.
TMDB 오픈 API 시작하기
TMDB 사이트에 가입하기 - 가입할 당시 수지가 좋았나 봅니다오픈 API를 이용하기 위해선 TMDB사이트에 회원 가입을 하고 인증키를 발급받아야 합니다. 가입하고 프로필 > 설정 페이지로 진입합니다. 무료이며 한글을 지원하고 있어 어렵지 않습니다.
좌측에 API 메뉴를 누르면 발급된 키와 토큰을 확인할 수 있습니다오픈 API 사용을 위해 꼭 필요한 API 키입니다. 내용상 액세스 토큰은 딱히 필요 없고 한 줄짜리 V3 auth용 키만 알아두시면 될 듯합니다. 외우지 않아도 되며 필요할 때 언제든 접속해서 확인할 수 있습니다. 키값을 생성했으니 실제 데이터를 받아봅니다. API 키 아래 'API 요청 예'에 적힌 URL에 접속해 봅니다.
API 요청 예 - 뭔가 복잡해 보이는 코드 뭉치가 보입니다뭔가 CSS처럼 보이는 코드들이 나타납니다. 복잡하고 어려워 보일 수 있으나 그냥 랩 가사라 생각하고 찬찬히 살펴봅니다. 장르(genres)라는 단어가 보이고, 원제목(original_title), 포스터 이미지 경로(poster_path)등이 눈에 들어옵니다. 네. 데이터상 550번에 해당하는 영화 '파이트 클럽'에 대한 데이터입니다. 대개의 경우, 오픈 API로 받을 수 있는 영화 데이터는 이처럼 각각의 번호가 할당되어있고 우리는 만개의 영화 데이터를 사용할 수 있습니다. 이걸 가공해서 웹페이지를 만들 수 있으며, 익숙해지면 단순 웹퍼블리셔가 아닌 프런트엔드 개발자의 삶을 시작해 볼 수도 있습니다. 만약 디자이너라면 프런트엔드 디자이너가 되는... 아무튼 출력이 잘 되는 걸 확인했으니 이걸 우리가 만들 '웹페이지'에 출력해봅니다.
PHP Curl을 이용해 API데이터 출력하기
PHP를 한 번도 다뤄보지 않아도 상관없습니다. 물론 처음이라 어려울 수 있지만 간단한 예제를 다뤄보며 익히는 것도 좋은 방법입니다. 기초부터 탄탄하게 공부하다 질리는 것보다 때론 뭔가 목적을 두고 부분적으로 공부하는 게 낫습니다. 한 번도 본적 없는 외국어 4~5줄의 문장 구조를 암기한다는 생각으로 덤벼보세요. 딱 그 정도입니다.
먼저 호스팅 받은 FTP에 접속해 새로운 PHP페이지를 만듭니다. 저는 index.php이라고 만들었습니다. 닷홈이 처음이라면 꼭 html폴더 안에 만들어주세요. 그다음 아래 링크의 코드를 통째로 복사해 붙여 넣습니다. 브런치에는 코드 삽입 기능이 없어 좀 불편하네요.
이제 해당 페이지 코드 중 위에서 발급받은 API키를 입력하고 저장합니다. 키를 입력할 공간에 따로 주석 달아놨으니 어렵지 않게 찾을 수 있습니다.
중요하니까 궁서체로 가버렷!저장하고 서버에 업로드한 뒤 해당 페이지 URL로 접속해보면 아까 API 예제를 테스트할 때처럼 뭔가 코드가 많이 나오는 화면을 만날 수 있습니다. TMDB에서 예제로 제공했던 URL이 영화 하나의 정보를 담고 있는 거라면 제가 작성한 코드는 '리스트'제작을 위해 여러 개의 영화 정보를 한꺼번에 불러오는 거라 보시면 됩니다. 이걸로 리스트가 담긴 메인 페이지를 만들 겁니다.
리스트를 만들기 위해 더 많은 데이터를 받아봅니다. 코드상 언어 설정으로 한국어도 지원합니다코드상 language라고 적혀있는 파라미터를 바꾸면 다양한 언어로 데이터를 받아볼 수 있습니다. 한글이 보이니 아까보다 읽기 쉬워졌을 겁니다. 헉헉! 쉬었다 갈까요? 다음 글은 이 데이터를 가공해서 HTML 코드 안에 정리하는 걸 알아보겠습니다. 감사합니다.
관련 참고사이트
TMDB API 개발자 문서 : https://developers.themoviedb.org/3/getting-started/introduction
드림위버 FTP 연결하기
https://helpx.adobe.com/kr/dreamweaver/using/connect-remote-server.html
