# SAM General Rule Storyboard D1.0

> **작성일**: 2026-01-16
> **버전**: D1.0
> **원본**: `SAM_General_Rule_Storyboard_D1.0_260116.pdf` (43페이지)
> **상태**: PC 섹션 정리 완료

---

## 1. 문서 이력

| 날짜 | 버전 | 주요 내용 | 세부 내용 |
|------|------|----------|----------|
| 2026-01-15 | D0.9 | 초안 | General Rule - PC, 태블릿, 모바일 UIUX 공통 작성 |
| 2026-01-16 | D1.0 | 작성 | PC 섹션 정리 33p |

---

## 2. 인터랙션 (Interaction)

> **페이지**: 4

사용자 입력 제스처 및 적용 여부를 정의한다.

| Type | 제스처/마크 | 설명 | 적용 |
|------|-----------|------|------|
| Tap | 탭 | 일정영역을 사용자가 터치한다. | Yes |
| Touch & Hold | 터치 앤 홀드 | 화면을 터치한 후 계속 누르고 있는 상태. 해당영역 혹은 개체가 홀드된다. | No |
| Double Tap | 더블 탭 | 일정영역을 두 번 터치한다. 두 번 터치 시 액션이 실행된다. | No |
| Drag & Drop | 드래그 앤 드롭 | 터치 혹은 홀드 상태에서 오브젝트를 이동하여 원하는 위치에 배치시킨다. | Yes |
| Scroll Up | 스크롤 업 | 아래에서 위로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes |
| Scroll Down | 스크롤 다운 | 위에서 아래로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes |
| Swipe Left | 스와이프 레프트 | 오른쪽에서 왼쪽으로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes |
| Swipe Right | 스와이프 라이트 | 왼쪽에서 오른쪽으로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes |
| Pinch Zoom out | 핀치 줌 아웃 | 오브젝트 또는 화면을 축소한다. | Yes |
| Pinch Zoom in | 핀치 줌 인 | 오브젝트 혹은 화면을 확대한다. | Yes |

---

## 3. 반응형 웹 (Responsive Web)

> **페이지**: 5

### 3.1 브레이크 포인트

| 디바이스 | 브레이크 포인트 | Tailwind 접두사 |
|---------|---------------|----------------|
| 모바일 | < 640px | 기본 |
| 태블릿 | 768px ~ 1280px | `md` |
| 데스크탑 | 1280px+ | `lg` |
| 대형 모니터 | 1920px+ | `xl` |

### 3.2 레이아웃 구성

**PC Web 레이아웃**:
1. Contents 영역
2. Footer 영역

**Mobile Web 레이아웃**:
1. Contents 영역
2. Footer 영역

---

## 4. 화면 템플릿 (Screen Template)

> **페이지**: 6

모바일 웹 화면 구조를 정의한다.

| 영역 | 코드 | 설명 |
|------|------|------|
| Status bar | A | 안테나, 통화, 배터리 등 시스템 OS 관리 영역. 모든 페이지 상단에 존재 |
| Browser 영역 | B | 브라우저 기능 영역 |
| Title 영역 | C | 텍스트 또는 기능 버튼으로 구현됨. 텍스트는 기본 가운데 정렬 |
| Content 영역 | D | 컨텐츠 내용 표시. 컨텐츠 길이가 길어질 경우 스크롤 제공 |
| Browser bar 영역 | E | 브라우저 유틸 바 영역 |
| Keypad 영역 | F | 키보드 입력할 때 활성화. 모든 페이지 위에 덮어쓰기 구현 |

---

## 5. 메시지 (Notifications)

> **페이지**: 7

| 유형 | 설명 |
|------|------|
| 알림 Alert | 사용자에게 상황을 알려주기 위한 팝업. `[확인]` 버튼 제공 |
| 확인 Alert | 사용자에게 확인이 필요할 경우 제공되는 팝업. `[취소]` `[확인]` 버튼 제공 |
| 토스트 메시지 | 단순 Notify. 2~3초 후 페이지 내에서 Fade out |

---

## 6. GNB, LNB, 푸터

> **페이지**: 8

PC 화면의 전체 레이아웃 구조를 정의한다.

### 6.1 구성 요소

| 번호 | 영역 | 설명 |
|------|------|------|
| 01 | 메뉴 버튼 | 클릭: 메뉴 영역(06) 축소/확장 토글. 디폴트: 메뉴 영역 확장 상태 |
| 02 | SAM 로고 버튼 | 클릭: 대시보드 화면으로 이동 |
| 03 | 알림 버튼 | 클릭: 알림 팝업 표시 |
| 04 | 개인 정보 버튼 | 항목: 디폴트 이미지, 이름, 직급. 클릭: 마이페이지 팝업 표시 |
| 05 | 회사 로고 | 회사정보 화면에서 등록한 로고 표시. 회사 변경 선택 시 해당 로고 변경 |
| 06 | 메뉴 영역 | 메뉴 클릭: 하위 메뉴 있을 경우 하단에 표시, 없을 경우 해당 메뉴 화면으로 이동. 목록 길 경우 해당 영역 내 스크롤 처리 |
| 07 | MES 메뉴 영역 | 영업관리, 판매관리, 구매관리 등 해당하는 MES 메뉴 영역 표시 |
| 08 | 푸터 영역 | 모든 화면 하단 공통 표시 |
| 09 | SAM AI 채팅 버튼 | 클릭: SAM AI 채팅 팝업 표시 |

### 6.2 메뉴 목록

- 대시보드
- MES 메뉴
- 인사관리
- 전자결재
- 게시판
- 회계관리
- 기준정보
- 보고서 및 분석
- 계정정보
- 회사정보
- 구독관리
- 결제내역
- 고객센터

### 6.3 푸터 내용

```
(C) 2025 SAM. All right reserved.
Codebridge X
상호: 코드 브릿지 엑스  대표: 이경호  사업자등록번호: 123-45-12345
주소: 서울특별시 강서구 양천로 583 우림블루나인 B동 1602호 (우: 07547)
팩스: 02-123-1234  통신판매업신고번호: 제 2019-서울강서-0001호
서비스이용문의: 02-1234-1234  이메일: cs@a.com
서비스 이용약관 | 개인정보 취급방침
```

---

## 7. 메뉴, 페이지, 섹션, 항목 영역

> **페이지**: 9

### 7.1 영역 구분

| 번호 | 영역 | 설명 |
|------|------|------|
| 01 | 메뉴 영역 | 축소 상태 |
| 02 | 페이지 영역 | - |
| 03 | 섹션 영역 | - |
| 04 | 항목 영역 | - |

### 7.2 텍스트 오버플로우 처리

텍스트가 영역보다 길 경우 "텍스트+..." 형태로 표시한다.

---

## 8. 메뉴 목록 (3Depth)

> **페이지**: 10

### 8.1 메뉴 계층 구조

| 번호 | 레벨 | 설명 |
|------|------|------|
| 01 | 대메뉴 | 1Depth 메뉴 |
| 02 | 중메뉴 | 2Depth 메뉴 (대메뉴 클릭 시 하단에 표시) |
| 03 | 소메뉴 | 3Depth 메뉴 (중메뉴 클릭 시 하단에 표시) |

**메뉴 확장 예시**:
```
대시보드
MES 메뉴
인사관리
전자결재
  - 중메뉴명
  - 중메뉴명
    · 소메뉴명
    · 소메뉴명
  - 중메뉴명
  - 중메뉴명
  - 중메뉴명
게시판
...
```

---

## 9. 알림 팝업

> **페이지**: 11
> **경로**: 메인 > 알림 팝업

### 9.1 구성 요소

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 알림 목록 | 각 디폴트 썸네일, 종류(공지사항, 안내), 제목/내용, 전송일시 표시. 클릭: 해당 상세 화면으로 이동. 최신순 10개까지 표시 |
| 02 | New 아이콘 | 새 알림일 경우 New 아이콘 표시. 해당 알림 클릭 시 사라짐 |
| 02-1 | 붉은 점 아이콘 | 새 알림이 있을 경우 표시. 해당 알림 모두 클릭 시 사라짐 |

---

## 10. 마이페이지 팝업

> **페이지**: 12
> **경로**: 메인 > 마이페이지 팝업

### 10.1 구성 요소

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 계정 아이디 (이메일) | 이메일 주소 표시 (예: `name@company.com`) |
| 02 | 회사 셀렉트 박스 | 종류: 회사명 목록 (해당 계정이 생성한 회사(테넌트) 목록 표시). 정렬: 등록순. 한 회사만 소유중일 경우에는 해당 영역 숨김 |
| 03 | 로그아웃 버튼 | 클릭: "정말 로그아웃하시겠습니까?" 로그아웃 확인 Alert 표시. 확인 버튼 클릭시 로그아웃 처리 |

---

## 11. 셀렉트 박스

> **페이지**: 13

### 11.1 기본 셀렉트 박스

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 셀렉트 박스 | 클릭: 하단에 종류 목록 표시 |
| 02 | 종류 목록 | 목록 중 하나만 선택 가능 |

### 11.2 다중 선택 셀렉트 박스

| 번호 | 항목 | 설명 |
|------|------|------|
| 03 | 다중 선택 셀렉트 박스 | 선택된 첫번째 항목명 + 추가 수 표시. 텍스트 영역 부족할 경우 `항목..+3` 형태로 표시 |
| 04 | 다중 선택 종류 목록 | 목록 중 복수 선택 가능. 전체 선택 시 전체 선택/해제 토글 |

### 11.3 검색 셀렉트 박스

| 번호 | 항목 | 설명 |
|------|------|------|
| 05 | 검색 영역 | 검색어 입력 후 엔터 또는 검색 아이콘 클릭 시 검색 상태로 전환되며 검색 결과 표시 |
| 05-3 | 삭제 버튼 | 클릭: 검색어 삭제 처리, 전체 종류 목록 표시 |

### 11.4 셀렉트 박스 유형 정리

| 유형 | 단일 선택 | 다중 선택 | 검색 | 검색+다중 선택 |
|------|----------|----------|------|--------------|
| 선택 방식 | 하나만 | 복수 | 하나만 | 복수 |
| 검색 기능 | X | X | O | O |
| 전체 선택 | X | O | X | O |

---

## 12. 가이드 메시지

> **페이지**: 14

상황에 따라 입력 필드 하단 또는 Alert에 가이드 메시지를 표시한다.

### 12.1 표시 규칙

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 가이드 메시지 표시 위치 | 입력 필드 하단에 표시 |
| - | 긍정 메시지 | 녹색으로 표시 |
| 01-1 | 부정 메시지 | 붉은색으로 표시 |

---

## 13. 태블릿/모바일 헤더

> **페이지**: 15

### 13.1 동작 규칙

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 태블릿/모바일 헤더 | 하단으로 스크롤 시 숨김. 역스크롤 시 표시 |

### 13.2 적용 화면

- TABLET 가로 목록
- TABLET 세로 목록
- MOBILE 가로 목록
- MOBILE 세로 목록

---

## 14. 태블릿/모바일 바텀 버튼 영역

> **페이지**: 16

### 14.1 동작 규칙

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 태블릿/모바일 바텀 버튼 영역 | 최하단 바텀에 플로팅 표시. 하단으로 스크롤 시 숨김. 역스크롤 시 표시 |

### 14.2 버튼 예시

- `[수정]` `[삭제]`

---

## 15. 공지 팝업

> **페이지**: 17

### 15.1 구성

| 항목 | 설명 |
|------|------|
| 대상 | 전체, 설정 부서 |
| 내용 | 설정 기간동안 대상에게 팝업 표시 |

### 15.2 구성 요소

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 팝업 내용 영역 | 이미지, 텍스트 |
| 02 | 1일간 이 창을 열지 않음 체크박스 | 클릭: 체크 설정/해제 토글. 디폴트: 체크 해제 상태. 체크 설정 시 1일 동안 팝업 미표시 (자정 기준) |

---

## 16. 목록 화면 - 4단계 반응형

> **페이지**: 18~25

PC, TABLET, MOBILE 환경에서 목록 화면의 4단계 반응형 표시를 정의한다.

### 16.1 반응형 단계 개요

| 단계 | 디바이스 | 화면명 |
|------|---------|--------|
| 1단계 | PC | PC_목록 |
| 2단계 | TABLET 가로 | TABLET_가로_목록 |
| 3단계 | TABLET 세로 / MOBILE 가로 | TABLET_세로_목록, MOBILE_가로_목록 |
| 4단계 | MOBILE 세로 | MOBILE_세로_목록 |

### 16.2 PC_목록 (1단계)

> **페이지**: 19

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 헤더 영역 | 항목 클릭: 값이 국문/영문/숫자일 경우 오름/내림차순으로 토글 |
| 02 | 정렬 아이콘 | 현재 칼럼으로 정렬 상태일 경우에만 표시 |

**목록 테이블 예시 칼럼**:

| 칼럼 | 설명 |
|------|------|
| 시공번호 | 고유 식별 번호 |
| 거래처 | 회사명 |
| 현장명 | 현장 이름 |
| 공사PM | 담당 PM |
| 작업반장 | 작업반장 이름 |
| 작업자 | 작업자 수 |
| 시공투입일 | 시공 투입 날짜 |
| 시공완료일 | 시공 완료 날짜 |
| 상태 | 시공대기, 시공진행, 시공완료 |

### 16.3 TABLET_가로_목록 (2단계)

> **페이지**: 20

- PC와 동일한 테이블 구조
- 사이드 메뉴가 아이콘 축소 상태로 변경

### 16.4 TABLET_세로_목록 (3단계)

> **페이지**: 21~22

- 테이블 대신 카드형 목록으로 전환
- 각 카드에 시공번호와 상태 표시
- 카드 클릭 시 확장되어 상세 정보 표시

**확장 시 표시 항목**:

| 필드 | 예시 값 |
|------|---------|
| 거래처 | 회사명 |
| 현장명 | 현장명 |
| 공사PM | 홍길동 |
| 작업반장 | 홍길동 |
| 작업자 | 3 |
| 시공투입일 | 2026-01-01 |
| 시공완료일 | 2026-01-01 |

### 16.5 MOBILE_가로_목록 (3단계)

> **페이지**: 23~24

- 카드형 목록
- 시공번호와 상태 표시
- 클릭 시 확장하여 상세 항목 표시

### 16.6 MOBILE_세로_목록 (4단계)

> **페이지**: 25

- 카드형 목록 (세로 스크롤)
- 클릭 시 확장하여 상세 항목 표시
- 확장 시 거래처, 현장명, 공사PM, 작업반장, 작업자, 시공투입일, 시공완료일 표시

---

## 17. 상세 화면 - 4단계 반응형

> **페이지**: 26~31

PC, TABLET, MOBILE 환경에서 상세 화면의 4단계 반응형 표시를 정의한다.

### 17.1 반응형 단계 개요

| 단계 | 디바이스 | 화면명 |
|------|---------|--------|
| 1단계 | PC | PC_상세 |
| 2단계 | TABLET 가로 | TABLET_가로_상세 |
| 3단계 | TABLET 세로 / MOBILE 가로 | TABLET_세로_상세, MOBILE_가로_상세 |
| 4단계 | MOBILE 세로 | MOBILE_세로_상세 |

### 17.2 PC_상세 (1단계)

> **페이지**: 27

- 페이지 제목: "메뉴 상세" + 설명: "메뉴 상세를 관리합니다"
- 섹션명: "시공 정보"
- 버튼: `[수정]` `[삭제]`

**표시 항목 예시**:

| 필드 | 예시 값 |
|------|---------|
| 시공번호 | 123123 |
| 상태 | 시공진행 |
| 현장 | 현장명 |
| 작업반장 | 홍길동 (셀렉트 박스) |
| 시공투입일 | 2025-12-15 |
| 시공완료일 | 2025-12-15 |
| 항목명 | 항목 (다수) |

### 17.3 TABLET_가로_상세 (2단계)

> **페이지**: 28

- PC와 동일한 상세 정보 표시
- 사이드 메뉴 아이콘 축소 상태

### 17.4 TABLET_세로_상세 (3단계)

> **페이지**: 29

- 항목 수가 줄어들며 스크롤로 나머지 확인

### 17.5 MOBILE_가로_상세 (3단계)

> **페이지**: 30

- 상세 항목을 세로 배치
- 바텀에 `[수정]` `[삭제]` 버튼 플로팅

### 17.6 MOBILE_세로_상세 (4단계)

> **페이지**: 31

- 모든 항목 세로 배치
- 바텀에 `[수정]` `[삭제]` 버튼 플로팅

---

## 18. PC 섹션 정리

> **페이지**: 32~33

PC 화면의 섹션 레이아웃 및 필터/정렬 구성을 정의한다.

### 18.1 필터 규칙

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 라디오 버튼형 필터 | 선택 값이 2개일 경우 사용 (예: 수취/발행) |
| 02 | 필터 셀렉트 박스 | 최소로만 활용 |
| 03 | 표 헤더 정렬 | 표 헤더 정렬로 정렬 셀렉트 박스는 삭제 |

### 18.2 PC 섹션 구성 요소

**상단 영역**:
- 페이지 제목 + 설명
- 집계 카드 (예: `수취어음 55건`, `발행어음 1건`, `만기임박 5건`, `결제완료 15건`)
- 기간 선택 (날짜 범위 + 단축 버튼: 전전월, 어제, 오늘, 전월, 당월, 당해년도)
- 버튼: `[버튼명]` `[버튼명]` `[버튼명]`
- 탭: 탭1, 탭2, 탭3

**필터 영역**:
- 셀렉트 박스 필터 (전체)
- 라디오 버튼형 필터 (수취/발행)
- 상태 셀렉트 박스 (보관중)
- `[저장]` 버튼

**목록 테이블 예시**:

| No. | 어음번호 | 구분 | 거래처 | 금액 | 발행일 | 만기일 | 차수 | 상태 |
|-----|---------|------|--------|------|--------|--------|------|------|
| 7 | 123123 | 수취 | 회사명 | 1,000,000 | 2025-12-12 | 2025-12-12 | 1 | 보관중 |
| 6 | 123123 | 수취 | 회사명 | 1,000,000 | 2025-12-12 | 2025-12-12 | 2 | 만기임박 |

**하단 정보**: `총 7건` / `1건 선택`

---

## 19. TBD (미정)

> **페이지**: 34

추후 결정 예정 영역이다.

---

## 20. 나의 메뉴

> **페이지**: 35~38

### 20.1 나의 메뉴 - 없음

> **페이지**: 35

- 나의 메뉴가 설정되지 않은 상태
- 콘텐츠 상단에 `[...]` 아이콘만 표시

### 20.2 나의 메뉴 - 있음

> **페이지**: 36

- 나의 메뉴가 1개 설정된 상태
- 콘텐츠 상단에 나의 메뉴명 탭 표시 (예: `메뉴관리`)

### 20.3 나의 메뉴 - 여러 줄

> **페이지**: 37

- 나의 메뉴가 여러 개 설정된 상태
- 콘텐츠 상단에 여러 메뉴명이 나열됨
- 줄바꿈되어 여러 줄로 표시 가능 (예: `메뉴관리 메뉴명 메뉴명 메뉴명 ...`)

### 20.4 나의 메뉴 - 메뉴 영역에 통합

> **페이지**: 38

- 좌측 메뉴 영역에 "메뉴" / "나의 메뉴" 탭으로 통합
- 메뉴 탭: 일반 메뉴 목록 표시
- 나의 메뉴 탭: 사용자 즐겨찾기 메뉴 표시

---

## 21. 검색, 필터, 정렬 모음

> **페이지**: 39

### 21.1 구성 요소

| 영역 | 구성 |
|------|------|
| 기간 선택 | 날짜 범위 (`2025-09-01 ~ 2025-09-03`) + 단축 버튼 (전전월, 어제, 오늘, 전월, 당월, 당해년도) |
| 검색바 | 검색 입력 필드 |
| 필터 셀렉트 박스 | 복수의 전체 셀렉트 박스 |
| 정렬 | 최신순 셀렉트 박스 |
| 항목 필터 | 항목명 태그 형태로 나열 |

---

## 22. 페이지 설정 버튼

> **페이지**: 40

### 22.1 기능

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 섹션 표시 및 순서 변경 | 페이지 내 섹션 ON/OFF 토글 및 순서 변경 |
| 02 | 일반 설정 | 일반 설정 > 페이지/섹션 설정 > 공통 요소 모두 제어 |

### 22.2 설정 패널 구성

- 버전기록
- 가져오기
- 내보내기
- 섹션 목록: 각 섹션별 ON/OFF 토글

**예시**:
```
섹션명  [ON]
섹션명  [ON]
섹션명  [ON]
섹션명  [ON]
섹션명  [ON]
```

---

## 23. 섹션 설정 버튼

> **페이지**: 41

### 23.1 기능

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 항목 표시 및 순서 변경 | 섹션 내 항목 ON/OFF 토글 및 순서 변경 |
| 02 | 일반 설정 | 일반 설정 > 페이지/섹션 설정 > 공통 요소 모두 제어 |

### 23.2 설정 패널 구성

- 가져오기
- 내보내기
- 항목 목록: 각 항목별 ON/OFF 토글

**예시**:
```
기간           [ON]
기간단축버튼    [ON]
검색바         [ON]
필터명         [ON]
필터명         [ON]
필터명         [ON]
필터명         [ON]
정렬           [ON]
```

---

## 24. 태스크 알림 아이콘

> **페이지**: 42~43

### 24.1 동작 규칙

| 번호 | 항목 | 설명 |
|------|------|------|
| 01 | 태스크 알림 아이콘 | 태스크가 추가될 경우 카운트하여 표시 |
| - | 메뉴 확장 시 표시 | 대/중/소메뉴로 확장될 경우 해당 메뉴에 아이콘 표시 |
| - | 카운트 범위 | 최소 1 ~ 최대 99 |

### 24.2 표시 예시

**축소 상태**: 대메뉴 옆에 카운트 배지 표시 (예: `전자결재 [3]`)

**확장 상태 (2Depth)**:
```
전자결재      [3]
  - 중메뉴명  [2]
  - 중메뉴명  [1]
  - 중메뉴명
  - 중메뉴명
  - 중메뉴명
```

**확장 상태 (3Depth)**:
```
전자결재           [3]
  - 중메뉴명
  - 중메뉴명       [1]
    · 소메뉴명     [1]
    · 소메뉴명
  - 중메뉴명
  - 중메뉴명
  - 중메뉴명
```

### 24.3 페이지 내 표시

- 메뉴 축소 상태에서도 대메뉴 아이콘 옆에 카운트 배지 표시

---

## 부록: 페이지 맵

| 페이지 | 섹션 | 화면명 |
|--------|------|--------|
| 1 | 표지 | SAM_General Rule |
| 2 | 문서 이력 | Document History |
| 3 | 공통 | - |
| 4 | 인터랙션 | Interaction |
| 5 | 반응형 웹 | Responsive Web |
| 6 | 화면 템플릿 | Screen Template |
| 7 | 메시지 | Notifications |
| 8 | GNB, LNB, 푸터 | GNB, LNB, 푸터 |
| 9 | 영역 구분 | 메뉴, 페이지, 섹션, 항목 영역 |
| 10 | 메뉴 목록 | 메뉴 목록 3Depth |
| 11 | 알림 팝업 | 알림 팝업 |
| 12 | 마이페이지 | 마이페이지 팝업 |
| 13 | 셀렉트 박스 | 셀렉트 박스 (기본/다중/검색) |
| 14 | 가이드 메시지 | 가이드 메시지 |
| 15 | 태블릿/모바일 헤더 | 태블릿/모바일 헤더 |
| 16 | 태블릿/모바일 바텀 버튼 | 태블릿/모바일 바텀 버튼 영역 |
| 17 | 공지 팝업 | 공지 팝업 |
| 18 | (구분) | PC, TABLET, MOBILE - 목록 4단계 |
| 19 | 목록 1단계 | PC_목록 |
| 20 | 목록 2단계 | TABLET_가로_목록 |
| 21 | 목록 3단계 | TABLET_세로_목록 |
| 22 | 목록 3단계 확장 | TABLET_세로_목록_확장 |
| 23 | 목록 3단계 | MOBILE_가로_목록 |
| 24 | 목록 3단계 확장 | MOBILE_가로_목록_확장 |
| 25 | 목록 4단계 | MOBILE_세로_목록, MOBILE_세로_목록_확장 |
| 26 | (구분) | PC, TABLET, MOBILE - 상세 4단계 |
| 27 | 상세 1단계 | PC_상세 |
| 28 | 상세 2단계 | TABLET_가로_상세 |
| 29 | 상세 3단계 | TABLET_세로_상세 |
| 30 | 상세 3단계 | MOBILE_가로_상세 |
| 31 | 상세 4단계 | MOBILE_세로_상세 |
| 32 | (구분) | 섹션 정리 |
| 33 | 섹션 정리 | PC 섹션 정리 |
| 34 | TBD | 미정 |
| 35 | 나의 메뉴 | 나의 메뉴_없음 |
| 36 | 나의 메뉴 | 나의 메뉴_있음 |
| 37 | 나의 메뉴 | 나의 메뉴_여러 줄 |
| 38 | 나의 메뉴 | 나의 메뉴_메뉴 영역에 통합 |
| 39 | 검색/필터/정렬 | 검색, 필터, 정렬 모음 |
| 40 | 페이지 설정 | 페이지 설정 버튼 |
| 41 | 섹션 설정 | 섹션 설정 버튼 |
| 42~43 | 태스크 알림 | 태스크 알림 아이콘 |

---

## 관련 문서

- [SAM ERP 회계관리 스토리보드 D1.6](SAM_ERP_회계관리_Storyboard_D1.6.md)
- 원본 PDF: `SAM_General_Rule_Storyboard_D1.0_260116.pdf`

---

**최종 업데이트**: 2026-02-23