2026-09-03 · 3장 중 1장 — 로그인·실패 사유·유예. 지금 제품(prototype-v2)에 실제로 있는 로그인 화면과 서버가 실제로 보내는 오류 코드를 실측한 뒤, 그 위에 4단계(§7-4b)에서 바뀔 화면을 그렸습니다. A/B를 눌러 고르시고(안 누르면 권고안 그대로 채택), 맨 아래 상자를 눌러(전체선택) 복사해 대화창에 붙여 주세요.
설치 후 앱을 처음 열었을 때 가장 먼저 뜨는 화면입니다. 원우님이 이미 인증 방식(이메일+비밀번호 유지)은 확정하셨고, 여기서 정할 것은 "이 화면이 지금처럼 뒤 화면을 가리는 별도 팝업인지, 앱 자체의 첫 화면인지"입니다.
D123 로그인 화면이 앱과 어떤 관계를 맺을까요
A는 지금 제품(prototype-v2) 코드 그대로 — 로그인 안 됐을 때 화면 전체를 어두운 막으로 덮고 흰 카드 하나를 얹습니다(앱 테마와 무관하게 항상 같은 모습). B는 로그인 화면 자체가 앱의 첫 화면이 되어, 앱 라이트/다크 테마를 그대로 따릅니다.
A · 현재 그대로(고정 흰 카드 오버레이)
GRID.OS 로그인
이메일
비밀번호
로그인
지금 코드 그대로입니다 — 배경 `#0b0b0e` 반투명 막 + 흰 카드가 뒤 UI를 완전히 가립니다(의도된 단독 화면). 이 카드는 페이지를 라이트로 바꿔도 다크로 바꿔도 항상 같은 모습입니다.
B · 앱의 첫 화면 자체 권고
GRID.OS
GRID.OS에 로그인
이메일
비밀번호
비밀번호를 잊으셨나요?
이 기기는 조직의 좌석 1석을 사용합니다
별도 팝업이 아니라 앱 창 전체가 이 화면입니다 — 라이트/다크 전환이 그대로 적용되고, 다음 화면(AI 연결)과 같은 시각 문법(카드·타이포·간격)을 씁니다. 로고+워드마크 → 제목 → 필드 → 버튼 → 보조 링크 → 좌석 안내 순서.
벤치마킹 근거 — Slack·Notion 데스크톱 앱의 로그인 화면은 별도 오버레이가 아니라 앱 창 자체의 첫 화면입니다. 워드마크가 위, 필드가 중앙, 보조 링크가 아래라는 배치도 이 두 앱의 관행과 같습니다.
어설픔 방지 가드 — 카드 폭이 220px 아래로 좁아지면 좌석 안내 문구가 두 줄로 밀리며 카드 하단이 답답해집니다. 실제 구현에서 카드 최소 폭 260~280px을 확보할 것.
근거 — 실측대장 C §2(제품 로그인 게이트 DOM·고정 hex 확인), 기능표 §7-4b 목표표 "첫 화면" 행, 원우 결정 ①(이메일+비밀번호 유지, §7-4b).
D124 로그인 실패 사유 5종 표시
서버 연결 불가 / 이메일·비밀번호 오류 / 좌석 초과 / 조직 정지 / 계정 비활성 — 다섯 가지를 화면에서 어떻게 구분해 보여줄지입니다. 아래 5개 탭을 눌러 실제로 바뀌는 모습을 확인하실 수 있습니다.
D124 실패 사유를 어떤 모양으로 보여줄까요
A는 지금 코드 방식(입력칸 아래 인라인 문구 한 줄)을 5종으로 확장한 것, B는 카드 상단 배너(상태색 띠 + 사유 + 다음 행동 + 버튼)입니다.
A · 인라인 문구 한 줄(현재 방식 확장)
GRID.OS에 로그인
wwchoi@grid-a.com
••••••••
이메일 또는 비밀번호가 올바르지 않습니다.
지금과 같은 자리, 같은 방식입니다 — 5종 전부 이 한 줄의 문구만 바뀌고 색·버튼·아이콘은 추가되지 않습니다. 화면이 가장 단순하지만, "다음에 뭘 해야 하는지"는 문구 안에서 스스로 읽어야 합니다.
B · 카드 상단 배너(사유+다음 행동+버튼) 권고
아래 5개를 눌러 보세요
서버 연결 불가
이메일·비밀번호
좌석 초과
조직 정지
계정 비활성
GRID.OS에 로그인
서버에 연결하지 못했습니다
인터넷 연결을 확인해 주세요
이메일 또는 비밀번호가 올바르지 않습니다
다시 입력해 주세요
좌석이 가득 찼습니다 · 3석 중 3석 사용 중
기기 하나를 해제하면 로그인할 수 있습니다
조직 라이선스가 정지되었습니다
조직 관리자에게 문의해 주세요
관리자가 계정을 중지했습니다
계정을 다시 쓰려면 관리자에게 문의해 주세요
이메일
비밀번호
사유·다음 행동·버튼이 한 덩어리라 "왜 안 되는지"와 "그래서 뭘 해야 하는지"가 같이 보입니다. 좌석 초과·조직 정지는 상태색(warn/err)으로도 구분됩니다.
벤치마킹 근거 — Slack의 "이 워크스페이스에서 비활성화된 계정입니다" 배너, 1Password의 "기기 한도를 초과했습니다" 안내가 같은 문법(사유 한 줄+다음 행동+버튼 하나)입니다.
어설픔 방지 가드 — "계정 비활성" 배너는 실제로는 최초 로그인 실패 화면이 아니라 §12-8 heartbeat 잠금(이미 로그인된 세션이 몇 분 뒤 잠기는 상황)에서 정확하게 뜹니다. 실측대장 B §3에 따르면 서버는 최초 로그인 시점에 "이메일 미존재·비밀번호 오류·계정 비활성" 셋을 401 메시지 하나("이메일 또는 비밀번호가 올바르지 않습니다")로 의도적으로 뭉쳐 보냅니다(보안 설계 — 계정 존재 여부 탐지 방지). 좌석 초과(409)·조직 정지(403)는 서버가 이미 정확히 구분해 보내지만, "계정 비활성"을 최초 로그인 화면에서 이 배너 그대로 보여주려면 서버 401 응답을 세분화하는 작업이 먼저 필요합니다 — 이번 시안은 그 세분화를 전제로 그렸습니다.
서버에 연결할 수 없을 때, 저장된 인증(유예 7일)으로 계속 들어가는 방식입니다. 로그인 화면을 한 번 더 거치게 할지, 곧바로 앱으로 들여보내고 띠 하나로만 알릴지입니다.
D125 유예 상태를 어디서 알려줄까요
A는 로그인 화면에서 "저장된 인증으로 계속" 버튼을 한 번 더 누르게 합니다. B는 로그인 화면을 건너뛰고 바로 앱으로 들어가되, 앱 상단에 얇은 띠로만 알립니다.
A · 로그인 화면에서 버튼 클릭
GRID.OS에 로그인
서버에 연결하지 못했습니다
이메일
비밀번호
사용자가 매번 한 번 더 눌러야 앱에 들어갑니다 — 유예 상태를 명확히 인지시키지만, 서버가 죽어 있을 때마다 로그인 화면부터 다시 마주쳐야 합니다.
B · 로그인 화면 없이 바로 앱 + 상단 띠 권고
GRID.OS
지금은 서버를 확인할 수 없어 저장된 인증으로 계속합니다 · 유예 6일 남음다시 확인
그리드 트리(평소와 동일)
대시보드(평소와 동일)
AI Agent
변경 없음
업무가 끊기지 않습니다 — 서버 장애가 곧바로 "일을 못 하는 상태"로 이어지지 않는다는 게 유예 설계의 목적입니다. 확인이 성공하면 이 띠는 자동으로 사라집니다.
참고 — 유예가 끝나 실제로 잠기면(§12-8 즉시실효 포함) 이렇게 됩니다
GRID.OS
이 기기는 잠겼습니다 — 아래에서 다시 로그인해 주세요
GRID.OS에 로그인
관리자가 계정을 중지했습니다
관리자에게 문의해 주세요
이메일
비밀번호
벤치마킹 근거 — Linear·Superhuman은 오프라인일 때 앱 상단에 얇은 띠만 띄우고 업무 화면은 그대로 둡니다. 로그인 화면으로 되돌리지 않는다는 점이 유예의 "업무를 멈추지 않는다"는 목적과 일치합니다.
어설픔 방지 가드 — 유예 띠와 "잠김" 화면은 같은 배너 컴포넌트를 재사용하면 안 됩니다. §12-8에 따르면 유예는 서버 장애 대비 수단이지 중지를 피하는 수단이 아니며, 중지 상태는 온라인 확인이 한 번이라도 되는 순간 유예를 무시하고 즉시 잠깁니다(즉시실효 플래그). 두 상태를 시각적으로 뚜렷이 다르게(경고색 띠 vs 로그인 화면 자체) 만들어야 "중지된 계정이 유예로 계속 쓰인다"는 오해·악용을 막습니다.
근거 — 기능표 §7-4b 목표표 "오프라인·장애" 행, §12-8(계정 중지 효력·즉시실효 플래그·"그리드 파일을 인질 잡지 않는다"), 실측대장 C §1(유예 7일·재발급 창 30일·네트워크 실패와 서버 명시 거부의 코드 분리).
D125b 로그아웃·내 기기(좌석) 자기 서비스 위치
로그인 이후, 팀원이 스스로 로그아웃하거나 좌석을 해제하려면 어디를 눌러야 하는지입니다.
D125b 계정 관리를 어디에 둘까요
A는 설정 화면 안 "계정" 섹션, B는 타이틀바 우측 아바타를 누르면 뜨는 드롭다운 메뉴입니다.
A · 설정 › 계정 섹션 권고
설정
계정
wwchoi@grid-a.com그리다(Grid.A Corp.) · 팀원
내 기기 · 2대이 기기(MacBook Pro) · 사무실 iMac
비밀번호마지막 변경 2026-07-01
로그아웃이 기기에서만 로그아웃합니다
위젯 표시·테마 같은 다른 개인 설정과 같은 자리에 있어 찾기 쉽고, 실수로 눌러 로그아웃될 위험이 적습니다(설정 화면은 의도를 갖고 들어가는 곳이라 — STYLEGUIDE §12 L2 서피스).
B · 타이틀바 계정 메뉴
GRID.OS
최원우 ▾
wwchoi@grid-a.com
내 기기 관리
비밀번호 재설정
로그아웃
눌러 보세요 →
클릭 한 번으로 언제든 접근할 수 있어 빠르지만, 업무 화면 위에 늘 떠 있는 자리라 자칫 실수로 누르기 쉽고 다른 타이틀바 요소(에디션 배지·서명 문구)와 자리 다툼이 생깁니다.
벤치마킹 근거 — Notion은 설정 › 내 계정 안에 기기 목록·로그아웃을 모아두고, 타이틀바에는 아바타만 있어 misclick을 줄입니다. 1Password 데스크톱도 계정 관리는 별도 설정 탭입니다.
어설픔 방지 가드 — "로그아웃"은 되돌릴 수 있는 동작이라 확인창 없이 즉시 실행해도 되지만, "기기(좌석) 해제"는 다른 사람이 쓰고 있는 기기의 세션을 끊는 동작일 수 있어 실행 전 1단계 확인("이 기기의 로그인을 해제할까요?")을 거쳐야 합니다.
근거 — 기능표 §7-4b 목표표 "자기 서비스" 행(비밀번호 재설정·기기 목록·좌석 해제·로그아웃), STYLEGUIDE.md §12(층 문법 — 설정 화면은 L2 작업 서피스).
컨펌
카드마다 A/B를 눌러 고르신 뒤(선택 안 하면 권고안 자동 채택) 아래 박스를 눌러(전체 선택) 복사해 채팅에 붙여넣어 주세요. 복사가 안 되면 박스를 눌러 드래그 복사하시거나, 말로 "D123은 A, 나머지는 권고안대로" 하셔도 같은 무게로 처리합니다.