안녕하세요 카카오페이 QA팀 찬스입니다.
카카오페이에 합류한지 한 달이 막 지나가고 있네요. 많은 정보들을 머리속에 밀어넣느라 정신없는 한 달을 보내고 있습니다. 아직 대부분 모르는것들 뿐이구요..
새 회사로 이직하고나서 찾은 재미 중 하나는 이전까지의 제 경험을 새로운 회사에서 적용해보는 부분인데요, 아직 몇가지 안되지만 예전에 배웠던 것들을 적용해보고, 잘 안되는 건 우회 방법을 찾으면서 기존 스킬에 이해를 더하고 있습니다.
그 중 한가지는 제가 이전 회사인 원티드랩에서 유용하게 활용했던 피들러입니다. 현재는 디버깅 툴을 사용하기 어려운 환경이기도 하고 기존에 저는 윈도우 랩탑으로 업무를 했었는데 카카오페이에서는 맥북을 사용하고 있습니다. 윈도우에서는 피들러 클래식이라는 무료 툴이 있어 부담 없이 사용했었지만 맥에는 무료 버전이 없다고 알고있어요. 그 외 몇가지 이유로 디버깅 툴을 사용하기 어려웠어요.
새 툴을 찾아라
하지만 여기서도 저는 대량의 테스트 데이터, 응답값의 조작과 같은 테스트 방법이 필요했습니다.(특히 대량의 테스트 데이터요) 방법을 찾던 중 크롬 개발자도구에서 기능을 제공하고 있다는 것을 알게 되었습니다.
(비교적)편리한 UI를 제공하지는 않지만 프록시를 사용하는 기존 디버깅 툴의 조금 귀찮았던 점들을 해결할 수 있는 좋은 방법인 것 같아 업무에 활용해 보았고 개인적으로는 기존 툴보다 편리하게 사용하고 있습니다.
서론이 길었습니다.. 요약하자면 크롬 개발자도구를 이용해 대량의 테스트 데이터를 생성할 수 있고, 응답을 조작해 FE의 로직을 검증을 할 수 있습니다!
API 반복 요청하기
주로 대량의 테스트 데이터가 실제로 생성되어야 할 때 사용하는 방법입니다. 요청된 API를 간단히 원하는 만큼 재호출 할 수 있어 리소스를 많이 만들어야 할 때 압도적으로 시간을 단축시킬 수 있어요.
방법은 다음과 같습니다.
재현이 필요한 요청을 실제로 발생시킵니다. 테스트로 제 티스토리에 댓글을 작성했습니다. 댓글이 작성되면 개발자도구에서 제가 요청한 댓글 작성 API의 기록을 찾을 수 있어요.
해당 요청을 우클릭 > Copy > Copy as fetch하여 복사한 값을 개발자도구의 Console 탭에 붙여넣습니다.
실제 요청을 fetch 형식으로 변환한 코드가 붙여넣어지며 Enter를 입력하면 실행됩니다. 그 결과 댓글이 하나 더 작성되었습니다.
body에 있는 값들은 파라미터입니다. 단순히 코드를 복사, 붙여넣기하여 입력하면 똑같은 내용의 댓글이 달리겠지만 comment 라던가, isSecret 이라던가 하는 파라미터를 변경하여 입력하게 되면 다양한 데이터를 쌓을 수 있겠죠.
for문을 이용해 댓글을 엄청 많이 작성하는 작업도 가능할 것입니다.
현실 조작하기
제 블로그는 방문자 수가 그리 많은 편은 아닙니다. 최근에는 이직한다고 바빠서 글을 못 올렸으니 더 그렇겠네요.
2025년 7월 5일 현재 기준으로 일간 조회수는 26입니다. 이정도면 제 블로그에서 꽤 높은 편이죠. 이렇게 안타까운 현실은 크롬의 개발자도구를 사용해 조작해버릴 수 있습니다.
만약 오늘 방문자가 26명이 아니라 260,000 명이면 기쁘겠죠?
개발자도구의 Sources 탭으로 이동합니다.
Sources 탭에서 Overrides 기능을 선택합니다. 그리고 Overrides를 위한 폴더를 생성하고 나면 준비가 완료됩니다.
다음은 조작을 원하는 요청을 발생시키는 겁니다. 저는 일 방문자수 카운트와 차트를 26명에서 260,000명으로 조작하려고 합니다. 두 개의 API를 찾은 것 같습니다.
방문자 추이 차트를 보여주는 trend와 오늘 방문자를 세어주는 count 입니다. 이 둘을 조작하면 될거에요.
조작하고 싶은 요청을 우클릭해 Override content를 선택해 줍니다.
그럼 Sources 탭의 Overrides로 자동 이동되며 요청했던 값 또한 입력됩니다. 이중에서 조작하고 싶은 값을 찾아 원하는 값을 입력함으로써 조작이 완료됩니다.
저는 오늘의 방문자 26명을 수정하려고 했으니 관련된 파라미터를 찾아보겠습니다. today라는 키와 26이라는 값이 일치하네요 해당 값을 260,000으로 조작하고 새로고침 등을 통해 count 요청을 다시 발생시킵니다.
오늘의 조회수가 260,000으로 노출되는 것을 확인할 수 있습니다. 이번에는 차트도 조작해 보겠습니다.
차트도 이렇게 260,000명을 가리키는 걸 볼 수 있습니다. 이전에 방문자가 없는게 아니라 너무 미미해서 260,000에 비하면 없는 것 처럼 나오네요.. 이렇게 방문자가 260,000이나 될 때 UI에서 출력되는 숫자를 잘 노출해주는 것을 테스트할 수 있었습니다. 그리고 차트가 잘 그려지는 것, 일간 조회수를 어제와 비교해서 얼마나 차이나는지 계산해 주는 것 등의 기능이 잘 구현되었네요.
내용 추가 😅
제가 설명드린 내용이 단순히 개발자도구에서 HTML을 수정하는 것과 무엇이 다를까요? 개발자도구를 열고 Elements 탭으로 가서 HTML을 확인한 뒤 여기에 있는 숫자를 260,000으로 바꾸더라도 UI 상에서 방문자 수는 260,000으로 보일겁니다.
눈으로 보기에 여기엔 큰 차이가 없을지도 모릅니다. 하지만 동작하는 방식은 아주 다릅니다. 특히나 UI의 테스트를 위해 값에 조작이 필요하다면 HTML에서 값을 바꿔넣는것 만으로는 안됩니다.
첫번째 소개드린 API 반복 요청은 실제로 유저의 요청을 서버로 보내는 것이기 때문에 실제로 리소스를 생성하거나 조회하거나 갱신하거나 삭제하는 동작을 합니다. 그리고 두번째로 보여드린 응답값 조작은 실제로 서버나 DB에 값이 저장되는 것은 아니지만 요청에 대한 응답이 서버로부터 내려올때 제가 미리 설정해둔 값으로 "서버가 보내준 것 처럼" 바꾸어 보여주는거죠. 그에 반해 HTML에서 값만 바꿔 넣는 방식으로 조작한 값은 서버와 아무런 연관이 없습니다.
알기 쉽게 맥도날드 햄버거 주문으로 예를 들어볼게요.
첫번째 API 반복 요청은 실제로 맥도날드에 햄버거를 주문하는 행위와 같습니다. 이걸 10번 실행하면 맥도날드 시스템에 10번의 주문이 들어가고, 주방에서는 햄버거 10개를 만들게 됩니다. 영수증에도 햄버거 10개 주문이 정확히 찍혀 있겠죠.
두번째 응답값 조작은 실제로는 햄버거 1개만 주문했고, 시스템에도 1개의 주문만 기록돼 있습니다. 주방에서도 햄버거 1개만 만들어서 줍니다. 하지만 영수증에는 햄버거가 10개 주문된 것처럼 표시됩니다. 실제로 받은 건 1개지만, 겉으로 보기엔 10개처럼 보이는 거죠. 하지만 이건 어디까지나 제 쟁반 위에서만 그렇게 보일 뿐, 맥도날드 시스템이나 주방에는 아무런 영향이 없습니다.
세번째 방식은 주문을 1개만 했고, 주방에서도 햄버거 1개만 줬으며, 영수증에도 1개만 찍혀 있는 상황에서, 제가 펜으로 찍찍 긋고 영수증에 '10개'라고 덧써놓는 것과 똑같습니다. 화면에 보이는 숫자는 제가 마음대로 바꿀 수 있지만, 주문 시스템이나 실제로 제가 받은 햄버거 개수와는 전혀 무관합니다.
HTML의 값만 변경하는 방식은 이미 서버로부터 응답을 모두 받고, 브라우저가 그 응답을 바탕으로 화면을 렌더링한 이후에 단순히 화면에 표시된 값만 인위적으로 바꾸는 것입니다. 그렇기 때문에 서버의 실제 동작이나, 프론트엔드 로직에 따른 추가 가공(예: 천 단위 콤마 처리)은 반영되지 않습니다.
예를 들어, 응답값 조작을 사용할 때 저는 서버가 내려주는 값을 260000으로 설정합니다. 이 값은 프론트엔드 로직을 거쳐 천 단위로 포매팅되어 화면에 260,000으로 보여지게 됩니다.
반면, HTML을 직접 수정하는 방식으로는 이미 가공이 끝난 상태에서, 화면에 단순히 260000이라는 숫자만 입력해버리는 것입니다. 이때는 더 이상 프론트엔드 로직이 적용되지 않기 때문에, 콤마가 없는 260000 그대로 표시됩니다.
마무리
카카오페이에서 작성하는 첫 글이네요. 카카오페이 QA팀의 찬스라고 저를 소개하는 것도 아직은 낯선 느낌입니다. 어쩌다보니 입사 후 바로 프로젝트를 하나 맡게 되었는데요, 이번에 맡고있는 제품에 대량으로 리소스를 생성하면서 확인할 일이 많아 고생하던 차에 좋은 방법을 알게 되었습니다. 같이 일하는 TE 분들께도 이 글을 공유를 드리면 도움이 많이 될 것 같네요.
카카오페이 이직을 축하해주신 모든분들 감사드립니다!
감사합니다!
'품질 인사이트' 카테고리의 다른 글
| 한 번만에 수정되는 버그 티켓을 만들기 (1) | 2026.02.13 |
|---|---|
| AI가 생성한 결과물을 평가하기 (0) | 2025.11.21 |
| 테스트 너머의 QA 엔지니어링 집필 후기 (2) | 2024.12.11 |
| LLM 기반 체크리스트 생성 툴 공유 (3) | 2024.11.04 |
| QA 직무 오프라인 강의 진행 후기 (3) | 2024.06.01 |
