arko_renual/디자인.md

# 디자인.md — 개인정보보호 기능개선 신규 화면 디자인 브리프 (스티치 AI 연동용)

> 2026 문화품앗이 개인정보보호 기능개선 사업(한국문화원연합회 발주, SFR-001~004)의 신규 화면을
> [Google Stitch](https://stitch.withgoogle.com/) 로 목업 생성하기 위한 디자인 브리프.
> 대상 도메인: **frt**(일반회원), **mnt**(관리자). mbl/eng는 이번 범위에서 제외.

## 0. 사용법

1. 새 Stitch 프로젝트를 열 때, **2. 공통 디자인 시스템**의 해당 도메인(frt 또는 mnt) 블록을
   프롬프트 맨 앞에 항상 포함한다 — 기존 서비스와 톤앤매너가 어긋난 목업이 나오는 것을 방지한다.
2. **4. 신규 화면 명세**의 각 화면 카드 안 "스티치 프롬프트" 코드블록을 그대로 복사해
   Stitch의 화면 생성/편집 입력창에 붙여넣는다.
3. 화면 간 일관성이 필요하면(예: mnt 신규 화면 7개를 한 앱으로) 여러 화면 프롬프트를 이어 붙여
   한 번에 "여러 화면이 있는 앱" 형태로 요청해도 된다.
4. Stitch 결과물은 목업일 뿐이다. 실제 반영 시 **5. 반영 체크리스트**를 반드시 확인한다.

## 1. 요구사항 ↔ 화면 매핑

| 요구사항 영역 | 대상 패키지 | 신규 화면 | 도메인 |
|---|---|---|---|
| Ⅲ-2 권한관리 | `egovframework.com.sec.ram/rgm` | 권한부여 신청/승인 관리 | mnt |
| Ⅲ-2 권한관리 | 〃 | 권한변경 이력 조회 (AUTHOR_CHANGE_HISTORY) | mnt |
| Ⅲ-3 인증체계 | `egovframework.com.uat.uia` | 2차 인증(추가인증) 입력 화면 | frt |
| Ⅲ-3 인증체계 | 〃 | 마이페이지 – 인증수단 등록/관리 | frt |
| Ⅲ-3 인증체계 | 〃 | 인증수단 관리 설정 (AuthMethodService 3종) | mnt |
| Ⅲ-3 인증체계 | `egovframework.com.uss.umt` | 계정 잠금/휴면계정 관리 확장 | mnt |
| Ⅲ-3 인증체계 | 〃 | 계정 잠금 안내 화면 | frt |
| Ⅲ-4 접속기록 | `egovframework.com.sym.log` | 개인정보 접속기록 조회/다운로드 (PERSONAL_DATA_ACCESS_LOG) | mnt |
| Ⅲ-4 접속기록 | 〃 | 접속기록 정기점검 리포트 대시보드 | mnt |
| Ⅲ-4 접속기록 | 〃 | 비정상접근 탐지 알림함 (5유형) | mnt |

## 2. 공통 디자인 시스템

### 2-1. frt (일반회원 — 리뉴얼 디자인, `webapp/new/`)

```
스타일: 공공기관 회원 포털의 2024년 리뉴얼 디자인. 따뜻하고 신뢰감 있는 톤, 둥근 모서리와 부드러운 그림자.
폰트: 제목은 GmarketSans Bold, 본문/라벨은 Pretendard.
주 색상: #f1692a (버튼/포인트), hover 시 #f04c1b.
중립 색상: 본문 텍스트 #212121, 보조 텍스트 #616161, 흐린 텍스트 #9e9e9e,
          구분선 #eeeeee / #e0e0e0, 옅은 배경 #fcfcfc / #f9f9f9 / #f5f5f5, 카드 배경 흰색.
경고/에러 텍스트: #ed4040.
버튼: border-radius 6px, 배경 #f1692a, 글자색 흰색, 폰트 굵게.
입력폼: line-height 45px, padding 16px, 얇은 회색 테두리.
카드/패널: border-radius 10px, box-shadow 0 0 20px rgba(0,0,0,0.2), 내부 padding 56px 48px, 흰 배경.
상태 뱃지(둥근 알약형): 대기/요청 상태는 빨강(#ed4040), 진행/활성 상태는 파랑(#3c79d5),
                      종료/마감 상태는 회색(#848690).
레이아웃: 최소 폭 1400px 데스크톱 기준, 본문 영역은 최대 폭 1200px 중앙 정렬.
상단에 페이지 타이틀(중앙 정렬, 32px bold)과 우측 정렬 breadcrumb(홈 아이콘 > 상위메뉴 > 현재메뉴).
```

### 2-2. mnt (관리자 — 레거시 백오피스 스킨, `webapp/css/site/mnt/`)

```
스타일: 데이터 밀도가 높은 전통적인 관리자 백오피스. 각진 사각형, 그림자 없음, 여백이 좁고 촘촘함.
        frt의 둥근 카드/그림자 스타일과 절대 섞지 않는다.
폰트: 나눔고딕(NanumGothic) 본문, 맑은 고딕 보조.
주 색상: #005ea8 (헤더/포인트 블루), 강조 숫자·통계는 #f1592a (오렌지).
중립 색상: 본문 텍스트 #333 / #636363, 얇은 회색 테두리 #ddd / #d1d1d1, 옅은 배경 #f4f4f4.
레이아웃: 상단에 검색 필터 영역(fieldset, 라벨+드롭다운+텍스트입력+검색버튼이 한 줄에 나열),
         그 아래 데이터 표(테두리 있는 table, 헤더 행 진한 배경, 좌측 체크박스 열, 우측 정렬 숫자),
         표 하단 중앙 페이지네이션, 표 아래 우측 정렬 액션 버튼 그룹(각진 사각 버튼).
대시보드형 화면은 상단에 통계 요약 카드(사각형, 얇은 테두리, 큰 숫자 + 작은 라벨) 3~6개를 가로로 배치.
```

## 3. 신규 화면 공통 원칙

- mnt 신규 화면은 기존 `EgovAccountUnlockManage.jsp` 류의 **검색필터 + 표 + 페이지네이션 + 하단 액션버튼** 구조를 그대로 따른다. 완전히 새로운 레이아웃 문법을 만들지 않는다.
- frt 신규 화면(2차 인증 등)은 `frt/member/login.jsp` 류의 **중앙 정렬 카드(boxR-shadow) + form-control 입력 + btn-login 버튼** 구조를 그대로 따른다.
- 승인/이력/로그 성격의 화면은 상태를 항상 색상 뱃지로 표시한다 (대기=빨강, 진행/승인=파랑, 종료/반려=회색 — 2-1 참조).
- 접속기록·이력류 화면은 반드시 **기간 필터 + 다운로드(엑셀/CSV) 버튼**을 상단에 노출한다 (개인정보 처리방침상 열람 이력 제공 요건).

## 4. 신규 화면 명세

### [mnt] 권한부여 신청/승인 관리

- **요구사항:** Ⅲ-2 권한관리 — 승인 워크플로
- **목적:** 관리자 권한 신청 → 승인권자 승인/반려 → 이력 자동 기록
- **핵심 요소:** 상단 통계카드(대기/승인/반려 건수), 검색필터(신청자/신청부서/상태/신청기간), 목록표(신청자, 소속, 요청권한, 신청사유, 신청일, 상태뱃지, 승인자), 행 선택 후 일괄 승인/반려, 반려 시 사유 입력 필수 팝업

```
mnt 관리자 백오피스 스타일로 "권한부여 신청/승인 관리" 화면을 그려줘.
상단에 대기/승인/반려 건수를 보여주는 사각형 통계 카드 3개를 가로로 배치.
그 아래 검색 필터(신청자, 신청부서 드롭다운, 상태 드롭다운, 신청기간 날짜범위, 검색 버튼).
그 아래 표: 체크박스, 번호, 신청자, 소속부서, 요청권한, 신청사유, 신청일, 상태(빨강=대기/파랑=승인/회색=반려 알약형 뱃지), 승인자.
표 하단에 페이지네이션, 우측에 "일괄 승인", "반려" 각진 사각 버튼.
행을 클릭하면 상세 승인 팝업이 뜨고, 팝업 안에는 신청 상세 정보와 반려 사유 입력 textarea, 승인/반려 버튼이 있음.
색상은 포인트 블루 #005ea8, 강조 오렌지 #f1592a, 그림자 없는 각진 스타일.
```

### [mnt] 권한변경 이력 조회 (AUTHOR_CHANGE_HISTORY)

- **요구사항:** Ⅲ-2 권한관리 — 변경 이력 추적
- **목적:** 누가/언제/어떤 권한을/누구에게/왜 변경했는지 열람
- **핵심 요소:** 검색필터(대상자/처리자/변경유형/기간), 목록표(변경일시, 대상자, 변경 전 권한, 변경 후 권한, 처리자, 처리사유, IP), 엑셀 다운로드 버튼

```
mnt 관리자 백오피스 스타일로 "권한변경 이력 조회" 화면을 그려줘.
상단 검색 필터: 대상자 이름/ID, 처리자, 변경유형 드롭다운(부여/회수/변경), 기간 날짜범위, 검색 버튼, 우측에 "엑셀 다운로드" 버튼.
그 아래 표: 번호, 변경일시, 대상자, 변경 전 권한, 변경 후 권한, 처리자, 처리사유, 접속 IP.
표 하단 페이지네이션. 그림자 없는 각진 표, 헤더 행은 옅은 파란 배경, 포인트 컬러는 #005ea8.
```

### [mnt] 개인정보 접속기록 조회/다운로드 (PERSONAL_DATA_ACCESS_LOG)

- **요구사항:** Ⅲ-4 접속기록
- **목적:** 개인정보처리시스템 접속기록(조회/변경/삭제/다운로드) 열람 및 법정 보관기간 내 제공
- **핵심 요소:** 검색필터(처리자/대상 개인정보주체/처리유형: 조회·다운로드·수정·삭제/기간), 목록표(처리일시, 처리자, 처리자 IP, 대상 개인정보주체, 처리유형뱃지, 처리 메뉴/화면명, 처리결과), 상세보기 팝업, 다운로드(CSV) 버튼, 우측 상단에 "3년 보관, 730일 경과 데이터는 자동 파기 대상" 안내 문구

```
mnt 관리자 백오피스 스타일로 "개인정보 접속기록 조회" 화면을 그려줘.
상단에 작은 안내 배너: "본 기록은 관련 법령에 따라 일정 기간 보관되며 이후 자동 파기됩니다."
검색 필터: 처리자 ID, 대상 개인정보주체 ID, 처리유형 드롭다운(조회/다운로드/수정/삭제), 기간 날짜범위, 검색/전체보기 버튼, 우측에 "CSV 다운로드" 버튼.
표: 번호, 처리일시, 처리자, 처리자 IP, 대상자, 처리유형(색상 알약형 뱃지: 조회=파랑, 다운로드=주황, 수정=초록, 삭제=빨강), 처리 화면/메뉴명, 처리결과.
행 클릭 시 상세 팝업(처리 전/후 값, 사유, 승인여부 표시).
하단 페이지네이션. 각진 표 스타일, 포인트 컬러 #005ea8, 강조 오렌지 #f1592a.
```

### [mnt] 접속기록 정기점검 리포트 대시보드

- **요구사항:** Ⅲ-4 접속기록 — 정기 점검
- **목적:** 월별/기간별 접속기록 통계를 요약해 정기 점검 보고서 형태로 확인
- **핵심 요소:** 상단 요약 통계 카드(총 접속건수, 다운로드 건수, 이상탐지 건수, 미확인 알림 수), 기간별 추이 막대/선 그래프, 처리유형별 비중 도넛/막대, 하단 이상탐지 상세 리스트, "점검 리포트 생성" 버튼(PDF/엑셀 산출)

```
mnt 관리자 백오피스 스타일로 "접속기록 정기점검 리포트" 대시보드 화면을 그려줘.
상단에 사각형 통계 카드 4개(총 접속건수, 다운로드 건수, 이상탐지 건수, 미확인 알림 수) 가로 배치, 큰 숫자는 오렌지 #f1592a.
그 아래 좌측에 최근 6개월 접속건수 추이 막대 그래프, 우측에 처리유형별 비중 도넛 차트.
하단에 "이상탐지 상세" 표: 탐지일시, 탐지유형, 대상 계정, 위험도(높음=빨강/중간=주황/낮음=회색 뱃지), 확인여부, 조치 버튼.
우측 상단에 "점검 리포트 생성" 각진 버튼(PDF/엑셀 아이콘).
그림자 없는 각진 카드, 포인트 블루 #005ea8, 데이터 밀도 높은 백오피스 톤.
```

### [mnt] 비정상접근 탐지 알림함 (5유형)

- **요구사항:** Ⅲ-4 접속기록 — 이상행위 탐지
- **목적:** 동시간대 다중 IP 접속, 심야시간 대량 접속, 대량 조회/다운로드, 반복 인증 실패, 권한 외 화면 접근 등 5개 유형의 이상탐지 알림 확인·조치
- **핵심 요소:** 좌측 유형별 필터 탭(5유형 + 전체), 목록표(탐지일시, 탐지유형뱃지, 대상 계정, 상세 사유, 위험도, 확인여부), 미확인 항목 강조, 행 클릭 시 상세 팝업(관련 접속기록 원본 연결), "확인 처리"/"계정 임시잠금" 액션 버튼

```
mnt 관리자 백오피스 스타일로 "비정상접근 탐지 알림함" 화면을 그려줘.
좌측에 세로 탭 필터: 전체 / 동시간대 다중IP접속 / 심야시간 대량접속 / 대량 조회·다운로드 / 반복 인증실패 / 권한외 화면접근.
우측 메인에 표: 번호, 탐지일시, 탐지유형(색상 알약형 뱃지), 대상 계정, 상세 사유 텍스트, 위험도(높음=빨강/중간=주황/낮음=회색), 확인여부(미확인 행은 옅은 빨간 배경으로 강조).
행 클릭 시 상세 팝업: 관련 접속기록 원본 리스트, "확인 처리", "계정 임시잠금" 각진 버튼.
표 하단 페이지네이션. 그림자 없는 각진 스타일, 포인트 블루 #005ea8, 위험 강조는 #ed4040.
```

### [mnt] 인증수단 관리 설정 (AuthMethodService 3종)

- **요구사항:** Ⅲ-3 인증체계
- **목적:** 관리자가 서비스 전체에서 허용할 2차 인증수단(예: OTP 앱, SMS, 이메일 등 3종)을 활성/비활성 설정하고 회원구분별 강제 적용 여부 지정
- **핵심 요소:** 인증수단 3개를 카드 또는 표 형태로 나열, 각 항목에 토글 스위치(사용/미사용), 회원구분별(개인/그룹/활동처/기관관리자) 강제 적용 체크박스 매트릭스, 저장 버튼

```
mnt 관리자 백오피스 스타일로 "인증수단 관리 설정" 화면을 그려줘.
상단에 인증수단 3개(OTP 앱, SMS 인증, 이메일 인증)를 가로로 나열한 카드형 표, 각 카드에 아이콘, 설명, 우측에 사용/미사용 토글 스위치.
그 아래 표: 행은 회원구분(개인/그룹/활동처/기관관리자), 열은 인증수단 3종, 각 셀에 체크박스로 "이 회원구분에 이 인증수단 강제 적용" 설정.
하단 우측에 "저장" 각진 버튼. 포인트 블루 #005ea8, 각진 표 스타일, 그림자 없음.
```

### [mnt] 계정 잠금/휴면계정 관리 확장

- **요구사항:** Ⅲ-3 인증체계 — 계정 잠금 5회, 휴면계정 정책
- **목적:** 기존 잠금해제 관리 화면에 "휴면계정" 탭과 잠금 사유(5회 실패/관리자 수동/휴면전환)를 구분해 표시
- **핵심 요소:** 상단 탭(잠금 계정 / 휴면 계정), 검색필터(회원구분/잠금·휴면 사유/기간), 목록표(계정, 이름, 최종접속일, 잠금·휴면 사유뱃지, 처리버튼), 일괄 해제

```
mnt 관리자 백오피스 스타일로 "계정 잠금/휴면계정 관리" 화면을 그려줘.
상단에 탭 2개: "잠금 계정" / "휴면 계정".
탭 아래 검색필터: 회원구분 드롭다운, 잠금·휴면 사유 드롭다운(5회 실패/관리자 수동/장기 미접속 휴면전환), 기간, 검색버튼.
표: 체크박스, 번호, 회원구분, 이름, 계정ID, 최종접속일, 사유(알약형 뱃지: 5회실패=빨강, 관리자수동=회색, 휴면전환=주황), 처리상태.
하단에 "선택 해제", "전체 해제" 각진 버튼. 포인트 블루 #005ea8, 각진 표 스타일.
```

### [frt] 2차 인증(추가인증) 입력 화면

- **요구사항:** Ⅲ-3 인증체계
- **목적:** 아이디/비밀번호 로그인 성공 후 추가 인증수단(OTP/SMS/이메일) 입력을 요구
- **핵심 요소:** 중앙 정렬 카드, 안내 문구, 인증수단 선택 탭 또는 라디오, 인증번호 입력창 + 타이머(예: 03:00), 재발송 버튼, 인증 확인 버튼

```
frt 회원 포털의 리뉴얼 디자인 스타일로 "2차 인증(추가인증)" 화면을 그려줘.
중앙에 둥근 모서리(radius 10px)와 부드러운 그림자가 있는 흰색 카드, 폭은 화면 중앙 800px.
카드 상단에 자물쇠 아이콘과 "본인확인을 위해 추가 인증이 필요합니다" 안내 문구(GmarketSans 제목 폰트).
그 아래 인증수단 선택 라디오 3개(OTP 앱 / SMS 인증 / 이메일 인증).
그 아래 인증번호 입력창(둥근 테두리, padding 넉넉)과 우측에 "03:00" 남은시간 타이머, 아래에 작은 "인증번호 재발송" 링크.
하단에 폭 100%, radius 6px, 배경 오렌지(#f1692a) "인증 확인" 버튼.
전체적으로 따뜻하고 신뢰감 있는 공공서비스 톤, 여백 넉넉.
```

### [frt] 마이페이지 – 인증수단 등록/관리

- **요구사항:** Ⅲ-3 인증체계
- **목적:** 회원이 마이페이지에서 본인 인증수단을 등록/변경/해제
- **핵심 요소:** 등록된 인증수단 리스트(카드형), 각 항목에 상태뱃지(등록됨/미등록), 등록·해제 버튼, OTP 등록 시 QR코드 표시 팝업

```
frt 회원 포털의 리뉴얼 디자인 스타일로 마이페이지 내 "인증수단 관리" 화면을 그려줘.
상단 타이틀 "인증수단 관리"(중앙정렬, GmarketSans bold, 32px)와 우측 브레드크럼(홈 > 마이페이지 > 인증수단 관리).
본문 최대폭 1200px 중앙정렬. 그 아래 카드 3개를 세로로 나열(OTP 앱, SMS 인증, 이메일 인증), 각 카드는 둥근 모서리 흰 배경에 그림자.
각 카드 좌측에 아이콘과 인증수단명, 우측에 상태 뱃지(등록됨=파랑 알약형, 미등록=회색)와 "등록" 또는 "해제" 버튼(radius 6px, 오렌지 배경).
OTP 카드의 "등록" 버튼을 누르면 열리는 팝업: QR코드 이미지, 등록 확인용 6자리 코드 입력창, "등록 완료" 버튼.
```

### [frt] 계정 잠금 안내 화면

- **요구사항:** Ⅲ-3 인증체계 — 로그인 5회 실패 시 잠금
- **목적:** 로그인 5회 실패로 잠긴 계정에게 사유와 해제 절차 안내
- **핵심 요소:** 경고 아이콘, 잠금 사유/잠금 해제 가능 시각 안내, 본인인증을 통한 잠금 해제 버튼, 고객센터 안내

```
frt 회원 포털의 리뉴얼 디자인 스타일로 "계정 잠금 안내" 화면을 그려줘.
중앙 정렬 카드(둥근 모서리, 그림자), 상단에 경고 아이콘과 빨간색(#ed4040) "계정이 잠겼습니다" 타이틀.
그 아래 안내 문구: "비밀번호 5회 오류로 계정이 잠금 처리되었습니다." 및 잠금 해제 가능 조건 설명.
중앙에 "본인인증하고 잠금 해제하기" radius 6px 오렌지 버튼.
하단에 옅은 배경 박스로 고객센터 문의 안내(전화번호, 운영시간).
```

## 5. 반영 체크리스트 (Stitch 목업 → 실제 구현 시)

- [ ] mnt 화면은 실제 구현 시 `ui:pagination` 태그, `EgovComAbstractDAO` 기반 iBatis 2 쿼리와 맞물리므로, Stitch가 제안한 표 컬럼 수/정렬이 실제 VO 필드와 일치하는지 확인
- [ ] 상태 뱃지 색상은 2-1/2-2에 정의된 팔레트를 그대로 사용 (임의 색상 추가 금지)
- [ ] frt 신규 화면은 `new/css/sub/member.css` 등 기존 클래스(`boxR-shadow`, `box-sm`, `form-control`, `btn-login`)를 재사용하고 새 클래스를 남발하지 않는다
- [ ] 다운로드(CSV/엑셀) 버튼이 포함된 화면은 실제 다운로드 시 개인정보 마스킹/권한 체크 로직이 필요함을 백엔드 설계에 반영
- [ ] 접근성: 상태를 색상만으로 구분하지 않고 텍스트 라벨을 항상 병기 (색약 사용자 고려)
- [ ] Stitch가 생성한 폰트가 Pretendard/GmarketSans/NanumGothic이 아니면 실제 반영 시 교체