Tip) 인스타그램 웹 json 데이터 파악하기

오늘은 2개의 웹서비스를 이용해서 인스타그램 웹의 json 데이터 구조를 파악해보도록 하겠습니다. 

인스타그램 content api가 기존에 public으로 존재했지만.. 개인정보보호 등의 문제로 현재는 파트너들에게만 한정적으로 공개하고 있습니다.

그래서 저희는 인스타그램 웹에서 사용하는 데이터를 이용해서 json 구조를 살펴볼 예정입니다 :)

소개시켜드릴 서비스는 JSONViewer와 quicktype입니다.

• JSONViewer

JSONViewer는 웹사이트 이름에서도 알수 있듯이 text형식의 json string을 viewer를 통해 json형식으로 보여주는 서비스입니다. Text영역에 json string을 넣으면 옆의 viewer를 통해 한눈에 json 형식을 파악할 수 있습니다.

• quicktype

 quicktype은 json string을 입력하면 자동으로! 코드를 생성해줍니다. json string 이외에도 typescript, json schema, post man data도 입력이 가능합니다. 그리고 오른쪽 박스를 보면 swift말고도 아래와 같은 언어들을 지원하고 있습니다.

서비스를 알아봤으니 이 두 웹사이트를 이용해서 인스타그램의 json data 구조를 알아보도록 하겠습니다.

우선 인스타그램 웹으로 가서 데이터가 될 만한 소스를 찾아내야겠죠... 인스타그램 검색에서 '#한강'으로 검색해보았습니다.

저는 사파리 웹속성을 이용했습니다. 상단 탭들 중 '요소'를 클릭해보면 window._sharedData 에 얻고자하는 데이터들이 모두 들어있습니다. 

이부분을 복사해서 위에서 알려드린 jsonViewer에 넣어봅시다. 굉장히 긴 json string을 확인하실 수 있습니다.. 

당황하시지 마시고 string 가장 앞에 있는 'window._sharedData = ' 이부분과 가장 뒤에 있는 세미콜론(;)을 삭제 후 viewer탭으로 가봅시다. 아래와 같이 복사해 온 json string을 손쉽게 볼 수 있습니다.

살펴보시면 데이터가 굉장히 많은데 우리가 알아야할 데이터는 사진url이기 때문에! 이부분만 찾아보면 됩니다. entry_data - TagPage - graphql - hashtag 안에 데이터를 보면 '한강', 'profile_pic_url', 'edge_hashtag_to_media' 등의 데이터를 볼 수 있습니다. 

'edge_hashtag_to_media'안에 edge라는 이름의 array형 데이터 안을 살펴보면 display_url 말고도 comment, edge_liked_by 등을 확인 할 수 있습니다.

json 구조를 알았으니 model을 만들어서 display_url데이터를 활용만 하면 됩니다! 하지만.. 저 복잡한 구조를 일일히 찾아서 만들기에는 너무나도 귀찮기 때문에 처음에 알려드린 quicktype으로 가서 jsonviewer에 입력한 json string을 copy&paste 해줍니다!

자동으로 코드가 생성됐습니다! 아직 위 코드가 맞는지 확인이 안됐지만... data에서 필요한 entryData만 뽑아서 활용해봐도 됩니다! 다음 시간에 위 데이터를 이용해서 html parser로 이미지가 잘 보이는지 확인해보록 하겠습니다. 

감사합니다 :)