39년 역사, 20만 후원자를 보유한 함께하는 사랑밭은 UN경제사회이사회 특별협의지위를 가진 국내 대표 NGO입니다. 화상 아동, 난치병 환자, 독거노인 등 복지사각지대를 지원하는 이 단체의 웹사이트(withgo.or.kr)가 어떤 기술로, 어떤 디자인 전략으로 기부를 이끌어내고 있는지 해부해 보겠습니다.

첫인상: withgo.or.kr를 처음 열었을 때

함께하는 사랑밭 메인 페이지 — 데스크톱 1440×900

페이지를 열면 상단에 사업자등록증 다운로드 탑배너가 먼저 눈에 들어옵니다. 후원자가 연말정산 세액공제를 위해 필요한 서류인데, 이걸 최상단에 배치한 건 기존 후원자의 편의를 최우선으로 고려한 설계입니다.

히어로 슬라이드(7장)는 “엄마, 왜 나는 형이랑 몸이 달라?”라는 화상 아동의 이야기로 시작됩니다. 사진 속 아이의 표정과 함께 “여섯 살 요한이의 치료와 내일의 성장을 함께 지켜주세요”라는 카피가 감정을 자극합니다. 단순한 기부 요청이 아니라 스토리텔링으로 공감을 먼저 이끌어내는 전형적인 NGO UX 패턴입니다.

특히 주목할 점은 히어로 바로 아래에 후원 폼이 직접 노출되어 있다는 것입니다. 정기후원/일시후원 토글, 금액 선택(2만원, 3만원, 5만원, 직접입력), 후원하기 버튼이 스크롤 없이 바로 보입니다. 감정이 움직인 그 순간에 바로 행동할 수 있도록 설계한 겁니다.

기술 스택 해부

프레임워크 & 렌더링

함께하는 사랑밭은 서버사이드 렌더링(SSR) 기반의 전통적 웹 애플리케이션입니다. URL 구조(/index.do, /work/local/child.do)에서 알 수 있듯 Java 기반 서블릿/Spring MVC 구조로 추정됩니다.

감지된 기술 스택:
- 서버: Nginx 1.13.8 (리버스 프록시)
- 백엔드: Java 서블릿 (.do 패턴)
- JS 라이브러리: jQuery (코어)
- 슬라이더: Slick.js (히어로, 나눔이야기, 캠페인 등)
- 스크롤 애니메이션: AOS (Animate On Scroll)
- 차트: Chart.js (투명경영 데이터 시각화)
- 분석: Google Tag Manager + 네이버 웹마스터(wcs)

왜 모던 프레임워크가 아닌가? NGO 웹사이트의 특성상 빈번한 콘텐츠 업데이트보다는 안정성과 유지보수 연속성이 더 중요합니다. 39년간 운영해 온 단체에서 기존 인프라를 React나 Next.js로 마이그레이션하는 것은 비용 대비 효과가 낮을 수 있습니다. jQuery + Slick 조합은 여전히 이 규모의 콘텐츠 사이트에서 충분히 실용적인 선택입니다.

CSS 아키텍처

CSS 파일 구조:
- init.css     → 리셋/노멀라이즈
- common.css   → 공통 컴포넌트
- layout.css   → 페이지별 레이아웃
- slick.css    → 슬라이더 기본 스타일
- slick-theme.css → 슬라이더 테마
- aos.css      → 스크롤 애니메이션

CSS 변수나 CSS-in-JS는 사용하지 않고, 전통적인 클래스 기반 스타일링을 채택했습니다. BEM 같은 명명 규칙 대신 cm_hero, cmh_slide, cmhs_box 등 접두어 기반 네이밍을 사용하는데, cm이 메인 콘텐츠, cmh가 히어로, cmhs가 히어로 후원 영역을 의미하는 계층적 구조입니다.

호스팅 & 인프라

- 서버: Nginx 1.13.8 (구버전 — 최신은 1.27.x)
- 프로토콜: HTTPS → HTTP 302 리다이렉트 발생
- CDN: 별도 CDN 미사용
- Content-Language: ko-KR

디자인 시스템 분석

컬러 팔레트

사이트의 브랜드 컬러는 블루(#009cff 계열)입니다. 메타 태그의 theme-color도 #009cff로 설정되어 있고, 로고, CTA 버튼, 강조 텍스트 모두 이 블루를 중심으로 통일감을 줍니다.

디자인 의도가 명확합니다. 블루는 신뢰와 안정을 상징하고, 기부 단체에서 가장 중요한 “이 단체를 믿을 수 있다”는 메시지를 컬러만으로 전달합니다. 히어로의 따뜻한 베이지 톤 배경은 아이들의 사진과 어우러져 인간적인 온기를 더합니다.

타이포그래피

별도의 웹폰트 로딩 없이 시스템 폰트에 의존합니다. 히어로 헤드라인은 굵은 산세리프로 큼직하게 처리하고, 본문은 일반 웨이트로 가독성을 확보합니다. 맑은 고딕이 일부 인라인 스타일에서 명시되어 있어 한국어 환경에 최적화된 기본 설정입니다.

레이아웃 & 반응형

데스크톱 vs 모바일 반응형 비교

반응형 브레이크포인트는 3단계로 구성됩니다:

@media (max-width: 1024px) { /* 태블릿 */ }
@media (max-width: 768px)  { /* 소형 태블릿 */ }
@media (max-width: 600px)  { /* 모바일 */ }

모바일에서는 히어로 슬라이드가 세로 비율로 전환되고, 후원 폼 대신 하단에 일시후원/정기후원 고정 바가 등장합니다. 데스크톱의 인라인 후원 폼을 모바일에서는 고정 CTA로 변환한 것인데, 스크롤 중에도 항상 후원 버튼이 보이도록 한 영리한 설계입니다.

UX 패턴 깊이 파기

네비게이션

GNB 구조:
├─ 후원하기 (정기/일시/결연/고액/기업사회공헌/물품/함께하는가게/나눔매니저/후원가이드)
├─ 캠페인 (캠페인/캠페인 결과보고)
├─ 사업안내 (국내사업/국제사업)
├─ 기관소개 (투명경영/연혁/조직/함께하는 사랑밭은/홍보대사)
└─ 소식 (언론보도/공지사항/발행물/나눔이야기)

5개 대분류에 총 20개 이상의 하위 메뉴가 있습니다. “후원하기”가 맨 앞에 위치한 것은 의도적입니다 — 사이트의 핵심 전환 목표(기부)를 네비게이션 순서에서부터 반영한 겁니다.

모바일에서는 햄버거 메뉴(h_btn)로 전환되고, 각 메뉴는 togglebtn 클래스로 아코디언 방식 펼침을 지원합니다. tabindex가 1100번대부터 세밀하게 설정되어 있어 키보드 내비게이션 순서를 의식한 설계가 보입니다.

인터랙션 & 애니메이션

• Slick.js 슬라이더: 히어로(7장 자동재생), 나눔이야기, 캠페인, 후원안내 등 4곳 이상에서 활용
• AOS(Animate On Scroll): 섹션별 스크롤 진입 시 페이드인 효과
• Chart.js: 투명경영 페이지의 재무 데이터 시각화

슬라이더에 재생/정지 컨트롤이 포함되어 있습니다. 자동재생 슬라이더는 접근성 관점에서 문제가 될 수 있는데, 정지 버튼을 제공한 것은 좋은 판단입니다. 히어로 슬라이더 하단에는 프로그레스 바(cmhnb_progress)가 현재 슬라이드 진행 상황을 시각적으로 보여줍니다.

정보 구조: 기부 전환 퍼널

페이지 스크롤 흐름이 명확한 감정 → 신뢰 → 행동 퍼널을 구성합니다:

순서	섹션	역할
1	히어로 슬라이드 + 후원 폼	감정 자극 + 즉시 전환
2	나눔이야기	실제 수혜 사례로 감정 심화
3	기관 소개 (20만 후원자, 39년 역사)	사회적 증거로 신뢰 구축
4	사업 소개 (국내/국제)	기부금 사용처 명시
5	캠페인	구체적 참여 기회 제공
6	후원 안내 (정기/일시/결연 등)	다양한 행동 옵션
7	뉴스 & 발간물	투명성 강화

이 구조는 AIDA 모델(Attention → Interest → Desire → Action)의 변형으로, NGO 사이트에서 매우 효과적인 패턴입니다.

SEO & 웹 표준

메타 태그 분석

<title>실천하는 NGO 함께하는 사랑밭</title>
<meta name="description" content="공식기부단체 취약계층 긴급지원, 함께하는 사랑밭.
  난치병, 장애인, 두리모, 독거노인 등 복지사각지대 지원">
<meta name="keywords" content="함께하는 사랑밭, 사랑밭, 구제단체, 국제선교,
  복지지원, 화상환자, 화상흉터치료, 난치병, 장애인, 두리모, 독거노인, ...">

• OG 태그: og:title, og:description, og:image, og:locale(ko) 모두 설정됨
• robots: index, follow — 검색엔진 크롤링 허용
• 사이트 인증: 네이버(naver-site-verification), 구글(google-site-verification) 모두 완료

시맨틱 HTML

시맨틱 태그 사용 현황:
- <header> ✅ (1개)
- <nav>    ✅ (1개)
- <main>   ✅ (1개)
- <aside>  ✅ (1개 — 플로팅 후원 버튼)
- <footer> ✅ (1개)
- <section> ✅ (8개 — 각 콘텐츠 영역)

시맨틱 HTML 구조는 교과서적으로 잘 갖춰져 있습니다. 다만 aria-hidden이 1개뿐이고 alt 속성도 1개만 감지되는 등 ARIA 레이블과 이미지 대체 텍스트가 부족합니다. .blind 클래스(33회 사용)로 스크린리더용 텍스트를 제공하고 있지만, WAI-ARIA 표준에 맞는 보완이 필요합니다.

성능

성능 관련 감지 결과:
- 이미지 최적화: WebP/AVIF 미사용 (전통 JPG/PNG)
- 레이지 로딩: 미감지
- 프리로드: 1건만 감지
- CDN: 미사용 (자체 서버 직접 서빙)
- 번들링: 개별 JS/CSS 파일 (6 CSS + 9 JS)

이미지 최적화와 레이지 로딩이 적용되지 않은 점은 성능 면에서 아쉽습니다. 풀페이지 캡처에서 볼 수 있듯 이미지가 많은 사이트이므로, WebP 전환과 loading="lazy" 적용만으로도 상당한 성능 개선이 가능합니다.

배울 점 & 아쉬운 점

참조할 만한 기술

1. 히어로 영역 인라인 폼 패턴

감성적 히어로 이미지 바로 아래에 전환 폼을 배치하는 구조는 어떤 SaaS나 서비스 사이트에도 적용할 수 있습니다. 핵심은 “감정이 움직인 순간에 행동 옵션을 제공”하는 것입니다.

<!-- 히어로 + 인라인 CTA 패턴 -->
<section class="hero">
  <div class="hero-story"><!-- 감성 콘텐츠 --></div>
  <div class="hero-cta">
    <form>
      <div class="tab">정기후원 | 일시후원</div>
      <div class="amount">금액 선택 + 직접입력</div>
      <button>후원하기</button>
    </form>
  </div>
</section>

2. 모바일 고정 CTA 바 전환

데스크톱의 인라인 폼을 모바일에서는 고정 하단 바로 변환하는 패턴입니다. 화면이 작은 모바일에서 폼 전체를 노출하는 대신, 핵심 CTA 2개(일시후원/정기후원)만 고정합니다.

3. 스토리텔링 기반 정보 구조

“기능 나열”이 아닌 “이야기 → 공감 → 신뢰 → 행동” 흐름은 비영리뿐 아니라 B2C 서비스 랜딩에도 효과적입니다.

개선 여지

• Nginx 1.13.8 → 최신 안정 버전 업그레이드 필요 (보안 취약점)
• HTTPS 리다이렉트가 HTTP로 빠지는 문제 수정 필요
• 이미지 WebP 전환 + loading="lazy" 적용으로 성능 개선
• ARIA 레이블 보강: aria-label, aria-describedby, 이미지 alt 텍스트 추가
• canonical URL 주석 처리됨 — 활성화하여 중복 URL 이슈 방지
• og:image가 상대 경로(/css/op_1200x630.webp) — 절대 URL로 변경 권장
• JS/CSS 번들링: 9개 JS + 6개 CSS를 번들링하면 HTTP 요청 수 감소

마무리: 개발자가 가져갈 인사이트

• 기술의 신구는 중요하지 않다 — jQuery + Slick + AOS로도 충분히 감성적이고 전환율 높은 사이트를 만들 수 있습니다. 중요한 건 사용자 여정 설계입니다.
• CTA는 감정과 함께 배치하라 — 히어로 스토리 바로 아래 후원 폼을 둔 것은 NGO 사이트 UX의 정석입니다. 이 패턴을 SaaS 가입 폼, 뉴스레터 구독 등에 응용해 보세요.
• 모바일 CTA는 고정이 답이다 — 복잡한 폼을 고정 바 2버튼으로 치환한 반응형 전략은 전환율 관점에서 탁월합니다.
• 시맨틱 HTML은 기본이다 — 이 사이트는 header, nav, main, section, aside, footer를 충실히 사용합니다. 하지만 ARIA와 alt 텍스트까지 채워야 진정한 접근성입니다.
• 투명성이 곧 UX다 — 캠페인 결과보고, 재무 공시(Chart.js), 가이드스타 인증 등을 전면에 배치해 신뢰를 디자인한 것이 인상적입니다.

자주 묻는 질문 (FAQ)

Q. 함께하는 사랑밭 사이트는 어떤 백엔드를 사용하나요?

URL 패턴(.do)과 서버 설정으로 보아 Java 서블릿/Spring MVC 기반으로 추정됩니다. Nginx 1.13.8이 리버스 프록시 역할을 합니다.

Q. 다크모드를 지원하나요?

현재 다크모드는 미지원입니다. CSS 변수 체계가 없어 다크모드 도입 시 상당한 리팩터링이 필요합니다.

Q. Slick.js는 아직 쓸 만한 라이브러리인가요?

Slick.js는 2020년 이후 업데이트가 중단되었지만, 여전히 안정적으로 동작합니다. 신규 프로젝트에서는 Swiper나 Embla Carousel을 권장하지만, 기존 사이트에서 굳이 마이그레이션할 이유는 없습니다.

Q. AOS 라이브러리의 성능 영향은?

AOS는 가벼운 라이브러리(약 14KB)지만, IntersectionObserver API를 직접 사용하면 외부 의존성 없이 동일한 효과를 구현할 수 있습니다. 성능에 민감한 프로젝트에서는 네이티브 API를 추천합니다.

Q. 이 사이트의 SEO 점수는 어떤가요?

메타 태그와 OG 태그가 잘 설정되어 있고 시맨틱 구조도 갖춰져 있어 기본적인 SEO 기반은 양호합니다. 다만 canonical URL 비활성화, og:image 상대 경로, 이미지 alt 부재 등은 개선이 필요한 부분입니다.

---