끌어다 놓기 · 스팸메일함으로 옮기기 · 좁은 폭 상단 바
메일 15단계(메일 · 메일함 다루기)에서 정한 것 가운데 3 · 4 · 9의 화면입니다. 목록에서 고른 메일이나 대화 줄을 메일함 패널로 끌어다 놓아 옮기고, 스팸메일함으로 옮기는 세 길(단추, 메뉴, 끌기)을 같게 맞추고, 휴대폰 폭에서 상단 바의 [로그아웃]이 꺾이지 않게 합니다. 1의 단추로 마우스가 있는 곳을 바꿔 볼 수 있습니다. 초안이며 사용자 확인 전입니다(2026-11-09).
1. 분할 보기 (1440) · 고른 메일 3통을 끌어다 놓는 중
받은편지함에서 메일 3통을 고른 채 그중 한 줄(박지훈)을 눌러 메일함 패널로 끌고 있습니다. 마우스 오른쪽 아래에 메일 수를 적은 표가 따라옵니다.
{{ overTitle }}
{{ overNote }}
설정
메일 쓰기
이
이도윤
doyun.lee@arasystem.it.kr
2026. 11. 9. (월) 오전 10:42
받는 사람 김아라 <ara.kim@arasystem.it.kr>
김아라님, 안녕하세요.
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
이도윤 드림
고르지 않은 줄을 끌면 그 줄만 옮기고, 고른 메일은 그대로 둡니다. 보내기를 기다리는 메일의 줄은 끌 수 없습니다. 읽기 화면 도구 줄의 [이동 ▾]는 정한 것 1의 모습입니다.
2. 목록 보기 (1440) · 대화 줄 하나를 끌어다 놓는 중
대화로 묶은 받은편지함에서 고르지 않은 줄(박지훈, 나 · 3통)을 끌어 견적 메일함 위에 두었습니다. 따라오는 표에는 대화 수를 적습니다.
설정
메일 쓰기
{{ c.who }}
{{ c.count }}
{{ c.subject }}
{{ c.date }}
메일 더 보기
대화 줄을 끌면 그 대화에서 지금 메일함(받은편지함)에 있는 메일만 옮깁니다. [이동 ▾]와 같이 보내기를 기다리는 메일은 빼고, 놓은 뒤 알림은 3e입니다.
3. 놓은 뒤 알림
메뉴로 옮길 때와 같은 알림이고, 화면 오른쪽 아래에 뜹니다. [되돌리기]가 있는 알림은 10초 동안 남습니다.
{{ t.title }}
{{ t.note }}
끌어다 놓기는 마우스로만 합니다. 키보드와 터치 화면에서는 지금처럼 [이동 ▾]로 옮기고, 옮길 곳과 알림은 같습니다.
4. 상단 바 · 휴대폰 폭 360 (2배로 확대)
레일 72와 상단 바만 잘라 2배로 키웠습니다. 바 안쪽 폭은 256입니다(360에서 레일 72와 바의 좌우 여백 32를 뺀 폭). 넓은 화면은 달라지지 않습니다.
메일
캘린더
메일
메일 검색
조건
김
김아라
ara.kim@arasystem.it.kr
로그아웃
4a. 지금
검색 칸(기본 폭 280)이 둘째 줄로, 계정 칸이 셋째 줄로 내려갑니다.
계정 칸은 아바타 32, 이름과 주소, [로그아웃] 순서입니다. 주소는 줄지 않아 [로그아웃]만 줄어들고 글자가 두 줄로 꺾입니다.
주소가 더 긴 직원은 [로그아웃]이 한 글자씩 꺾여 셋째 줄이 더 높아집니다.
메일
캘린더
4b. 고친 뒤
[로그아웃]은 줄지도 꺾이지도 않습니다. 늘 한 줄입니다.
화면 폭이 480 이하면 주소를 감추고 이름만 둡니다.
이름이나 주소가 아주 길어 넘치면 끝을 "…"로 줄이고, 마우스를 올리면 다 보입니다.
줄 수와 차례(메일, 검색 칸, 계정)는 지금과 같습니다.
정한 것 · 끌 수 있는 것과 놓을 곳
고른 줄을 끌면 고른 메일을 모두, 고르지 않은 줄을 끌면 그 줄만 옮깁니다. 고른 것은 그대로 둡니다.
대화로 묶은 목록의 줄은 그 대화에서 지금 메일함에 있는 메일을 옮깁니다. 보내기를 기다리는 메일은 빼고([이동 ▾]와 같다), 그런 메일뿐인 줄은 끌 수 없습니다.
놓을 곳은 [이동 ▾]의 옮길 곳에 휴지통을 더한 곳입니다. 지금 메일함, 임시보관함, 예약됨에는 놓을 수 없습니다.
휴지통에 놓으면 [삭제], 스팸메일함에 놓으면 [스팸 신고]와 같고, 그 밖은 [이동 ▾]와 같습니다. 알림과 [되돌리기]도 같습니다.
끌어다 놓는 동안의 모양
마우스를 따라오는 표는 커서 오른쪽 아래에 붙습니다. "메일 N통" 또는 "대화 N개"이고, 알림과 같은 어두운 바탕(#0B3640)에 12.5px 굵은 흰 글자, 봉투나 말풍선 아이콘입니다.
놓을 수 있는 메일함 위에서는 그 줄에 2px 청록 점선과 옅은 청록 바탕이 생깁니다. 쓰기 화면에 파일을 끌어다 놓을 때와 같은 모양이라 초점 선(실선)과 헷갈리지 않습니다.
놓을 수 없는 곳 위에서는 줄이 그대로이고 마우스 커서만 금지 모양(⊘)이 됩니다. 메일함 줄마다 금지 표시를 그리지 않습니다.
끌기 시작한 줄은 흐리게 하지 않습니다. 고른 줄은 고른 바탕 그대로입니다.
정한 것 · 스팸메일함으로 옮기는 길
[스팸 신고], [이동 ▾]에서 스팸메일함 고르기, 스팸메일함에 끌어다 놓기는 모두 스팸 표시를 붙여 옮깁니다(3c). 지금은 [이동 ▾]만 표시 없이 옮깁니다.
스팸메일함에서 휴지통이 아닌 메일함으로 옮기면(메뉴, 끌기) [스팸 아님]과 같이 스팸 아님 표시를 붙입니다(3d). 휴지통으로 옮길 때는 표시를 바꾸지 않습니다.
[되돌리기]는 원래 메일함으로 옮기며 표시도 되돌립니다. 지금의 [스팸 신고], [스팸 아님]과 같습니다.
구현 때 맞출 것
HTML5 끌어다 놓기로 만들고, 따라오는 표는 setDragImage 로 붙입니다. 놓을 수 없는 곳에서는 dropEffect 를 none 으로 두어 브라우저가 금지 커서를 보입니다. 커서 모양과 따라오는 표의 투명도는 운영체제와 브라우저마다 조금 다릅니다.
목록 줄은 링크라 지금도 끌면 그 메일 화면의 주소(URL)가 끌려 나갑니다. 우리 끌기 자료로 바꾸고, 다른 창이나 바깥 프로그램에 놓아도 아무 일도 일어나지 않게 합니다.
메일함 패널은 쓰기 화면에도 보이므로 파일 끌기는 받지 않습니다(첨부 놓기와 겹치지 않게). 메일 화면에 파일을 잘못 놓으면 지금은 브라우저가 그 파일을 열어 웹메일을 떠나는데, 앞으로는 무시합니다.
패널의 메일함이 많아 아래가 가려져 있으면 패널 끝에서 저절로 스크롤되는지 확인합니다.
상단 바는 아바타와 [로그아웃]을 줄지 않게 하고 이름 칸만 줄게 합니다. 480 이하에서 주소를 감추는 것은 tokens.css 의 화면 폭 기준에 한 줄을 더합니다.