마스크 알리미 사이트 크롬으로 분석하기 동작원리와 API 추출

마스크 알리미 사이트 크롬으로 분석하기 동작원리와 API 추출

 

 

마스크 알리미가 종일 화제입니다.

이 포스팅은 저의 궁금증으로 시작했습니다.

아래 포스팅을 보시면 마스크 알리미 서비스의 동작원리와

마스크 알리미 API를 이용해 누구나 데이터를 가져올 수 있습니다.

 

저와 같은 궁금증이 있으신 분들과 공부하시는 분들이 참고하시면 좋을 것 같습니다.

 

 

 

 

네이버 인기검색어에 올라오며 알게 되었는데, 멋쟁이사자처럼을 운영하시는 이두희님과 학생들이 만들었다고 하네요.

이 마스크 알리미는 전국에 있는 "편의점의 마스크재고"를 10분 이내의 싱크로 알려준다고 합니다.

그래서 궁금했습니다. 과연 어디서 편의점의 재고 데이터를 가져오는걸까요??

 

 

 

동작원리

우선 마스크 알리미 사이트에 접속해 봤습니다. 그러니 이런 공지가 뜨네요.

요기요를 통해 데이터를 제공받는 것 같습니다.

 

 

 

 

 

그렇다면 요기요에서 Open API로 데이터가 제공이 되었던가요? 한번 구글링 해보았습니다. (기사출처)

19년 7월 25일 기사입니다.

 

 

 

요기요에서는 업계 최초로 개발한 실시간 재고 연동이라는 기술을 가지고 있나 봅니다.

 

요기요 홈페이지와 공공데이터포털을 포함한 각 편의점 홈페이지를 돌아다녀보았지만 편의점 관련 API는 일반 사용자(써드파티 개발자)를 위해 제공이 되지는 않았습니다.

 

 

 

 

그러면 다시 본론으로 돌아와서 이 마스크 알리미를 개발하신 분들은 어떻게 요기요를 통해 편의점 재고의 데이터를 제공받았을까요?

 

마스크 알리미 홈페이지 공지에 "이두희 님의 데이터 기술 자문"이라는 말이 쓰여있습니다. 

다시 말하면 이두희님이 요기요에 컨텍해서 데이터를 제공받을 수 있게 한 것 같네요.

 

그래서 이 사이트의 구동 원리는

 

 

1. 요기요에서 데이터 요청 및 응답(API)
2. 지도에 시각화

 

 

간단하네요~

 

 

 

 

 

이렇게 데이터의 출처에 대해서 궁금증이 약간 해소되었습니다.

 

그렇다면 이 포스팅의 제목인 크롬에서 이 마스크 알리미에서 사용하는 API를 추출해서 우리들도 이런 데이터를 요청해서 받을 수 있게 해 볼까요?

 

API 추출

 

 1. 크롬에서 마스크 알리미 홈페이지 접속

 

 

2. 키보드에서 "F12" 누르고 오른쪽에서 "Network" 클릭

 

 

 

3. 목적지에 아무 목적어나 입력 후 검색 후(e.g. 강남역)

오른쪽의 Name에 있는 리스트 중에서 "mask?lat"로 시작하는 리스트 찾아서 클릭(빨간 박스처럼)

 

 

 

 

 

 

4. 위 오른쪽의 Requests URL에 있는 주소 복사 후 크롬 새창을 생성 후 주소창에 입력 후 엔터

(e.g. https://api.mask-nearby.com/mask?lat=37.4980854357918&lng=127.028000275071))

)

 

위의 사진처럼 데이터가 JSON형식으로 response 됩니다.

 

 

그래서 입력값으로 위도와 경도만 넣어주면 아래의 4가지 데이터를 응답받게 되는겁니다.

 

https://api.mask-nearby.com/mask?lat=위도값&lng=경도값

 

1. 위도 경도 주소
2. 재고정보
3. 요기요 id(요기요에서 API를 따로 만들어서 데이터를 가져오는 게 확실하네요)
4. 편의점 주소와 이름

 

 

이런 정보를 얻을 수 있습니다.

 

 

 

 

이를 활용해볼까요?

1. 구글지도에 홍대역을 검색해서 위도와 경도를 얻습니다.

 

2. 위 홍대역의 위도(37.55753128)와 경도(126.9222782)를 주소창안에 아래의 API에 넣어주고 엔터쳐줍니다.

https://api.mask-nearby.com/mask?lat=37.55753128&lng=126.9222782

 

 

 

 

 

 

위와 같이 이런 API를 통해서 나중에 웹사이트를 만들거나 모바일용, PC용 앱(어플리케이션)을 만들 때

저런 정보를 응답받아 파싱 해서 시각화만 해주면 하나의 웹이나 앱이 만들어지겠죠?

 

 

 

 

 

마치며,

개인적으로 이 데이터가 요기요와의 계약을 통해(구매를 통해) 제공받은 데이터인지가 궁금하더군요,

사회적 영향력을 위해 이런 데이터가 오픈 라이선스를 통해 Open API로 공개되어

누구나 다양하게 활용할 수 있었으면 더 좋았을 수 있겠다 생각되네요.