본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

레이아웃

그리드 요소 (grid)

그리드 시스템은 UI에서 요소의 배치와 정렬을 지원하여 시각적 일관성과 질서를 유지하고, 균형 잡힌 레이아웃을 구현한다.

제한된 콘텐츠 영역 (고정형) 그리드 요소 예시

  • ① Screen Margin : 화면의 왼쪽과 오른쪽 가장자리의 공간
  • ② Column : 콘텐츠 영역의 수직으로 분할한 영역
  • ③ Gutter : 컬럼 사이의 간격

서브 페이지 레이아웃 (sub page layout)

Desktop에서 서브 페이지는 LNB, SNB 영역이 있는 레이아웃으로 구분하고, 사이드 메뉴를 포함한 최대 콘텐츠 너비를 1400px으로 사용한다.

Left menu에 LNB 또는 SNB와 Header, Main contents, Footer로 구성된 서브 페이지 레이아웃 예시

  • ① Header : 사용자가 웹사이트에 접속하자마자 마주하게 되는 화면의 최상단 영역
  • ② Left menu : 서브 화면 내에서의 이동을 위해 사용하는 메뉴
  • ③ Main contents : 사용자가 본문의 구조를 훑어보고 원하는 콘텐츠로 빠르게 이동할 수 있도록 하는 탐색 수단
  • ④ Footer : 화면을 구성하는 가장 마지막 요소로 헤더와 본문에서 원하는 정보를 찾지 못하였거나 사이트 구조 탐색 중에 길을 잃은 사용자들이 대면하게 되는 정보