joon5007 · 위시켓(Wishket)

프로젝트 배경

NFT 투자 및 리서치를 위해 여러 마켓플레이스(OpenSea, Magic Eden, Blur 등)와 커뮤니티에서 프로젝트 정보, 민팅 일정, 바닥가 변동 등을 수동으로 확인하는 데 과도한 시간 소요. 특히 신규 프로젝트 발굴을 위해 매일 10개 이상의 사이트를 순회하며 데이터를 수집해야 했고, 이 과정에서 놓치는 정보가 발생. 효율적인 NFT 정보 수집과 투자 의사결정 속도 향상을 위해 클릭만으로 원하는 데이터를 빠르게 추출할 수 있는 개인용 스크래핑 도구를 개발.

프로젝트 성과

일일 리서치 시간 90% 단축

기존 4시간 이상 소요되던 NFT 정보 수집이 10분 내로 단축

모니터링 사이트 커버리지 3배 확대

수동 확인 5개 → 자동 수집 15개 사이트로 정보 범위 확대

SPA 기반 NFT 마켓 대응

React 기반 OpenSea, Blur 등 SPA 사이트 크롤링 지원으로 실시간 데이터 확보

핵심 기능

클릭 기반 셀렉터 자동 생성

웹페이지에서 원하는 요소를 클릭하면 CSS Selector가 자동으로 생성되어, 코딩 없이 데이터 추출 지점 설정 가능

실시간 웹페이지 미리보기

Proxy 서버를 통해 iframe 내에서 외부 웹사이트를 실시간으로 렌더링하여 요소 선택 및 확인 가능

SPA 사이트 렌더링 지원

Playwright Headless Browser를 활용해 React, Vue 등 JavaScript 기반 SPA 사이트도 완벽하게 크롤링

동적 필드 커스터마이징

사용자가 직접 필드명(제목, 가격, 날짜 등)을 정의하고 여러 개의 셀렉터를 자유롭게 추가/삭제 가능

원클릭 엑셀 다운로드

수집된 데이터를 즉시 Excel 파일로 변환하여 다운로드, 별도 가공 없이 바로 분석에 활용 가능

프로젝트 상세

1) 포트폴리오 소개
마케터, 기획자, 리서처 등 비개발자를 위한 노코드 웹 스크래핑 도구. 코딩 없이 클릭만으로 원하는 웹 데이터를 수집하고 엑셀로 내보낼 수 있는 올인원 솔루션.

2) 작업 범위
- Full-stack 단독 개발 (Backend + Frontend)
- Proxy 서버 구축 (CORS/X-Frame-Options 우회)
- Headless Browser 연동 (SPA 사이트 지원)
- 반응형 웹 UI

3) 주요 업무
- iframe 기반 실시간 웹페이지 미리보기
- 클릭 기반 CSS Selector 자동 생성 엔진
- 동적 셀렉터 관리 (사용자 정의 필드명)
- SPA/React/Vue 사이트 렌더링 지원 (Playwright)
- 수집 결과 실시간 표시 및 엑셀 다운로드

4) 주안점
- 사용성: 비개발자도 5분 안에 데이터 수집 가능하도록 직관적 UX 설계
- 호환성: 일반 웹사이트와 SPA 사이트 모두 지원하는 듀얼 렌더링 모드
- 정확성: DOM 트리 분석을 통한 정밀한 CSS Selector 생성 알고리즘