brunch

매거진 데이터 101

You can make anything
by writing

C.S.Lewis

by 져니박 Apr 06. 2023

똑똑하게 데이터 2탄 : API

겉모습에 속지 말고, Request와 Response  데이터 살펴봐야


가는 말이 정확해야 오는 말이 곱다,
API라는 약속


오픈 API란 말을 들어본 적이 있으신가요? 물론 프로덕트를 기획하고, 개발하고, 디자인하고, QA 하는 분들이라면 하루가 멀다 하고 듣는 것이 API일 것입니다. API는 두 개의 시스템이 서로 통신하기 위한 약속입니다. 네*버 초록창에서 어떤 단어를 검색을 요청했을 때(Request), 그 단어가 포함된 검색 결과를 뿌려주는 것으로 응답하는 것도(Response), SNS에서 게시글을 삭제 버튼을 누름으로써 삭제 요청하여 (Request), 그 콘텐츠를 피드에서 안 보이게 하는 응답(Reponse)을 하는 것도 API 덕분입니다. 그 요청 방식이 명확히 정해지면, 삼성 갤럭시 폰에서도, 아이폰에서도, 또 철수라는 유저도, 영희라는 유저도 다 원하는 것을 얻을 수 있게 됩니다. 



클릭 2번 만에 비개발자도
진짜 데이터를 볼 수 있는 방법 


흔히 겉만 보고 속을 판단하지 마라고 합니다. 서비스도 그렇습니다. 즉 화면에 보이는 데이터가 전부가 아닐 때가 꽤 많습니다. 예컨대 '데이터 수정하려고 했는데 처리가 되지 않습니다'라는 요청이 접수되면 문제를 2단계로 쪼개야 합니다. 사용자가 어떤 데이터를 어떻게 수정하려고 요청했는지, 서비스(시스템)는 이에 대해 어떻게 판단하고 결과를 보여줬는지 확인해야 하기 때문입니다.


여기에서 API에 대한 이해가 있으면, 각각의 요청과 응답이 약속대로 잘 수행되었는지 검증을 할 수 있습니다. 어떤 요청이 있었나? 이에 대한 어떤 응답이 있었나? 보면 되는 것입니다. 

문제는 요청, 즉 Request 된 내용과 데이터는 명확합니다. 사용자가 어떤 기기에서 무엇을 어떻게 입력했는지는 서비스에 남아 있는 기록(로그 데이터)이나 장애 요청과 함께 접수된 캡처 화면을 보면 확인 가능합니다. 그래서 검증하기도 쉽습니다.

문제는 Request에 따른 Response, 즉 응답값에 대한 검증입니다. 사용자가 입력한 것이 정상적으로 처리가 되지 않아서 경고 팝업이 뜨는 상황입니다. 수정이 정상적으로 안 되어서 새로고침했더니, 데이터를 입력하기 이전 상태가 화면에 떠 있습니다. 사용자가 수정을 요청한 것이 실패했기 때문에 무엇인지 화면에서는 당연히 확인이 불가한 상황입니다. 아니, 그 요청은 제대로 들어갔는지조차 판단이 불가합니다.


이런 경우에 몇 번의 클릭만으로 - 윈도우 사용자의 경우 단 2번에 - 해결할 수 있다.

1. F12를 누른다.
2. Network 탭을 클릭한다. 


Network 탭에서는 화면 새로고침, 로그인, 등록, 삭제, 검색 등 모든 액션이 발생할 때마다 그 속내를 보여줍니다. 액션은 요청하는 사용자가 있고, 그 요청을 이해하고 원하는 바를 응답해 줄 서비스 양쪽이 있어야 가능합니다. 예를 들어, 사용자가 '양파'를 입력하고 엔터키를 누르는 액션은 '양파 관련된 내용을 검색해 줘'라는 요청입니다. 그러면 서비스는 양파와 관련된 것을 뒤져서 화면에 양파 1, 양파 2 등 결과를 화면에 보여줍니다. 


브런치스토리에서 '양파' 검색 결과 | 본인

브런치스토리에서 '양파'로 검색한 결과를 직접 확인한 화면입니다.

[개발자 도구], [응답] 클릭한 결과 이 브런치스토리가 '양파 관련된 브런치 작품 검색해 줘'를 어떻게 이해했는지 보여줍니다. "query" : "양파"로 "totalCount"가 7개 나왔고 그중에 magazine이 4개, brunchbook이 3개입니다. 그리고 "list"에는 각 7개에 대한 작가, 제목, 페이지 등 결과가 소개되고 있습니다. 


해당 경우는 정상적인 상황입니다. 요청도 제대로 들어갔고, 응답한 결과가 화면에도 잘 보이고 있습니다. 그런데 개발자 도구를 활용해서, 화면에 아예 안 나타는 경우에도, 첫 번째 input이 제대로 요청이 들어갔는지부터 해서 상황에 대한 투명한 이해를 할 수 있게 됩니다.


보이는 것에 현혹되지 말고, 도구를 사용해 진짜 데이터를 마주하자
사진: Unsplash의Mockup Graphics


져니박 씀.


윈도우 기준으로 2번이라면, 맥 사용자는?

구글 크롬 브라우저 창에서, 윈도우가 아니라 맥북 이용자라면 클릭 1번이라고 보기는 어려울 수 있다. 윈도우 기준 F12이고 맥북은 option + command + i이다. 크롬 브라우저 > 더 보기 > 개발자 도구도 가능은 하다! 

                    

매거진의 이전글 똑똑하게 데이터 1탄 : 초깃값
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari