brunch

You can make anything
by writing

C.S.Lewis

by 맥가 Jul 13. 2020

웹사이트 구축하고 검색엔진 상위 노출하기 3편

삼류 웹디의 웹마스터 코스프레

3번째 시작합니다. 요 며칠 마음처럼 되지 않는 답답한 실무 환경에 '그냥 속 편하게 시키는 것만 하면서 살까?' 하며 짜증이 났다가 남들처럼 고여가는 게 싫어 정신을 차려봅니다. 고여서 썩어가는 실무자가 되는 게 싫습니다. 경력자 그리고 리더라면 시키지 않은 일, 다른 포지션에서 놓쳐서 전달되지 못한 업무 또한 파악해야 합니다. 그게 통찰력이니까요. 잡설이 길었네요. 아무튼 3번째 글 시작합니다.


지난 글에서 API데이터를 PHP Curl을 이용해 웹페이지에 출력하는 부분까지 진행했습니다. 비록 짧은 PHP 코드이긴 하나 호스팅을 받고 FTP 연결하고 파일을 생성/수정/업로드 등의 작업이 익숙지 않다면 어려울 수 있습니다. 처음엔 누구나 그러하고, 조금만 반복해보면 금방 익숙해집니다. 알고 나면 더 나은 웹 디자이너가 될 수 있습니다. 자, 그럼 API데이터중 필요한 것만 골라와 html 코드 안에 넣어봅니다.


크롬의 개발자 모드(F12)로 보다 정리된 코드를 확인할 수 있다


API데이터를 입맛에 맞게 수정하려면 먼저 구조를 파악해야 합니다. 지난 글에 출력했던 데이터들이 줄 바꿈도 없이 나열된 형태라 구조를 파악하기 쉽지 않아 이를 정렬된 형태로 봐야 합니다. 인터넷에 검색해보면 JSON 데이터를 이쁘게 정렬해 주는 웹서비스나 방법들이 많은데요. 번거롭다면 그냥 크롬 개발자 모드(단축 키 F12)를 켜서 코드를 확인하면 됩니다. 스크린샷 우측을 보면 데이터가 정돈된 형태로 출력되는 걸 확인할 수 있습니다. 그럼 구조를 살펴볼까요? 이해를 돕기 위해 몇 개의 이미지를 준비했습니다.


TMDB API 데이터가 담긴 큰 상자

여기 TMDB API데이터가 담긴 상자 하나가 있습니다. 서버 쪽에 요청해서 배달받은 상자죠. 한번 열어볼까요?


상자를 열어보니 보이는 작은 상자들

안에 상자들이 또 있네요. 각 영화의 정보들인 담긴 상자인가 봅니다. '영화 0번'상자를 열어봅니다.


0번 영화의 상자를 열어봤습니다

실제 출력되었던 코드와 비교해서 볼까요? [results]라는 큰 상자를 열었고 다시 한번 [0] 번 영화에 해당하는 상자를 열었습니다. 지금 이미지는 [0] 번 상자 안에 들어있는 다양한 작은 상자들을 보여주고 있죠. 우리는 필요할 때 이 각각의 상자를 열어 사용자에게 보여줄 수 있습니다. 필요한 것만 보여주는 게 가능하죠. 구조가 어느 정도 파악되었으니, PHP라는 녀석에서 영화 제목만 골라서 보여달라고 부탁해보겠습니다. 녀석이 알아들을 수 있는 말로 해야 합니다. 안타깝게도 PHP라는 놈은 한국어를 모릅니다.


PHP가 알아들을 수 있는 말로 부탁해 봅니다

어순이 영어와 가깝... 네. 문법은 이러하며 CSS에서 클래스를 잡아나가는 과정과 비슷하게 보일 수 있습니다. 이 한 줄의 문법을 이해하면 다양하게 응용이 가능해져서 기본적인 API데이터의 가공이 가능해집니다. 생각보다 어렵지 않다고 느껴지기를 간절히 소망해봅니다.


<?php echo $result['results'][0]['title'] ?>


그럼 위 코드를 지난번에 작성하던 페이지의 body안에 넣고 업로드 후 실제 출력되는 걸 살펴볼까요? 먼저 API데이터를 몽땅 출력해주는 코드, print_r( $result );라고 적인 부분을 찾아 주석처리를 해줍니다. 방금 추가한 코드를 통해 제목이 출력되는 것만 확인해볼 거니까요. PHP의 주석은 코드 맨 앞 '//'를 넣어주면 됩니다.


오옷! 0번 영화의 제목이 등장했드아! (집중선은 출력되지 않...)

제목만 나옵니다! 거 봐요. 쉽다고 했잖아요. 그럼 0번 영화에 대한 포스터 이미지와 다른 요소도 가져와 볼까요? 카드를 꾸밀 요소들을 말이죠.


<div>
<ul>
<li><img src="https://image.tmdb.org/t/p/w185/<?php echo $result['results'][0]['poster_path'] ?>" alt="썸네일"></li>
<li><?php echo $result['results'][0]['title'] ?></li>
<li><?php echo $result['results'][0]['release_date'] ?></li>
</ul>
</div>


위 코드를 똑같이 작성해줍니다. 이미지와 관련한 API데이터는 상대적인 경로만 포함하고 있어 tmdb공식 사이트의 이미지 경로를 참고해서 추가해줬습니다. 이제 업로드 후 페이지를 새로고침 하면.


포스터 썸네일과 개봉일이 추가된 페이지 결과

아주 잘 나옵니다. 지금은 한 개만 나오고 있으니 php의 반복문을 사용해서 20개를 출력해봅니다.


html 코드를 위와 같이 수정해줍니다.

반복문을 추가해 이를 적용해주면 아래와 같이 전체 리스트가 출력됩니다. 그냥 반복하면 아래처럼 나오지 않으니 html/css를 다듬어서 보기 좋게 만들어주세요.


API데이터를 활용해 리스트 작업이 완료되었습니다.

드디어 리스트 1차 작업이 완료되었습니다. 이제 개인 취향대로 사이트의 헤더와 푸터 등, 기본 요소들을 만들어서 추가해주세요. 이제 검색엔진 최적화(SEO)를 위해 조금 더 다듬어보겠습니다. 기본적인 SEO를 위해 '타이틀', '설명'등의 메타 요소를 추가해주고 구조화된 데이터 작업을 진행합니다. 메타 '키워드'는 넣지 않아도 됩니다. 키워드는 더 이상 검색 최적화 필수 요소가 아니니까요. 아무튼 구조화된 데이터 작업을 완료하게 되면...


구조화된 데이터 작업을 적용한 검색 결과

모바일 기기에서 특정 키워드를 검색해 우리의 사이트가 노출될 때 위 이미지처럼 '캐로셀'형태로 출력됩니다. 사용자의 시선을 사로잡을 수 있고, 검색엔진의 봇에게 명확한 데이터를 전달해줌으로써 보다 좋은 SEO가 이뤄집니다. 구조화된 데이터 작업의 자세한 내용은 다음에 영화 상세 페이지를 작업할 때 좀 더 자세하게 다뤄보겠습니다. 내용이 좀 길거든요. 자 그럼 우리가 만든 페이지의 SEO가 잘 이뤄졌는지 확인해볼까요?


크롬의 개발자 모드(F12)를 눌러 라이트하우스를 실행합니다.

먼저 크롬 브라우저의 개발자 모드(F12)를 누르고 패널 상단 '>>'을 눌러 Lighthouse(라이트하우스)를 실행합니다. SEO를 검증하는 도구에는 여러 가지가 있지만 구글의 정책을 가장 빠르고 직접적으로 반영하는 크롬의 '라이트하우스'를 활용하는 게 바람직합니다.


활성화된 라이트하우스의 화면

딱히 옵션을 건드리지 않아도 됩니다. 테스트하고자 하는 기기(Device) 정도만 선택해주고 좌측 등대 그림 밑 버튼인 'Generate report'를 눌러주면 됩니다. 눌러봅니다.


제작한 웹페이지의 상태가 점수로 출력된다

다양한 항목에서 좋은 점수가 나오네요. 86점에 해당하는 'Best Practices'부분은 http라서 90점에 못 미치고 있습니다. 차후 인증서를 발급받아 https로 테스트하면 90점이 넘게 됩니다. 우리가 하고자 했던 SEO는 100점을 달성했습니다. 또 쉬었다가 할까요? 다음 편인 상세페이지 제작 글에서 뵐게요. 감사합니다.


해당 PHP파일 첨부합니다. 발급받으신 API키만 적어서 서버에 업로드하시면 잘 동작할겁니다. 궁금하신 부분이 있다면 댓글로 남겨주세요!


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari