플러스프로젝트 배경
1) 문제점 재단 홈페이지를 새로 만들려는 곳에서 시안 3종을 요청하면, 검토 단계에서 늘 같은 일이 반복됩니다. 시안이 각각 다른 파일로 오기 때문에 회의 자료를 만들려면 화면을 캡처해 오려 붙이고 높이를 맞춰야 하고, 그렇게 맞춰 놓아도 A안의 어느 부분과 B안의 어느 부분이 같은 자리인지 다시 설명해야 합니다. 의견을 주실 때도 "세 번째 시안 중간쯤"이라고 말로 지목하게 됩니다. 여기에 더
프로젝트 성과
메인 시안 3종 · 같은 콘텐츠 공유
A 이야기와 B 기록, C 참여 세 방향을 같은 카피와 숫자로 세워 비교의 변수를 구조·타이포·밀도로 좁혔습니다.
섹션 키 동기 스크롤 · 픽셀이 아닌 섹션으로 맞춤
한 캔버스를 scrollTop 170으로 옮기자 나머지 두 캔버스가 0과 143으로 갔습니다. 값이 서로 다른 것이 픽셀이 아니라는 증거입니다.
대비 위반 0건 · 텍스트 378개 노드 전수
액센트를 글씨로 쓸 때 미달한 6종을 글씨 전용 토큰으로 분리해, 세 안과 셸 전체에서 위반을 0으로 맞췄습니다.
화면 상태 URL 공유
보기 모드와 슬롯 구성, 섹션 라벨이 주소에 담깁니다. 검토 의견을 주실 때 링크로 그 자리를 지목하실 수 있습니다.
폰트 4종 self-host · 외부 CDN 0건
한글 서브셋이 없어 디스플레이 폰트가 통째로 폴백되던 문제를 폰트 파일 직접 선언으로 풀었고, 빌드가 로컬 파일만 씁니다.
핵심 기능
시안 3종 · 같은 콘텐츠, 다른 구조
A는 사람과 사례를, B는 지표와 기부금 사용 내역을, C는 참여 경로를 먼저 놓습니다. 카피와 숫자는 세 안이 공유합니다.
진행 단계
공고 해석 · 범위 확정
2026.09.
공고 본문의 "PC(웹) 메인 시안만"을 정본으로 읽고, 재단명과 CI가 없는 상태에서 가상 재단을 세우기로 정했습니다.
프로젝트 상세
1) 소개 재단 홈페이지의 방향을 정할 수 있도록 메인 페이지 디자인 시안 3종과, 이를 나란히 비교하는 검토용 뷰어를 함께 만든 제안용 데모입니다. 공고에 재단명과 CI, 로고, 기존 사이트가 없어 가상 재단을 세웠고, 셸 배지와 세 시안의 푸터에 가상이라는 사실을 적어 두었습니다. 세 안은 색이 아니라 구조로 갈립니다. A안은 사람과 사례를 먼저 놓고(명조 계열 · 테라코타 · 넓은 여백), B
