게이트 화면 (Gate screens)
업무 화면에 들어가기 전에 거치는 화면
로그인 · 비밀번호 찾기 · 첫 로그인 비밀번호 변경 · 가입 · 이메일 인증 · 초대 수락 · 워크스페이스 허브 · 앱 접근 불가 · 404 · 직원 앱의 업데이트 차단 · 하단 배너 · 시스템 어드민 로그인 단계를 게이트 화면이라고 부릅니다. 10개 앱이 같은 공용 폼을 쓰지만 감싸는 카드·문구·간격은 앱마다 따로 적혀 있어 쉽게 갈라집니다. 이 페이지가 그 값을 한곳에 모읍니다(2026-10-01, 92개 상태를 실제 화면에서 측정해 정함).
규칙 (강제) · 코딩 에이전트용
게이트 화면의 강제 규칙. 상세·근거는 아래 본문.
- 제목은 h3(24px · 600) —
<div role="heading" aria-level="1" class="text-h3 font-semibold">.h1태그에 크기 클래스를 붙이지 않는다(태그 기본값 32px 가 이긴다 → 타이포그래피). - 제목 아래 부제는 위 8px · B4(14px) —
<div class="text-b4 … mt-2">.p태그는 기본값(16px · margin 0)이 클래스를 덮으므로 쓰지 않는다. 앱 이름·브랜드 줄(로그인의hereby Medical)도 부제와 같다. - 입력칸은
ds-input--48 w-full하나. 높이 48 · 모서리 4 · 좌우 16 · 14px.h-10·rounded-lg·border-*·focus:*·px-*를 손으로 붙이지 않는다 —h-10은 DS 기본 32px 에 지고,rounded-lg는 10px 로 덮여 버튼(4px)과 어긋난다. 오류 테두리는ds-input--error. 비밀번호 칸 눈 아이콘 자리만pr-10허용. - 오류 문구
.ds-form-error· 설명.ds-form-help— 12px · 입력칸 아래 6px(폼 컨트롤). 그 밖의 본문성 문구(「이미 계정이 있으신가요?」 등)는 B4. - 키 로그인(2026-10-13) — 기기 키가 등록된 기기(직원 앱)는 키 블록 한 벌(아이콘 48 → 인사말 B3 → 설명 B4 →
ds-btn--primary ds-btn--full「지문·기기 잠금으로 로그인」 → 텍스트 버튼 「아이디·비밀번호로 로그인」)로 시작한다. 텍스트 버튼을 누르면 키는 그대로 둔 채 비밀번호 폼이 열리고, 그 아래 「지문·기기 잠금으로 로그인」 으로 되돌아간다(키가 있어도 아이디·비밀번호 선택 가능 — 사용자 결정). 키 상태를 읽기 전(deviceLogin.ready=false)엔 어떤 폼도 그리지 않는다(키 전용 기기에서 비밀번호 폼이 깜빡이지 않게). 웹은 비밀번호 폼 아래ds-btn--outline ds-btn--full「패스키로 로그인」 하나. 마크업은 공용signin-form.html한 곳 — 앱signin.html에 따로 그리지 말 것. - 카드 아래 카피라이트는 카드와 12px —
<div class="text-center text-b6 … mt-3">© 2026 hereby</div>. - 앱 접근 불가(전체 화면)는 공용 404 와 같은 규격 — 아이콘 원판 48(글리프 24, 부팅 로딩과 같은 크기) → 16 → 제목 h3(neutral-700) → 12 → 본문 B3 16px · 행간 1.7(neutral-500) → 28 → 버튼 줄(간격 12,
ds-btn--lg). 주 버튼(solid primary)은 하나, 나머지는ds-btn--line ds-btn--normal. - 접근 불가 화면 위에 자동 「권한 요청」 팝업을 겹치지 않는다 — 첫 데이터 로드의 권한 거절은 화면 전환 신호이므로 그동안
hereby:permission-error를preventDefault()한다. 팝업은 화면 안 「권한 요청」 버튼이 연다. 권한 거절 판정은 오류 문구가 아니라 tRPC 코드로(isAccessDeniedError,@hereby/components). - 직원 앱 세로 정렬 화면은 위아래 빈 공간 40:60 —
.app-vbias(앱 CSS). 가운데(50:50)는 위 아이콘·로고 때문에 처져 보인다.justify-content: center를 쓰지 않는다(넘치면 위가 잘림). 가입은 폼이 길어 제외. - 직원 앱 하단 고정 배너는 바닥에서 좌우와 같은 16px, 탭바가 보이면 탭바 위 16px —
.app-banner+body.app-has-bottom-nav(탭바가 실제로 보일 때만 앱 셸이 켬). 배너 버튼은 notice 상하 배치. - BI 는 글자가 아니라 자산 — 게이트 상단 브랜드는 그 앱 패밀리의 락업(
logo-lockup-hereby-{패밀리})이다.hereby를 굵은 글자로 쓰지 않는다 → 브랜드. - 없는 주소는 공용 404 로 — 앱 라우터가
{base}/404.html로 보낸다. 앱에 없는 화면(가입 없는 앱의/signup)을 로그인 전 허용 주소에 넣지 않는다(빈 화면이 된다). - 다크 모드(2026-10-19) — 로그인 · 가입 · 비밀번호 찾기/변경 · 조직 선택의 바깥 상자(직원 앱 · 관리자 앱)를
bg-white md:bg-hr-gray-50→bg-bg-container md:bg-bg-alternative로, 공용 폼 4종을 시멘틱으로 옮겨 게이트 화면도 저장된 테마를 따른다(Works 는 사용자 선택, 관리자는 늘 라이트). 다른 앱(hr-system · team-manager 등)의 게이트 상자는 테마를 켜지 않아 그대로다. 404 · 접근 불가 페이지는 이번 범위 밖. 이 페이지에는 Playground 가 없다.
단일 출처
| 파트 | 파일 |
|---|---|
| 공용 폼(로그인·비밀번호 찾기·변경·가입) | packages/components/html/signin-form.html · forgot-password-form.html · change-password-form.html · signup-form.html |
| 앱별 카드 셸·카피라이트 | apps/*/src/views/signin.html · forgot-password.html · change-password.html |
| admin 가입·인증·초대·허브·접근 불가 | apps/admin/src/views/signup.html · signup-verify.html · invite.html · workspaces.html · dashboard.html(Access Denied) |
| 공용 404 | packages/static/pages/404.html(단독 페이지 — DS CSS 를 불러오지 않아 값을 직접 적는다) |
| 직원 앱 40:60 · 하단 배너 | apps/employee-app/src/styles/main.css(.app-vbias · .app-banner) |
| 권한 거절 판정 | packages/components/src/utils/access-error.ts(isAccessDeniedError) |
카드형 게이트
로그인 · 비밀번호 찾기 · 비밀번호 변경 · 가입 · 이메일 인증 · 초대 수락. 카드 하나와 그 아래 카피라이트로 이뤄집니다.
| 요소 | 값 | 마크업 |
|---|---|---|
| 제목 | h3 24px · 600 | div role="heading" … text-h3 font-semibold |
| 제목 → 부제 | 8px | 부제 mt-2 |
| 부제 | B4 14px | div text-b4 |
| 입력칸 | 48 · 모서리 4 · 좌우 16 · 14px | ds-input--48 w-full |
| 입력칸 → 오류·설명 | 6px · 12px | .ds-form-error · .ds-form-help |
| 카드 → 카피라이트 | 12px | div text-b6 mt-3 |
모바일에서 버튼을 48·모서리 16으로 올린 화면(직원 앱·급여의 .auth-form)은 입력칸 모서리도 16입니다 — 모서리 축 ds-r-* 가 텍스트필드까지 적용됩니다(모서리).
접근 불가 · 404
| 요소 | 값 |
|---|---|
| 아이콘 | 원판 48 · 글리프 24 · 원판 → 제목 16 (404 는 아이콘 없음) |
| 제목 | h3 24px · 600 · neutral-700 |
| 제목 → 본문 | 12px |
| 본문 | B3 16px · 행간 1.7 · neutral-500 |
| 본문 → 버튼 | 28px |
| 버튼 | ds-btn--lg · 간격 12 · 주 버튼 1개 |
공용 404 는 단독 페이지라 버튼을 손으로 그립니다(45 · 16px · 모서리 6). 접근 불가 화면은 가장 가까운 DS 버튼(48 · 15px · 모서리 4)을 쓰므로 두 화면의 버튼 모양만 약간 다릅니다.
직원 앱
- 세로 40:60 — 로그인 · 비밀번호 찾기·변경 · 조직 선택 · 업데이트 차단. 위아래에 2:3 으로 늘어나는 빈 칸(
::before/::after)을 둡니다. 측정값(390 폭): 로그인 132:196 · 비밀번호 찾기 186:277 · 업데이트 차단 171:252. - 업데이트 차단 — 아이콘 · 제목 h3 · 설명 B4 사이 12px.
- 하단 배너(버전 확인 실패 · 새 버전 준비됨) — notice 상하 배치, 좌·우·바닥 16(화면 배율 ×1.2 에서 19로 측정).
함정
- 태그 기본값이 클래스를 이깁니다.
h1·p에 크기·여백 클래스를 붙이면 빌드는 통과하지만 화면은 32px·16px·여백 0 입니다. 2026-10-01 측정에서 게이트 화면 제목·부제·카피라이트·오류 문구 대부분이 이 이유로 어긋나 있었습니다. x-if는 첫 자식 하나만 그립니다. 공용loading.html처럼 template 여러 개인 파일을<template x-if>안에 그대로 넣으면 첫 조각만 남습니다 —div로 감쌉니다(직원 앱 부팅 로딩이 흰 화면이던 원인).- 개발 서버 404 — 자식 앱(base
/hr-system/등)은{base}/404.html로 보냅니다.@hereby/staticvite 플러그인이 base 아래 404.html 도 주므로, 플러그인을 고친 뒤에는 개발 서버를 재시작해야 반영됩니다.
변경 이력
| 날짜 | 내용 |
|---|---|
| 2026-10-01 | 문서 신설 — 게이트 화면 92개 상태 측정 결과로 제목 · 부제 · 입력칸 · 카피라이트 · 접근 불가 · 직원 앱 배치 규격을 정함 |