01사업은 넓어졌는데,
사업은 넓어졌는데,
이야기는 흩어져 있었습니다.
병원과 센터, 복지관, 소셜팜, 스포츠센터, 도서관까지 여섯 기관과 네 개의 사업 분야가 각자의 언어로 소개되고 있었습니다. 처음 온 사람은 이 재단이 무엇을 하는 곳인지 한 문장으로 말하기 어려웠습니다.
한 그루에서 숲으로 이어지는 하나의 이야기로 묶기BLUECANVAS SELECTED WORKPURME FOUNDATION · NON-PROFIT
PURME FOUNDATION · WEBSITE RENEWAL PROPOSAL
보통의 하루가
자라는 숲
푸르메재단 홈페이지 리뉴얼 제안
브랜드 해석 · 정보 구조 · UI 디자인 · 접근성
01 / OVERVIEW프로젝트 개요
기부를 부탁하는 홈페이지에서,
함께 자라는 숲으로.
푸르메재단은 2005년부터 장애인의 재활과 자립을 도와 온 비영리 재단입니다. 어린이재활병원과 발달재활센터, 복지관, 소셜팜까지 재단이 가꾸는 곳이 늘어난 만큼 홈페이지가 전해야 할 이야기도 많아졌습니다.
블루캔버스는 푸르메재단 홈페이지를 만들고 운영하면서, 다음 홈페이지는 어떤 모습이어야 할지 리뉴얼 방향을 함께 고민했습니다. 이 페이지는 그 제안과 과정을 정리한 기록입니다.
운영 중인 푸르메재단 홈페이지- #비영리 재단
- #후원 경험
- #웹 접근성
- #정보 구조
- #브랜드 경험
- #쉬운 글
- #캠페인 템플릿
- #디자인 시스템
- #반응형
재단이 쌓아 온 숫자에서 출발했습니다.
2005
보건복지부 허가를 받아
재단이 시작된 해
925만 명
보통의 삶을 살아갈 힘을 얻은
장애당사자와 가족
55,656
장애인과 가족을 위해
나눔에 함께한 후원자
8년 연속
한국가이드스타 공익법인 평가
최고 등급
숫자 출처: 푸르메재단 홈페이지 공개 자료
02 / THE QUESTION
사람들은 푸르메재단 홈페이지에 무엇을 하러 올까요? 처음 후원을 결심한 사람, 영수증이 필요한 오랜 후원자, 그리고 아이에게 맞는 지원을 찾는 가족이 있습니다. 같은 첫 화면에서 세 사람이 각자의 길을 바로 찾을 수 있어야 했습니다.
ANALYSIS지금의 홈페이지에서 발견한 세 가지
02후원으로 들어가는 문이
후원으로 들어가는 문이
여러 곳에 있었습니다.
정기 후원과 일시 후원, 캠페인마다 다른 페이지, 기업 사회공헌, 소액 기부와 기념일 기부까지 입구가 많았습니다. 처음 후원하려는 사람은 어디에서 시작해야 할지 망설이게 됩니다.
입구는 하나로, 선택은 세 번으로03동정보다
동정보다
존중의 언어가 필요했습니다.
재단의 미션은 장애인이 보통의 삶을 누리도록 사회변화를 이끄는 것입니다. 안타까운 사연을 앞세우는 화면은 마음을 움직일 수는 있어도, 재단이 말하는 보통의 삶과는 거리가 있었습니다.
불쌍한 주인공이 아닌, 하루를 사는 사람으로첫 화면에 서 있는
세 사람을 먼저 그렸습니다.
방문자를 연령이나 성별로 나누는 대신, 홈페이지에 온 이유로 나누었습니다. 이유가 다르면 가장 먼저 봐야 할 것도 달라지기 때문입니다.
이 재단은 믿을 수 있을까?
- 재단이 하는 일을 한눈에
- 투명경영과 숫자
- 부담 없는 후원 시작
시안에서는 나에게 맞는 후원 찾기
내 후원은 어디에 닿았을까?
- 후원금이 쓰인 곳
- 내 후원 내역과 영수증
- 재단의 새 소식
시안에서는 내 후원 내역 · 영수증
우리 아이가 받을 수 있는 지원이 있을까?
- 지금 신청할 수 있는 지원
- 쉬운 말로 쓴 신청 방법
- 선정 결과 확인
시안에서는 배분알리미 · 신청 안내
03 / BRAND THINKING
답은 이미
답은 이미
심벌 안에 있었습니다.
“어린 새싹이 든든한 나무로 자라 푸른 숲을 이루는 모습을 형상화하고 있습니다.”푸르메재단 CI 소개
- 01 · 새싹 · 재활처음 걸음을 떼는 시간
치료실에서 보내는 하루하루가 새싹을 키웁니다.
- 02 · 나무 · 자립스스로 서는 힘
일터와 배움터에서 자기 몫의 하루를 꾸립니다.
- 03 · 숲 · 함께어울려 사는 보통의 삶
장애와 비장애의 벽이 낮아진 동네가 숲이 됩니다.
BRAND STATEMENT
도와 달라는 말 대신,
함께 자라자는 말로.
미션 「장애인이 보통의 삶을 누리도록」에서제안 문장 「보통의 하루가 자라는 숲」으로
사람이 먼저입니다.
「장애아동」보다 「아이」를 먼저 부릅니다. 장애는 그 사람을 설명하는 여러 사실 가운데 하나일 뿐입니다.
무엇이 달라지는지 말합니다.
막연한 희망 대신 치료를 이어 가는 일, 출근하는 하루처럼 후원이 바꾸는 장면을 구체적으로 보여 줍니다.
주어는 「우리」입니다.
돕는 사람과 도움받는 사람으로 나누지 않습니다. 후원자도 숲을 함께 가꾸는 이웃으로 부릅니다.
PHOTOGRAPHY DIRECTION
얼굴보다 손과 걸음,
얼굴보다 손과 걸음,
연출보다 일상을 찍습니다.
홈페이지 사진은 재단의 태도를 가장 먼저 보여 줍니다. 아이와 가족의 얼굴을 앞세우지 않고, 손과 걸음, 햇빛 속의 하루로 이야기를 전하는 기준을 세웠습니다.
- DO손, 걸음, 뒷모습, 하는 일
- DO자연광과 일상의 장소
- DON'T눈물, 어두운 조명, 동정의 구도
- DON'T동의 없는 아동 얼굴 클로즈업
04 / COLOR SYSTEMCI의 블루는 그대로,
CI의 블루는 그대로,
새싹의 라임을 더했습니다.
푸르메재단의 블루는 건강과 희망을 뜻합니다. 그 블루를 바꾸지 않고, 자라는 순간을 표시할 새싹의 색을 하나 더했습니다.
Purme Blue#0071BCRGB 0 113 188
건강과 희망
심벌과 주요 버튼, 링크에 쓰는 CI 블루입니다. 바꾸지 않고 그대로 이어받았습니다.
- 흰 글씨
- 5.1:1 AA
- 네이비 글씨
- 3.0:1 큰 글자
Ink Navy#0A2540RGB 10 37 64
읽히는 바탕
본문 글자와 어두운 장면의 바탕입니다. 검정보다 부드럽게 블루와 이어집니다.
- 흰 글씨
- 15.5:1 AAA
- 네이비 글씨
- 1.0:1 사용 안 함
Sprout Lime#B5E048RGB 181 224 72
새싹의 신호
참여를 권하는 자리에만 씁니다. 글자는 항상 네이비로 올립니다.
- 흰 글씨
- 1.5:1 사용 안 함
- 네이비 글씨
- 10.2:1 AAA
Sky Mist#E6F2FBRGB 230 242 251
쉬어 가는 면
넓은 배경과 카드에 써서 화면에 숨 쉴 틈을 만듭니다.
- 흰 글씨
- 1.1:1 사용 안 함
- 네이비 글씨
- 13.7:1 AAA
Sun#FFD66BRGB 255 214 107
따뜻한 온도
캠페인과 감사 인사처럼 마음을 전하는 자리에 아주 적게 씁니다.
- 흰 글씨
- 1.4:1 사용 안 함
- 네이비 글씨
- 11.2:1 AAA
Paper#F7F9FARGB 247 249 250
기본 바탕
순백보다 눈이 편한 기본 바탕입니다. 사진과 카드가 그 위에 놓입니다.
- 흰 글씨
- 1.1:1 사용 안 함
- 네이비 글씨
- 14.7:1 AAA
색은 많이 쓰지 않고,
정해진 자리에만 씁니다.
한 화면에서 바탕과 글자가 대부분을 차지하고, 블루는 브랜드를 알리는 자리에, 라임은 행동을 권하는 자리에만 놓입니다. 비율을 정해 두면 캠페인이 늘어나도 홈페이지 전체의 인상이 흔들리지 않습니다.
COLOR VISION CHECK
누구의 눈으로 봐도
누구의 눈으로 봐도
같은 길이 보이도록.
색약이 있는 사람에게 화면이 어떻게 보이는지 시뮬레이션해 확인했습니다. 블루와 라임은 밝기 차이가 커서 어느 조건에서도 구분되고, 신청 상태처럼 중요한 정보는 색과 함께 글자로 적었습니다.
TYPOGRAPHY반듯하고 끝이 부드러운 글자
보통의
하루
CI 소개에는 「반듯하면서도 끝처리가 부드러운 서체가 정직하고 투명한 기부문화를 뜻한다」고 적혀 있습니다. 웹에서는 같은 인상을 지닌 Pretendard 한 가족으로 제목부터 본문까지 정리했습니다.
- Display94 / 800
- Heading52 / 800
- Title27 / 800
- Body18 / 400 · 행간 1.7
- Caption15 / 500
TRY IT · 글자 크기글자를 키워도
글자를 키워도
화면이 무너지지 않게.
시안의 상단에는 글자 크기를 세 단계로 바꾸는 버튼이 있습니다. 모든 크기를 같은 기준에서 계산하도록 만들어, 글자가 커지면 줄 간격과 버튼도 함께 커집니다.
배분알리미 · 신청 중
재활 보조기구 지원사업 2차 신청 안내
필요한 보조기구를 마련할 수 있도록 구입비를 지원합니다. 신청 자격을 확인한 뒤 서류를 준비해 주세요.
신청 방법 보기 →GRAPHIC SYSTEM동그라미 하나와 줄기 하나
심벌에서 꺼낸
두 개의 도형으로 모든 것을.
동그라미는 사람과 마음을, 줄기는 자라는 시간을 뜻합니다. 두 도형만으로 사진의 틀, 숫자, 아이콘, 패턴을 만들어 어느 화면에서든 푸르메재단이라는 것을 알아볼 수 있게 했습니다.
05 / DESIGN DIRECTIONS같은 브리프, 네 개의 숲
하나의 정답을 그리기 전에,
네 가지 가능성을 펼쳤습니다.
같은 사실과 같은 팔레트에서 출발해도 무엇을 먼저 보여 주느냐에 따라 홈페이지의 성격은 크게 달라집니다. 심벌의 언어, 사람의 하루, 신뢰의 숫자, 참여의 에너지라는 네 방향으로 메인 페이지를 끝까지 그려 보았습니다.
아래 화면은 실제로 제작한 시안입니다. 스크롤을 내리면 각 시안의 메인 페이지가 위에서 아래로 넘어갑니다.
최종 제안
Growing Forest자라는 숲
심벌의 세 나무를 홈페이지 전체의 언어로 넓혔습니다. 동그라미는 사진과 숫자를 담는 틀이 되고, 줄기는 이야기를 잇는 선이 됩니다.
- 방문 목적에 따라 갈라지는 세 갈래 첫 화면
- 심벌의 세 나무로 보여 주는 숫자
- 새싹에서 숲으로 이어지는 사업 소개
Pretendard ExtraBold · 화이트 바탕
탐색 시안
Ordinary Days보통의 하루
잡지 한 권을 읽듯 장애인과 가족의 하루를 따라가는 방향입니다. 큰 명조 제목과 다큐멘터리 사진이 이야기를 먼저 건넵니다.
- 표지 사진과 「이번 호에서」로 여는 첫 화면
- 아침의 치료실부터 저녁의 집까지, 하루의 시간으로 읽는 네 가지 사업
- 종이 같은 바탕과 각주로 읽는 숫자
Noto Serif KR · Pretendard
탐색 시안
Clear Numbers투명한 숫자
후원을 결정하는 이유는 신뢰라는 데서 출발했습니다. 연차보고서처럼 숫자와 시간의 흐름을 첫 화면에 둡니다.
- 925만 명을 점으로 보여 주는 첫 화면
- 2005년부터 이어진 시간의 막대
- 어두운 바탕 위의 블루와 라임 데이터
Pretendard · Mono 라벨
탐색 시안
Run Together함께 달리는
푸르메런의 에너지를 홈페이지 전체로 옮겼습니다. 트랙의 곡선과 큰 글자가 보는 사람을 참여로 이끕니다.
- 트랙 곡선이 사진을 감싸는 블루 첫 화면
- LANE 01~04로 이어지는 캠페인과 사업
- 결승선 무늬의 스코어보드 숫자
Pretendard Black · Anton
DECISION무엇을 기준으로 골랐을까요?
예쁜 시안보다
길을 잃지 않는 시안을.
여섯 가지 기준으로 네 시안을 함께 평가했습니다. 가장 무게를 둔 기준은 지원이 필요한 가족이 첫 화면에서 길을 찾을 수 있는지였습니다. 재단 홈페이지에 오는 사람 가운데 가장 급한 사람이기 때문입니다.
평가 기준A · 자라는 숲B · 보통의 하루C · 투명한 숫자D · 함께 달리는
CI와의 일관성
처음 온 사람의 이해
후원으로 이어지는 길
지원이 필요한 가족의 길 찾기
운영과 확장
접근성
B · 보통의 하루
사진의 기준과 이야기 카드
C · 투명한 숫자
숫자를 앞에 두는 투명경영 영역
D · 함께 달리는
캠페인 페이지의 에너지
A · 자라는 숲최종 제안안
채택하지 않은 시안의 장점은 버리지 않고 A 안으로 옮겨 심었습니다.
- 01듣기재단 자료와 운영 중인 홈페이지 살펴보기
- 02나누기방문 이유로 세 사람 정의하기
- 03세우기심벌에서 브랜드 언어 꺼내기
- 04그리기메인 페이지 시안 네 가지
- 05고르기여섯 가지 기준으로 함께 평가
- 06다듬기후원 흐름과 접근성 기준 정리
06 / DONATION FLOW후원은 세 번의 선택으로
입구는 하나로,
선택은 세 번으로.
흩어져 있던 후원 입구를 하나로 모으고, 방법과 금액, 마음을 보탤 곳만 고르면 신청서로 넘어가도록 정리했습니다. 오른쪽 화면에서 직접 눌러 볼 수 있습니다.
- 첫 화면에서 금액부터 묻지 않습니다.
- 고른 내용은 언제든 되돌릴 수 있습니다.
- 신청 전에 고른 내용을 한 번 더 보여 줍니다.
- 키보드만으로도 끝까지 갈 수 있습니다.
푸르메와 함께 자라기시안 화면
고른 내용매월 30,000원 · 재활의료
신청서 작성하기 →
07 / INFORMATION ARCHITECTURE메뉴도 한 그루의 나무처럼
자료를 나열하는 메뉴에서,
할 일을 고르는 메뉴로.
메뉴 이름은 기관의 조직도보다 방문한 사람의 목적에 가깝게 바꾸었습니다. 「자료센터」는 사람의 이야기가 모인 「이야기」로, 「참여하기」는 함께하자는 뜻의 「함께하기」로 고쳤습니다.
푸르메재단
기존 「참여하기」함께하기
- 정기 후원
- 일시 후원
- 진행 중인 캠페인
- 기념일 기부
- 기업 사회공헌
- 내 후원 내역 · 영수증
기존 「사업소개」하는 일
- 재활의료
- 장애가족 지원
- 지역사회 복지
- 자립 지원
- 푸르메 기관 6곳
기존 「자료센터」이야기
- 스토리
- 언론 보도
- 뉴스레터 · 소식지
- 갤러리
- 출판
기존 「재단소개」재단 소개
- 비전과 미션
- 연혁
- 투명경영
- 조직 · 홍보대사
- 채용
- 오시는 길
모든 화면 상단에 따로지원 찾기
배분알리미 · 신청 안내 · 쉬운 글 안내
08 / ACCESSIBILITY장애인 재단의 홈페이지라면
접근성은 기능이 아니라
재단의 태도입니다.
장애인의 보통의 삶을 말하는 재단이라면 홈페이지부터 누구나 쓸 수 있어야 합니다. 디자인을 시작하기 전에 접근성 기준을 먼저 정하고, 모든 시안을 그 기준으로 확인했습니다.
- 4.5:1명도 대비
본문 글자와 바탕은 4.5:1 이상을 지킵니다.
- Tab키보드 이동
마우스 없이도 후원 신청까지 갈 수 있고, 지금 위치가 또렷하게 보입니다.
- Alt대체 텍스트
사진마다 장면을 설명하는 글을 달아 화면 낭독기로도 이야기를 듣습니다.
- 가+글자 크기
세 단계로 키워도 줄이 넘치거나 버튼이 겹치지 않습니다.
- Motion움직임 줄이기
기기에서 움직임 줄이기를 켜면 장식 애니메이션을 멈춥니다.
- 쉬운 글쉬운 글 안내
지원 공고는 발달장애인과 가족이 읽기 쉬운 문장으로도 제공합니다.
재활 보조기구 지원사업 2차 신청 안내
장애아동·청소년의 재활에 필요한 보조기구 구입비를 지원합니다. 신청 자격과 제출 서류를 확인하신 뒤, 신청서와 증빙 서류를 갖추어 정해진 기간 안에 제출해 주시기 바랍니다. 선정 결과는 배분알리미에 공지합니다.
보조기구를 살 돈을 도와드려요
- 몸에 맞는 보조기구가 필요한가요?
- 신청할 수 있는지 먼저 확인해요.
- 신청서와 서류를 준비해요.
- 정해진 날까지 보내 주세요.
- 결과는 배분알리미에서 알려 드려요.
예시 문구입니다. 쉬운 글은 짧은 문장, 한 문장에 한 가지 정보, 그림 번호를 원칙으로 씁니다.
DESIGN SYSTEM같은 숲에서 자란
같은 숲에서 자란
부품들
버튼과 태그, 카드와 숫자 나무까지. 캠페인 담당자가 바뀌어도 같은 화면을 만들 수 있도록 부품 단위로 정리했습니다.
CAMPAIGN TEMPLATE캠페인이 바뀌어도,
캠페인이 바뀌어도,
숲은 같은 숲입니다.
캠페인 이름, 동그라미 안의 대표 장면, 한 문장 약속, 참여 버튼. 네 가지 자리만 지키면 색과 그림이 달라도 한 재단의 캠페인으로 읽힙니다.
만원의
기적
아이들이 재활치료를
멈추지 않도록.
오늘도
굿잡
출근하는 하루가
자립이 됩니다.
푸르메
저꿈통
5천원부터
작은 저금통이
아이의 꿈을 키웁니다.
미라클
데이
나의 기념일이
누군가의 기적이 되는 날.
2026
푸르메런
다르게 달려도,
같은 결승선으로.
09 / MOBILE한 손으로, 끝까지
손안의 화면에서도
길은 세 갈래로.
홈페이지를 처음 여는 곳이 휴대폰인 경우가 많습니다. 작은 화면에서는 세 갈래 길을 첫 화면 아래에 바로 세우고, 후원 버튼은 엄지가 닿는 오른쪽 아래에 두었습니다.
- 세로로 이어지는 캠페인 카드
- 엄지가 닿는 자리의 후원 버튼
- 숫자 나무는 한 그루씩 세로로
- 글자 크기 조절은 메뉴 안에서도
10 / AND TODAY제안은 제안으로, 질문은 남아서
리뉴얼 제안은
최종 채택되지 않았습니다.
그래도 질문은 남았습니다.
푸르메재단 홈페이지는 지금의 구조로 운영되고 있고, 블루캔버스는 캠페인과 공지, 후원 페이지를 계속 함께 관리하고 있습니다.
제안 과정에서 세운 질문은 지금도 운영의 기준이 됩니다. 이 화면에 누가 오는지, 무엇을 가장 먼저 보여 줘야 하는지, 누구도 길을 잃지 않으려면 무엇이 필요한지를 먼저 묻습니다.
YOUR ORGANISATION, SEEN WITH CARE.
당신의 단체에는
당신의 단체에는
어떤 숲이 자라고 있나요?
재단과 공공기관, 비영리 단체의 홈페이지는 후원자와 이용자, 직원이 모두 쓰는 곳입니다.
누가 오는지부터 함께 정리하겠습니다.
- Client
- 푸르메재단
- Scope
- 리서치, 정보 구조, 브랜드 경험 전략, UI 디자인, 접근성 기준, 모션 프로토타입
- Brand
- CI와 심벌: 푸르메재단 제공 · 해석과 웹 적용: 블루캔버스
- Status
- 리뉴얼 제안 (최종 미채택) · 운영 중인 홈페이지 관리
