웹스크래핑도 개발도 내가 직접해보기

참여범위 : 전과정 100%
사용기술 : 피그마, React, Cursor AI
작업기간 : 2주
작업인원 : 1명

웹 에이전시에서 근무하던 시절, 한 클라이언트로부터 흥미로운 의뢰가 들어왔습니다. CJ프레시웨이의 가맹점 정보를 스크래핑하여 한눈에 보기 쉽게 시각화하여 대시보드 형태로 정리해달라는 요청이었죠.

당초 계획은 제가 기획과 디자인을 담당하고, 개발자 한 분이 함께 작업을 진행하는 것이었습니다. 하지만 예상치 못한 변수가 발생했습니다. 해당 개발자가 이전 프로젝트에서 문제가 생겨 급히 이를 해결해야 했고, 결국 저와 함께할 수 없는 상황이 되었습니다.

갑작스러운 일정 변화에 난감했지만, 클라이언트와의 약속을 지키고 프로젝트를 온전히 마무리하기 위해 직접 개발까지 맡기로 결심했습니다. 다만, 당시 저는 개발에 대한 심도 있는 지식이 부족했기 때문에, AI의 도움을 받아가며 작업을 진행하기로 했습니다. 그 과정에서 선택한 도구가 바로 Cursor AI였습니다.

작업중이던 cursor ai 화면

Cursor AI가 코드를 대신 작성해주긴 했지만, 실제로 완벽하게 동작하는 코드는 아니었기 때문에 이를 직접 디버깅하고 수정하는 과정이 필수적이었습니다. 저는 AI를 개발 보조 도구로 활용하며, 필요한 기능을 구현하는 방법을 배우고, 궁금한 점이 생길 때마다 질문하며 차근차근 프로젝트를 완성해 나갔습니다.

완성된 대시보드

결국, 파이어베이스 리얼타임 데이터베이스(Firebase Realtime Database)호스팅 서버를 활용하여 웹을 구축하고, 구글 앱 스크립트(Google Apps Script)를 이용해 가상 서버에서 매일 정해진 시간에 API를 호출하여 데이터를 자동으로 Firebase DB에 저장하는 방식으로 시스템을 완성할 수 있었습니다.

파이어베이스 콘솔
구글 앱스크립트 실행 기록

기존의 클라이언트분께서는 매크로 방식으로 각 가맹점마다 데이터를 긁어오는 방식으로 약 2시간 30분 정도 소요된다고 하였으나 이번 프로젝트를 통해서 CJ프레시웨이 API를 통해 각 가맹점 정보를 한번에 가져오는 방식으로 약 6분 정도 소요되게끔 개선되었습니다. (약 96% 단축)

그리고 다행히도, 개발자분이 이전 프로젝트를 마무리하는 시점에 저 역시 해당 프로젝트를 성공적으로 완료할 수 있었습니다. 결과적으로 전체 일정에 차질 없이 프로젝트를 운영할 수 있었고, 개발자로서의 역량도 한층 성장하는 계기가 되었습니다.

연락하기

010-2294-2672