chore: 14단계 검색 색인을 앱 로그인 브랜치에 합친다

앱 새 메일 알림(푸시)의 서버 일을 앱 세션과 14단계 위에서 하려고 합친다.
겹친 곳은 두 곳이다. auth.module.ts 는 import 둘을 함께 두고,
AuthService.login() 은 enrollAfterLogin(14단계)을 남긴 뒤 recordSignIn(앱 로그인)으로 기록한다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-11-07 21:44:45 +09:00
227 changed files with 31229 additions and 742 deletions
+108 -10
View File
@@ -297,7 +297,8 @@ API 와 서버 규칙은 계약 2절 "새 메일 확인" · "검색" · "여러
- **알림**(오른쪽 아래 · 되돌리기가 있으면 10초): "메일 N통을 보낸편지함으로 옮겼습니다." [되돌리기] · "메일 N통을 휴지통으로 옮겼습니다." [되돌리기] ·
"메일 N통을 영구 삭제했습니다." · 일부만 처리했으면 뒤에 "1통은 그사이 옮겨졌거나 지워져 그대로 두었습니다."
(메일함 이름의 받침에 맞춰 '으로/로'). 읽음 · 중요 표시는 목록이 바로 바뀌므로 알리지 않는다.
- **영구 삭제 확인**: 휴지통에서만. 제목 "메일 N통을 영구 삭제할까요?" · 글 "휴지통에서 지운 메일은 되돌릴 수 없습니다." ·
[되돌리기] 뒤 알림은 한 메일함으로 되돌렸으면 "메일 N통을 받은편지함으로 되돌렸습니다.", 여러 곳이면 "메일 N통을 되돌렸습니다."(2026-11-07 — 잇달아 되돌린 알림을 가를 수 있게).
- **영구 삭제 확인**: 휴지통에서만. 제목 "메일 N통을 영구 삭제할까요?"(대화로 묶은 휴지통에서 줄을 골랐으면 "휴지통에 있는 메일 N통을 영구 삭제할까요?" — 14단계) · 글 "휴지통에서 지운 메일은 되돌릴 수 없습니다." ·
[영구 삭제](#B42318 채움) [취소] — 열리면 「취소」에 초점이 간다.
- 메일함을 바꾸거나 검색하면 선택을 푼다.
@@ -539,10 +540,10 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
- **보낸 뒤 알림**(오른쪽 아래): "메일을 보냈습니다." + [보내기 취소] + 아래 남은 시간 막대(설정한 초 — 마우스를 올려도 멈추지 않는다) → 시간이 지나면 저절로 닫힌다.
일부가 받지 못하면 빨간 알림 "보냈지만 1명은 받지 못합니다. 주소 (까닭)" + [보내기 취소](주소를 고쳐 다시 보낼 수 있게).
[보내기 취소] → "보내기를 취소했습니다. 쓰던 메일로 돌아왔습니다." + 그 메일로 쓰기 화면(받는 사람 · 제목 · 본문 · 첨부 그대로). 늦게 누르면 "이미 보낸 메일이라 취소할 수 없습니다."
예약 → "10월 30일 (금) 오전 9:00 에 보냅니다." + [예약됨 보기]. 로그아웃 · 다른 계정 로그인 때 알림은 닫는다 — 메일은 그대로 보내진다.
예약 → "10월 30일 (금) 오전 9:00에 보냅니다." + [예약됨 보기]. 로그아웃 · 다른 계정 로그인 때 알림은 닫는다 — 메일은 그대로 보내진다.
- **「예약됨」**: 메일함 패널의 보낸편지함 아래(예약한 메일이 있을 때만, 시계 아이콘, 오른쪽에 통 수). 목록은 받는 사람 · 제목 · 보낼 시각(청록 글 — "10월 30일 (금) 오전 9:00") 차례,
고르는 칸 · 여러 통 처리는 없다. 보낸 메일은 저절로 빠지고 보낸편지함에 남는다.
- **예약한 메일을 열면**: 머리 아래 청록 안내 줄 "10월 30일 (금) 오전 9:00 에 보낼 메일입니다." + [고치기](예약을 취소하고 쓰기 화면으로) [예약 취소](보내지 않고 임시보관함으로 —
- **예약한 메일을 열면**: 머리 아래 청록 안내 줄 "10월 30일 (금) 오전 9:00에 보낼 메일입니다." + [고치기](예약을 취소하고 쓰기 화면으로) [예약 취소](보내지 않고 임시보관함으로 —
알림 "예약을 취소하고 임시보관함으로 옮겼습니다." + [고치기]). 답장 · 전달 · 스팸 신고 단추는 없다. [삭제]는 예약을 취소한 뒤 휴지통으로(확인 창).
- **보낸편지함**: 아직 보내지 않은 메일은 날짜 칸이 "예약 · 10월 30일 오전 9:00"(청록) — 보내기 취소를 기다리는 동안은 "보내는 중".
@@ -571,7 +572,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
### 쓰기 화면 — 첨부 칸 (`ComposeLargeFiles`)
- **링크로 바뀌는 때**: 파일 하나가 20MB 를 넘을 때, 메일에 담은 파일의 합계를 25MB 넘게 만들 때(고른 차례대로 그 파일부터), 메일에 담지 못하는 형식(mp4 · mov · dwg · dxf · psd · ai · 7z)일 때 저절로 링크로 보낸다.
묻는 창은 없다 — 합계 때문에 바뀌면 칸 아래 ⓘ 한 줄 "‘회의자료_전체.pptx’(9.4 MB)는 메일에 담으면 합계가 25MB 를 넘어 링크로 보냅니다."(role=status). 받는 사람이 사내뿐이어도 같은 규칙이다.
묻는 창은 없다 — 합계 때문에 바뀌면 칸 아래 ⓘ 한 줄 "‘회의자료_전체.pptx’(9.4 MB)는 메일에 담으면 합계가 25MB를 넘어 링크로 보냅니다."(role=status). 받는 사람이 사내뿐이어도 같은 규칙이다.
메일에 담은 파일도 줄의 링크 단추(40 · 「링크로 보내기」 — 마우스를 올리면 같은 글)로 바꿀 수 있다 — **이 쓰기 화면에서 고른 파일에만** 있다(전달 원본 · 저장본에서 이어 온 첨부에는 없다 — 처음 판).
링크 → 메일에 담기 단추는 없다(빼고 다시 고르면 한도 안에서 담긴다 — 아래 "처음 판에서 미룬 것").
- **안내문**: "파일당 최대 20MB · 합계 25MB · 최대 20개 · 더 큰 파일은 파일당 2GB, 10개까지 링크로 보냅니다".
@@ -590,7 +591,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
| 위험 | "위험한 내용이 발견되어 보낼 수 없습니다. 이 파일을 빼 주세요."(경고 삼각형) | 빨간 줄 · ✕ |
- **올리기 전 검사**(지금 첨부 사전 검사와 같은 결 — 넘으면 올리지 않고 빨간 줄, 그 파일만 빠지고 보내기는 막지 않는다):
"파일 하나는 2GB 까지 보낼 수 있습니다." · "링크로 보내는 파일은 메일 한 통에 10개까지입니다." ·
"파일 하나는 2GB까지 보낼 수 있습니다." · "링크로 보내는 파일은 메일 한 통에 10개까지입니다." ·
"대용량 첨부는 10GB까지 보관할 수 있어 더 올릴 수 없습니다. 보내지 않은 파일을 지우거나 링크를 끊으면 바로 공간이 생깁니다. [대용량 첨부 보기]" ·
"지금은 서버에 공간이 모자라 올릴 수 없습니다. 잠시 후 다시 시도해 주세요." · 형식은 `FILE_001` 사전 문구.
링크로 보낼 수 있는 형식 = 일반 첨부 목록 + mp4 · mov · dwg · dxf · psd · ai · 7z. 실행 파일(exe · msi · bat · cmd · js · vbs · scr 등)과 디스크 이미지(iso · img · vhd)는 막는다. 파일 고르기 창은 두 목록을 합친 형식만.
@@ -651,7 +652,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
"한국 시간으로 2026년 11월 29일(일)까지 내려받을 수 있습니다. 30일 남았습니다."(날짜만 굵게) → 파일 목록(줄마다 아이콘 36 · 이름 · "1.2 GB · 보안 검사 결과 이상 없음" · [내려받기](채운 단추 44)) →
"내려받다 끊기면 브라우저의 다운로드 목록에서 다시 시도해 주세요. 받은 곳부터 이어서 받습니다." →
청록 상자 "이 화면은 로그인이나 비밀번호를 묻지 않습니다. 묻는 화면이 나오면 닫고 보낸 사람에게 확인해 주세요." →
"받을 이유가 없는 파일이면 postmaster@arasystem.it.kr 로 알려 주세요."(운영 설정 — 처음 값 postmaster@메일 도메인) → 영어 한 줄.
"받을 이유가 없는 파일이면 postmaster@arasystem.it.kr(으)로 알려 주세요."(조사는 주소의 끝 글자로 고르고 영문이면 "(으)로" — 주소는 운영 설정이라 바뀔 수 있다, 2026-11-07)(운영 설정 — 처음 값 postmaster@메일 도메인) → 영어 한 줄.
- 메일 제목 · 본문 · 받는 사람, 내려받은 수 · 남은 수는 보이지 않는다. [내려받기]는 형식과 상관없이 늘 저장이고, 누르기 직전에 상태를 한 번 더 묻는다. noindex · no-referrer.
- **상태**(모든 상태에서 머리 · 영어 한 줄은 그대로. 신고 주소 줄은 링크 정보를 받은 상태에서만 — 없는 링크 · 요청이 너무 많음 · 오류 응답에는 그 값이 없다):
- 검사 중 — 모두 검사 중이면 제목 "보안 검사 중입니다" / "파일을 검사하고 있습니다. 몇 분 뒤 이 화면을 다시 열어 주세요." + [다시 확인]. 일부면 그 줄만 "보안 검사 중" + [내려받기] `aria-disabled`.
@@ -685,7 +686,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
- 최근에 보낸 차례 · 20개씩 [더 보기].
- **[링크 복사]는 두지 않는다** — 서버는 링크를 해시로만 알아 원래 주소를 모른다. 주소는 보낸 메일의 읽기 화면(보낸 사람 자신)에서 복사한다.
- [링크 끊기] → 읽기 화면과 같은 확인 창 · 같은 알림(창 글에 메일 제목). 끊는 동안 그 덩이의 [링크 끊기]를 막고, 끝나면 초점을 덩이 머리로.
- **빈 상태**: 사용량 "0 / 10 GB" + "링크로 보낸 파일이 없습니다" / "메일 쓰기에서 20MB 가 넘는 파일을 고르면 링크로 보냅니다. 받는 사람은 보낸 날부터 30일 동안 내려받을 수 있습니다."
- **빈 상태**: 사용량 "0 / 10 GB" + "링크로 보낸 파일이 없습니다" / "메일 쓰기에서 20MB가 넘는 파일을 고르면 링크로 보냅니다. 받는 사람은 보낸 날부터 30일 동안 내려받을 수 있습니다."
보내지 않은 파일이 있으면 그 묶음은 위에 그대로 있다. 목록을 받지 못하면 지금의 목록 오류와 같은 모양.
- **위험이 나오면** 빨간 알림 "올린 대용량 파일 ‘견적_요청서.zip’에서 위험한 내용이 발견되어 막았습니다." + [대용량 첨부 보기] —
웹메일을 열어 둔 동안 실시간 알림(`large-file`)으로 바로 띄운다. 그때 열려 있지 않았으면 알림은 없고 목록 · 첨부 칸의 상태(위험)로만 안다 —
@@ -1034,7 +1035,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
같은 대화(답장 · 전달로 이어진 메일)를 읽기 화면에 늘 보이고, 목록은 사용자가 켜면 대화로 묶는다.
까닭은 엔진 실측(2026-11-03)이다 — 엔진 스레드는 `회신:` · `답장:` · `전달:` 을 떼지 않아 한국어 Outlook 의 답장이 따로 떨어지고, 엔진 검색은 어절이 통째로 같을 때만 맞는다.
데이터 · API 규칙(색인 · 대화 · 조건)은 구현 때 계약 2절에 더한다. 구현 · 배포는 전환 뒤 안정화(1~2주) 다음이다.
새 토큰은 없다 — 조건 칸 40 은 필터 조건 칸의 밀도 예외(`--size-filter-control`), [대화로 묶기] 36 은 안내 줄 단추의 밀도 예외(`--size-notice-action`)를 다시 쓴다.
새 크기 토큰은 없다 — 조건 칸 40 은 필터 조건 칸의 밀도 예외(`--size-filter-control`), [대화로 묶기] 36 은 안내 줄 단추의 밀도 예외(`--size-notice-action`)를 다시 쓴다(구현 때 [조건] 32 도 — 아래 "14단계 구현하며 정한 보완"). 강조 노랑만 색 토큰(`--color-search-mark`)을 하나 둔다.
문구는 위 「화면 문구 — 사용자에게 말하듯」을 따른다.
### 검색 · 조건 검색 · 강조 (`Search14`)
@@ -1050,8 +1051,8 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
- **결과 줄**(높이 64, 세 줄): 보낸 사람 · 시각 / 제목(+ 첨부 표시) / 미리 보기 한 줄(맞은 말 둘레). 제목 · 미리 보기의 맞은 말은 `<mark>`(노랑 `#FCE7A4` · 글자색은 그대로).
- **읽기 화면 강조**: 제목 · 본문 · 첨부 이름의 맞은 말. 본문은 서버가 정화한 HTML 의 글 조각에만 `<mark>` 를 넣는다(찾기와 같은 정규화 · 부분 일치). 맞은 곳 사이 이동(다음 · 이전)은 이번에 넣지 않는다.
- **검색 준비 중**: 지난 메일의 색인을 만드는 동안 그 직원의 검색은 지금 방식(엔진) 그대로이고, 결과 머리 아래 안내 줄(옅은 청록 바탕 · role=status)
"지난 메일을 검색할 수 있게 준비하고 있습니다. 준비가 끝날 때까지는 낱말이 통째로 같은 메일만 찾습니다."
- **결과 없음**: "‘계약’에 맞는 메일이 없습니다" / "다른 말로 찾거나 조건을 줄여 보세요." + [전체 메일함에서 찾기](그 메일함에서 찾을 때만). 지금의 한계 안내("낱말 단위로 찾습니다 …")는 색인이 준비된 뒤에는 뺀다.
"지난 메일을 검색할 수 있게 밤사이에 준비하고 있습니다. 메일이 많으면 며칠 걸릴 수 있고, 그동안은 낱말이 통째로 같은 메일만 찾습니다."(2026-11-07 사용자 관점 점검 — 색인은 밤에만 채워, 낮 내내 같은 글이면 멈춘 줄 안다)
- **결과 없음**: "‘계약’에 맞는 메일이 없습니다" / "다른 말로 찾거나 조건을 줄여 보세요." + [전체 메일함에서 찾기](그 메일함에서 찾을 때만). 지금의 한계 안내는 색인이 준비된 뒤에는 뺀다 — 준비 중에는 위 안내 줄과 겹치지 않게 "준비가 끝나기 전에는 ‘서버이전’의 ‘서버’처럼 붙여 쓴 말의 일부나, 제목 맨 앞의 [공지]나 Re: 같은 말머리로는 찾지 못합니다."(2026-11-07).
- 검색 결과는 대화로 묶지 않는다(한 통씩).
### 읽기 화면 — 같은 대화 (`Thread14`)
@@ -1073,6 +1074,7 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
### 처음 판에서 미룬 것
본문 강조의 다음 · 이전 이동, 검색어 줄임말(from: 같은 꼴), 대화째 끌어다 놓기, 첨부 파일 안의 글 찾기, 끝이 바뀐 말 찾기(형태소 분석).
같은 대화 칸 머리의 [모두 펼치기]와 펼친 줄 머리의 [답장]도 다음 후보로 둔다(2026-11-07 사용자 관점 점검에서 나온 제안 — 사용자가 미루기로 정함). 지금은 줄마다 펼치고, [답장]은 펼친 본문 아래에만 있다.
## 구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다)
@@ -1374,3 +1376,99 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
- **설정 › 대용량 첨부**: 보낸 링크 머리의 메일 제목이 없으면(지웠거나 읽지 못함 — `subject: null`) 글자만, 빈 제목은 메일이 있는 것이라 링크다.
[지우기]가 `FILE_003`(그사이 보내져 링크에 실림)이면 목록 · 사용량을 다시 받고 사전 문구로 알린다.
- **내려받기 화면**: 보낸 사람 이름이 비어 있으면 주소를 쓴다. 불러오는 동안은 `role="status"` "불러오는 중"(자리 막대는 `aria-hidden`).
### 14단계 구현하며 정한 보완 — 검색 (2026-11-06 — 캔버스에는 아직 없다)
주소 · 이어 찾기의 값은 계약 2절 "검색 — 14단계"의 클라이언트 줄이 같은 내용이다.
- **크기**: [조건] 단추는 높이 32 — 목록 표 별 · 보기 전환의 밀도 예외(`--size-compact-control`)를 다시 쓴다. 패널의 칸 · 단추 40(`--size-filter-control`), 조건 줄 40 · 줄 안 [조건 지우기] 36(`--size-notice-action`). 새 크기 토큰은 없다.
- **[조건] 패널**
- 단추의 title "조건으로 찾기", 조건이 걸려 있으면 화면 낭독에 ", 조건이 걸려 있음"을 붙인다.
- 칸 안내는 "이름이나 메일 주소"(보낸 사람 · 받는 사람) · "제목에 든 말" · "내용에 든 말"(칸 이름 "내용"과 같게 — 2026-11-07)이고, 날짜 칸은 "시작 날짜" · "끝 날짜"다.
- 날짜가 거꾸로면 알림 대신 칸 아래 "끝 날짜를 시작 날짜와 같거나 그 뒤로 골라 주세요.", 고를 수 있는 날짜 밖이면 "날짜는 1970년 1월 1일부터 9999년 12월 30일 사이에서 골라 주세요."(날짜 고르기는 이미 막고, 해를 손으로 칠 때만 보인다).
- 패널의 [조건 지우기]는 패널 안의 칸만 비운다 — 보낸 사람 · 받는 사람 · 제목 · 내용 · 기간(전체 기간으로) · 날짜 · 첨부 체크와 칸 아래 알림까지(2026-11-07 사용자 확정 — 보드와 다르다).
패널은 열린 채이고 찾지 않으며 초점은 그 단추에 남는다. 걸린 조건 · 조건 줄 · 결과는 [찾기]를 누를 때까지 그대로이고, [찾기] 없이 닫았다 다시 열면 걸린 조건으로 다시 채운다.
비운 채 [찾기]를 누르면 검색어가 있으면 조건만 빼고 다시 찾고, 검색어도 없으면(조건만 걸린 검색) 검색을 닫는다. 걸린 조건을 바로 빼는 것은 결과의 조건 줄 [조건 지우기]다(조건만 걸린 검색이면 검색을 닫는다).
- 패널이 열린 채 검색 칸에서 Esc 를 누르면 패널만 닫고 초점은 검색 칸에 남는다.
- **기간**: "최근 N"은 고른 순간 날짜로 바꾼다 — 그만큼 앞의 같은 날부터 오늘까지(1주는 7일 전, 달은 말일을 넘지 않는다).
- **조건 줄 글**: "조건: " 뒤에 쉼표로 잇는다 — "{이름} 님이 보낸 메일" · "{이름} 님이 받은 메일" · "제목에 ‘{말}’이/가 든 메일" · "내용에 ‘{말}’이/가 든 메일" · "최근 1달" 또는 "2026. 10. 1.부터 11. 5.까지"(같은 해면 끝 날짜의 해를 뺀다) · "…부터" · "…까지" · "첨부 있음". 시작과 끝이 같은 날이면 "2026. 11. 6. 하루", 보낸 사람 · 받는 사람 값이 내 이름이나 주소와 통째로 같으면(앞뒤 공백 · 대소문자 무시) "내가 보낸 메일" · "내가 받은 메일"(2026-11-07).
- **결과 줄**: 분할 보기는 보드대로 세 줄 64 다. **목록 보기(표)는 행 38 그대로 두고 제목만 강조한다**(미리 보기 줄 없음).
결과 줄에도 별 · 고르기 칸을 남겼다 — 3단계부터 검색 결과에서도 여러 통을 고르고 처리한다(보드의 결과 줄에는 없다).
- **글**
- 조건만으로 찾았을 때 머리 글은 "N통" · "찾는 중", 결과 없음은 "조건에 맞는 메일이 없습니다" / "조건을 바꾸거나 줄여 보세요.".
결과 없음의 도움말은 검색어 + 조건이면 "다른 말로 찾거나 조건을 줄여 보세요.", 검색어만(걸린 조건 없음)이면 "다른 말로 찾아 보세요."(2026-11-07 — 조건이 없는데 "조건을 줄여"라고 했다).
- 옛 한계 안내("낱말 단위로 찾습니다 …")는 색인을 채우는 동안(`building`)만 결과 없음 아래에 더한다.
- 한 글자 안내: "한 글자로만 찾을 때는 본문은 빼고 제목, 보낸 사람과 받는 사람, 첨부 파일 이름에서 찾습니다. 본문까지 찾으려면 두 글자 이상으로 찾아 주세요." — 색인이 준비됐고 본문을 찾을 말(검색어나 내용 조건)이 있을 때만.
- 준비 상태를 받지 못하면(요청 실패) 안내 줄 · 옛 한계 안내 · 한 글자 안내를 모두 보이지 않는다.
- **[더 찾기]**: 한 번에 다 찾지 못하면 "아직 맞는 메일을 찾지 못했습니다" / "메일이 많아 한 번에 다 찾지 못했습니다. [더 찾기]를 누르면 이어서 찾습니다." + [더 찾기](찾는 동안 "찾는 중…").
하나도 못 찾았으면 "찾는 중"을 이어 보이고, 하나라도 찾으면 먼저 보이면서 뒤에서 잇는다. 목록 보기의 [다음]은 이어 받는 동안 기다렸다가 넘기고, 그동안 꺼짐 · `aria-busy` 다.
- **낱말이 너무 많은 주소**(손으로 고친 주소): "찾을 말이 너무 많습니다" / "검색어와 조건에 넣은 낱말은 모두 합쳐 8개까지 찾을 수 있습니다. 검색 칸이나 [조건]에서 낱말을 줄여 주세요." — [전체 메일함에서 찾기] · 알림 없이, 조건 줄의 [조건 지우기]는 남긴다.
- **강조 색**: 노랑 `#FCE7A4` 는 색 토큰 `--color-search-mark` 하나로 두고, 본문 틀 안 CSS 는 같은 값을 직접 적는다(짝). 보낸 사람이 본문에 쓴 `<mark>` 도 같은 노랑으로 보인다(드물어 가르지 않는다).
미리 보기 줄(회색 `--color-text-muted`)의 맞은 말만 글자를 `--color-text-secondary`(#4A5363)로 진하게 한다 — 회색 그대로면 노랑 위 대비가 4.05:1 로 4.5:1 에 못 미친다(2026-11-07 사용자 확정 — 보드와 다르다, 앱도 같다). 제목 · 읽기 화면 · 본문 틀의 강조는 진한 글 위라 글자색 그대로다.
- 긴 안내 글(결과 없음 · [더 찾기] · 안내 줄)은 낱말 가운데서 줄을 바꾸지 않는다(`word-break: keep-all`).
### 14단계 구현하며 정한 보완 — 같은 대화 (2026-11-06 — 캔버스에는 아직 없다)
받기 · 다시 받기의 값은 계약 2절 "대화 — 14단계"의 클라이언트 줄이 같은 내용이다.
- **크기**: 줄 48 · 머리글자 28, 펼친 줄의 [답장] · [이 메일만 열기] 36(안내 줄 단추의 밀도 예외 `--size-notice-action` 재사용), [더 보기] · [다시 시도] 44. 새 크기 토큰은 없다.
- **보드와 다르게 한 것**
- 지금 보는 메일 줄의 바탕은 가장 가까운 기존 토큰 `--color-brand-tint`(#F3F8F8 — 보드 #F2F8F8, 시각 글자 대비 4.6:1).
- 칸 제목은 h3 다 — 읽기 화면 제목이 h2 · 첨부 칸이 h3 이라 같은 층으로(보드는 제목을 h1 로 써서 h2 였다).
- 펼친 본문은 읽기 화면과 같은 본문 틀(14px — 보드 13.5px)이다.
- 펼친 줄에는 외부 이미지 안내 · 첨부 목록을 두지 않는다 — 본문을 줄였거나 HTML 을 보이지 못하면 읽기 화면과 같은 노란 안내 줄만 두고, 나머지는 [이 메일만 열기]로 연 읽기 화면에서 본다.
다만 첨부가 있으면 본문 아래 · [답장] 위에 클립과 "첨부 파일 N개는 [이 메일만 열기]를 누르면 볼 수 있습니다."(12.5 회색 — 수는 읽기 화면과 같은 셈: 본문 그림 빼고 대용량 첨부 더해)를 둔다(2026-11-07 — 본문은 첨부했다는데 표시가 없었다).
- **보드에 없어서 정한 것**
- 칸 머리의 통 수는 다 셀 수 있을 때만 "같은 대화 N통"이고, 아직 다 받지 못해 수를 모르면 "같은 대화"다.
- 남은 메일이 있으면 상자 아래 [더 보기](받는 동안 "불러오는 중…" · `aria-busy`).
- 받지 못하면 칸 자리에 "같은 대화를 불러오지 못했습니다." + [다시 시도] + 문의 코드. 이 경로가 없는 옛 서버(404)면 칸이 없다.
- 시각은 "오늘 오전 9:30" · "어제 …" · "10월 29일 (목) 오전 9:30" · 다른 해는 "2025. 10. 29. (수) …" 꼴이다.
- 내가 보낸 메일 · 임시 저장본은 이름 자리에 "나" + 회색 메일함 이름("보낸편지함" · "임시보관함"), 다른 메일함에 든 내 메일은 "나"만. 지금 보는 메일 줄에는 회색 글을 두지 않는다(보드 그대로).
- 미리 보기가 비면 제목을 보인다. 우리 웹 · 앱의 원문 인용 머리 "> 원본 메일"(끝에서 잘린 "> 원…" 포함)부터 뒤는 잘라 내고 남는 글이 없으면 제목이다 — 다른 메일 프로그램의 인용 꼴은 그대로(2026-11-07).
- 줄 차례는 서버 차례(받은 시각 — 내 메일은 저장한 시각) 그대로이고, 보내기를 기다리는 메일(보내기 취소 · 예약)만 받은 줄의 맨 끝에 보낼 시각 차례로 둔다(2026-11-07 — 예약 줄이 시각 차례를 거슬렀다).
- 임시 저장본 줄은 [답장]이 없고 [이 메일만 열기]가 쓰기 화면으로 연다. 예약한 메일은 [답장]이 없다(보내기 취소를 기다리는 메일은 읽기 화면처럼 있다).
- 붙잡힌 메일의 시각 자리는 목록과 같은 보내기 취소 · 예약 표시(청록 굵게)다.
- **펼치기**: 안 읽은 메일을 펼치면 읽음이 된다(읽기 화면에서 연 것과 같다). 접힌 줄의 받아 둔 본문은 최근 10통까지만 기억한다. 펼친 본문 안에서 Ctrl+P 는 그 펼친 메일의 인쇄 화면을 연다.
- **안 읽은 줄**(2026-11-07 사용자 확정 — 보드와 다르다): 목록 줄과 같은 굵기 · 색이다 — 이름 650, 미리 보기 · 시각 600(붙잡힌 메일의 시각은 청록 그대로). 화면 낭독은 이름 앞에 목록과 같은 "안 읽음, ". 임시 저장본은 목록처럼 읽음 여부를 보이지 않는다.
이 탭에서 바꾼 읽음(줄을 펼침 · 읽기 화면에서 연 메일 · 목록과 여러 통 처리의 읽음 · 안 읽음 표시 · 메일함 ⋯ › 모두 읽음)은 줄에 바로 보이고, 바꾸지 못해 되돌리면 줄도 되돌린다. 받는 동안 바꾼 것과 받기를 시작할 때 보내던 것은 받은 값보다 이 탭의 값을 믿는다.
다른 탭 · 기기에서 바꾼 읽음은 다음에 칸을 다시 받을 때 보인다(그 줄을 펼치면 받은 본문대로 바로 풀린다). 읽은 줄의 이름(600)과 안 읽은 줄(650)의 차이는 작아 눈에 띄는 차이는 미리 보기 · 시각이다 — 읽은 줄 이름을 낮추는 것은 보드를 바꾸는 일이라 두었다.
- **[이 메일만 열기]**: 분할 보기는 방문 기록을 쌓고(목록 줄을 누른 것과 같다), 목록 보기는 바꿔 끼운다(이전 · 다음과 같다 — [목록으로]가 기록을 쌓지 않게).
지금 목록에 든 메일은 그 목록 안에서, 검색 결과 · 예약됨은 받아 둔 줄에 있을 때만 그 목록 안에서, 그 밖은 그 메일이 든 메일함에서 연다.
- **초점**: 누른 단추가 사라지면(칸의 [다시 시도]가 성공 · [더 보기]로 끝까지 받음 · 다시 받아 줄이 빠짐) 그 줄의 펼침 단추 → 새 [다시 시도] → 칸 제목 차례로 옮기고, 칸이 통째로 사라지면 본문으로 옮긴다.
[이 메일만 열기] 뒤에는 삭제 뒤 다음 메일로 갈 때처럼 따로 옮기지 않는다(두 길을 함께 고칠 거리).
- **다시 받기**: 새 메일 · 지움 · 옮김으로 메일함 통 수가 바뀔 때와 쓰기 화면에서 돌아올 때만 다시 받는다 — 읽음 표시만 바뀐 소식으로는 받지 않는다(받으면 메일을 열 때마다 대화를 한 번 더 받는다). 칸의 읽음은 위 "안 읽은 줄"처럼 이 탭에서 바꾼 것만 바로 적는다.
### 14단계 구현하며 정한 보완 — 목록 대화로 묶어 보기 (2026-11-06 — 캔버스에는 아직 없다)
받기 · 맞추기 · 줄에 하는 일의 규칙은 계약 2절 "대화 — 14단계"의 클라이언트 줄(목록을 대화로 묶어 보기)이 같은 내용이다.
- **크기 · 모양**
- [대화로 묶기]는 36 — 안내 줄 단추의 밀도 예외(`--size-notice-action`)를 다시 쓴다. 새 크기 토큰은 없다.
분할 보기는 아이콘만(36×36 — 휴지통 [비우기]와 같은 결, 이름은 title · 화면 낭독), 목록 보기는 이름까지 보인다.
분할 보기에 이름까지 넣으면(99) 1440 에서 개수 글 자리가 25px 남짓이라 아이콘으로 두고, 설정 설명이 말풍선 모양이라고 알린다(2026-11-07 잼).
- 켠 모양은 옅은 청록 바탕 + 진한 청록 글자이고 테두리는 그대로다(보드의 #9FD3D7 테두리는 새 색 토큰이라 두지 않았다).
- 설정 › 메일 › 보내기 · 읽기의 한 줄은 외부 이미지 아래 가는 선 뒤 — 끔 · 켬 전환(`.segmented--outline` — 보내기 취소와 같은 모양)과
"답장과 전달로 이어진 메일을 메일함 목록에서 한 줄로 묶어 보여 줍니다. 메일함 목록 위의 말풍선 모양 [대화로 묶기] 단추로도 켜고 끌 수 있습니다." — 줄 이름은 단추와 같은 "대화로 묶기"(2026-11-07).
- **줄**
- 고르기 칸 · 별을 남겼다(보드의 줄에는 없다 — 검색 결과 줄과 같은 판단, 3단계부터 목록에서 여러 통을 고른다).
메일이 모두 보내기를 기다리는 줄은 고르기 칸 · 별이 꺼짐(aria-disabled) + 까닭이고, 목록 보기에서 Ctrl · Shift + 클릭으로도 고르지 않는다.
- 참여자: 다른 사람은 받은 차례대로, 나는 끝에 "나"(보드 "이도윤, 나" · "인사팀, 김민수, 나"). 보낸편지함 · 임시보관함에서 참여자가 나뿐이면 메일 목록처럼 "받는 사람: …"이다.
임시보관함의 제목 없는 줄은 흐린 "(제목 없음)"이다(메일 줄과 같다).
- 목록 보기(표)는 고르기 · 별 · 참여자(+ 회색 "N통" — 머리 글은 모든 메일함에서 "참여자", 2026-11-07) · 제목 · 날짜다 — **크기 칸은 뺐다**(대화의 크기는 마지막 메일의 크기가 아니다).
표 제목은 "{메일함} 대화 목록", 머리 고르기는 "불러온 대화 모두 고르기", 고른 수는 "대화 N개 선택됨"이다(분할 보기의 도구 줄은 "N개 선택됨" — 화면 낭독은 "대화 N개 선택됨", 단추 일곱과 한 줄 53 이 되게, 2026-11-07).
- 목록 머리가 좁으면 개수가 먼저 줄고 메일함 이름은 남는다(개수에 마우스를 올리면 다 보인다). **묶지 않았을 때의 머리 글도 보드 글로 바꿨다**("전체 9 · 안 읽음 2" → "메일 9통, 안 읽은 메일 2통").
분할 보기(좁은 머리)는 안 읽은 메일이 있으면 "안 읽은 메일 N통"만, 없으면 "메일 N통" · "대화 N개"를 보이고 전체 글은 title · 화면 낭독에 둔다 — 머리의 칸 사이는 이름↔개수 6 · 머리↔단추 4 · 단추끼리 4(2026-11-07 — 1440 에서 안 읽은 수가 늘 잘렸다).
- 줄에 한 옮기기 · 삭제 · 스팸 신고 · 스팸 아님 알림은 "{메일함}에 있는 메일 N통을 {갈 곳} 옮겼습니다." 꼴이다(줄의 통 수는 대화 전체라 "4통" 줄에서 "메일 2통"이 헷갈렸다 — 2026-11-07). 휴지통의 영구 삭제도 같은 꼴이다 — 확인 창 "휴지통에 있는 메일 N통을 영구 삭제할까요?" · 알림 "휴지통에 있는 메일 N통을 영구 삭제했습니다."(일부만 지웠으면 뒤의 "N통은 그사이 …"는 그대로). 묶지 않은 목록 · 읽기 화면은 그대로다.
- 메일 화면은 탭이 다시 보일 때 설정을 마지막으로 받은 지 60초가 지났으면 조용히 다시 받는다 — 다른 탭 · PC 에서 바꾼 묶기면 목록을 다시 열고, 보내기 취소 초 · 외부 이미지도 받은 값을 쓴다(받는 동안 단추를 숨기지 않고, 세션이 끝났으면 받지 않는다 — 2026-11-07).
- "새 메일 N통 · 맨 위로"는 맨 앞에 새로 생긴 줄을 1통, 새 메일이 든 기존 줄을 새 메일 수로 센다.
- **줄의 별**: 중요 표시가 하나라도 있으면 모두 풀고, 없으면 모두 표시한다. 보내기를 기다리는 메일만 중요 표시가 남으면
"보내기를 기다리는 메일은 목록에서 중요 표시를 바꿀 수 없습니다. 메일을 열어 바꿔 주세요."
- **읽기 화면**
- [이전] · [다음]은 대화 사이를 오간다(앞뒤 줄의 마지막 메일). 위치는 "n / 대화 수"이고, 같은 대화 칸의 [이 메일만 열기]로 연 더 오래된 메일도 그 메일이 든 줄을 기준으로 한다. [목록으로]는 그 줄로 초점을 돌려준다.
- [삭제](한 통) 뒤 열 메일(분할 보기 — 목록 보기는 지금처럼 목록으로): 그 줄에서 지운 메일의 다음 칸(더 오래된 메일), 없으면 앞 칸 →
줄이 비면 다음 줄의 마지막 메일, 없으면 앞 줄의 마지막 메일. 아직 다시 받기 전이라 줄에 남아 있는 옛 마지막 메일이면 남은 메일의 첫 칸이다(메일 목록의 삭제 뒤와 같은 결).
- **첫 진입**: 설정을 받기 전에는 이 브라우저가 그 직원에게서 마지막으로 안 값(처음이면 끔)으로 연다 — 서버 값이 다르면 받는 즉시 바꾼다.
설정을 받지 못했으면 그 값대로 두고 [대화로 묶기]도 누를 수 있다(받는 동안에는 단추를 숨긴다). 로그아웃해도 그 값은 남고, 다른 직원이 로그인하면 그 직원의 값이다.
- **알려진 한계**: 여러 통인 줄의 마지막 메일만 읽으면 다음 맞추기까지 줄이 굵은 채다. 마지막 메일이 아닌, 보내기를 기다리는 메일은 풀린 뒤에도 다음 맞추기까지 고를 수 없다(계약 2절).
분할 보기 머리는 [비우기] 단추가 있는 휴지통 · 스팸메일함, 세 자리 이상 안 읽은 수, "받은편지함"보다 긴 메일함 이름, 1120~1220 폭에서는 1440 에서도 개수 글이 잘린다(title 로 다 보인다).
분할 보기 도구 줄의 "N개 선택됨"은 세 자리부터 두 줄로 넘친다(메일 목록의 "123통 선택됨"도 같다).