나는 .NET 10, gRPC-Web, 그리고 Vanilla JS로 리버스 마켓플레이스를 구축했습니다

Source: Dev.to

전통적인 마켓플레이스의 문제점

모든 마켓플레이스는 같은 방식으로 작동합니다: 판매자는 제품을 등록하고, 구매자는 수천 개의 리스트를 스크롤하며 원하는 것을 적정 가격에 찾으려 합니다.

역마켓플레이스 개념

이 모델을 뒤집고 싶었습니다. 구매자가 원하는 것을 게시하고 판매자들이 최고의 제안을 경쟁하도록 하면 어떨까요?
그것이 WTB.land – 역마켓플레이스 (WTB = Want To Buy)입니다.

• 구매자가 요청을 게시 – 예: “MacBook Pro M3을 원해요, 예산 $1500, 새것과 같은 상태.”
• 판매자는 요청을 탐색하고 가격과 설명을 포함한 제안을 제출합니다.
• 모든 제안은 공개 – 판매자들이 경쟁하고, 가장 높은 입찰에 TOP BID 배지가 붙습니다.
• 구매자는 최고의 거래를 선택 – 판매자와 채팅하고, 제안을 비교하고, 완료합니다.

기술 스택

• 백엔드: .NET 10 (ASP.NET Core MVC + gRPC)
• 데이터베이스: SQLite (네, 정말)
• 프론트엔드: Vanilla JavaScript SPA (~1800줄, React/Vue/Angular 없음)
• 프로토콜: protobuf 기반 gRPC‑Web (REST/JSON 아님)
• CSS: Tailwind CSS 3.4
• 배포: 월 $7 Hetzner VPS에 단일 바이너리

구현 하이라이트

• 바이너리 protobuf가 JSON보다 약 30 % 작습니다.
• 98줄짜리 커스텀 gRPC‑Web 전송 로직을 작성했으며, XHR을 통한 바이너리 프레이밍을 처리합니다. 클라이언트에서는 코드 생성이 없고 protobuf.js가 런타임에 .proto 파일을 파싱합니다.
• SPA는 pushState 라우팅, SSR 하이드레이션, 레이지 로딩, 실시간 채팅 폴링을 포함합니다. React를 도입하면 번들 크기가 세 배가 되었을 텐데, 이득은 없었습니다.
• 수백 개의 요청을 가진 초기 마켓플레이스에는 SQLite가 최적입니다: 단일 파일, 설정 필요 없음, 즉시 백업 가능.
• JavaScript SPA는 기본적으로 검색 엔진에 보이지 않습니다. 해결책: 하이브리드 SSR + SPA 아키텍처.
  • 서버가 SEO 콘텐츠(메타 태그, JSON‑LD, Open Graph)를 포함한 전체 HTML을 렌더링합니다.
  • 클라이언트 JS는 서버가 주입한 JSON으로 하이드레이트되며, 중복 API 호출이 없습니다.
  • 이후 네비게이션은 pushState와 gRPC 호출을 사용합니다.

성능 및 SEO

• Google PageSpeed: 모바일·데스크톱 모두 100/100.
• 응답 시간: 단일 코어 VPS에서 60‑90 ms.

라이브 데모

WTB.land는 현재 라이브이며 무료입니다. 26개의 카테고리, 내장 채팅, 수수료 없음 등을 제공합니다.

행동 요청

gRPC‑Web으로 무언가를 구축해 본 적이 있나요? 여러분의 생각을 듣고 싶습니다.