API를 볼 줄 아는 주니어 기획자가 되고 싶으신가요?
이론이 아닌 진짜 API 맛보기
본 글은 API 개념을 인지한 상태에서 원하는 사이트의 API를 확인하고, 조회되는 데이터 구조를 파악할 수 있는 방법에 대해서 소개한 글입니다. 개발자의 관점이 아닌 기획자 또는 PM의 시선에서 원하는 데이터를 확인할 수 있는 수준에서 간략하게 가이드한 글인 점을 참고해 주세요.
API를 확인해 보는 방법
1) 원하는 사이트를 접속한다.
2) 원하는 특정 페이지에서 개발자도구를 켠다. (단축키: F12/ 마우스 우클릭 > 검사)
3) 원하는 목록 (Name)을 선택하고 응답 정보를 확인한다.
네이버 스포츠 오픈톡 목록을 보면 크게 5개 영역으로 구분할 수 있습니다.
배너 콘텐츠 / 참여 중인 오픈톡 목록 / 추천 콘텐츠 / 종목별 오픈톡 목록 / 공지사항
오늘은 이 중에서 비교적 제일 간단한 배너 콘텐츠 API를 확인하는 방법에 대해서 소개해보겠습니다.
네이버 스포츠 오픈톡 목록배너 콘텐츠 API Headers
앞서 설명드린 방식으로 개발자 도구를 켜서 SPORTS라는 이름을 가진 API를 클릭 후 Headers에 Request URL을 확인해 보면, 해당 API가 배너 광고 콘텐츠를 조회하는 API임을 짐작할 수 있습니다.
(path 부분에 adContents를 확인하시면 됩니다.)
Request Method 정보는 요청하는 메서드 방식을 의미하며, 쉽게 말해서 내가 보고 있는 API가 조회를 위한 API인지, 삭제를 위한 API인지 CRUD를 구분할 수 있는 방식이라고 생각하면 됩니다.
1) GET : 조회 (Read)
2) POST : 생성 등록 (Create)
3) PUT : 대체 (덮어씀)
4) PATCH : 수정 (Update)
5) DELETE : 삭제 (Delete)
*PUT과 PATCH는 전체를 덮어쓰고 수정할 것인지, 부분적으로 수정할 것인지의 차이가 있다는 정도면 인지하고 있으면 될 것 같습니다.
따라서 SPORTS라는 이름을 가진 아래 API는 Request Method "GET" 조회 API임을 확인할 수 있습니다.
배너 콘텐츠 API > Headers > General 이제 Preview 탭에서 실제로 API 통신을 통해 조회된 상세 데이터를 확인해 보겠습니다.
▼result 값을 모두 펼쳐서 보면 어떤 구조로 데이터가 조회되는 것인지 구조를 파악할 수 있는데요. adAccounts 하위에 45, 46 두 가지의 데이터가 조회되고 있고, 실제로 오픈톡 목록 화면에서 최상단에 노출되고 있는 배너 콘텐츠가 2개임을 확인할 수 있습니다.
배너 콘텐츠의 상세 내용을 확인해 보면 더 자세한 데이터 칼럼이 보입니다.
▼contents 하위에 아래와 같은 데이터들이 함께 조회되고 있는데요. 하나씩 살펴보겠습니다.
배너 콘텐츠 API > PreviewbgColor ; 배너 콘텐츠 배경색 / img ; 배너 이미지
개발자 도구로 보면 오픈톡 목록에 노출되는 배너 콘텐츠는 배너 이미지와 배경색의 조합으로 이루어져 있습니다. 제작한 배너 이미지의 배경색과 맞는 색으로 배너 배너 좌우 여백 색상을 맞춘 것으로 보입니다.
배너 콘텐츠 Elementstitle ; 배너 제목
실제로 페이지에 노출되는 제목 텍스트는 아니지만, 조회 시 구분이 될 수 있는 배너 제목을 의미합니다. 해당 이미지가 정상적으로 랜더링 되지 못할 때 대체되어 노출할 수 있는 문자열 값으로 보시면 될 것 같습니다.
url ; 클릭 시 연결될 링크
해당 배너 콘텐츠를 클릭하면 연결될 링크 값입니다. 실제 오픈톡 목록에서 배너를 선택해 보면 조회된 url 데이터를 가진 페이지로 이동하는 것을 확인할 수 있습니다.
마치며
기획자가 API까지 볼 필요 물론 없습니다만, API를 볼 줄 아는 기획자라면 개발자와 정확한 소통이 가능합니다. 데이터의 흐름을 아는 기획자는 개발자에게 보다 적절한 요청을 할 수도 있게 되는 것이지요. 버그를 발견했을 때 오류가 발생하는 API Request Header와 Payload를 Copy 해서 보낼 줄 아는 주니어 기획자가 되어봅시다!
