8시간 만에 기부 웹사이트를 만든 방법 (그리고 이유)
Source: Dev.to
The Mission
어제 저는 hoki.help 를 만들었습니다 – 하우키 NÖ 라는 오스트리아 하부 지역의 어린이 호스피스 조직을 위한 기부 플랫폼입니다. HoKi는 진단부터 질병, 그리고 사별 지원까지, 심각한 질병을 앓고 있는 아이들의 가족을 전적으로 무료로 돕습니다.
Tech Stack
| 구성 요소 | 기술 |
|---|---|
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS |
| Payments | Stripe Checkout |
| Database | Neon (Serverless Postgres) |
| Hosting | Vercel |
| Domain | hoki.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Ö가 지원하는 아이들과 가족들을 위해 만든 것입니다.