# 웹 디자인 기초 — AI 작업 안내 파일

119 소방 AI 스튜디오(https://119-ai-studio.kr)의 '웹 디자인 기초' 페이지를 AI가 읽도록 글로 옮긴 파일입니다. AI로 웹 화면을 만들 때 쓰는 디자인 규칙 파일(DESIGN.md), 업무 화면 유형, 화면 부품의 이름, 확인 항목을 담았습니다. 이 파일은 시작점이고, 필요한 자료는 더 찾아 주세요.
화면에서 보기: https://119-ai-studio.kr/web-design.html
이 파일: https://119-ai-studio.kr/assets/ai/web-design.txt

## 화면을 만드는 순서

1. 참고 화면 고르기 — 만들 화면 유형을 정하고 가까운 모양을 찾습니다. AI에게 하는 말 예: "첨부한 화면처럼 왼쪽에 목차, 오른쪽에 본문이 있는 구성으로 만들어 주세요."
2. 디자인 규칙 정하기 — 스타일과 화면 유형으로 규칙 파일을 만듭니다. AI에게 하는 말 예: "DESIGN.md 의 색과 글꼴 값만 사용해 주세요. 필요한 색이 파일에 없으면 먼저 알려 주세요."
3. 부품 이름으로 요청하기 — 들어갈 부품을 이름으로 적습니다. AI에게 하는 말 예: "헤더 오른쪽에 검색창을 넣고, 저장하면 화면 아래에 토스트를 3초 동안 보여 주세요."
4. 움직임 더하기 — 꼭 필요한 곳에만 움직임을 넣습니다. AI에게 하는 말 예: "움직임 줄이기 설정을 켠 사용자에게는 움직임 없이 바로 보여 주세요."
5. 결과 확인하기 — 확인 항목으로 점검하고 고칠 점을 요청합니다. AI에게 하는 말 예: "결과를 확인 항목 순서대로 점검하고, 통과하지 못한 항목과 고친 내용을 표로 정리해 주세요."

## 업무 화면 유형

### 교육 자료 페이지
- 설명: 긴 설명을 장 단위로 읽게 하는 페이지입니다.
- 스타일 후보: 에디토리얼·세리프 중심 편집 · 스위스·국제 타이포그래피 스타일 · 미니멀리즘
- 규칙 파일이 있는 후보: 에디토리얼·세리프 중심 편집 · 스위스·국제 타이포그래피 스타일
- 움직임: 진행 안내 스크롤
- 꼭 들어갈 부품: 헤더(Header) · 브레드크럼(Breadcrumb) · 본문(Main content) · 사이드바(Sidebar) · 진행 막대(Progress bar)

### 업무 현황판
- 설명: 숫자 요약과 목록을 한 화면에서 보는 화면입니다.
- 스타일 후보: 플랫 디자인·Flat 2.0 · 다크 테크·정밀한 발광
- 규칙 파일이 있는 후보: 플랫 디자인·Flat 2.0 · 다크 테크·정밀한 발광
- 배치: 벤토 그리드
- 움직임: 마이크로인터랙션
- 꼭 들어갈 부품: 카드(Card) · 배지(Badge) · 칩(Chip · Tag) · 탭(Tabs) · 빈 상태(Empty state)

### 점검·신청 양식
- 설명: 입력을 받고 저장하는 화면입니다.
- 스타일 후보: 플랫 디자인·Flat 2.0 · 미니멀리즘
- 규칙 파일이 있는 후보: 플랫 디자인·Flat 2.0
- 움직임: 마이크로인터랙션
- 꼭 들어갈 부품: 라벨(Label) · 입력창(Text field (input)) · 셀렉트 박스(Select (dropdown list)) · 체크박스(Checkbox) · 도움말·오류 문구(Helper text · Error message) · 주 버튼(Primary (filled) button) · 토스트(Toast)

### 홍보·행사 페이지
- 설명: 일정과 신청 방법을 알리는 페이지입니다.
- 스타일 후보: 도파민 컬러·컬러 블로킹 · 네오 브루탈리즘 · 대형 타이포그래피
- 규칙 파일이 있는 후보: 네오 브루탈리즘
- 배치: 분할 화면
- 움직임: 키네틱 타이포그래피
- 꼭 들어갈 부품: 히어로(Hero section) · CTA 버튼(Call to action) · 카드(Card) · 푸터(Footer)

### 지도 화면
- 설명: 위치와 목록을 함께 보는 화면입니다.
- 스타일 후보: 플랫 디자인·Flat 2.0 · 다크 테크·정밀한 발광
- 규칙 파일이 있는 후보: 플랫 디자인·Flat 2.0 · 다크 테크·정밀한 발광
- 배치: 분할 화면
- 꼭 들어갈 부품: 사이드바(Sidebar) · 검색창(Search field) · 칩(Chip · Tag) · 팝오버(Popover) · 바텀 시트(Bottom sheet)

### 발표용 웹 페이지
- 설명: 회의와 교육에서 넘겨 가며 보여 주는 페이지입니다.
- 스타일 후보: 스위스·국제 타이포그래피 스타일 · 시네마틱·사진 중심 표현 · 대형 타이포그래피
- 규칙 파일이 있는 후보: 스위스·국제 타이포그래피 스타일
- 움직임: 스크롤텔링
- 꼭 들어갈 부품: 스텝퍼(Stepper · Step indicator) · 진행 막대(Progress bar) · 글자 위계(Type scale · Hierarchy)

## 스타일별 규칙 파일(DESIGN.md)

Google 이 공개한 DESIGN.md 형식(절 순서 Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts)을 따릅니다. 화면 유형을 고르면 웹 디자인 기초 페이지의 규칙 파일 절에서 그 유형에 맞춘 파일을 만들 수 있습니다.

- 플랫 디자인·Flat 2.0: https://119-ai-studio.kr/assets/web-design-rules/flat-design.md — 색 면과 단순한 도형으로 구성하는 플랫 디자인은 사실적인 재질을 줄인다. Flat 2.0은 제한적인 그림자 등 깊이 단서를 보완하는 변형으로 함께 설명한다.
- 스위스·국제 타이포그래피 스타일: https://119-ai-studio.kr/assets/web-design-rules/swiss-style.md — 정돈된 그리드와 산세리프 문자, 위계를 가진 비대칭 배치로 내용을 조직하는 계보이다. 장식보다 정렬과 비례, 문자의 관계가 시각적 인상을 만든다.
- 에디토리얼·세리프 중심 편집: https://119-ai-studio.kr/assets/web-design-rules/editorial.md — 잡지와 책처럼 제목·리드문·본문·인용·캡션의 역할을 나눈다. 세리프 제목과 차분한 색을 함께 쓰는 방향이 2026 편집 자료에도 등장한다.
- 글래스모피즘: https://119-ai-studio.kr/assets/web-design-rules/glassmorphism.md — 배경이 비치는 반투명 면과 흐림 효과로 앞뒤 층을 구분한다. 정보 패널이 배경 위에 떠 있는 느낌을 만들며, 주변색이 표면의 인상에 영향을 준다.
- 네오 브루탈리즘: https://119-ai-studio.kr/assets/web-design-rules/neo-brutalism.md — 굵은 윤곽선과 강한 색 면, 선명하게 떨어지는 그림자를 조합한다. 거친 인상을 유지하면서도 컴포넌트의 경계와 행동을 분명하게 보여줄 수 있다.
- 다크 테크·정밀한 발광: https://119-ai-studio.kr/assets/web-design-rules/dark-tech.md — 짙은 무채색 바탕에 얇은 경계선과 절제된 가장자리 빛을 놓아 정밀한 제품 이미지를 만든다. 단순한 다크 모드 설정과 달리 제품 장면·타이포그래피·광원의 일관된 연출을 포함한다.

## 공식 누리집

기관이 공식으로 운영하는 누리집을 만든다면 범정부 UI/UX 디자인 시스템(KRDS)을 먼저 확인합니다. KRDS 는 행정안전부가 공개한 색·글꼴·부품 기준과 코드입니다. 어느 화면이 KRDS 적용 대상인지는 KRDS 원문을 확인합니다. 이 페이지의 시각 스타일은 교육 자료, 내부 발표, 시제품 화면을 만들 때 고릅니다.
KRDS 공식 누리집: https://www.krds.go.kr/html/site/index.html

## 공통 바탕 규칙

- 한국어 본문은 낱말 단위로 줄을 바꿉니다(word-break: keep-all). (확인 방법: 좁은 화면에서 낱말이 중간에 끊긴 줄이 없는지 봅니다.)
- 글자와 바탕의 명암비는 4.5:1 이상으로 합니다. (확인 방법: 브라우저 개발자 도구의 명암비 표시로 본문 글자와 단추 글자를 확인합니다.)
- 폭 390px 화면에서 가로 스크롤 없이 읽힙니다. (확인 방법: 브라우저 폭을 390px 로 줄여 좌우로 밀리는 부분이 있는지 봅니다.)
- 모든 조작은 키보드로도 할 수 있고, 초점 표시가 보입니다. (확인 방법: Tab 키로만 이동하며 모든 단추와 입력창에 닿는지, 초점 표시가 보이는지 봅니다.)
- 움직임 줄이기 설정에서는 움직임 없이 결과만 보여 줍니다. (확인 방법: 운영체제의 움직임 줄이기를 켜고 화면을 다시 엽니다.)
- 외부 글꼴과 스크립트를 CDN 에서 불러오지 않고 파일로 함께 둡니다. 글꼴은 이용 조건을 확인한 것만 씁니다. (확인 방법: 개발자 도구의 네트워크 탭에서 다른 주소로 나가는 요청이 있는지 봅니다.)
- 예시 데이터에는 예시임을 표시하고, 실제로 제공하지 않는 기능·통계·후기를 넣지 않습니다. (확인 방법: 화면의 숫자·이름·후기가 실제 자료인지 예시인지 표시되어 있는지 봅니다.)
- 실명·연락처·주소 같은 개인정보를 예시에 넣지 않습니다. (확인 방법: 예시 문구에 사람 이름, 전화번호, 이메일, 실제 주소가 있는지 봅니다.)

## 움직임 원칙

- 움직임은 상태가 바뀐 것을 알릴 때처럼 목적이 있을 때만 넣습니다.
- 짧게 끝나는 움직임을 쓰고, 같은 움직임을 되풀이하지 않습니다.
- 움직임 줄이기 설정을 켠 사용자에게는 움직임 없이 결과를 보여 줍니다.
- 스크롤 속도와 방향은 사용자가 정한 대로 둡니다.

## 화면 부품의 이름

https://119-ai-studio.kr/web-design.html#anatomy 의 이름입니다. 부품은 이 이름으로 불러 주세요.

### 페이지의 큰 틀
- 헤더(Header): 페이지 맨 위의 소개 영역입니다. 로고·메뉴·검색창처럼 길잡이 역할을 하는 요소를 담습니다.
- 내비게이션(Navigation bar): 다른 페이지나 같은 페이지의 다른 곳으로 가는 링크를 모은 영역입니다. 메뉴와 목차가 대표적입니다. 국내 현업에서는 사이트 전체의 주 메뉴를 GNB 라고도 부릅니다.
- 브레드크럼(Breadcrumb): ‘홈 › 장비 › 정기 점검’처럼 지금 페이지의 상위 페이지들을 차례로 이은 링크 목록입니다. 사이트 안에서 지금 어디에 있는지 알려 줍니다.
- 히어로(Hero section): 페이지 맨 위에서 사이트나 페이지의 내용을 한눈에 요약하는 영역입니다. 뒤에 큰 배경 그림(히어로 이미지)을 까는 경우가 많습니다.
- 본문(Main content): 문서의 중심이 되는 내용을 담는 영역입니다. 페이지마다 달라지는 핵심 내용이 여기에 들어갑니다.
- 사이드바(Sidebar): 본문과 간접적으로만 관련된 내용을 본문 옆에 따로 두는 칸입니다. 관련 링크·목차·참고 상자 같은 것을 둡니다.
- 카드(Card): 관련된 정보(그림·제목·짧은 설명·링크)를 놀이 카드처럼 생긴 상자 하나에 묶은 것입니다. 같은 모양의 카드를 나란히 놓아 목록을 만듭니다.
- 푸터(Footer): 페이지 맨 아래의 영역입니다. 만든 곳의 정보·저작권·관련 문서 링크를 둡니다.

### 여백과 정렬
- 콘텐츠 영역(Content box): 글자·그림이 실제로 보이는 가장 안쪽 칸입니다. 너비(width)·높이(height)로 크기를 정합니다.
- 패딩(Padding): 내용을 둘러싼 안쪽 여백입니다. 내용과 테두리 사이를 벌립니다.
- 테두리(Border): 내용과 패딩을 감싸는 선입니다. 두께·색·모양(실선·점선)을 정합니다.
- 마진(Margin): 가장 바깥 겹의 여백입니다. 이 상자와 옆·위아래 요소 사이를 벌립니다.
- 컨테이너(Container): 본문 전체를 감싸는 틀입니다. 최대 너비(max-width)를 정해 두면 화면이 아무리 넓어도 그보다 넓어지지 않습니다.
- 칸(열)(Column · Grid): 화면을 세로로 나눈 칸입니다. 내용은 칸이 있는 자리에 놓습니다. 칸·거터·바깥 여백으로 이루어진 틀을 레이아웃 그리드라고 부릅니다.
- 거터(Gutter): 칸과 칸 사이의 간격입니다. 내용끼리 붙지 않고 나뉘어 보이게 합니다.

### 버튼의 종류
- 주 버튼(Primary (filled) button): 색을 꽉 채운 눈에 띄는 버튼입니다. 그 화면에서 가장 중요한 행동(저장·제출)에 씁니다.
- 보조 버튼(Secondary (outlined) button): 테두리만 있는 버튼입니다. 중요하지만 가장 중요한 행동은 아닌 다음 순위의 행동을 맡고, 주 버튼과 짝지어 씁니다.
- 텍스트 버튼(Text (ghost) button): 테두리와 배경 없이 글자만 있는 버튼입니다. 취소·더 보기처럼 우선순위가 가장 낮은 행동에 씁니다.
- 아이콘 버튼(Icon button): 글자 없이 아이콘 하나로 된 버튼입니다(닫기·삭제·검색). 뜻이 분명한 아이콘만 씁니다.
- 플로팅 버튼(Floating action button (FAB)): 이름처럼 화면 위에 떠 있는 버튼입니다. 그 화면에서 가장 자주 쓰거나 가장 중요한 행동(새 기록 작성)에 씁니다.
- CTA 버튼(Call to action): ‘지금 신청하기’처럼 방문자에게 바라는 행동을 직접 부르는 요소입니다. 모양이 아니라 역할을 가리키는 말이고, Material Design 은 주된 CTA 를 화면에서 가장 크게 두라고 적습니다.

### 버튼의 상태
- 호버(Hover): 마우스 포인터를 버튼 위에 올린 상태입니다. 누를 수 있는 요소라는 것을 알립니다.
- 포커스(Focus (focus ring)): 키보드로 고른 버튼을 알려 주는 상태입니다. 많은 브라우저가 이때 바깥 고리(포커스 링)를 기본으로 그립니다.
- 누름(Pressed (active)): 버튼을 누르거나 탭한 순간의 상태입니다. 입력이 들어갔음을 알립니다.
- 비활성(Disabled): 지금은 그 행동을 쓸 수 없어 누를 수 없는 상태입니다. 보통 흐리게 표시합니다.
- 로딩(Loading): 누른 뒤 처리 중인 상태입니다. GOV.UK 디자인 시스템은 사용자가 버튼을 두 번 눌러 같은 정보가 두 번 보내지는 일을 막으라고 적습니다.
- 선택됨(Selected): 여러 개 가운데 고른 상태입니다(필터·근무 구분·탭). 웹 접근성 속성으로도 ‘선택됨’을 따로 알립니다.

### 화면 위에 크게 뜨는 창
- 모달(Modal dialog): 본문 위에 뜨는 창입니다. 사용자가 이 창에 답하기 전까지 본문을 쓸 수 없습니다. 삭제 확인처럼 응답이 꼭 필요할 때 씁니다.
- 딤(가림막)(Scrim · Backdrop): 모달·드로어 뒤에 깔리는 반투명한 막입니다. 나머지 화면을 누르지 못하게 막고, 드로어에서는 이 막을 누르면 닫힙니다.
- 팝업(Pop-up): 페이지 내용 위에 뜨는 창이나 대화상자를 넓게 부르는 말입니다. 배경을 어둡게 가리면 라이트박스라고도 부릅니다. 국내 사이트에서는 페이지를 열 때 뜨는 공지용 ‘레이어 팝업’을 흔히 가리킵니다.
- 드로어(Navigation drawer): 화면 옆에서 나오는 세로 패널입니다. 다른 화면(보기)으로 옮겨 가는 메뉴를 담습니다. Material Design 3 은 최신 판에서 이 부품을 더는 권하지 않는다고 적었습니다.
- 바텀 시트(Bottom sheet): 화면 아래쪽에 붙어 덧붙는 내용을 보여 주는 패널입니다. 공유·복사 같은 추가 선택지를 담습니다.

### 작게 떠서 알리는 것
- 토스트(Toast): 화면 한쪽에 짧게 뜨는 가벼운 알림입니다. ‘저장했습니다’처럼 작업 결과를 알립니다. Material Design 은 화면 아래에 뜨는 이런 짧은 알림을 스낵바라고 부르며, 저절로 사라지거나 사용자가 행동할 때까지 남는다고 적습니다.
- 툴팁(Tooltip): 요소에 키보드 초점이 가거나 마우스를 올리면 뜨는 작은 설명 창입니다. 그 요소와 관련된 정보를 보여 줍니다.
- 팝오버(Popover): 다른 내용 위에 떠서 보이는 작은 창입니다. 브라우저에 이를 만드는 표준 기능(Popover API)이 있습니다.
- 드롭다운 메뉴(Dropdown menu): 누르면 선택지 목록(메뉴)이 열리는 버튼입니다. 보통 아래쪽 화살표(▾)를 붙여 메뉴가 펼쳐진다는 것을 알립니다.
- 배너(알림 띠)(Notification banner): 페이지 제목 바로 위에 놓는 알림 상자입니다. 지금 하는 일과 직접 관련은 없지만 알아야 할 것(서비스 전체의 장애·지연)을 알립니다.

### 입력과 선택
- 검색창(Search field): 검색어를 적는 입력창입니다. 일반 입력창과 기능은 같고 모양만 다르게 보일 수 있습니다.
- 라벨(Label): 입력창이 무엇인지 알려 주는 이름표입니다. 모든 입력창에 라벨을 달고, 대부분은 화면에 보이게 둡니다.
- 입력창(Text field (input)): 이름·전화번호처럼 한 줄을 넘지 않는 글자를 적는 칸입니다.
- 플레이스홀더(Placeholder): 입력창이 비었을 때 흐리게 보이는 글자입니다. 쓰기 시작하면 사라져 무엇을 적는 칸인지 잊기 쉬우므로 라벨 대신 쓰지 않습니다.
- 도움말·오류 문구(Helper text · Error message): 입력창 아래의 짧은 안내입니다. 잘못 입력하면 오류 문구로 무엇이 틀렸고 어떻게 고칠지 알려 줍니다.
- 셀렉트 박스(Select (dropdown list)): 누르면 정해진 선택지 목록이 열리는 칸입니다. 그 가운데 하나를 고릅니다.
- 체크박스(Checkbox): 체크됨·체크 안 됨 두 상태를 오가는 네모 칸입니다. 일부만 체크된 세 번째 상태를 쓰기도 합니다.
- 라디오 버튼(Radio button): 한 묶음에서 하나만 고를 수 있는 동그라미 버튼입니다.
- 토글 스위치(Switch (toggle)): 켜짐·꺼짐 두 값 가운데 하나를 고르는 스위치입니다.
- 슬라이더(Slider): 정해진 범위 안에서 손잡이를 옮겨 값을 고르는 조작부입니다.

### 길 찾기와 넘기기
- 햄버거 버튼(Hamburger menu): 가로줄 세 개 모양의 버튼입니다. 주 메뉴를 숨겨 두었다가 누르면 보여 줍니다. 숨기는 쪽과 펼쳐 두는 쪽에는 각각 장단점이 있습니다.
- 탭(Tabs): 같은 자리에 겹친 여러 내용 칸을 이름표로 바꿔 보는 방식입니다. 한 번에 한 칸의 내용만 보입니다.
- 아코디언(Accordion): 제목이 세로로 쌓인 목록입니다. 제목을 누르면 그 아래 내용이 펼쳐지거나 접힙니다.
- 페이지네이션(Pagination): 여러 쪽으로 나뉜 목록(검색 결과 등)을 앞뒤로 넘기는 번호 줄입니다.
- 캐러셀(Carousel): 여러 장(슬라이드)을 한 자리에서 차례로 보여 주는 영역입니다.
- 스텝퍼(Stepper · Step indicator): 여러 단계로 나뉜 과정에서 지금 어디까지 왔는지 알려 주는 표시입니다.

### 상태와 피드백
- 배지(Badge): 메뉴나 아이콘 위에 붙어 알림·개수·상태를 보여 주는 작은 표시입니다.
- 칩(Chip · Tag): 정보를 넣거나, 고르거나, 내용을 걸러 내거나, 행동을 시작할 때 쓰는 작은 둥근 이름표입니다. 상태를 보여 주는 이름표는 태그라고도 부릅니다.
- 진행 막대(Progress bar): 작업이 몇 퍼센트 끝났는지 보여 주는 막대입니다. 진행 상황을 실시간으로 알립니다.
- 스피너(Spinner): 퍼센트 없이 빙글빙글 도는 반복 애니메이션으로 처리 중임을 알리는 표시입니다.
- 스켈레톤(Skeleton screen): 페이지를 불러오는 동안 자리만 회색 덩어리로 먼저 그려 두는 화면입니다. 기다리는 시간이 덜 길게 느껴지게 합니다.
- 빈 상태(Empty state): 아직 내용이 없거나 보여 줄 수 없을 때의 화면·칸입니다. 비어 있는 이유를 알려 줍니다.

### 디자인 요소
- 글자 위계(Type scale · Hierarchy): 제목·부제·본문·캡션처럼 정해 둔 글자 크기·굵기의 단계입니다. 크기 차이로 가장 중요한 것에 먼저 눈이 가게 하고, 단계를 정해 두면 화면 전체가 일관됩니다.
- 줄 간격(Line height): 한 줄이 차지하는 높이입니다. 줄과 줄 사이의 거리를 정할 때 씁니다.
- 색 역할(Color roles): 색마다 맡은 역할을 정하는 것입니다. 주 색(primary)은 가장 강조해야 할 중요한 행동과 요소에 씁니다.
- 명암 대비(Contrast): 글자와 배경의 밝기 차이입니다. 웹 접근성 기준(WCAG 2.2)은 본문 글자에 4.5:1 이상의 대비를 요구합니다(큰 글자 등 예외는 생략).
- 모서리 둥글기(Corner radius): 상자 바깥 테두리의 모서리를 둥글게 깎는 정도입니다.
- 그림자(높이)(Shadow · Elevation): 두 면 사이의 높이 차이(엘리베이션)를 그림자나 면의 색조로 보여 주는 것입니다. 떠 있는 것일수록 그림자가 깊습니다.
- 아이콘(Icon): 동작이나 분류를 쉽게 알아보게 하는 작은 기호입니다.
- 구분선(Divider): 목록이나 영역 안에서 내용을 묶음으로 나누는 얇은 선입니다. Material Design 은 항목 하나하나를 가르기보다 묶음을 나누는 데 쓰라고 적습니다.

## 웹 디자인 트렌드

참고할 화면과 사이트는 https://119-ai-studio.kr/design-trends.html 에 있습니다. 분기마다 새로 고르는 화면 사례, 디자인을 찾고 부품과 움직임을 가져오는 사이트, 사이트마다 AI에게 전할 프롬프트와 이용 조건을 확인한 날짜가 있습니다.