- CLIENT
- 사회복지법인 대한사회복지회 (KWS)
- INDUSTRY
- 사회복지 · 아동/어르신/장애/한부모 복지 · 모금
- PROJECT
- 비영리 법인 홈페이지 구축 / 리뉴얼
- URL
- kws.or.kr
- PERIOD
- 2023. 04 ~ 2023. 12
프릭스 수행범위
IA 설계, 후원 동선, 메인/서브 GUI, 웹표준 마크업부터 반응형 대응까지 단일 팀이 수행했습니다.
BACKGROUND
리뉴얼이 필요했던 세 가지 이유
-
01
70년의 신뢰가 후원의 이유가 되지 못했다
1954년 설립 이후 아동·장애·한부모·어르신 복지를 아우르며 26곳의 산하기관을 운영해 왔습니다. 그러나 기관 소개와 공지 중심의 구성으로는 오랜 역사와 투명경영이 '지금 후원해야 할 이유'로 연결되지 못했습니다.
-
02
후원자의 참여 방식이 서로 달랐다
일회성 캠페인 참여자, 정기후원자, 고액·기업 후원자, 물품 기부자, 복지 서비스 이용자가 한 사이트에 들어옵니다. 참여 방식은 다양했지만 각자에게 맞는 입구가 분명하지 않아 '바로 후원'까지의 거리가 멀었습니다.
-
03
모바일 후원과 캠페인 운영이 느렸다
기부는 SNS와 모바일에서 시작되는 경우가 많아졌지만, 캠페인 페이지를 시의성 있게 만들고 교체하기 어려웠습니다. 캠페인이 바뀔 때마다 제작 요청이 필요해 모금 타이밍을 놓치기 쉬운 상태였습니다.
다섯 집단, 다섯 개의 목적지
| 방문자 유형 | 방문 목적 | 도달해야 할 영역 |
|---|---|---|
| 캠페인 참여자 | 지금 누구를 어떻게 도울 수 있는가 | 캠페인후원·바로후원·진행 캠페인 |
| 정기·고액후원자 | 내 후원이 꾸준히 어디에 쓰이는가 | 정기 · 고액후원·아너스클럽·투명경영 |
| 기업·단체 | 사회공헌을 어떻게 함께하는가 | 기업후원·We대한가게·대한상점 |
| 복지 이용자·가족 | 어떤 지원을 어디서 받을 수 있는가 | 사업·아동·어르신·한부모 복지 |
| 언론·일반 | 최근 소식과 법인의 얼굴 | 소식·나눔 이야기·매거진 |
SOLUTION
정보구조를 다시 세운 세 가지 원칙
-
01
기관이 아니라 참여 방식으로 묶는다
기관 소개 중심의 메뉴를 '후원 / 사업 / 소식 / 법인' 네 축으로 재편하고 후원을 첫 메뉴로 올렸습니다. 캠페인·정기·고액·기업후원과 We대한가게까지 참여 방식별 입구를 나눴습니다.
-
02
신뢰의 근거를 후원 옆에 둔다
'한국가이드스타 평가 만점 · 4년 연속 최고등급' 인증과 투명경영 메뉴를 후원 동선 가까이에 배치했습니다. 후원을 결정하는 순간 필요한 근거를 같은 화면에서 확인합니다.
-
03
26개 산하기관을 하나의 관문으로 모은다
아동·한부모·어르신·장애인·종합복지 영역의 산하기관을 푸터 패밀리사이트로 분류해 상설 배치했습니다. 법인과 현장 기관이 하나의 브랜드 아래 연결됩니다.
정보구조 (Information Architecture)
- 후원후원가이드 · 캠페인후원정기후원 · 고액후원기업후원 · We대한가게
- 사업아동복지 · 장애아동복지한부모가족복지어르신복지지역사회복지 · 대한상점
- 소식나눔 이야기 · 사업장 소식공지 · 언론 · 운영 · 채용매거진
- 법인법인소개투명경영나눔대사
바로후원(상설 버튼), 후원문의 1577-5115, 후원계좌 안내, 산하기관 패밀리사이트(26개소), 해피빈 연계, KO / EN 전환 — 전 페이지 상설 노출
FEATURES
무엇을 개발했는가
보이는 기능
01
슬로건 메인 비주얼 · Since 1954
'대한민국 소외된 이웃 곁에는 대한사회복지회가 있습니다' 메시지를 설립 연도와 함께 첫 화면에 배치했습니다. 기관의 역할과 역사가 첫 문장이 되도록 설계했습니다.
02
6개 후원 카테고리 그리드
캠페인후원·아동후원·We대한가게·기업후원·아너스클럽·대한상점을 아이콘 카드로 배치해, 방문자가 자신의 참여 방식을 첫 화면에서 고릅니다.
03
진행 캠페인 갤러리
인형키링, 자립준비청년 지원, 기부반지 등 진행 중인 캠페인을 카드형 갤러리로 노출하고, 각 카드에서 바로 후원으로 연결합니다.
04
바로후원 · KO / EN 전환
헤더와 본문 곳곳에 바로후원 버튼을 상설 배치하고, 국문·영문 전환으로 해외 후원자 접점까지 대응합니다.
보이지 않는 기능
01
후원 신청 시스템
일시·정기후원 신청과 금액 선택, 결제를 하나의 흐름으로 구성.
02
캠페인 CMS
캠페인 페이지를 공통 템플릿으로 등록·교체해, 시의성 있는 모금을 담당자가 직접 운영합니다.
03
소식 · 매거진 운영
나눔 이야기, 사업장 소식, 공지/언론/채용, 매거진을 게시판 단위로 분리 운영해 현장 소식을 꾸준히 전합니다.
04
SNS · 채널 연동
페이스북, 인스타그램, 블로그, 유튜브, 카카오톡 채널을 상시 노출하고 해피빈 등 외부 모금 채널과 연결했습니다.
05
산하기관 연계
26개 산하기관 홈페이지를 영역별 패밀리사이트로 연결해, 법인과 현장 기관의 정보를 하나로 잇습니다.
06
웹표준 · 접근성
웹표준 마크업과 크로스브라우징 대응.
DESIGN
호소하지 않고,
곁에 선다
복지기관의 진정성은 과장된 호소에서 나오지 않습니다.
도움받는 이웃과 나누는 사람의 얼굴이 화면의 중심이 되도록 시각 언어를 정리했습니다.
사람이 주인공인 화면
아이, 어르신, 나눔 현장의 사진을 전면에 사용하고 텍스트는 최소한만 얹습니다. 누구를 돕는지가 읽기 전에 보이게 하는 것이 목표였습니다.
신뢰의 블루 · 따뜻한 사진
블루 계열 컬러로 공익법인의 신뢰감을 만들고, 따뜻한 톤의 현장 사진으로 딱딱한 기관 인상을 덜어냈습니다.
인증 배지 · 수치 강조
가이드스타 만점, 4년 연속 최고등급, Since 1954 같은 신뢰 지표를 배너와 배지로 정리해 후원 결정의 근거로 노출했습니다.
카드형 캠페인 템플릿
캠페인마다 이미지·제목·요약을 같은 카드 규격으로 정리해, 캠페인이 바뀌어도 화면 품질이 일정하게 유지됩니다.
일관된 후원 CTA
바로후원 버튼은 사이트 전체에서 같은 색과 위치를 유지해, 어디서든 한 번에 후원으로 이어지도록 했습니다.
반응형 재배치
6개 후원 카테고리와 캠페인 갤러리는 모바일에서 2단 그리드와 스와이프로 전환돼, SNS로 유입된 후원자도 바로 참여합니다.
주요 화면
RESULT
무엇이 달라졌는가
| 구분 | BEFORE | AFTER | 의미 |
|---|---|---|---|
| 구조 | 기관 소개 중심 | 참여 방식 중심 4축 | 방문자가 자신의 참여 방식을 메인에서 바로 고릅니다. |
| 동선 | 후원 입구가 메뉴에 분산 | 바로후원 상설 + 카테고리 | 캠페인·정기·기업후원까지 한두 번의 클릭으로 도달합니다. |
| 신뢰 | 인증 정보가 별도 영역 | 후원 동선 옆 신뢰 지표 | 후원을 결정하는 순간 근거를 함께 확인합니다. |
| 운영 | 캠페인별 제작 요청 | CMS 템플릿 직접 운영 | 시의성 있는 캠페인을 담당자가 직접 열고 교체합니다. |
