웹 디자인 기초

페이지 맨 위의 소개 영역입니다. 로고·메뉴·검색창처럼 길잡이 역할을 하는 요소를 담습니다.

AI에게“헤더를 스크롤해도 화면 위에 붙어 있게 해 주세요.”

다른 페이지나 같은 페이지의 다른 곳으로 가는 링크를 모은 영역입니다. 메뉴와 목차가 대표적입니다. 국내 현업에서는 사이트 전체의 주 메뉴를 GNB 라고도 부릅니다.

AI에게“내비게이션에 ‘장비’ 메뉴를 추가하고 지금 보는 메뉴는 굵게 표시해 주세요.”

‘홈 › 장비 › 정기 점검’처럼 지금 페이지의 상위 페이지들을 차례로 이은 링크 목록입니다. 사이트 안에서 지금 어디에 있는지 알려 줍니다.

AI에게“제목 위에 브레드크럼을 넣어 주세요.”

페이지 맨 위에서 사이트나 페이지의 내용을 한눈에 요약하는 영역입니다. 뒤에 큰 배경 그림(히어로 이미지)을 까는 경우가 많습니다.

AI에게“히어로에는 제목·설명 한 줄·버튼 두 개만 남겨 주세요.”

문서의 중심이 되는 내용을 담는 영역입니다. 페이지마다 달라지는 핵심 내용이 여기에 들어갑니다.

AI에게“본문 글 폭을 너무 넓지 않게 760px까지만 쓰게 해 주세요.”

본문과 간접적으로만 관련된 내용을 본문 옆에 따로 두는 칸입니다. 관련 링크·목차·참고 상자 같은 것을 둡니다.

AI에게“오른쪽 사이드바에 목차를 넣고 스크롤해도 따라오게 해 주세요.”

관련된 정보(그림·제목·짧은 설명·링크)를 놀이 카드처럼 생긴 상자 하나에 묶은 것입니다. 같은 모양의 카드를 나란히 놓아 목록을 만듭니다.

AI에게“카드를 한 줄에 세 장, 모바일에서는 한 장씩 놓아 주세요.”

페이지 맨 아래의 영역입니다. 만든 곳의 정보·저작권·관련 문서 링크를 둡니다.

AI에게“푸터에 담당 부서와 연락처, 개인정보 처리방침 링크를 넣어 주세요.”

글자·그림이 실제로 보이는 가장 안쪽 칸입니다. 너비(width)·높이(height)로 크기를 정합니다.

AI에게“카드 내용 영역 높이를 모두 같게 맞춰 주세요.”

내용을 둘러싼 안쪽 여백입니다. 내용과 테두리 사이를 벌립니다.

AI에게“카드 안쪽 패딩을 24px로 늘려 주세요.”

내용과 패딩을 감싸는 선입니다. 두께·색·모양(실선·점선)을 정합니다.

AI에게“입력창 테두리를 1px 회색 실선으로 바꿔 주세요.”

가장 바깥 겹의 여백입니다. 이 상자와 옆·위아래 요소 사이를 벌립니다.

AI에게“제목과 본문 사이 마진을 32px로 넓혀 주세요.”

본문 전체를 감싸는 틀입니다. 최대 너비(max-width)를 정해 두면 화면이 아무리 넓어도 그보다 넓어지지 않습니다.

AI에게“컨테이너 최대 폭을 1200px로 하고 가운데 정렬해 주세요.”

화면을 세로로 나눈 칸입니다. 내용은 칸이 있는 자리에 놓습니다. 칸·거터·바깥 여백으로 이루어진 틀을 레이아웃 그리드라고 부릅니다.

AI에게“데스크톱은 12칸, 모바일은 4칸 그리드로 배치해 주세요.”

칸과 칸 사이의 간격입니다. 내용끼리 붙지 않고 나뉘어 보이게 합니다.

AI에게“카드 사이 거터를 16px로 통일해 주세요.”

색을 꽉 채운 눈에 띄는 버튼입니다. 그 화면에서 가장 중요한 행동(저장·제출)에 씁니다.

AI에게“‘저장’만 주 버튼으로 하고 나머지는 보조 버튼으로 바꿔 주세요.”

테두리만 있는 버튼입니다. 중요하지만 가장 중요한 행동은 아닌 다음 순위의 행동을 맡고, 주 버튼과 짝지어 씁니다.

AI에게“‘임시 저장’을 외곽선만 있는 보조 버튼으로 해 주세요.”

테두리와 배경 없이 글자만 있는 버튼입니다. 취소·더 보기처럼 우선순위가 가장 낮은 행동에 씁니다.

AI에게“‘취소’는 글자만 있는 텍스트 버튼으로 해 주세요.”

글자 없이 아이콘 하나로 된 버튼입니다(닫기·삭제·검색). 뜻이 분명한 아이콘만 씁니다.

AI에게“삭제를 휴지통 아이콘 버튼으로 바꾸고 aria-label ‘삭제’를 넣어 주세요.”

이름처럼 화면 위에 떠 있는 버튼입니다. 그 화면에서 가장 자주 쓰거나 가장 중요한 행동(새 기록 작성)에 씁니다.

AI에게“오른쪽 아래에 ‘새 기록’ 플로팅 버튼을 넣어 주세요.”

‘지금 신청하기’처럼 방문자에게 바라는 행동을 직접 부르는 요소입니다. 모양이 아니라 역할을 가리키는 말이고, Material Design 은 주된 CTA 를 화면에서 가장 크게 두라고 적습니다.

AI에게“히어로에 ‘교육 신청하기’ CTA 버튼을 크게 넣어 주세요.”

마우스 포인터를 버튼 위에 올린 상태입니다. 누를 수 있는 요소라는 것을 알립니다.

AI에게“버튼에 호버하면 배경이 조금 진해지게 해 주세요.”

키보드로 고른 버튼을 알려 주는 상태입니다. 많은 브라우저가 이때 바깥 고리(포커스 링)를 기본으로 그립니다.

AI에게“모든 버튼과 링크에 잘 보이는 포커스 링을 넣어 주세요.”

버튼을 누르거나 탭한 순간의 상태입니다. 입력이 들어갔음을 알립니다.

AI에게“버튼을 누르는 순간 살짝 눌린 듯 보이게 해 주세요.”

지금은 그 행동을 쓸 수 없어 누를 수 없는 상태입니다. 보통 흐리게 표시합니다.

AI에게“필수 항목을 다 채우기 전에는 ‘저장’을 비활성으로 두고 이유를 아래에 적어 주세요.”

누른 뒤 처리 중인 상태입니다. GOV.UK 디자인 시스템은 사용자가 버튼을 두 번 눌러 같은 정보가 두 번 보내지는 일을 막으라고 적습니다.

AI에게“저장하는 동안 버튼에 스피너를 보이고 다시 누르지 못하게 해 주세요.”

여러 개 가운데 고른 상태입니다(필터·근무 구분·탭). 웹 접근성 속성으로도 ‘선택됨’을 따로 알립니다.

AI에게“‘주간·야간’을 붙은 버튼 묶음으로 만들고 고른 쪽에 체크를 표시해 주세요.”

본문 위에 뜨는 창입니다. 사용자가 이 창에 답하기 전까지 본문을 쓸 수 없습니다. 삭제 확인처럼 응답이 꼭 필요할 때 씁니다.

AI에게“삭제를 누르면 ‘삭제할까요?’ 모달을 띄우고, Esc 키와 취소 버튼으로 닫히게 해 주세요.”

모달·드로어 뒤에 깔리는 반투명한 막입니다. 나머지 화면을 누르지 못하게 막고, 드로어에서는 이 막을 누르면 닫힙니다.

AI에게“모달 뒤에 반투명 검은 딤을 깔아 주세요.”

페이지 내용 위에 뜨는 창이나 대화상자를 넓게 부르는 말입니다. 배경을 어둡게 가리면 라이트박스라고도 부릅니다. 국내 사이트에서는 페이지를 열 때 뜨는 공지용 ‘레이어 팝업’을 흔히 가리킵니다.

AI에게“첫 화면에 공지 레이어 팝업을 띄우고 ‘오늘 하루 보지 않기’를 넣어 주세요.”

화면 옆에서 나오는 세로 패널입니다. 다른 화면(보기)으로 옮겨 가는 메뉴를 담습니다. Material Design 3 은 최신 판에서 이 부품을 더는 권하지 않는다고 적었습니다.

AI에게“모바일에서 햄버거 버튼을 누르면 왼쪽에서 메뉴 드로어가 나오게 해 주세요.”

화면 아래쪽에 붙어 덧붙는 내용을 보여 주는 패널입니다. 공유·복사 같은 추가 선택지를 담습니다.

AI에게“모바일에서 ‘더 보기’를 누르면 공유·복사·삭제가 담긴 바텀 시트를 올려 주세요.”

화면 한쪽에 짧게 뜨는 가벼운 알림입니다. ‘저장했습니다’처럼 작업 결과를 알립니다. Material Design 은 화면 아래에 뜨는 이런 짧은 알림을 스낵바라고 부르며, 저절로 사라지거나 사용자가 행동할 때까지 남는다고 적습니다.

AI에게“저장이 끝나면 화면 아래에 ‘저장했습니다’ 토스트를 3초 동안 보여 주세요.”

요소에 키보드 초점이 가거나 마우스를 올리면 뜨는 작은 설명 창입니다. 그 요소와 관련된 정보를 보여 줍니다.

AI에게“아이콘 버튼마다 이름을 알려 주는 툴팁을 달아 주세요.”

다른 내용 위에 떠서 보이는 작은 창입니다. 브라우저에 이를 만드는 표준 기능(Popover API)이 있습니다.

AI에게“‘필터’ 버튼을 누르면 체크 상자가 든 팝오버가 버튼 아래에 뜨게 해 주세요.”

누르면 선택지 목록(메뉴)이 열리는 버튼입니다. 보통 아래쪽 화살표(▾)를 붙여 메뉴가 펼쳐진다는 것을 알립니다.

AI에게“‘정렬’을 드롭다운 메뉴로 만들고 최신순·오래된순·이름순을 넣어 주세요.”

페이지 제목 바로 위에 놓는 알림 상자입니다. 지금 하는 일과 직접 관련은 없지만 알아야 할 것(서비스 전체의 장애·지연)을 알립니다.

AI에게“페이지 제목 바로 위에 시스템 점검 안내 배너를 본문과 같은 폭으로 넣어 주세요.”

검색어를 적는 입력창입니다. 일반 입력창과 기능은 같고 모양만 다르게 보일 수 있습니다.

AI에게“목록 위에 검색창을 넣고 글자를 칠 때마다 결과를 걸러 주세요.”

입력창이 무엇인지 알려 주는 이름표입니다. 모든 입력창에 라벨을 달고, 대부분은 화면에 보이게 둡니다.

AI에게“모든 입력창 위에 라벨을 붙이고 필수 항목에는 ‘필수’를 표시해 주세요.”

이름·전화번호처럼 한 줄을 넘지 않는 글자를 적는 칸입니다.

AI에게“‘장비 이름’ 입력창 폭을 라벨과 같게 맞춰 주세요.”

입력창이 비었을 때 흐리게 보이는 글자입니다. 쓰기 시작하면 사라져 무엇을 적는 칸인지 잊기 쉬우므로 라벨 대신 쓰지 않습니다.

AI에게“장비 이름 칸에 ‘예: 공기호흡기 3호’ 플레이스홀더를 넣어 주세요.”

입력창 아래의 짧은 안내입니다. 잘못 입력하면 오류 문구로 무엇이 틀렸고 어떻게 고칠지 알려 줍니다.

AI에게“장비 번호가 비면 입력창 아래에 ‘장비 번호를 입력해 주세요’ 오류 문구를 보여 주세요.”

누르면 정해진 선택지 목록이 열리는 칸입니다. 그 가운데 하나를 고릅니다.

AI에게“‘장비 종류’는 셀렉트 박스로 하고 보호장비·호스·사다리를 넣어 주세요.”

체크됨·체크 안 됨 두 상태를 오가는 네모 칸입니다. 일부만 체크된 세 번째 상태를 쓰기도 합니다.

AI에게“점검 항목마다 체크박스를 달아 여러 개를 고를 수 있게 해 주세요.”

한 묶음에서 하나만 고를 수 있는 동그라미 버튼입니다.

AI에게“근무 구분을 ‘주간·야간’ 라디오 버튼으로 해 주세요.”

켜짐·꺼짐 두 값 가운데 하나를 고르는 스위치입니다.

AI에게“‘점검 알림 받기’를 토글 스위치로 바꿔 주세요.”

정해진 범위 안에서 손잡이를 옮겨 값을 고르는 조작부입니다.

AI에게“충전량은 0~100% 슬라이더로 고르고 옆에 숫자를 보여 주세요.”

가로줄 세 개 모양의 버튼입니다. 주 메뉴를 숨겨 두었다가 누르면 보여 줍니다. 숨기는 쪽과 펼쳐 두는 쪽에는 각각 장단점이 있습니다.

AI에게“모바일에서는 메뉴를 햄버거 버튼 안에 넣어 주세요.”

같은 자리에 겹친 여러 내용 칸을 이름표로 바꿔 보는 방식입니다. 한 번에 한 칸의 내용만 보입니다.

AI에게“장비 상세를 ‘개요·점검 이력·사진’ 탭으로 나눠 주세요.”

제목이 세로로 쌓인 목록입니다. 제목을 누르면 그 아래 내용이 펼쳐지거나 접힙니다.

AI에게“자주 묻는 질문을 아코디언으로 만들고 처음에는 모두 접어 두세요.”

여러 쪽으로 나뉜 목록(검색 결과 등)을 앞뒤로 넘기는 번호 줄입니다.

AI에게“목록을 20건씩 나누고 아래에 페이지네이션을 넣어 주세요.”

여러 장(슬라이드)을 한 자리에서 차례로 보여 주는 영역입니다.

AI에게“행사 사진을 캐러셀로 넘겨 보게 하고 자동 넘김에는 멈춤 버튼을 달아 주세요.”

여러 단계로 나뉜 과정에서 지금 어디까지 왔는지 알려 주는 표시입니다.

AI에게“등록을 ‘정보 입력 → 점검 → 확인’ 세 단계로 나누고 위에 스텝퍼를 보여 주세요.”

메뉴나 아이콘 위에 붙어 알림·개수·상태를 보여 주는 작은 표시입니다.

AI에게“종 아이콘에 읽지 않은 알림 수를 빨간 배지로 표시해 주세요.”

정보를 넣거나, 고르거나, 내용을 걸러 내거나, 행동을 시작할 때 쓰는 작은 둥근 이름표입니다. 상태를 보여 주는 이름표는 태그라고도 부릅니다.

AI에게“목록 위에 ‘구조·화재·구급’ 필터 칩을 넣고 고른 칩에 ✕를 보여 주세요.”

작업이 몇 퍼센트 끝났는지 보여 주는 막대입니다. 진행 상황을 실시간으로 알립니다.

AI에게“사진을 올리는 동안 진행 막대와 퍼센트를 보여 주세요.”

퍼센트 없이 빙글빙글 도는 반복 애니메이션으로 처리 중임을 알리는 표시입니다.

AI에게“목록을 불러오는 동안 가운데에 스피너를 보여 주세요.”

페이지를 불러오는 동안 자리만 회색 덩어리로 먼저 그려 두는 화면입니다. 기다리는 시간이 덜 길게 느껴지게 합니다.

AI에게“카드 목록을 불러오는 동안 카드 모양 스켈레톤을 보여 주세요.”

아직 내용이 없거나 보여 줄 수 없을 때의 화면·칸입니다. 비어 있는 이유를 알려 줍니다.

AI에게“기록이 없을 때는 ‘아직 점검 기록이 없습니다’ 안내와 ‘첫 기록 등록’ 버튼을 보여 주세요.”

제목·부제·본문·캡션처럼 정해 둔 글자 크기·굵기의 단계입니다. 크기 차이로 가장 중요한 것에 먼저 눈이 가게 하고, 단계를 정해 두면 화면 전체가 일관됩니다.

AI에게“글자 크기를 제목 32·부제 20·본문 16·캡션 13px 네 단계로만 써 주세요.”

한 줄이 차지하는 높이입니다. 줄과 줄 사이의 거리를 정할 때 씁니다.

AI에게“본문 줄 간격을 1.7로 넓히고 제목은 1.3으로 좁혀 주세요.”

색마다 맡은 역할을 정하는 것입니다. 주 색(primary)은 가장 강조해야 할 중요한 행동과 요소에 씁니다.

AI에게“주 색은 주황 하나로 정해 버튼과 링크에만 쓰고, 빨강은 오류에만 써 주세요.”

글자와 배경의 밝기 차이입니다. 웹 접근성 기준(WCAG 2.2)은 본문 글자에 4.5:1 이상의 대비를 요구합니다(큰 글자 등 예외는 생략).

AI에게“회색 글자가 배경과 4.5:1 이상 대비가 되도록 진하게 바꿔 주세요.”

상자 바깥 테두리의 모서리를 둥글게 깎는 정도입니다.

AI에게“카드와 버튼 모서리를 모두 8px로 맞춰 주세요.”

두 면 사이의 높이 차이(엘리베이션)를 그림자나 면의 색조로 보여 주는 것입니다. 떠 있는 것일수록 그림자가 깊습니다.

AI에게“카드는 얕은 그림자, 모달은 깊은 그림자로 높이를 구분해 주세요.”

동작이나 분류를 쉽게 알아보게 하는 작은 기호입니다.

AI에게“아이콘을 같은 선 굵기의 한 묶음으로 통일해 주세요.”

목록이나 영역 안에서 내용을 묶음으로 나누는 얇은 선입니다. Material Design 은 항목 하나하나를 가르기보다 묶음을 나누는 데 쓰라고 적습니다.

AI에게“점검 항목과 교육 항목 묶음 사이에 옅은 구분선을 넣어 주세요.”