[한가협 홈페이지 헌법 v6 — 2026-07-19 정제 개정본] ※ 이 문서는 한국가족단체협의회(이하 "한가협") 공식 홈페이지 프로젝트의 현재 유효한 불변 원칙만 담는다. ※ 과거 결정 과정·커밋·배포 이력·콘텐츠 건수·다음 작업은 작업로그 또는 시즌 아카이브에 둔다. ※ 개정 시 새 내용을 위에 덧붙이지 않는다. 폐기된 규칙은 제거하고 현재 유효한 본문으로 통합한다. ※ FPA 홈페이지는 별도 프로젝트다. 한가협의 브랜드·구조·콘텐츠와 혼합하지 않는다. ================================================================ ■ 0. 문서 운영 원칙 ================================================================ - 헌법은 정체성, 프로젝트 경계, 정보구조, 페이지 책임, 콘텐츠 모델, 디자인 원칙, 기술 불변식, URL 규약을 관리한다. - 작업로그는 현재 기준 상태, 완료 결과, 다음 작업, 미결 위험, 외부자료 백로그를 관리한다. - 장문의 진단·구현·감사 보고서는 별도 산출물로 분리하고 작업로그에는 결론과 참조만 남긴다. - 헌법과 작업로그는 항상 머지된 전체 본문으로 제공하며 변경분을 위에 누적하지 않는다. - 작업 방향이 크게 바뀌면 작업로그는 새 시즌으로 시작하고 이전 시즌은 동결 아카이브로 보존한다. - 한 대화창에서 하나의 작업 덩어리를 처리하고 종료 시 다음 창에 필요한 문서만 간결하게 갱신한다. - 기술·반응형 회귀 감사와 시각·사용성 감사는 목적·방법·종료 조건이 다른 별도 절차다. - 기술 감사의 P0·P1 0건은 해당 기술 범위의 중대한 파손이 없다는 뜻일 뿐 디자인 완성이나 추가 개선 불필요를 뜻하지 않는다. - 시각 감사는 자동 수치만으로 종료하지 않고 실제 스크린샷, 페이지별 근거, 비교 기준, 사용자 영향과 수정 방향을 남긴다. - `의도된 설계`라는 설명만으로 시각 문제를 검토 대상에서 제외하지 않는다. 의도와 실제 사용자 경험을 별도로 평가한다. - 최종 디자인 완료는 시각·사용성 감사 결과와 사용자 승인으로 확정한다. ================================================================ ■ 1. 정체성 / 프로젝트 경계 ================================================================ - 대상: 한국가족단체협의회. - 영문명: Federation for Korean Families. - 성격: 정치·종교·이념을 초월해 가족의 가치 회복과 건강한 가족문화 확산을 추진하는 시민사회 연대체. - 슬로건: "가정이 살아야 대한민국이 산다". - 대표: 황인자 상임대표. - 공식 규모: 전국 172개 협력단체, 10개 광역 지부. - 연락: 서울시 강동구 성내동 성내로 6길 50, 4층 / 02-477-0710 / hangahyup@naver.com. - 후원계좌: 농협 301-0371-9285-31 한국가족단체협의회. [협력단체와 단체회원] - 협력단체는 한가협과 연대·협력하는 넓은 네트워크다. - 단체회원은 공식 가입 절차를 거치는 회원 유형이다. - 172개 수치는 협력단체 현황이며 이를 단체회원 수로 표현하지 않는다. - 화면 명칭은 "조직·협력단체"로 통일한다. [홈페이지의 역할] - 홈페이지는 한가협이 누구인지, 무엇을 하는지, 실제로 계속 활동하는지를 보여주는 공식 공개 창구다. - 소개·활동영역·활동기록·공지·언론보도·자료·회원 참여·후원·문의 정보를 제공한다. - 조직의 살아있음은 과도한 인터랙션이 아니라 꾸준히 축적되는 활동소식과 검증 가능한 기록으로 증명한다. - 방문자 로그인, 회원 데이터 관리, 온라인 신청 처리, 온라인 결제, 후원 이력 관리는 현재 홈페이지 범위가 아니다. ================================================================ ■ 2. 대원칙 ================================================================ 1. 지금 필요한 공개 홈페이지를 충실히 만들되 URL과 콘텐츠 구조는 미래 확장에서도 부서지지 않게 한다. 2. 미래 기능을 미리 흉내 내지 않는다. 회원·인증·신청·결제는 별도 통합 플랫폼에서 다룬다. 3. 각 페이지는 가능한 한 하나의 핵심 사용자 질문에 책임진다. 4. 신규 페이지는 독립된 사용자 질문, 장기 지속성, 고유 검색 목적 또는 CTA, 명확한 콘텐츠 책임이 있을 때만 만든다. 5. 단순히 페이지가 길거나 화면이 심심하다는 이유만으로 페이지를 늘리거나 장식물을 추가하지 않는다. 6. 시각적 풍부함은 실제 사진, 수치, 사례, 활동 기록으로 만든다. 사실 없는 문구·성과·통계·프로그램·장식용 이미지를 만들지 않는다. 7. 받을 그릇과 페이지 역할을 먼저 확정한 뒤 콘텐츠를 이관한다. 추측 이관을 금지한다. 8. 하위 페이지 직접 유입에서도 단체 정체성, 현재 위치, 다음 행동을 이해할 수 있어야 한다. 9. 페이지의 주 CTA는 원칙적으로 1개, 보조 행동은 최대 2개로 관리한다. 10. 기술적으로 깨지지 않는다는 사실을 디자인·정보구조 완성으로 오인하지 않는다. 11. 자료가 부족하면 빈 공간을 허위 내용으로 채우지 않는다. 검증된 짧은 페이지와 조건부 섹션 생략을 정상 상태로 인정한다. 12. 기술·구조·콘텐츠·시각 문제와 외부자료 부족을 같은 결함으로 섞지 않는다. 13. overflow·404·broken image가 없다는 이유만으로 좋은 디자인이라고 판정하지 않는다. 14. 디자인 문제는 막연한 호불호가 아니라 정보 위계, 가독성, 밀도, 리듬, 이미지 활용, 행동 발견성, 페이지 역할과 같은 구체적 기준으로 설명한다. 15. 공통 컴포넌트와 일관성은 필요하지만 모든 페이지를 같은 Hero·카드·간격으로 복제하는 근거가 될 수 없다. 16. 외부 우수 사례는 비교 기준으로 활용하되 한가협의 실제 콘텐츠와 브랜드를 무시한 모방은 금지한다. ================================================================ ■ 3. 상단 메뉴와 전역 탐색 ================================================================ [상단 메뉴] - 데스크톱과 모바일 모두 다음 평면 6개 메뉴를 유지한다. · 홈 · 협의회 소개 · 주요 활동 · 알림마당 · 참여·후원 · 문의·오시는 길 - 계층형 상단 드롭다운은 도입하지 않는다. [로컬 서브내비게이션] - 같은 상위 영역의 페이지 사이를 이동할 수 있도록 공통 로컬 내비게이션을 제공한다. - 협의회 소개: · 협의회 소개 · 인사말 · 설립 배경과 비전 · 사명과 핵심가치 · 연혁 · 조직·협력단체 - 주요 활동: · 주요 활동 · 가족정책 연구와 제언 · 분과 활동과 가족교육 · 지역본부와 전국 네트워크 · 가족·생명존중 캠페인 · K-가족 문화행사 · 시민사회 연대와 미디어 - 알림마당: · 알림마당 · 공지사항 · 활동소식 · 언론보도 · 자료실 - 참여·후원: · 참여·후원 · 회원 참여 · 후원 - 상세 페이지에서는 가장 구체적인 소속 항목 하나만 현재 위치로 표시한다. - 로컬 내비게이션은 상단 메뉴를 복제한 드롭다운이 아니라 동일 영역 안의 탐색 장치다. - 모바일에서는 강제 가로 스크롤보다 줄바꿈 가능한 명확한 링크 구조를 우선한다. - 주요 링크와 버튼은 원칙적으로 48×48px 이상의 터치 영역을 확보한다. [푸터] - 푸터에는 최소한 다음 내부 링크를 제공한다. · 협의회 소개 · 주요 활동 · 활동소식 · 회원 참여 · 문의·오시는 길 - 주소·전화·이메일·후원계좌를 유지한다. - 외부 관련 사이트는 푸터에 일원화한다. ================================================================ ■ 4. 정보구조 / URL 규약 ================================================================ [홈] - `/` [협의회 소개] - `/about` — 소개 허브 - `/about/greeting` — 인사말 - `/about/vision` — 설립 배경과 비전 - `/about/mission` — 사명과 핵심가치 - `/about/history` — 주요 사건의 시간순 연혁 색인 - `/about/organization` — 공식 조직 구조와 협력 네트워크 [주요 활동] - `/activities` — 6개 활동영역을 조망하고 선택하는 허브 - `/activities/family-policy` — 가족정책 연구와 제언 - `/activities/family-education` — 분과 활동과 가족교육 - `/activities/regional-network` — 지역본부와 전국 네트워크 - `/activities/life-respect-campaign` — 가족·생명존중 캠페인 - `/activities/k-family-culture` — K-가족 문화행사 - `/activities/civic-partnership` — 시민사회 연대와 미디어 [알림마당] - `/news` — 알림마당 허브 - `/news/notices` — 공지사항 목록과 `/news/notices/[slug]` 상세 - `/news/activities` — 활동 기록 아카이브와 `/news/activities/[slug]` 상세 - `/news/press` — 외부 언론보도 목록 - `/news/resources` — 공개 자료실 [참여·후원] - `/join` — 회원 참여와 후원 선택 허브 - `/join/membership` — 개인회원·단체회원 차이와 공개 신청 수단 - `/join/donate` — 후원 목적·계좌·활동 근거·문의 [문의] - `/contact` — 공식 문의, 언론·자료 문의, 방문 안내 - 관련 사이트 모음은 `/contact`의 핵심 구획으로 두지 않고 푸터에서 관리한다. [페이지 역할 경계] - `/activities`와 6개 하위 페이지는 한가협의 지속 사업을 설명한다. - `/news/activities`는 개별 행사·활동의 본문과 사진이 쌓이는 기록 아카이브다. - `/about/history`는 주요 사건을 시간순으로 훑는 색인이다. - `/about/organization`은 조직 구조·협력단체·공식 수치의 기준 페이지다. - `/activities/regional-network`는 지역본부의 실제 출범·활동 기록을 책임진다. - 연혁은 실제 활동 상세가 존재하는 사건만 상세 페이지로 연결한다. - 언론보도는 기사 전문을 복제하지 않고 외부 원문으로 연결한다. - 자료실은 실제 공개 파일이 없을 때 가짜 자료를 생성하지 않는다. [신규 URL 제한] - 지역본부별 상설 페이지, 영상 전용 페이지, 개인회원·단체회원 별도 상세 페이지는 현재 만들지 않는다. - 신규 URL은 기존 상위 영역 아래에서 먼저 검토한다. - 기존 URL을 분리할 때는 기존 페이지에 목적 요약과 명확한 이동 경로를 남기며 중복 본문을 병행 유지하지 않는다. [미래 예약 경로] - `/members` — 회원 로그인·마이 영역 - `/apply` — 통합 프로그램 신청 - `/admin` — 필요 시 운영자 관리 - 위 경로는 현재 정적 홈페이지가 선점하지 않는다. - `/gallery`, `/video`도 별도 상설 페이지로 만들지 않는다. ================================================================ ■ 5. 홈 페이지 원칙 ================================================================ - 홈은 단순 소개문 모음이나 최신글 목록만으로 만들지 않는다. - 중복 문장은 줄이되 실제 사진·수치·대표 사례·최신 기록으로 충분한 밀도를 확보한다. - 기본 섹션 순서는 다음을 유지한다. 1. Hero — 슬로건, 대표 현장사진, 주요 활동·협의회 소개 CTA 2. 한가협 한눈에 보기 — 172개 협력단체, 10개 광역 지부, 6개 활동영역 3. 왜 가족인가 — 문제의식과 설립 배경의 짧은 연결 4. 한가협이 하는 일 — 6개 활동 상세 페이지로 이동 5. 대표 활동 이야기 — 최신순과 별도로 선택한 대표 기록 6. 최신 활동소식 7. 공지사항·언론보도 요약 8. 참여·후원 CTA - 최신 활동소식과 언론보도는 콘텐츠 컬렉션에서 자동 파생한다. - 대표 활동은 날짜를 조작하지 않고 명시적인 선택값으로 관리한다. - 대표 활동과 최신 활동 목록에서 같은 글을 중복 노출하지 않는다. - 홈의 활동영역 설명은 활동영역 원본 데이터에서 파생하며 다른 페이지 본문을 복사하지 않는다. - Hero는 정체성과 슬로건, 한눈에 보기는 공식 수치를 책임지며 같은 수치를 반복하지 않는다. ================================================================ ■ 6. 주요 활동 허브와 상세 페이지 원칙 ================================================================ [`/activities` 허브] - 한가협 활동 전체를 조망하고 6개 분야를 선택하게 한다. - 기본 구성: 1. 활동을 정의하는 Hero 2. 현장 발견에서 정책·실천·확산으로 이어지는 공통 흐름 3. 6개 활동영역 선택 4. 분야 전체를 보여주는 대표 현장 기록 5. 최신 활동소식 6. 활동소식 전체보기와 회원 참여 안내 - 허브는 상세 본문을 복제하지 않고 활동영역의 짧은 요약만 제공한다. - 영상·언론·CTA를 독립 대형 섹션으로 계속 누적하지 않는다. - 허브 대표 기록과 최신 목록에서 같은 글을 중복 노출하지 않는다. [6개 활동 상세 페이지] - 각 페이지는 기존 카드 설명을 늘린 복사본이 아니라 독립된 사용자 질문에 답해야 한다. - 여섯 페이지는 공통 상세 템플릿으로 생성하고 동일 구조를 여섯 파일에 복제하지 않는다. - 공통 책임: 1. 검증된 사진이 있으면 이미지 Hero, 없으면 텍스트 Hero 2. 왜 이 활동이 필요한가 3. 한가협이 구체적으로 무엇을 하는가 4. 검증된 실제 프로그램·사례가 있을 때만 해당 섹션 5. 관련 활동소식 자동 노출 6. 자료가 있는 경우에만 관련 영상·언론보도 7. 분야별 주 CTA 1개와 보조 행동 최대 2개 - 활동소식이 0건이거나 공식 프로그램 정보가 없으면 빈 제목·"준비 중"·추측 문구를 출력하지 않고 섹션 자체를 생략한다. - 정책은 제도 변화를 위한 연구·제언, 캠페인은 시민 참여와 인식 변화를 위한 실천으로 구분한다. - 조직 명부·구조와 시민사회 협력 활동, 조직 구조와 지역본부 활동 기록의 역할을 각각 분리한다. ================================================================ ■ 7. 콘텐츠 모델 ================================================================ [대원칙] - 계속 쌓이는 글은 콘텐츠 컬렉션으로, 목록성·고정 구조는 데이터 또는 고정 콘텐츠 컬렉션으로 관리한다. - 반복 축적되는 콘텐츠를 페이지에 직접 하드코딩하지 않는다. - 고정 데이터와 화면 문구의 원본을 중복 관리하지 않는다. [공지사항 `notices`] - 제목, slug, 날짜, 분류, 본문, 첨부파일(선택). [활동소식 `activities`] - 제목, slug, 날짜, 행사분류, 주 활동영역, 관련 활동영역, 지역본부(선택), 대표이미지·대체텍스트(선택), 본문. - 본문은 단일 사진과 2~6장 사진 모음을 포함할 수 있다. - `category`는 행사 형식을 뜻한다. - `activityArea`는 지속 사업의 주 활동영역이며 필수다. - `relatedAreas`는 실제로 복수 분야와 관련될 때만 사용하는 선택값이다. - 행사 형식과 활동영역은 서로 다른 개념이며 자동으로 동일시하지 않는다. [활동영역 공식 키] - `policy` — 가족정책 연구와 제언 - `education` — 분과 활동과 가족교육 - `network` — 지역본부와 전국 네트워크 - `campaign` — 가족·생명존중 캠페인 - `culture` — K-가족 문화행사 - `partnership` — 시민사회 연대와 미디어 - `activityArea`는 위 6개 중 하나만 선택한다. - `relatedAreas`는 위 값 중 중복 없이 선택하며 주 영역과 같은 값을 넣지 않는다. [고정 활동영역 콘텐츠] - 6개 활동영역은 명시적인 고정 콘텐츠 컬렉션 또는 동등한 구조화 원본으로 관리한다. - 기본 필드: · key/slug · 화면 제목 · 짧은 요약 · Hero 이미지·대체텍스트(선택) · 핵심 메시지 · 활동이 필요한 이유 · 주요 실행 방식 · 검증된 대표 프로그램·사례(선택) · 주 CTA·보조 CTA · 관련 영상·언론보도(선택) - 관련 활동소식은 `activityArea`와 `relatedAreas`에서 자동 파생한다. - 초기에는 개발자 관리 영역으로 두고 반복적인 운영 변경 필요가 확인될 때만 CMS에 노출한다. [명시 선택 콘텐츠] - 홈과 주요 활동 허브의 대표 기록은 날짜 자동 정렬과 별도의 명시적 선택 데이터로 관리한다. - 선택 slug, 이미지, 대체텍스트, 요약은 실제 콘텐츠와 파일 존재 여부를 검증한다. [언론보도 `press`] - 날짜, 언론사, 제목, 짧은 자체 요약, 원문 URL. - 기사 전문과 외부 언론사 이미지를 무단 복제하지 않는다. [자료실 `resources`] - 제목, slug, 날짜, 종류, 파일. - 실제 공개 자료가 없을 때 빈 상태를 유지한다. [데이터] - 연혁: 정렬 날짜, 표시 날짜·기간, 사건, 설명, 대표이미지·대체텍스트, 실제 상세 연결(선택). - 조직: 공식 중앙 운영축과 분기 구조를 시맨틱 데이터로 관리한다. - 협력단체: 검증된 공식 명부 이미지와 공식 집계값을 사용한다. 텍스트 원본·지부 구분·갱신 책임이 확보된 뒤에만 별도 데이터화한다. ================================================================ ■ 8. 페이지별 시각체계 ================================================================ [공통 방향] - 공신력 있는 시민사회 연대체의 무게와 가족 주제의 따뜻함을 함께 표현한다. - 한가협 고유 브랜드 토큰을 유지하며 FPA·패밀로그 브랜드를 혼합하지 않는다. - 고령층과 모바일 사용자를 고려해 충분한 대비, 글자 크기, 명확한 탐색, 넓은 터치 영역을 유지한다. - 모든 페이지를 동일한 PageHeader와 카드 배열로 복제하지 않는다. - 디자인은 장식의 양이 아니라 정보 위계, 실제 사진, 공간의 리듬, 읽기 흐름과 행동 발견성으로 평가한다. [페이지 유형] - 이야기형: 홈, 설립 배경과 비전, 주요 활동 허브, 활동 상세, 참여·후원. - 인물·기관형: 인사말, 조직·협력단체. - 정보형: 알림마당 허브·목록, 문의·오시는 길. - 기록형: 활동소식 상세, 연혁, 언론보도, 자료실. - 같은 유형 안에서는 공통 문법을 사용하되 각 페이지의 핵심 질문·콘텐츠·CTA 차이를 지운 복제 화면으로 만들지 않는다. [첫 화면] - H1, 핵심 설명, 대표 이미지와 주 CTA의 우선순위가 즉시 이해되어야 한다. - Header·LocalNav·Hero가 모바일 첫 화면을 과도하게 점유하지 않도록 실제 viewport에서 판단한다. - 제목 줄바꿈, 이미지 초점, 문장 길이는 데스크톱과 모바일에서 각각 검토한다. - 첫 화면에 정보가 많다는 이유만으로 풍부하다고 보지 않고, 핵심 메시지가 묻히면 결함으로 본다. [타이포그래피] - 제목·소제목·본문·라벨·날짜·숫자의 위계를 명확히 한다. - 본문 행 길이, 줄간격, 자간과 글자 크기는 한국어 장문 읽기에 맞게 관리한다. - 한글 어절의 부자연스러운 분리, 지나치게 긴 한 줄 제목, 고령층에게 작은 보조 텍스트를 점검한다. - 굵기와 크기만 반복해 위계를 만드는 대신 색상·간격·배치도 함께 사용한다. [공간과 리듬] - 섹션 간 여백은 의미 단위를 구분해야 하며 단순한 빈 공간이나 동일 높이 반복으로 남지 않아야 한다. - 카드 내부 여백, 그리드 간격, 컨테이너 폭과 섹션 배경은 콘텐츠 성격에 따라 조정한다. - 동일 카드가 장시간 반복되면 사명·가치, 기록·목록, 수치·사례 등 정보 성격에 맞는 다른 시각 위계를 사용한다. - 짧은 콘텐츠는 억지로 늘리지 않되 과도한 빈 공간·비정상적인 높이·단절된 CTA는 레이아웃 문제로 판단한다. [콘텐츠 밀도] - 페이지 성격에 따라 실제 현장사진, 핵심 수치, 인용문, 단계 흐름, 대표 사례, 관련 콘텐츠와 CTA를 조합한다. - 사진이 없는 정보형 페이지나 검증된 텍스트 Hero는 정상일 수 있으나, 화면이 임시 상태처럼 보이는지는 별도로 평가한다. - 장식용 스톡 사진이나 AI 생성 이미지로 빈 공간을 채우지 않는다. - 콘텐츠 부족과 디자인 부족을 구분하되 둘 중 하나를 이유로 다른 문제를 면책하지 않는다. [이미지 배정] - 핵심 정적 페이지 사이에서 같은 이미지 파일을 반복 배치하지 않도록 자산 배정표를 먼저 만든다. - 홈 Hero, 홈 대표, 활동 허브 대표, 6개 활동 상세 Hero, 인사말, 비전, 조직의 핵심 이미지를 우선 관리한다. - 활동소식 상세와 자동 파생 썸네일에서 같은 대표이미지가 재사용되는 것은 정상적인 콘텐츠 관계로 본다. - 이미지 출처·행사·날짜·인물 설명이 충돌하면 검증 전까지 핵심 페이지에 사용하지 않는다. - 낮은 해상도 이미지는 대형 full-bleed 배경으로 과도하게 확대하지 않는다. - 비율, 크롭, 초점, 캡션과 주변 텍스트의 관계를 실제 화면에서 검토한다. [CTA와 신뢰] - 각 페이지의 주 CTA 1개와 보조 행동 최대 2개를 시각적으로 구분한다. - 버튼과 링크의 강조 수준은 페이지 목적과 일치해야 하며 모든 행동을 같은 강도로 표시하지 않는다. - 조직의 공식성, 실제 활동, 연락 가능성, 최신성과 책임 주체가 화면에서 확인되어야 한다. - 후원·회원 참여·문의 행동은 쉽게 발견되되 과장되거나 강요하는 인상을 주지 않는다. [외부 비교] - 유사 시민사회·공공·비영리 사이트의 정보 위계, 사진 활용, 모바일 밀도와 페이지 유형을 참고할 수 있다. - 외부 사례는 현재 화면의 약점을 설명하는 비교 근거로 사용하며 단순한 유행 또는 시각적 모방의 근거로 사용하지 않는다. - 비교 시 URL·콘텐츠 규모·조직 성격의 차이를 함께 기록한다. ================================================================ ■ 9. 참여·후원·문의 원칙 ================================================================ - `/join`은 회원 참여와 후원 중 목적을 선택하는 짧고 명확한 허브다. - `/join/membership`은 개인회원과 단체회원의 차이를 한 페이지에서 비교하고 각 공개 신청 Form으로 연결한다. - 협력단체 네트워크와 단체회원 가입 유형의 차이를 한 번 명확히 설명한다. - `/join/donate`는 후원 목적, 공식 계좌, 최근 실제 활동 기록, 전화·이메일 문의를 제공한다. - 최근 활동 기록은 후원금이 특정 행사에 사용됐다는 회계적 귀속 증거로 표현하지 않는다. - 온라인 결제, 기부금 영수증 자동화, 개인 후원 이력은 미래 통합 플랫폼 범위다. - `/contact`는 공식 문의, 언론·자료 문의, 방문 안내의 세 축에 집중한다. - 외부 신청·언론 원문·관련 사이트 링크는 새 탭과 안전 속성, 새 창 안내를 사용한다. ================================================================ ■ 10. 기술 / 운영 불변식 ================================================================ - 공개 사이트: Astro 정적 사이트. - 공개 도메인: `https://koreanfamilies.org`. - 공개 배포: Vercel Production, GitHub private 저장소 `main` 기준 자동 배포. - 공개 실행 JavaScript는 0을 유지한다. JSON-LD 같은 비실행 구조화 데이터만 예외다. - 콘텐츠 원본은 Markdown·YAML·구조화 데이터와 Git에 둔다. - 운영 CMS: Decap CMS 3.14.1, `https://editor.koreanfamilies.org`, Netlify 별도 배포. - CMS 인증·저장: GitHub OAuth, GitHub backend, Editorial Workflow. - CMS 장애가 공개 사이트 제공에 영향을 주지 않아야 한다. - 방문자 인증, Supabase·DB, RLS, 서버 함수, 온라인 결제, 회원 마이페이지를 현재 공개 사이트에 도입하지 않는다. - 이미지 증가는 DB 문제가 아니다. 필요 시 검증된 리사이즈·WebP·이미지 CDN으로 대응한다. - 대표 주소, canonical, sitemap, robots, RSS, 구조화 데이터의 기준은 공식 apex 도메인으로 통일한다. - Organization·WebSite JSON-LD와 publisher 연결은 홈에서 단일 구조로 유지한다. ================================================================ ■ 11. 구현 / 검증 원칙 ================================================================ [공통 구현] - 함수와 컴포넌트는 한 가지 책임을 갖는다. - 허브는 세부 본문을 중복 복사하지 않고 목적지를 선택하게 한다. - 공통 템플릿은 공통 구조를 제공하되 페이지별 콘텐츠와 CTA 차이를 지우지 않는다. - 이미지·PDF는 출처, 사용권, 행사, 날짜, 인물, 해상도를 검증한다. - 구조 변경과 해당 audit를 같은 commit에 포함해 각 commit이 독립적으로 build·audit를 통과하게 한다. - audit는 현재 의도된 구조를 보호하되 구조 변경 시 보호 목적을 새 위치로 이전하고 옛 DOM만 고정하지 않는다. - 중요한 검사는 가능한 범위에서 역검증해 실제로 실패하는지 확인하고 원본을 바이트 단위로 복원한다. [감사 유형] - 기술·반응형 회귀 감사: · build, audit, route, status, overflow, 링크, 이미지, heading, alt, script, sitemap, RSS, local/Production 일치를 확인한다. · 자동 측정과 전 route 반복 검증을 중심으로 한다. · 통과 결과는 해당 기술 범위의 안정성을 뜻한다. - 시각·사용성 감사: · 첫 화면, 정보 위계, 타이포그래피, 공간 리듬, 이미지, 페이지 차별성, CTA, 모바일 밀도와 신뢰감을 확인한다. · 실제 스크린샷, 페이지별 근거, 필요한 측정, 외부 비교를 함께 사용한다. · `문제 없음` 판정에도 확인 기준과 대표 증거를 남긴다. · 자동 측정만으로 완료하지 않는다. [디자인 개선 순서] 1. 실제 저장소와 Production의 현재 화면 조사. 2. route와 페이지 유형 분류. 3. 읽기 전용 시각 기준선 감사. 4. 문제, 근거, 사용자 영향, 권장 방향과 우선순위 제출. 5. 사용자 승인. 6. 디자인 토큰·공통 컴포넌트·대표 유형 시안. 7. 작은 책임 단위 구현과 기술 회귀 검증. 8. 영역별 확장과 Production 확인. 9. 전 route 기술 회귀 감사. 10. 전 route 최종 시각·사용성 감사. 11. 사용자 승인으로 디자인 완료 확정. [시각 감사 viewport] - 기본 기준은 1440·1280·1024·768·390px다. - 모든 폭을 자동 측정하되 육안 평가는 1440·390px을 중심으로 하고 중간 breakpoint 이상 징후가 있으면 1280·1024·768px을 상세 검토한다. - 모바일은 overflow 여부뿐 아니라 첫 화면 점유, LocalNav 높이, 제목 줄바꿈, 카드 세로 누적, CTA 발견성을 확인한다. [판정과 종료] - P0·P1·P2 같은 심각도는 각 감사 범위 안에서만 해석한다. - 기술 감사 P0·P1 0건을 근거로 시각 개선 단계를 취소하지 않는다. - 시각 감사에서 취향 의견은 결함으로 단정하지 않되, 구체적 사용자 영향과 비교 근거가 있으면 디자인 문제로 기록한다. - 자료 부족은 external-material backlog로 분리하지만 자료 부족 때문에 발생한 실제 레이아웃 문제는 별도로 기록한다. - 이미 검증된 기술 영역은 관련 변경이 없으면 반복 재구축하지 않되 최종 디자인 구현 후 회귀 검증은 수행한다. - 최종 디자인 완료는 보고서 작성 자체가 아니라 사용자 승인으로 종료한다. ================================================================ ■ 12. 문서 체계 ================================================================ - 본 헌법 v6는 현재 유효한 기준 문서다. - 작업로그 시즌 1은 기술 구축·배포·CMS·SEO·초기 콘텐츠 이관의 동결 아카이브다. - 작업로그 시즌 2는 정보구조 개편, 콘텐츠·탐색 보강, 기술·반응형 안정화를 완료한 동결 시즌이다. - 작업로그 시즌 3는 전 사이트 시각 품질, 페이지별 차별성, 실제 사용 경험과 최종 운영 인수인계를 관리한다. - 작업로그에는 다음 실행에 필요한 기준만 유지하고 장문의 과거 보고서를 반복 수록하지 않는다. - 기술 회귀 보고서, 시각 기준선 감사, 디자인 시안, 최종 검증보고서는 별도 파일로 관리한다. - 이전 감사 문서의 제목이나 표현이 현재 감사 범위와 충돌하면 문서를 삭제하지 않고 유효 범위를 작업로그에서 재분류해 보존한다. [개정 요약] - v6: 기술·반응형 감사와 시각·사용성 감사를 분리하고, 기술 감사 통과를 디자인 완료로 확대 해석하지 않는 원칙을 명문화. - v6: 시즌 3의 시각 평가 기준, 디자인 개선 순서, 증거·비교·사용자 승인에 따른 종료 조건을 추가. - v6: 시즌 2를 구조·기술 안정화 완료 시즌으로 동결하고 시즌 3를 전 사이트 시각 완성도 개선 시즌으로 시작. - v5: 최종 감사의 선택적 수정 원칙을 도입했으나, 해당 종료 원칙은 정의된 감사 범위 안에서만 적용하도록 v6에서 정정. - v4: 실제 구현으로 확정된 로컬 탐색·홈·활동 상세·대표 콘텐츠·자료 부족 fallback·이미지 중복 기준을 통합. - v3: 주요 활동 6개 IA와 활동영역 데이터 모델 확정.