SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7c9f7afb5208a74c7f0f6073b5e096f8f8baf3d8
sam-docs/sam/docs/plans/SAM_General_Rule_Storyboard_D1.0.md
김보곤 f0f4a8627d docs: [plans] General Rule 스토리보드 D1.0 마크다운 변환 
- SAM_General_Rule_Storyboard_D1.0_260116.pdf (43p) → 마크다운 변환
- UIUX 공통 규칙: 인터랙션, 반응형 브레이크포인트, 화면 템플릿, 메시지, GNB/LNB/푸터
- 목록/상세 화면 4단계 반응형 (PC/태블릿/모바일) 정의
- 셀렉트박스, 나의메뉴, 검색필터정렬, 페이지/섹션 설정, 태스크 알림 아이콘
- INDEX.md에 새 문서 등록
- .gitignore에 sam/docs/plans/*.md 허용 추가
2026-02-23 00:55:26 +09:00

21 KiB
Raw Blame History

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 태스크 알림 태스크 알림 아이콘

관련 문서

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