메일 쓰기 · 편집기 상태

본문이 서식 편집기로 바뀝니다. 글자를 쓰는 칸의 포커스는 한 가지 모양으로 보이고, 툴바 버튼은 메일 툴바 버튼과 같은 44px 높이를 씁니다. 본문 글꼴은 맑은 고딕입니다.

글자 입력칸 포커스 — 한 가지 규칙

받는 사람 · 참조 · 숨은참조 · 제목 · 본문 편집기. 커서가 있는 칸의 아래 선이 2px 브랜드색이 됩니다.

받는 사람 이도윤 <doyun.lee@arasystem.it.kr> 참조 · 숨은참조
제목 Re: 메일 서버 이전 일정 공유
① 받는 사람 · 참조 · 숨은참조 — 칩까지 포함한 행 전체의 아래 선
받는 사람 이도윤 <doyun.lee@arasystem.it.kr> 참조 · 숨은참조
제목 Re: 메일 서버 이전 일정 공유
② 제목 — 같은 자리, 같은 두께

도윤님, 확인했습니다.

체크리스트 기준으로 금요일 저녁 전환을 진행해 주세요.

파일 첨부
③ 본문 편집기 — 편집 영역 아래 선. 툴바 아래 선은 그대로
받는 사람 이도윤 <doyun.lee@arasystem.it.kr>
제목 Re: 메일 서버 이전 일정 공유
④ 행 안의 버튼 — 버튼에만 고리. 행의 선은 회색 그대로
구현 — tokens.css 변수 .compose-field:has(:is(input, .ProseMirror):focus)
  border-bottom-color: var(--color-brand)
  box-shadow: inset 0 calc(var(--border-width) * -1) 0 var(--color-brand)
.compose-field :is(input, .ProseMirror):focus-visible → outline: none

규칙 — 옮길 값

버튼 포커스와 같은 색 · 같은 두께, 모양만 다릅니다

대상
받는 사람 · 참조 · 숨은참조 · 제목 · 본문 편집기
위치
그 칸의 아래 hairline 자리. 본문은 편집 영역 아래(첨부 영역 위)
두께 · 색
2px #0E7C86 — 1px 선 색을 바꾸고 안쪽 1px 를 더해 높이가 변하지 않는다
모서리
없음 (곧은 선)
범위
행 전체 폭 — 원래 hairline 과 같은 길이 (콘텐츠 열, 최대 800px)
언제
글자 입력 요소에 포커스가 있을 때. 마우스로 눌러도 보인다
대비
흰 바탕 4.9:1 · 원래 선 #EEF0F3 4.3:1 · 오류 띠 #FEF3F2 4.5:1
버튼
2px 고리, 바깥 2px (전역 규칙 그대로). 누르는 것은 고리, 쓰는 곳은 선 — 한 번에 하나만 보인다
상자 입력
테두리가 있는 입력칸(링크 팝오버 · 로그인)은 상자가 있으므로 버튼처럼 고리

본문 툴바 — 800px 열

버튼 40×44 (폭 40 은 밀도 예외 · 사용자 확정) · 아이콘 16 · 버튼 사이 2 · 묶음 사이 세로선 1×20 · 툴바 높이 52 (위아래 4)

  • 붉은 세로선이 콘텐츠 열 32px 선 — 첫 아이콘(실행 취소)이 여기서 시작한다 (툴바 왼쪽 여백 20 + 버튼 안 12).
  • 취소선 · 정렬 · 내어쓰기 · 들여쓰기 · 인용 · 표 · 가로줄 · 서식 지우기는 늘 더보기에 있다.
  • 이미지 버튼은 두지 않는다 — 본문에 넣은 이미지는 첨부 파일로 올린다 (맨 아래 카드).
  • 키보드: 툴바는 Tab 한 번에 들어가 화살표로 옮긴다. 본문에서 Alt+F10 → 툴바, Esc → 본문.

툴바 버튼 상태

MailToolButton 과 같은 높이 44 · 모서리 8 · 글자색

기본 바탕 없음 · 아이콘 #344054
마우스 올림 바탕 #F2F4F7 · 아이콘 #171C26
켜짐 (눌림) 바탕 #E3F2F3 · 안쪽 1px #0E7C86 · 아이콘 #0A5F67
비활성 50% 투명 (MailToolButton 과 같다)
포커스 2px #0E7C86 고리 · 바깥 2px
메뉴 열림 올림과 같은 바탕

켜짐에 안쪽 1px 선을 두는 까닭 — 옅은 바탕(#E3F2F3)만으로는 흰 바탕과의 대비가 3:1 에 못 미친다. 선은 4.3:1.

밀도 예외 — 사용자 확정 (2026-10-27) 클릭 영역 44px 기준의 의도된 예외: 툴바 버튼 폭 40 (높이 44) · 메뉴 항목 높이 40 · 색 견본 칸 40×40 · 표 고르기 칸 22 (간격 3, 키보드는 화살표)

좁은 폭 — 넘치는 묶음은 더보기로

툴바는 늘 한 줄입니다. 정해진 순서로 묶음째 더보기에 들어가고, 더보기 단추에는 숫자를 달지 않습니다.

쓰기 칸 600px
쓰기 칸 340px (휴대폰)
  1. 실행 취소 · 다시 실행 — 쓰기 칸 734px 미만 (Ctrl+Z · Ctrl+Y 는 그대로)
  2. 글꼴 · 글자 크기 — 639px 미만
  3. 글자 색 · 배경 색 — 460px 미만
  4. 링크 — 365px 미만 (주소를 붙여 넣으면 저절로 링크가 된다)
  5. 글머리 · 번호 목록 — 312px 미만

굵게 · 기울임 · 밑줄과 더보기는 늘 남습니다. 폭은 지금 크기로 셈한 참고값이고, 구현은 툴바의 실제 폭을 재어(ResizeObserver) 이 순서로 넘깁니다.

340px 에서 연 더보기 (위쪽)

아래로 정렬 · 들여쓰기 · 링크 넣기 · 인용 · 표 · 가로줄 · 서식 지우기. 화면 높이에 맞춰 안에서 스크롤

값을 고르는 것(글꼴 · 크기 · 색)은 › 로 한 단계 더 엽니다.

빈 본문

새 메일처럼 본문이 비었을 때 (커서가 본문에 있는 상태)

내용을 입력하세요

파일 첨부

안내 문구는 지금과 같은 "내용을 입력하세요" · #667085 (흰 바탕 4.9:1). 한 글자라도 쓰면 사라지고, 커서는 문구 앞에 선다.

더보기 메뉴

800px — 툴바에 없는 서식 · 항목 높이 40 (밀도 예외 · 사용자 확정)

켜진 서식은 오른쪽 ✓ (취소선 · 정렬 · 인용). 단축키는 흐린 글자. 올린 항목은 #F2F4F7 (가운데 정렬).

글꼴 · 글자 크기

받는 쪽에 흔히 있는 글꼴만 — 이름은 그 글꼴로 보입니다

맑은 고딕이 본문 기본 글꼴이라 받는 쪽에서도 같은 모양입니다(맥에서는 Apple SD 산돌고딕 Neo). 크기는 px 숫자 · 기본 14 · 제목 스타일은 두지 않습니다. 고른 글자의 크기가 섞이면 "–".

글자 색 · 배경 색

8색씩 — 글자 색은 모두 흰 바탕 4.5:1 이상

글자 색빨강
배경 색노랑

견본 칸 40×40 (보이는 색 26 · 밀도 예외 · 사용자 확정). 고른 색에 ✓ 하고 이름을 위에 글자로도 씁니다. "기본"은 글자 색을, "없음"은 배경 색을 지웁니다.

답장 · 전달 — 편집기 안의 원문 인용

원문은 회색 인용 막대 안에 "원본 메일" 머리와 함께 둡니다(답장 · 전달 모두). 내 글은 그 위에 씁니다.

도윤님, 확인했습니다.

체크리스트 기준으로 금요일 저녁 전환을 진행해 주세요.

 

김아라

원본 메일

보낸 사람이도윤 <doyun.lee@arasystem.it.kr>
날짜2026. 10. 26. (월) 오전 10:42
제목Re: 메일 서버 이전 일정 공유

김아라님, 안녕하세요.

 

말씀하신 대로 이번 주 금요일(10/30) 저녁 9시에 MX 레코드를 새 메일 서버로 전환하겠습니다.

답장 — 보낸 사람 · 날짜 · 제목. 커서는 맨 위 첫 줄

 

원본 메일

보낸 사람이도윤 <doyun.lee@arasystem.it.kr>
날짜2026. 10. 26. (월) 오전 10:42
받는 사람김아라 <ara.kim@arasystem.it.kr>
참조인프라팀 <infra@arasystem.it.kr>
제목Re: 메일 서버 이전 일정 공유

김아라님, 안녕하세요.

전달 — 받는 사람 · 참조가 더해진다. 커서는 받는 사람 칸

인용 막대 2px #D0D5DD · 막대와 글 사이 14 · 원문 글 #4A5363 · 머리 12.5px(항목 이름 #667085) · 내 글과 24 띄움. 막대를 회색으로 둔 것은 2px 브랜드색 선(포커스)과 헷갈리지 않게 하려는 것. 툴바의 "인용"도 같은 막대를 머리 없이 쓴다.

링크

주소와 표시할 글자 — 이미 있는 링크를 고칠 때

진행 상황은 전환 안내 페이지에서 볼 수 있습니다.

Enter = 적용 · Esc = 닫고 본문으로. 새 링크는 "링크 빼기" 없이 "넣기". 주소는 http(s) · mailto 만. 상자 입력칸이라 포커스는 고리(주소 칸).

본문에 넣은 이미지 → 첨부 파일

본문에는 이미지를 넣지 않습니다(사용자 확정). 붙여 넣거나 끌어다 놓은 이미지는 첨부 파일로 올리고, 툴바에는 이미지 버튼이 없습니다.

① 끌어다 놓는 중

화면 캡처 함께 보냅니다.

② 첨부 목록에 올라간다
파일 첨부 파일당 최대 20MB · 합계 25MB · 최대 20개 · 문서, 이미지, 압축 파일
  • image.png 올리는 중 62%
③ 이미지였으면 알린다
이미지는 본문 대신 첨부 파일로 올렸습니다.

성공 알림과 같은 모양 · 5초 뒤 닫힌다

  • 붙여 넣기(Ctrl+V) · 끌어다 놓기 모두. 끌어다 놓은 다른 파일도 첨부로 올린다 — 알림은 이미지를 돌렸을 때만.
  • 한도는 첨부와 같다. 넘치면 첨부 목록에 실패로 보인다 (오류 · 빈 상태 보드의 "첨부 업로드").
  • 끌어다 놓는 동안의 덮개는 2px #0E7C86 점선 · 바탕 #F3F8F8 — 포커스 선(실선)과 모양이 다르다.

표 넣기

더보기 › 표 넣기 — 행 · 열을 고릅니다

표 넣기 3행 × 4열

칸 22px · 간격 3 (밀도 예외 · 사용자 확정). 마우스는 칸 위로 움직여 고르고 누르면 넣습니다. 키보드는 화살표 + Enter. 표 안의 행 · 열 추가와 삭제는 다음 단계.