01 · 이해
공고를 이렇게 읽었습니다
먼저 저희가 무엇을 읽었는지부터 확인해 주십시오. 아래 인용은 공고에 적어 주신 문장 그대로이고, 그 아래 한 줄이 저희가 읽은 뜻입니다. 다르게 읽은 곳이 있으면 그 자리에서 눌러 표시해 주시면 됩니다.
“신규 구축 예정인 재단 홈페이지의 방향성을 결정하기 위해, 메인 페이지 디자인 시안을 도출하는 프로젝트입니다.”
“재단의 성격에 부합하는 ‘깔끔하고 따뜻한 느낌’
신뢰감을 주면서도 대중에게 친근하게 다가갈 수 있는 분위기”
“고도화 프로젝트를 의뢰 예정입니다. 미팅 시 논의가 필요합니다.”
공고에 적어 주신 항목을 하나씩 확인했습니다
빠뜨린 것이 있는지 이 표로 확인해 주십시오. 오른쪽 버튼을 누르면 해당 화면으로 이동합니다.
| 공고에 적어 주신 것 | 저희 대응 | |
|---|---|---|
| 메인 페이지 디자인 시안 3종 제작 | ✓서로 다른 축의 세 방향(사람·기록·여백)을 잡고 근거를 정리했습니다 완성 시안 3종은 계약 후 재단 자료로 만듭니다 |
|
| 현재 단계에서는 PC(웹) 버전의 메인 시안 작업만 | ✓구조 도면도 PC 1440px 기준. 모바일은 이번 범위에서 제외했습니다 | |
| 제안해주신 3가지 시안을 바탕으로 내부 검토를 거칠 예정 | ✓내부 검토용 1페이지 비교표 · 의견 표시 화면을 함께 드립니다 | |
| 재단의 성격에 부합하는 ‘깔끔하고 따뜻한 느낌’ | ✓레퍼런스 9장 · 팔레트 · 서체 규칙으로 근거를 남겼습니다 | |
| 신뢰감을 주면서도 대중에게 친근하게 다가갈 수 있는 분위기 | ✓두 축의 좌표로 세 방향을 잡고, 레퍼런스 9장으로 근거를 남겼습니다 | |
| 산출물 — 디자인 원본 파일 (Figma, PSD 등 작업 툴 협의) | ✓Figma 원본 + 컬러·서체 정리본 + 화면 주소를 함께 드립니다 | |
| 재단·공공기관·비영리 단체 홈페이지 디자인 경험 우대 | ✓법으로 정해진 고지 항목을 화면에 앉혀 본 경험이 있습니다 (아래 설명) | |
| 고도화 프로젝트를 의뢰 예정 · 미팅 시 논의 | ✓시안을 만든 사람이 그대로 구축까지 이어받는 경우의 이점을 정리했습니다 | |
| 우선 순위 — [1순위] 산출물 완성도 [2순위] 금액 [3순위] 일정 | ✓완성도를 지키기 위한 확인 지점을 일정 안에 날짜로 박아 두었습니다 | |
| 협업 예정 인력 — 자사 서비스 기획 1명 | ✓기획 담당자 한 분과 바로 붙는 방식으로 일정을 짰습니다 | |
| 기획 상태 — 필요한 내용을 간단히 정리한 상태 | ✓비어 있는 정보는 지어내지 않고 확인 질문으로 정리했습니다 | |
| 착수 미팅 및 진행 간 미팅 — 온라인·오프라인 모두 가능 | ✓온라인 기준으로 3회 지점을 잡았고, 오프라인도 가능합니다 (강남구) |
재단 홈페이지에서 저희가 특히 신경 쓰는 것
‘예쁘게’ 말고, 재단이라서 생기는 조건들입니다.
공시 항목이 화면 안에 자리가 있어야 합니다
결산서류·사업보고·정관 같은 자료는 나중에 붙이면 항상 구석으로 밀립니다. 메인 시안 단계에서 자리를 먼저 잡아 두는 것이 재단 사이트에서 가장 자주 놓치는 지점입니다.
글이 적어도 비어 보이지 않아야 합니다
재단 사이트는 초기에 콘텐츠가 적습니다. 사진 3장·소식 2건으로도 완성돼 보이게, 콘텐츠가 적을 때의 화면을 기준으로 여백과 카드 크기를 잡았습니다.
어르신도 읽을 수 있어야 합니다
후원자·수혜자 연령대가 넓습니다. 도면부터 본문 16px 이상 · 대비 기준 충족을 전제로 잡았고, 작게 쓰고 싶은 유혹이 생기는 자리를 미리 막아 두었습니다.
02 · 방향
‘깔끔하고 따뜻하게’를 좌표로 옮겼습니다
네 낱말(깔끔·따뜻·신뢰·친근)은 말로만 두면 세 안이 다 비슷해집니다. 두 개의 축으로 바꿔 세 지점을 정하고, 각 지점마다 참고한 화면을 함께 붙였습니다. 아래 이미지는 저희 작업물이 아니라 톤을 맞추기 위해 모은 외부 참고 자료입니다.
사람이 먼저 보이는 재단
따뜻함을 가장 앞에 둡니다. 첫 화면에서 사람이 보이고, 숫자는 그 뒤를 받칩니다. 재단이 무엇을 했는가보다 누구에게 닿았는가를 먼저 말하는 구성입니다.
색
따뜻한 종이색을 바탕으로 두고 테라코타 한 색만 강조에 씁니다. 강조색을 하나로 묶어야 사업이 늘어도 화면이 흐트러지지 않습니다.
글자와 형태
· 제목은 크고 굵게, 줄 간격은 넉넉하게 — 읽는 속도를 늦춥니다
· 사진 모서리 한 곳만 크게 둥글려 딱딱함을 뺍니다
· 인용문(수혜자·후원자의 말)을 정식 섹션으로 둡니다
· 후원 버튼은 어두운색 — 강조색과 경쟁시키지 않습니다
기록으로 신뢰를 만드는 재단
신뢰를 가장 앞에 둡니다. 첫 화면에 연차보고서와 공시가 올라오고, 성과는 숫자로 말합니다. 기관·기업 후원자와 심사 기관이 자주 들어오는 재단에 맞는 구성입니다.
색
깊은 남색이 기본, 골드는 아주 조금만 씁니다. 공공·기관 사이트에서 가장 오래 견디는 조합이고, 인쇄물로 옮겨도 무너지지 않습니다.
글자와 형태
· 굵은 가로선으로 구역을 나눕니다 — 목차처럼 읽힙니다
· 사업은 카드가 아니라 번호 붙은 목록 — 늘어나도 안 깨집니다
· 공시 자료를 표로 첫 화면 가까이에 올립니다
· 숫자는 남색으로 크게 — 성과가 먼저 눈에 들어옵니다
여백이 예의가 되는 재단
깔끔함을 가장 앞에 둡니다. 요소를 줄이고 여백을 넓혀, 콘텐츠가 적어도 완성돼 보이게 합니다. 신규 구축이라 초기 자료가 많지 않을 때 가장 안전한 구성입니다.
색
차분한 세이지에 살구색을 아주 조금 섞습니다. 녹색만 쓰면 환경단체로 읽히고, 살구색이 들어가면 사람 쪽으로 돌아옵니다.
글자와 형태
· 모서리를 크게 둥글립니다 — 문턱이 낮아 보입니다
· 첫 화면은 가운데 정렬 한 문장 — 사진이 없어도 성립합니다
· 소식은 표처럼 얇게 — 2건만 있어도 어색하지 않습니다
· 참여 방법 3가지를 같은 크기로 — 후원만 강요하지 않습니다
※ 위 9장은 톤을 맞추기 위해 수집한 외부 참고 이미지이며 저희 작업물이 아닙니다. 실제 시안에는 사용되지 않고, 방향 합의가 끝나면 재단의 실제 사진·자료로 대체됩니다.
03 · 골격
메인 페이지 실선 프로토타입
완성된 시안이 아니라 구조 도면입니다. 색·서체·사진을 뺀 상태에서 무엇이 어느 자리에 들어가야 하는지만 그렸습니다. 시안 3종은 계약 후 재단의 실제 사진·사업·문구를 받아 이 골격 위에 올립니다.
위 도면에서 칸을 하나 눌러 보십시오. 왜 그 자리에 그것이 있는지, 시안 단계에서 무엇을 정해야 하는지 나옵니다.
※ 이것은 완성 시안이 아니라 구조 도면입니다. 색·서체·사진·문구는 착수 미팅에서 방향을 정한 뒤 이 골격 위에 올립니다. 화면 안의 재단명·날짜는 가상 예시입니다.
04 · 쟁점
세 방향 중 하나로 좁히는 방법
“제안해주신 3가지 시안을 바탕으로 내부 검토를 거칠 예정”이라고 하셨습니다. 시안만 드리면 검토가 취향 투표가 되기 쉬워서, 판단 기준표와 의견 표시 화면을 함께 만들었습니다.
내부 검토용 비교표
그대로 회의에 띄우실 수 있게 한 페이지로 정리했습니다.
| A안 · 사람이 먼저 | B안 · 기록이 신뢰 | C안 · 여백이 예의 | |
|---|---|---|---|
| 첫 화면이 말하는 것 | “이 사람들과 함께합니다” | “이만큼 해 왔고 전부 공개합니다” | “오래 이어 온 곳입니다” |
| 가장 잘 맞는 재단 | 수혜자 얼굴을 보여줄 수 있고 개인 후원을 늘리고 싶은 경우 |
기관·기업 후원과 심사가 많고 공시 자료가 중요한 경우 |
초기라 콘텐츠·사진이 적고 차분한 인상이 필요한 경우 |
| 필요한 준비물 | 인물 사진 필요 초상권 동의 포함 |
연차보고서·결산 자료 연혁 자료 |
사진 없어도 가능 문구만으로 성립 |
| 깔끔 ↔ 따뜻 | 따뜻 쪽 | 깔끔 쪽 | 가운데 |
| 신뢰 ↔ 친근 | 친근 쪽 | 신뢰 쪽 | 가운데 |
| 약점 | 사진 품질에 결과가 좌우됩니다 | 자료가 적으면 비어 보입니다 | 특징이 옅어 기억에 덜 남습니다 |
| 이후 확장 | 사업이 늘면 카드가 길어집니다 | 사업·자료가 늘수록 강해집니다 | 사업이 5개를 넘으면 재구성 필요 |
미리 말씀드릴 것 세 가지
쟁점 1세 방향이 비슷하면 고를 수가 없습니다
비슷하게 예쁜 3개를 받으면 회의가 “저는 이게 나은데요”로 끝납니다. 그래서 일부러 축을 벌렸습니다. 셋 중 하나를 고르는 순간 재단이 무엇을 먼저 말할지가 같이 정해지도록 만들었습니다.
쟁점 2A안은 사진이 없으면 무너집니다
사람이 먼저 보이는 구성은 사진 품질이 곧 결과입니다. 현재 쓸 수 있는 사진이 없다면 A안은 촬영 일정이 함께 잡혀야 하고, 그게 어려우면 C안이 안전합니다. 이건 미팅에서 먼저 확인하고 싶은 부분입니다.
쟁점 3메인은 ‘무엇을 먼저 누르게 할지’로 정해집니다
후원인지, 사업 신청인지, 자료 열람인지에 따라 첫 화면 구성이 완전히 달라집니다. 지금은 세 안이 각각 다른 답을 갖고 있습니다. 가장 눌렸으면 하는 버튼 하나를 정해 주시면 그 기준으로 좁혀 드리겠습니다.
쟁점 4시안 단계에서 자리를 안 잡으면 나중에 못 넣습니다
공시 자료·게시판·검색·언어 전환처럼 나중에 반드시 필요해지는 것들이 있습니다. 메인 시안에서 자리를 비워 두기만 해도 다음 구축이 훨씬 수월해집니다. 구조 도면에 이 자리를 미리 잡아 두었습니다.
착수 미팅에서 여쭙고 싶은 것
“필요한 내용을 간단히 정리한 상태”라고 하셔서, 비어 있는 부분을 추측해 채우지 않았습니다. 아래만 정해지면 시안 방향은 바로 좁혀집니다.
장학·연구·문화·복지·지역 중 어디에 무게가 있는지에 따라 첫 화면 구성이 갈립니다. 3안 선택에 가장 큰 영향을 줍니다.
후원 / 사업 신청 / 자료 열람 / 재단 소개 중 하나로 정해 주시면 나머지는 그 아래로 배치합니다.
있으면 A안이 가장 강합니다. 없거나 초상권 확인이 어려우면 C안을 권해 드립니다.
결산서류·사업보고서·정관·이사회 회의록 등 공개 범위를 알려 주시면 자리와 형태를 맞춰 두겠습니다.
있으면 3안 모두 그 기준에 맞춰 다시 정리합니다. 없으면 이번 시안에서 함께 제안드립니다.
대상이라면 글자 크기·색 대비·키보드 조작을 시안 단계부터 기준에 맞춰 그려 두는 편이 훨씬 쌉니다.
05 · 구조
이 시안은 이미 웹 화면입니다
“고도화 프로젝트를 의뢰 예정”이라고 적어 주셔서, 구조 도면부터 그림으로 그리지 않았습니다. 앞 장에서 보신 도면은 이미지가 아니라 브라우저에서 실제로 도는 화면입니다. 시안과 구현 사이에서 흔히 생기는 손실을 처음부터 없애 두는 방식입니다.
시안을 그림으로 그릴 때 생기는 일
보통의 경우
- 디자이너가 그림으로 시안을 만든다
- 개발사가 그 그림을 보고 다시 만든다
- 여백·글자 크기·움직임이 조금씩 달라진다
- “시안이랑 다른데요”가 나오고, 고치는 데 비용이 붙는다
- 글이 길어지거나 사진이 없을 때 어떻게 되는지는 만들어 봐야 안다
이번 방식
- 시안을 화면 그대로 만든다 (지금 보고 계신 것)
- 글이 길어지거나 사진이 없을 때 어떻게 되는지 그 자리에서 확인된다
- 색·서체·간격이 값으로 정리돼 있어 다음 구축에 그대로 넘어간다
- 구축을 다른 곳에 맡기셔도 이 정리본을 그대로 전달하시면 된다
- 저희가 이어서 맡게 되면 다시 만드는 구간이 없다
※ 이번 계약 범위는 메인 시안 3종까지입니다. 위 내용은 이후 고도화를 염두에 두고 시안을 어떤 형태로 만들어 두겠다는 설명이며, 구축 비용이 이번 금액에 포함된다는 뜻은 아닙니다.
시안과 함께 정리해 두는 것
다음 단계에서 누가 맡든 바로 쓸 수 있는 형태로 남깁니다.
색과 글자
강조색·바탕색·글자 크기·줄 간격을 값으로 정리합니다. “이 파란색이 뭐였죠?”가 안 생깁니다.
반복 부품
버튼·카드·목록처럼 여러 번 나오는 것을 부품으로 정리합니다. 페이지가 늘어도 모양이 어긋나지 않습니다.
빈 상태
소식이 0건일 때, 사진이 없을 때 화면이 어떻게 보이는지 함께 그립니다. 신규 구축에서 가장 자주 빠지는 부분입니다.
공시 자리
결산·사업보고·정관이 들어갈 자리를 메인과 푸터에 미리 잡아 둡니다. 나중에 붙이면 구석으로 밀립니다.
고도화 단계에서 필요해지는 것들 — 미리 자리를 잡아 두었습니다
지금 만들지는 않지만, 시안에 자리가 있으면 나중에 훨씬 저렴해집니다.
이후담당자가 직접 고치는 화면
공지·소식·자료·사진·팝업을 개발사를 부르지 않고 직접 바꾸실 수 있는 관리 화면입니다. 재단은 사업 주기마다 내용이 바뀌기 때문에, 이게 없으면 매번 비용이 듭니다.
이후자료실과 공시 표
결산서류·사업보고서를 이미지가 아니라 표 데이터로 관리하면 수정도 쉽고 검색에도 걸립니다. 법으로 공개가 정해진 항목을 다뤄 본 경험에서 나온 방식입니다.
이후신청·후원 접수
장학·연구 신청, 후원 신청처럼 개인정보가 들어오는 화면입니다. 접수 즉시 담당자에게 알려 주고, 보관 기간이 지난 기록은 자동으로 지워지게 만들어 둡니다.
이후검색과 접근성
재단 이름·사업명으로 검색했을 때 나오도록 만드는 작업과, 글자 크기·색 대비·키보드 조작 기준을 맞추는 작업입니다. 시안 단계에서 정해 두면 나중에 다시 안 그립니다.
이런 일을 해 왔습니다
디자인만 하는 곳도, 개발만 하는 곳도 아닙니다. 아래는 기획·디자인·개발·배포를 한 손으로 진행한 사례입니다.
기관형 홈페이지 전면 재편
본문이 전부 이미지라 검색에 한 글자도 안 잡히던 사이트를, 46개 화면을 다시 짜서 텍스트 기반으로 바꿨습니다. 전문가가 아니어도 자기 상황부터 찾아 들어갈 수 있게 정보 구조를 다시 설계했습니다.
법으로 정해진 고지 항목 설계
법이 공개하도록 정한 항목을 사진이 아니라 표 데이터로 관리하게 만들어, 담당자가 직접 고칠 수 있고 검색에도 걸리게 했습니다. 재단의 결산·사업보고 공시와 같은 구조입니다.
담당자가 직접 고치는 관리 화면
메인 사진과 문구, 공지 팝업, 표 자료를 코드를 건드리지 않고 바꾸실 수 있게 만들었습니다. 신청 폼으로 들어온 개인정보가 보관 기간이 지나면 자동으로 지워지도록도 함께 만들었습니다.
06 · 진행
30일을 이렇게 씁니다
공고에 적어 주신 예상 기간 30일을 기준으로 역산했습니다. 우선순위 1순위가 산출물 완성도라고 하셔서, 확인 지점을 날짜로 박아 두었습니다. 협업 인력이 기획 담당자 한 분이라 창구를 하나로 두는 방식으로 짰습니다.
일정
재단 자료를 받아 읽고, 쟁점 탭의 여섯 가지를 확인합니다. 온라인·오프라인 모두 가능합니다.
참고 화면을 다시 모아 함께 보고, 색과 서체 방향을 정합니다. 여기서 정한 것이 3안 전체의 기준이 됩니다.
오늘 보신 형태로, 실제 재단 내용을 넣어 만듭니다. 그림이 아니라 눌러 보실 수 있는 화면 주소로 드립니다.
2차 미팅. 여기까지는 방향을 바꾸셔도 추가 비용이 들지 않습니다. 이후에는 고른 방향 안에서 다듬는 작업이 됩니다.
3안을 그대로 유지할지, 하나를 골라 나머지 요소를 섞을지 정해 반영합니다. 의견은 화면 위에서 바로 표시하실 수 있게 드립니다.
여백·글자 크기·대비를 기준에 맞춰 마지막으로 다듬고, 원본 파일의 레이어와 이름을 정리합니다.
원본 파일과 정리본을 전달하고, 다음 구축 단계에서 어떻게 쓰는지 설명드립니다.
드리는 것
산출물
- 디자인 원본 파일 — Figma 기준 (PSD 등 다른 툴이 필요하시면 협의)
- PC(1440px) 메인 페이지 시안 3종 전체
- 색·서체·간격 정리본 — 다음 구축에서 그대로 쓰는 형태
- 눌러 볼 수 있는 화면 주소 — 오늘 보신 것과 같은 형태
- 내부 검토용 비교표 1장
이번 범위에 들어가지 않는 것
- 모바일 시안 — 공고대로 이번 단계에서 제외했습니다
- 메인 외 하위 페이지 시안
- 홈페이지 구축·개발 — 이후 고도화 단계
- 사진 촬영 — 필요하시면 별도로 협의드리겠습니다
범위를 미리 적어 두는 편이 나중에 서로 덜 곤란합니다.
완성도를 지키는 방법
매번 화면으로 확인하십니다
문서로 설명드리지 않고 눌러 볼 수 있는 주소로 드립니다. 말로 오가는 오해가 줄어듭니다.
되돌릴 지점을 날짜로 정합니다
15일차까지는 방향을 바꾸셔도 추가 비용이 들지 않습니다. 언제까지 결정하면 되는지가 분명해집니다.
저희 과오는 무상으로 고칩니다
저희 실수로 생긴 부분은 납품 후에도 무상으로 수정해 드립니다. 다만 그런 일이 없도록 납품 전 검수를 먼저 하겠습니다.
07 · 추가
만든 다음까지 생각했습니다
홈페이지의 목적은 만들어지는 것이 아니라 사람이 찾아오는 것입니다. 아래는 이후 구축 단계로 이어질 때 함께 해 드리는 것들이고, 이번 시안 단계에서도 자리를 미리 잡아 둡니다.
구축 시검색했을 때 나오게 만드는 작업
흔히 SEO라고 부르는 일입니다. 쉽게 말하면 사람들이 검색창에 치는 말로 재단이 나오게 만드는 작업입니다. 재단 이름은 물론이고 ‘○○ 장학금 신청’처럼 실제로 치는 말을 조사해 문서로 정리해 드리고, 그 말이 화면 안에 들어가도록 구조를 잡습니다.
구축 시AI 검색이 재단을 인용하게 만드는 작업
요즘은 검색을 AI에게 물어보는 경우가 늘었습니다. AI가 답할 때 재단의 자료를 근거로 인용하도록 정보를 정리해 두는 작업입니다. 사업명·대상·신청 기간처럼 자주 물어보는 내용이 기계가 읽을 수 있는 형태로 있어야 합니다.
시안 단계어르신도 읽을 수 있는 기준
재단 홈페이지는 방문자 연령대가 넓습니다. 글자 크기·색 대비·키보드만으로 조작 가능한지를 시안을 그릴 때부터 기준에 맞춰 둡니다. 나중에 맞추려면 화면을 다시 그려야 합니다.
시안 단계문구를 함께 다듬어 드립니다
디자인만 좋고 문구가 딱딱하면 ‘따뜻한 느낌’이 나오지 않습니다. 메인에 들어가는 문장을 재단이 쓰는 말투로 함께 정리해 드립니다. 쓰신 초안이 있으면 그것을 기준으로 다듬습니다.
※ 위 항목은 해당 시점에 함께 제공해 드리는 범위이며, 별도의 유지보수 계약이나 추가 과금을 전제로 하지 않습니다.
마지막으로
재단 홈페이지는 화려해서 좋은 사이트가 되기 어렵습니다. 하는 일이 분명하게 보이고, 자료가 제자리에 있고, 누구나 읽을 수 있으면 그게 재단에게는 가장 좋은 화면이라고 생각합니다. 시안 세 개를 그렇게 만들었고, 고르신 뒤의 이야기까지 준비해 두었습니다.
화면 시연용 프로토타입입니다 · 재단명·수치·연혁·인용은 모두 가상 예시이며 실제 자료가 아닙니다
방향 탭의 참고 이미지는 톤 합의를 위해 수집한 외부 자료이며 저희 작업물이 아닙니다