arasystem/docs/design/webmail

웹메일 디자인 원본 (1단계)

확정된 디자인 캔버스의 원본이다. 화면 구현의 기준으로 쓴다.

• 캔버스: https://claude.ai/artifact/WJvVsKvXepxn3p75CGJAr2 (확정본: 2026-10-26, 버전 11)
• 화면: Login(로그인) · Main(분할 보기: 메일함·목록·본문) · MainList(목록 보기: 게시판형 표) · MainListRead(목록 보기에서 연 메일) · Compose(메일 쓰기) · States(오류·빈 상태·피드백 모음)
• 파일 형식은 캔버스 전용(<x-dc> 마크업 + DCLogic 클래스)이다. 그대로 쓰지 말고 구조·간격·색·문구의 기준으로만 본다.

캔버스 안의 자산 주소

캔버스는 자산을 /_blob/<id> 로 참조한다. 저장소에서는 아래 파일에 대응한다.

캔버스 주소	저장소 파일	용도
/_blob/16067b9aa5137abf808e3dbef30c42e0	Pretendard Variable (npm pretendard 패키지로 자체 호스팅)	전체 글꼴
/_blob/2b9ef4349333debc969432c859eaf1bf	frontend/src/assets/brand/logo-ara-white.png	왼쪽 앱 레일 로고(가로 48px)
/_blob/3a2f4115a8f90207faa7d3a51cd9aec2	frontend/src/assets/brand/logo-arasystem-white.png	로그인 브랜드 패널 로고(가로 240px)

로고 원본은 docs/brand/logo_arasystem_white.png 다. 흰 로고라 어두운 브랜드 바탕(#0B3640) 위에만 둔다.

디자인 원칙 (사용자 확정)

• 안 읽음 점·개수 알약·코드 태그 같은 뱃지를 쓰지 않는다 — 굵은 글자와 평범한 숫자로 구분한다.
• 왼쪽 전역 앱 레일(메일·캘린더·파일·ERP·주소록·설정)에 모듈을 계속 붙인다. 지금은 메일만 동작한다.
• 정보 밀도가 높은 데스크톱 화면 — 기본 13px. 목록에 본문 미리보기를 넣지 않는다.
  • 분할 보기 행: 2줄(보낸 사람·시간 / 제목+첨부 클립), 약 50px
  • 목록 보기 행: 1줄 표, 38px. 칸 = 별 32 · 보낸 사람 168 · 제목(나머지) · 날짜 84 · 크기 64 (px, 칸 사이 12). 폭 1100px 미만에서 크기 칸 숨김, 600px 미만에서 보낸 사람·날짜 축소, 더 좁으면 가로 스크롤. 캔버스는 파서 제약 때문에 grid 로 그렸지만 구현은 실제 <table> 로 한다.
  • 별 버튼·"분할 | 목록" 전환은 밀도를 위해 32~36px 로 둔다(클릭 영역 44px 기준의 의도된 예외 — 사용자 확정).
• 보기 방식: 목록 머리의 "분할 | 목록" 전환. 선택은 사용자별로 기억한다.
• 콘텐츠 열(읽기·쓰기 공통): 최대 폭 800px, 좌우 여백 32px, 위 20px·아래 36px, 본문 글줄 최대 680px, 영역 안 왼쪽 정렬. 분할 보기 읽기·목록 보기 읽기·쓰기 세 곳이 같은 값을 쓰고, 툴바 첫 아이콘도 같은 32px 선에서 시작한다.
• 브랜드 컬러 "바다 청록": 바탕 #0B3640, 강조 #0E7C86. 파생 색은 각 화면 원본의 인라인 스타일을 따른다.

구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다)

• 쓰기 화면 첨부 안내문에 합계·개수 한도를 함께 적는다: "파일당 최대 20MB · 합계 25MB · 최대 20개 · 문서, 이미지, 압축 파일" (용량은 서버 값, 개수는 계약 상수).
• 답장·전달 초안이 한도(제목 255자·본문 100,000자)를 넘으면 인용을 줄이고 끝에 "(원문이 길어 이하 생략)"을 둔다.
• 찾지 못한 첨부(보관 시간이 지난 업로드·지워진 원본)는 실패로 표시하고, 전달 원본에는 "빼기"만 둔다(다시 올릴 수 없다).
• 없는 메일함·메일(주소창에 남은 옛 id 등)에는 "다시 시도" 대신 "받은편지함으로"·"목록으로"를 둔다. "다시 시도"는 메일 서버 장애처럼 다시 해 보면 나아질 수 있는 오류에만 쓴다.