FNA Design System

모달 · 시니어 시트

일반 모달은 가운데 520px 카드, 시니어 모드에서는 은행 앱 큰글씨 모드처럼 전체화면 시트가 됩니다. 한 화면 한 질문, 하단 전체폭 주 버튼 하나, 자동 닫힘 없음.

리포트 반려

2026-09-29 (화) 일일 리포트를 작성자에게 돌려보냅니다.

정의

모달은 지금 하던 일을 멈추고 답을 요구하는 창입니다. 확인(반려하시겠습니까), 짧은 입력(반려 사유), 선택(판정)에만 쓰고, 정보를 보여주기만 하려면 시트 대신 화면으로 이동합니다. .fna-modal(오버레이 + 카드)과 네이티브 <dialog class="fna-dialog"> 두 구현이 있으며 <html data-scale="large"> 아래에서는 모든 모달이 자동으로 전체화면 시트가 됩니다.

언제 쓰고 언제 쓰지 않나

쓴다쓰지 않는다
되돌릴 수 없는 행동 확인(반려·서명 삭제·연결 해제)저장 성공 알림(→ 토스트)
결재 직전 서명 요청긴 폼(→ 화면 이동)
반려 사유 선택 + 한 줄 입력세션 만료 안내를 모달 위에 모달로(→ 하나로 교체)
시니어: 한 질문씩 단계 진행마케팅·공지 팝업

해부도 — 일반 모달

리포트 반려

2026-09-29 (화) 일일 리포트를 작성자에게 돌려보냅니다. 사유는 작성자에게 그대로 표시됩니다.

  1. 제목 17/800동사 명사형: "리포트 반려", "서명 삭제". 물음표 문장은 본문에
  2. 닫기 (선택)정보성 모달에만. 확인 모달은 취소 버튼이 닫기 역할
  3. 본문 13px무엇이 일어나는지 + 되돌릴 수 있는지. 항목 간격 12
  4. 보조 버튼텍스트 "취소". 왼쪽
  5. 주 버튼결과가 보이는 동사. 위험하면 danger-solid. 오른쪽 끝

변형

확인 모달 (열어 보기)
시니어 전체화면 시트 — 한 화면 한 질문, 64px 주 버튼 하나, 취소는 텍스트 링크

결재를 제출할까요?

9월 29일 금속검출 일지를 품질관리자에게 보냅니다.

제출하면 내용을 고칠 수 없습니다. 고칠 것이 있으면 닫기를 누르세요.

적합 40건부적합 0건
시니어 선택 시트 — 라디오 대신 큰 카드

금속검출 판정

시편 3종(Fe · SUS · 비철)을 통과시킨 결과를 고르세요.

시니어 단계 입력 — 한 필드씩

가열 중심온도

기준 75.0℃ 이상 · 2 / 3 단계
네이티브 <dialog class="fna-dialog">

서명 삭제

등록된 서명을 삭제하면 다시 등록할 때까지 결재를 처리할 수 없습니다.

코드
<dialog class="fna-dialog" open style="position:relative;margin:0"><h3 style="margin:0 0 8px;font-size:var(--fna-font-size-xl)">서명 삭제</h3><p style="margin:0 0 16px;font-size:13px">등록된 서명을 삭제하면 다시 등록할 때까지 결재를 처리할 수 없습니다.</p><div style="display:flex;justify-content:flex-end;gap:8px"><button class="fna-btn fna-btn--text">취소</button><button class="fna-btn fna-btn--danger-solid">서명 삭제</button></div></dialog>

상태

상태일반시니어 시트
열림오버레이 .55 + blur 2px, 카드 중앙, 첫 포커스 = 주 버튼(위험이면 취소)22ms 아래서 24px 올라옴, 첫 포커스 = 본문 첫 요소
처리 중주 버튼 disabled + "제출 중", 닫기 불가같음, 상단 닫기도 비활성
오류본문 위 error 배너, 모달 유지본문 위 배너 20px 글자
닫힘ESC · 오버레이 클릭(확인 모달은 오버레이 클릭 무시) · 취소상단 "닫기" · 하단 텍스트 링크. 오버레이 없음, ESC 없음(전체화면)

치수

항목일반sm / lg시니어 시트
폭520380 / 720100%
최대 높이88vh88vh100% (본문 스크롤)
라운드16160
제목17 / 8001724 / 800
본문131320, 행간 1.5
패딩(머리 · 본문 · 꼬리)16/20/12 · 0/20/16 · 12/20/16같음12/24 · 20/24 · 16/24 (+safe-area)
버튼40, 우측 정렬, 간격 8같음64 전체폭 · 24/900 · 라운드 16 · 세로 12
선택 카드——72 · 테두리 2 · 라운드 16
오버레이rgba(10,16,40,.55)같음없음 (surface)

Do · Don't

Do 시니어: 주 버튼 하나, 취소는 텍스트
Don't 시니어: 작은 버튼 두 개 나란히장갑 낀 손으로 오른쪽·왼쪽을 잘못 누른다
서명 삭제

삭제하면 다시 등록할 때까지 결재를 처리할 수 없습니다.

Do 제목은 행동, 본문은 결과와 되돌림 여부
확인

정말 삭제하시겠습니까?

Don't '확인' 제목 · '정말요?' 본문
"결재를 제출할까요?" → 제출하기
Do 한 시트 한 질문
판정 · 온도 · 비고 · 서명 · 제출 — 한 화면에 전부
Don't 한 시트에 판정 + 온도 + 서명시니어 모드는 단계로 나눈다 (1/3, 2/3, 3/3)

접근성

  • role="dialog" aria-modal="true" aria-labelledby=제목. 네이티브 <dialog> + showModal() 이면 포커스 트랩·ESC·inert 가 자동.
  • 열릴 때 포커스는 모달 안으로, 닫히면 연 버튼으로 복귀. 뒤 콘텐츠는 inert.
  • 위험 확인 모달의 기본 포커스는 취소 버튼(Enter 로 실수 확정 방지).
  • 시니어 시트: 본문 20px 이상, 버튼 64, 색 대비 text 14.9:1. 오버레이 blur 없음(어지러움).
  • 모달 위 모달 금지. 세션 만료는 열린 모달을 교체한다.

문구

부분일반시니어
제목리포트 반려 · 서명 삭제 · 결재 제출결재를 제출할까요? · 온도를 입력하세요
본문무엇이 + 되돌릴 수 있는지, 2문장 이내한 문장씩, 20px, "~하세요"
주 버튼반려 확정 · 서명 삭제 · 제출제출하기 · 다음 · 저장하기
보조취소아직 아닙니다 · 닫기 (상단)

코드

<div class="fna-modal" role="dialog" aria-modal="true" aria-labelledby="t" hidden>
  <div class="fna-modal__card">
    <div class="fna-modal__head"><h2 class="fna-modal__title" id="t">리포트 반려</h2></div>
    <div class="fna-modal__body">…</div>
    <div class="fna-modal__foot"><button class="fna-btn fna-btn--text">취소</button><button class="fna-btn fna-btn--danger-solid">반려 확정</button></div>
  </div>
</div>
<!-- 시니어: .fna-modal.fna-modal--large 또는 <html data-scale="large"> 아래의 모든 .fna-modal
     머리에 <button class="fna-modal__close">닫기</button>, 꼬리는 세로 스택 -->
<dialog class="fna-dialog">…</dialog>  dlg.showModal()
/* RN */ ConfirmDialog (src/ui) · 시니어: SeniorScreen + BigButton (senior/ui.tsx)

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-modal · .fna-modal--large · dialog.fna-dialog · .fna-choice · .fna-step-fieldComponents · FNA 디자인 시스템 v1.0