8시간 만에 기부 웹사이트를 만든 방법 (그리고 이유)

발행: (2026년 1월 18일 오전 09:33 GMT+9)
3 분 소요
원문: Dev.to

Source: Dev.to

The Mission

어제 저는 hoki.help 를 만들었습니다 – 하우키 NÖ 라는 오스트리아 하부 지역의 어린이 호스피스 조직을 위한 기부 플랫폼입니다. HoKi는 진단부터 질병, 그리고 사별 지원까지, 심각한 질병을 앓고 있는 아이들의 가족을 전적으로 무료로 돕습니다.

Tech Stack

구성 요소기술
FrameworkNext.js 14 (App Router)
StylingTailwind CSS
PaymentsStripe Checkout
DatabaseNeon (Serverless Postgres)
HostingVercel
Domainhoki.help

Features Built in ~8 Hours

  • ✅ 반응형 랜딩 페이지 (모바일 퍼스트)
  • ✅ 기부 위젯 (€10 / €25 / €50 / €100 + 사용자 지정 금액)
  • ✅ 일회성 및 월간 정기 기부
  • ✅ 익명 기부 옵션
  • ✅ Stripe Checkout 연동
  • ✅ 기부 추적을 위한 웹훅 처리
  • ✅ 기부 바람계 (€500 달성 후 진행 상황 표시)
  • ✅ 법적 페이지 (Impressum, Privacy Policy – GDPR 준수)
  • ✅ Schema.org 구조화 데이터를 포함한 FAQ 섹션
  • ✅ SEO 최적화

Why Use Stripe Checkout for PCI Compliance?

Stripe Checkout은 안전하고 신뢰할 수 있으며 Apple Pay / Google Pay 를 기본 지원하므로 PCI 준수를 직접 처리할 필요가 없습니다. 우리는 총액 및 건수와 같은 집계된 기부 통계만 저장합니다. 프랑크푸르트에 위치한 Neon의 서버리스 Postgres는 데이터를 EU 내에 보관하며, 저는 이미 다른 프로젝트에서도 이를 사용하고 있습니다.

Donation Experience

기부는 마찰 없이 진행되어야 합니다: 회원가입도, 비밀번호도 필요 없고, 바로 기부하고 떠날 수 있어야 합니다. 기부자는 익명을 선택할 수 있으며, 이름은 저장되거나 자선단체와 공유되지 않습니다 – 결제 처리를 위해 Stripe만 이름을 확인합니다.

🔗 hoki.help – 기부금 100 %가 HoKi NÖ에 전달됩니다. 호스팅 비용은 제가 운영하는 회사가 전액 부담합니다.

구현에 대해 궁금한 점이 있나요? 아래에 댓글을 남겨 주세요!

❤️ 로 만든 프로젝트이며, HoKi NÖ가 지원하는 아이들과 가족들을 위해 만든 것입니다.

Back to Blog

관련 글

더 보기 »