현재 사용법 (2026-09-10, 6fbaee7f): 직원 내 정보·서류·전자계약 · 기능 마스터. 아래는 작성 당시의 변경 설명이며 현재 전체 동작·재측정 결과를 뜻하지 않습니다.

풀레이어 팝업 닫기 버튼 정렬과 전 화면 스크롤 끝 여백

design/app-ui-improvements · 2026-09-10

한 줄 요약

직원 앱에서 신청 팝업의 닫기(X) 버튼이 바로 전 화면의 뒤로(<) 버튼과 같은 크기·같은 높이로 화면 반대쪽에 놓이고, 어느 화면이든 끝까지 스크롤했을 때 마지막 카드가 바닥에 딱 붙어 잘린 것처럼 보이던 것이 여백을 두고 끝납니다.

배경 / 지금 동작

직원 앱(apps/employee-app, hereby Works)의 화면은 세 종류입니다.

1depth — 하단 탭 네 개(근무·메신저·결재·더보기)로 오가는 화면입니다. 화면 아래에 하단 내비게이션 바가 있습니다.
2depth — 1depth에서 한 겹 들어간 상세 화면입니다(예: 더보기 → 근무 형태 변경). 상단 헤더가 제목과 뒤로(<) 버튼으로 바뀌고 하단 내비는 숨습니다. 이하 그 헤더를 앱 헤더(.ds-app-header)라고 씁니다.
풀레이어 팝업 — 화면 전체를 덮는 모달입니다(.modal-sheet--full, 휴가 신청·서류 제출 등 여덟 곳). 제목과 닫기(X) 버튼이 한 줄에 놓입니다.

앱 헤더의 뒤로 버튼은 .ds-app-header__back 한 클래스가 크기와 위치를 소유합니다. 박스 32px, 글리프 24px이고, 헤더의 좌우 여백 16px에서 margin-left: -8px로 당겨 화면 왼쪽 8px 지점에 놓입니다.

풀레이어 팝업의 X는 그와 무관하게 자랐습니다. 크기는 .modal-sheet--full .ds-btn--icon.ds-btn--lg 규칙이 박스 40px·글리프 28px로 키웠고, 위치는 본문 여백 px-5(20px)를 그대로 따랐습니다. 그래서 2depth에서 팝업으로 들어가면 같은 자리에 있어야 할 버튼이 커지면서 아래로·안쪽으로 이동했습니다.

스크롤 여백은 별개의 문제입니다. 화면 본문은 .section-content 하나가 스크롤러이고, 그 안에 섹션 네 개(#section-shifts · #section-messenger · #section-approval · #section-more)가 들어 있습니다. 2depth 페이지는 #section-more 안에서 x-show로 갈립니다. 어느 쪽도 하단 여백을 갖고 있지 않아, 끝까지 스크롤하면 마지막 카드의 아래 모서리가 화면 끝(2depth) 또는 하단 내비(1depth)에 그대로 닿았습니다.

화면 비교

닫기(X) 크기와 위치

2depth 헤더의 뒤로(<)와 좌우 대칭입니다. 두 버튼의 상단은 12px로 같고, 각각 화면 좌·우 가장자리에서 8px 지점에 놓입니다.

스크롤 끝 여백입니다. 결재 탭(1depth, 하단 내비 위)과 메신저 대화 목록입니다.

닫기 버튼의 좌표

변경 전

변경 후

스크롤 여백이 붙는 위치

변경 전

변경 후

개념 흐름별 변경

닫기 버튼을 뒤로 버튼의 거울상으로 맞춥니다

main.css에 .modal-full__close를 추가해 박스를 32px로 고정했습니다. 헤더가 좌우 여백 16px에서 -8px 당겨 화면 좌측 8px에 놓이므로, 팝업은 본문 여백 px-5(20px)에서 margin-right: -12px 당겨 화면 우측 8px에 놓습니다.

마크업에서 ds-btn--lg를 뺐습니다. 기존 .modal-sheet--full .ds-btn--icon.ds-btn--lg(박스 40·글리프 28)가 특성도 0,3,0이라 새 규칙 0,1,0을 이기기 때문입니다.

같은 크기로 읽히게 하는 것은 박스가 아니라 색과 잉크입니다

박스와 글리프 치수를 24로 맞춘 첫 시안은 디자이너 검토에서 "X가 더 커 보인다"로 반려됐습니다. 원인이 둘이었습니다.

첫째는 색입니다. 기준 뒤로 버튼은 --color-hr-gray-800(진한 회색)인데 팝업 닫기는 ds-btn--muted(neutral-400)였습니다. 같은 치수여도 옅은 쪽이 가벼워 보여, 크기를 어떻게 맞춰도 두 버튼이 한 쌍으로 읽히지 않았습니다. .modal-full__close가 색을 기준과 같은 값으로 덮습니다.

둘째는 잉크입니다. 여기서 잉크란 글리프 상자가 아니라 획을 포함해 실제로 그려지는 영역을 말합니다. 같은 24 뷰박스 안에서 ic-chevron-left는 6×12만 긋고 ic-close는 15×15를 그으므로, 둘 다 24로 두면 실측 잉크가 14 대 17로 벌어집니다. 글리프를 20(DS의 md 치수)으로 낮추면 잉크가 14.2가 되어 기준 14와 사실상 같아집니다. 획은 1.67로 얇아지지만(기준 2) 0.33px 차라 매직 넘버를 하나 더 두는 대신 감수했습니다.

ic-close 자체를 고쳐 맞추는 방법은 채택하지 않았습니다. 그 아이콘은 레지스트리 공용이라 전 앱의 모든 닫기 버튼이 함께 작아집니다.

버튼만이 아니라 제목 줄 전체를 올립니다

버튼만 위로 당기면 같은 줄의 제목과 세로로 어긋납니다. .modal-full__header가 줄 전체를 앱 헤더와 같은 눈금으로 끌어올립니다. 값은 calc(max(safe-area, 12px) - safe-area - 20px)입니다. 앱 헤더 줄의 화면상 top이 max(safe-area, 12px)이고 팝업 제목 줄의 현재 top이 시트 padding-top(safe-area) + 본문 pt-5(20px)이므로, 그 차이만큼만 당기는 식입니다. safe-area가 0인 브라우저에서는 -8px, 47px 기기에서는 -20px이 되어 기기와 무관하게 두 값이 일치합니다.

스크롤 끝 여백은 스크롤러가 아니라 그 직계 자식에 줍니다

스크롤러 .section-content에 padding-bottom을 주면 메신저처럼 h-full로 화면을 꽉 채우는 레이아웃까지 그만큼 짧아져 채팅 입력줄 아래가 뜹니다. 그래서 #section-messenger만 빼고 나머지 직계 자식 전부에 겁니다. 알림 2depth는 스크롤러가 곧 그 화면이라, 그 안쪽 래퍼가 같은 규칙을 받습니다.

값은 max(safe-area-inset-bottom, 24px)입니다. 2depth는 하단 내비가 숨어 스크롤러가 화면 끝까지 닿으므로 홈 인디케이터 영역을 이 여백이 같이 흡수해야 하고, 1depth는 내비가 이미 safe-area를 갖고 있어 더할 필요가 없습니다. 둘을 더하지 않고 큰 쪽만 쓰는 이유입니다.

메신저 대화 목록은 공유 템플릿에서 앱 모드에만 여백을 줍니다

메신저는 위 규칙에서 빠지므로, 실제로 바닥에 닿는 안쪽 스크롤러인 대화 목록이 자기 여백을 가져야 합니다. 이 목록은 packages/components/html/messenger-content.html에 있고 데스크톱 chat-widget·AI 도크가 같은 마크업을 씁니다. 그쪽은 팝오버 안이라 붙을 바닥이 없으므로, 같은 파일이 이미 쓰고 있는 앱 모드 분기 :class="useHostHeader ? … : …"로 갈랐습니다.

앱 CSS에서 [x-ref="convList"]를 선택자로 잡는 방법은 채택하지 않았습니다. 그 x-ref는 자바스크립트가 참조하지 않는 값이라, 누군가 정리하는 순간 여백이 에러도 로그도 없이 사라집니다.

자체 하단 여백을 갖고 있던 섹션 두 곳을 정리합니다

shifts.html과 more.html의 루트가 py-4 … pb-4로 16px을 갖고 있어 컨테이너 여백과 더해지면 40px이 됐습니다. pt-4로 바꿔 전 화면이 24px로 통일됩니다.

풀레이어 팝업 닫기 버튼 정렬과 전 화면 스크롤 끝 여백 ​

한 줄 요약 ​

배경 / 지금 동작 ​

화면 비교 ​

닫기 버튼의 좌표 ​

스크롤 여백이 붙는 위치 ​

개념 흐름별 변경 ​

닫기 버튼을 뒤로 버튼의 거울상으로 맞춥니다 ​

같은 크기로 읽히게 하는 것은 박스가 아니라 색과 잉크입니다 ​

버튼만이 아니라 제목 줄 전체를 올립니다 ​

스크롤 끝 여백은 스크롤러가 아니라 그 직계 자식에 줍니다 ​

더보기 섹션만 스페이서를 한 겹 더 둡니다 ​

메신저 대화 목록은 공유 템플릿에서 앱 모드에만 여백을 줍니다 ​

자체 하단 여백을 갖고 있던 섹션 두 곳을 정리합니다 ​