개요
핵심 요약 — 함께하는 사랑밭(withgo.or.kr)은 스스로를 '20만 후원자와 함께하는 39년 역사의 민간 최고 국내 NGO'로 소개하는 비영리 후원 기관이다. 국내 사회공헌·결연·긴급지원부터 국제 지역개발·아동보호까지 아우르는데, 웹사이트가 짊어진 목표는 분명하다. 방문자를 후원자로 바꾸는 일이다. 이번 리뷰는 예쁜 화면 품평에 그치지 않는다. 첫 화면이 신뢰를 어떻게 쌓는지, 후원 신청까지의 동선이 얼마나 매끄러운지, 그 구조가 홈페이지 제작 관점에서 어떤 결정으로 뒷받침되는지를 살핀다. 브랜드 메시지, UX/UI 설계, 정보구조와 SEO, 성능과 접근성을 차례로 짚는다.
브랜드 & 메시지
첫 화면 헤드라인은 '새학기를 준비하는 수아의 편지'다. 캠페인을 통계가 아니라 '수아'라는 한 아이의 이야기로 좁힌 선택이 좋다. 숫자 대신 이름을 앞세워 감정 이입의 문을 먼저 연다. 오른쪽에는 후원 아동이 직접 쓴 손편지—'학용품 감사합니다, 공부 열심히 할게요'—를 사진으로 세우고 '실제 후원 아동의 진짜 마음이 담긴 감사 편지입니다'라는 캡션을 달았다. 후원의 결과를 말이 아니라 증거로 보여주는, 비영리 웹사이트가 가장 잘해야 할 신뢰 설계다.
브랜드 전반을 관통하는 장치는 해시(#) 기호다. 로고 '#함께하는사랑밭'부터 '#후원하기', '#나눔이야기', '#투명경영'까지 섹션 라벨마다 일관되게 반복되며, 잘게 흩어질 수 있는 여러 사업을 하나의 시각 언어로 묶는다. 색은 채도 높은 로열 블루 한 톤으로 밀어붙여 신뢰와 공공성을 인상으로 남긴다. 네비게이션은 후원하기·캠페인·사업안내·기관소개·소식 다섯 갈래로 단정하고, 우측 상단의 '나의 후원'과 '로그인'이 기존 후원자와 신규 방문자의 진입로를 나눈다. 다만 히어로 CTA가 '자세히 보기'에 머무는 점은 아쉽다. 바로 아래 즉시 후원 폼이 '후원하기' 버튼을 쥐고 있어 역할이 분담되긴 하지만, 사연을 읽고 마음이 움직인 순간의 행동 문구로는 다소 밋밋하다.
UX/UI 관점
화면을 스크롤하며 확인한 설계의 강점은 뚜렷하다.
첫째, 전환 동선을 첫 화면으로 끌어올렸다. 히어로 바로 아래에 정기후원·일시후원 토글과 금액 입력, '후원하기' 버튼을 갖춘 즉시 후원 폼을 얹어, 감정이 고조된 지점과 행동 지점 사이의 거리를 최소화했다.
둘째, 카드 기반 모듈이 사이트 전체를 지배한다. 나눔 이야기, 사업 안내, 캠페인, 후원 안내가 모두 둥근 모서리 카드로 통일돼 시선이 어디에 놓이든 같은 규칙을 읽는다.
셋째, 신뢰를 수치로 번역했다. '투명경영' 블록은 '가장 먼저·가장 최고로·가장 낮은 곳으로'라는 세 문장에 39년 역사, 연 2회 정기감사, UN경제사회이사회 특별협의지위라는 근거를 아이콘과 함께 붙였다.
넷째, 결과를 콘텐츠로 보여준다. '나눔이 만들어낸 놀라운 변화' 섹션은 후기와 리포트를 카드로 늘어놓아, 후원이 무엇을 바꿨는지 스크롤만으로 훑게 한다.
다섯째, 색의 리듬이 있다. 흰 배경과 로열 블루 배경 섹션을 번갈아 배치해 긴 원페이지가 시각적으로 끊어 읽힌다. 여기에 우측 하단에 늘 떠 있는 '후원하기' 플로팅 버튼, 캠페인 캐러셀의 진행 표시(03/23)와 재생·정지 컨트롤까지, 배려한 디테일이 곳곳에 놓였다.
IA·SEO 전략
정보구조 관점에서 이 사이트의 자산은 개별 캠페인과 소식이다. 후원자는 '함께하는 사랑밭'이라는 브랜드명보다 난치병 아동 후원, 위기가정 지원 같은 개별 키워드로 검색해 들어오는 경우가 많다. 그렇다면 진행 중인 캠페인 하나하나가 고유한 title과 meta description, 대표 이미지(OG)를 갖춘 독립 랜딩으로 최적화돼야 한다. 메인의 캐러셀 안에만 묶여 있으면 검색 엔진이 각 사연을 개별 페이지로 인식하기 어렵다.
구조화 데이터도 이 업종에 맞게 손볼 여지가 있다. 기관 정보에는 Organization/NGO 스키마를, 개별 캠페인에는 Article이나 모금 맥락의 마크업을 적용하면 리치 결과 노출에 유리하다. '소식'의 공지사항과 언론보도는 발행일과 카테고리가 분명한 뉴스형 콘텐츠이므로, 날짜와 분류를 구조화해 두면 브랜드 검색 결과의 신뢰도가 올라간다. 내부 링크는 '나눔이 만들어낸 놀라운 변화'의 후기에서 관련 캠페인으로, 다시 후원 폼으로 이어지는 흐름을 앵커 텍스트로 명시적으로 연결하길 권한다. 감동한 독자가 곧장 후원까지 흐르도록 콘텐츠와 전환 페이지를 링크로 붙이는 작업은 SEO와 전환을 함께 끌어올린다.
성능·접근성
성능 면에서 가장 먼저 손볼 곳은 첫 화면이다. 인물 사진 중심의 히어로와 여러 캐러셀이 겹쳐 초기 로딩에서 LCP(최대 콘텐츠 페인트) 부담이 커지기 쉽다. 히어로 대표 이미지는 우선 로드하되 나머지 슬라이드는 지연 로딩으로 미루고, 인물 사진은 WebP 같은 경량 포맷으로 재인코딩해 화질을 지키면서 용량을 덜어내는 편이 좋다. 이미지마다 width/height를 지정해 레이아웃이 밀리는 CLS도 함께 잡는다.
접근성에는 이 사이트만의 과제가 하나 있다. 후원 아동의 손편지 사진처럼 '이미지 자체가 메시지'인 요소는 대체 텍스트에 편지 내용의 요지를 담아, 스크린리더 사용자에게도 같은 울림이 전해지게 해야 한다. 즉시 후원 폼의 금액 입력란과 토글, 드롭다운에는 명확한 레이블과 ARIA 속성을 붙이고, 자동으로 넘어가는 캐러셀에는 정지 버튼과 함께 키보드 포커스 이동을 보장하면 좋다. 로열 블루 배경 위 흰 글씨는 대비가 넉넉하지만, 카드 안 옅은 회색 보조 텍스트는 대비 기준을 점검할 값어치가 있다.
디지털 파트너 더블루캔버스
비영리 기관의 홈페이지는 상품을 파는 쇼핑몰과 목표가 다르다. 팔아야 할 것은 '신뢰'이고, 전환의 끝은 결제가 아니라 후원이다. The Blue Canvas(더블루캔버스)는 이런 후원·공익 도메인의 결을 이해하고 웹사이트 제작을 설계한다. 사연과 증거로 신뢰를 쌓는 스토리텔링 구조, 감정이 고조된 지점에 후원 폼을 놓는 전환 동선, 캠페인마다 검색 유입을 여는 SEO 최적화, 후원자를 다시 데려오는 퍼포먼스 마케팅까지 하나의 흐름으로 잇는다. 브랜드 정체성을 담은 웹디자인부터 성능·접근성 같은 기술 위생, 콘텐츠 자동화와 데이터 분석까지, 홈페이지 제작 이후의 성장을 함께 그린다. 비영리든 병원이든 브랜드몰이든, 방문자를 행동하게 만드는 UX/UI가 필요한 순간이라면 상담을 권한다.
마무리와 다음 스텝
함께하는 사랑밭의 웹사이트는 비영리 기관이 갖춰야 할 기본기를 단단히 지킨다. 한 아이의 편지로 문을 열고, 해시 모티프와 로열 블루로 일관된 인상을 남기며, 투명경영 지표로 신뢰를 수치화하고, 첫 화면에서 곧장 후원으로 이어지는 동선을 세웠다. 여기서 한 걸음 더 나아가려면 세 가지를 제안한다. 첫째, 히어로 CTA 문구를 '자세히 보기'에서 사연에 맞닿은 행동어로 다듬어 스토리와 전환 사이의 온도를 맞춘다. 둘째, 진행 캠페인을 각각 독립 랜딩으로 최적화해 개별 키워드 검색 유입을 연다. 셋째, 손편지 이미지의 대체 텍스트와 후원 폼 레이블을 정비해 접근성의 바닥을 끌어올린다. 세 과제 모두 큰 개편 없이 2~3주 스프린트로 실행할 수 있고, 신뢰와 전환을 함께 밀어 올리는 지렛대가 된다.