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

발행: (2026년 1월 18일 오전 09:33 GMT+9)
3 min read
원문: 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

관련 글

더 보기 »

기술은 구원자가 아니라 촉진자다

왜 사고의 명확성이 사용하는 도구보다 더 중요한가? Technology는 종종 마법 스위치처럼 취급된다—켜기만 하면 모든 것이 개선된다. 새로운 software, ...

에이전틱 코딩에 입문하기

Copilot Agent와의 경험 나는 주로 GitHub Copilot을 사용해 인라인 편집과 PR 리뷰를 수행했으며, 대부분의 사고는 내 머리로 했습니다. 최근 나는 t...