PORTAL · COMMON GUIDE / 01

식품안전 안심예보 시스템
공통 UI 가이드

확정된 헤더와 푸터를 모든 화면의 기준으로 사용합니다.
본문은 시안 확정 전에도 함께 사용할 수 있는 기본 요소와 적용 규칙입니다.

01. 공통 레이아웃

공식 누리집 안내 → 서비스 로고 → 주 메뉴 → 페이지 본문 → 기관 정보·정책 순서를 유지합니다.

HEADER

시안의 서비스명, 산업체 전용관, 6개 주 메뉴와 사이트맵을 공통으로 사용합니다.

CONTENT

최대 폭 1,440px을 기준으로 정렬합니다. 메인 콘텐츠와 카드 디자인은 확정 범위에 포함하지 않습니다.

FOOTER

기관명, 주소, 문의처, 기관 링크와 정책 영역을 일관되게 유지합니다.

이 페이지 상단과 하단이 실제 공통 컴포넌트입니다. 모바일에서는 전체메뉴 버튼으로 주 메뉴를 열 수 있습니다.

시안에서 추출한 근사 색상입니다. 본문용 파란색은 읽기 쉽도록 더 어둡게 구분했습니다.

브랜드#009FE3

링크·버튼#006FA8

기본 텍스트#171A1F

푸터 배경#EDF1F6

페이지 제목 40px / 섹션 제목 26px / 본문 17px / 보조 설명 15px

900px 이하에서는 제목을 32px로 조정합니다. 폰트는 참고 소스의 로컬 파일을 사용합니다.

헤더·푸터 외의 기본 요소는 확정 전 공통 제안입니다. 실제 동작과 키보드 포커스를 확인할 수 있습니다.

공통 UI 적용 기준
구분	적용 기준
반응형	데스크톱 최대 1,440px · 900px 이하 메뉴 전환 · 모바일 좌우 여백 16~20px
접근성	본문 바로가기, 명확한 포커스, 메뉴 펼침 상태, Esc 닫기, 입력 오류 안내
선별 재사용	참고 소스의 base.css, Pretendard GOV, 태극기와 메뉴 화살표 사용
확정 자료 필요	기관 로고 원본, 미구현 페이지 연결, 정책 문서와 접근성 인증 자료

기관 로고는 원본 확보 전까지 기관명으로 표시합니다. 접근성 인증 마크는 실제 인증 자료가 있을 때 적용합니다. 주소·전화번호는 제공된 시안을 옮긴 값으로 운영 전 확인이 필요합니다.