ubell 디자인 의뢰 · 로그인 전체 흐름

계산대 앞에서 읽히는 문

내일, 양림동 가게 다섯 곳의 사장님이 서서, 처음 보는 화면으로 들어옵니다. 이 문서는 그 3분을 위한 재설계입니다. 코드는 건드리지 않았고, 판단과 목업과 대비표만 담았습니다.

1부

진단 — 이 화면은 분위기를 위해 읽힘을 팔았다

감독의 감은 맞습니다. 감이 아니라 숫자로 확인했습니다.

판정. 지금의 로그인은 앉아서 감상하는 사람을 위해 지어졌고, 우리 손님은 서서 읽는 사람입니다. 가장 중요한 안내문일수록 가장 옅은 잉크(2.55:1)에 깜빡임까지 얹었고, 비밀번호 설정은 같은 흐름 안에서 세계가 밤으로 뒤집히며 라벨이 2.61:1·10.5px·자간 0.3em으로 부서집니다. placeholder는 1.76:1 — 사실상 투명합니다. 인증번호 여섯 칸은 302px로 300px 폼을 넘칩니다. 숨쉬는 애니메이션·넓은 자간·옅은 잉크·검은 배경은 전부 정적일 때 아름답고, 서서 읽을 때 안 보이는 장치입니다. 분위기는 버리지 않되, 글자에서 떼어 빛으로 옮깁니다.

실측 항목	현재 값	대비비	판정
「화면을 누르면 시작합니다」 (탭 게이트)	13px · --ms-ink3 · 깜빡임(ms-breathe)	2.55:1	탈락 — 가장 중요한 문장이 가장 안 읽힘
「문자가 오지 않으면…」 안내	12.5px · --ms-ink3	2.55:1	탈락
비밀번호 설정 라벨 (sp-label)	10.5px · 모노 · 자간 .3em · #4A5470/#060B18	2.61:1	탈락 — 한글이 낱자로 흩어짐
비밀번호 설정 placeholder	#2E3A5C / #060B18	1.76:1	탈락 — 사실상 투명
비밀번호 설정 버튼 (sp-bell)	14.5px · 자간 .28em · 금색 글씨 · 투명 배경	11.96:1	대비는 통과, 판독은 탈락 — 자간·가는 획·버튼처럼 안 보임
인증번호 여섯 칸	42px×6 + 10px×5 = 302px > 폼 300px	—	360px 안드로이드에서 넘침
로딩 중 버튼	disabled 시 ms-breathe 깜빡임	—	기다리는 사람에게 고장 신호
버튼 그림자·caret	#3E6DFF (토큰 밖 파랑)	—	브랜드 밖 색 — 잉크코발트는 #2536B8
첫 화면 로고	산타 모자 쓴 눈사람 둘 (8월)	—	계절이 그림에 박혀 있음

지킨 것이미 잘 되어 있는 것은 전부 살립니다 — autoComplete="one-time-code"(문자 자동 채움), inputMode="numeric", 아이디 칸 16px 이상(iOS 확대 방지), prefers-reduced-motion, 시각·때(아침/저녁) 표시. 인증 메커니즘(signInWithOtp → verifyOtp → link_member_by_phone → set-password)도 그대로입니다. 바꾸는 것은 겉옷뿐입니다.

2부

합친 첫 화면 — 탭 게이트를 없애고, 빛이 숨쉰다

스플래시와 「어서 오세요」를 한 화면으로 합칩니다. 아무 일도 안 하는 탭이 사라지고, 문을 연 순간 번호 칸이 바로 눈앞에 있습니다. 살아있음은 글자가 아니라 마크 뒤의 새벽빛과 등불 점이 맡습니다 — 읽는 것을 방해하지 않는 자리에서.

A · 다시 온 사람 (기본)

저녁19:24

ubell

어서 오세요

휴대폰 번호로 문자를 받아 들어갑니다.

휴대폰 번호

처음이신가요?

다른 방법비밀번호·이메일·Google

B · 「처음이신가요?」를 누르면

저녁19:24

ubell

처음 오셨군요

가입 절차가 따로 없어요.
휴대폰 번호면 바로 들어올 수 있습니다.

휴대폰 번호

이미 계정이 있어요

다른 방법비밀번호·이메일·Google

판단 1 · 탭 게이트 철거「화면을 누르면 시작합니다」는 손님에게 일을 시키고 아무것도 돌려주지 않는 탭이었습니다. 합친 화면에서는 그 탭이 하던 일(브랜드 순간)을 첫 화면 상단이 그대로 하고, 하단에는 번호 칸이 이미 나와 있습니다. 심방 자리에서 절차가 한 걸음 줄어듭니다.

판단 2 · 살아있음의 자리오너가 원한 「살아있게」는 남깁니다 — 단, 글자에는 절대 붙이지 않습니다. 마크 뒤 새벽빛(금빛 radial)이 5초 주기로 숨쉬고, 상단 「저녁」 옆 등불 점이 함께 숨쉽니다. 시각·때 표시도 그대로 살아 있습니다. 문장은 전부 정지 상태 — 움직이는 것은 빛뿐, 읽는 것은 전부 멈춰 있습니다. prefers-reduced-motion이면 빛도 멈춥니다.

판단 3 · 갈림길 유지「처음 오셨군요/어서 오세요」의 갈림은 좋은 것이라 살렸습니다. 다만 지금처럼 문장만 바뀌는 게 아니라, 처음 온 사람에게는 「가입 절차가 따로 없어요」를 명시합니다 — 계산대 앞 사장님의 첫 불안은 "가입하라는 건가?"이기 때문입니다. 명부 연결(「교회 명부와 자동으로 이어져요」) 문구는 첫 화면에서 뺐습니다: 내일의 손님은 가게 사장님이고, 교회 문장은 산토끼 앞에서 꺼내지 않습니다.

판단 4 · 번호가 큰길휴대폰 번호 칸이 첫 화면의 유일한 입력입니다(골목 문패에는 번호가 필요합니다). 이메일·구글·비밀번호는 화면 맨 아래 한 줄로 접었습니다 — 있되, 작게. 번호 칸은 22px로 키웠습니다: 서서 입력하는 숫자는 본문보다 커야 하고, 16px 이상이라 iOS 확대도 없습니다.

판단 5 · 로고 판정8월에 산타 눈사람은 틀렸습니다. 계절이 박힌 그림은 첫 화면의 주인공이 될 수 없습니다 — 내일 처음 보는 사장님에게는 "이 앱, 관리되고 있나?"라는 신호가 됩니다. 대체안은 위 목업의 종 마크입니다: 이름(ubell)이 이미 종이고, 종은 계절이 없으며, 잉크코발트 스쿼클 + 웜골드 점 하나로 두 브랜드색이 다 삽니다. 내일까지 마크 교체가 부담이면 차선책은 눈사람 마크를 빼고 워드마크(ubell)만 세우는 것 — 빈자리는 새벽빛이 채웁니다. 눈사람을 그대로 두는 것만은 피하십시오.

3부

여섯 자리 화면 — 360px에서도 넘치지 않는다

고정폭 42px×6=302px 대신 유동 칸(flex:1, 최대 52px, 간격 8px)으로 바꿉니다. 칸이 화면 폭을 따라가므로 어떤 폰에서도 넘칠 수 없습니다. 아래 프레임은 일부러 360px입니다.

360px 안드로이드 기준 — 꽉 차되 넘치지 않음

저녁19:25

← 번호 고치기

문자를 보냈어요

010-1234-5678로 받은
여섯 자리 숫자를 입력해 주세요.

문자는 보통 10초 안에 옵니다.
화면 위 알림을 누르면 저절로 채워져요.

칸의 수학360px 화면 − 좌우 여백 48px = 312px. 유동 칸은 (312 − 8×5) ÷ 6 = 45.3px로 자리잡고, 큰 폰에서는 최대 52px에서 멈춥니다. 고정폭이 아니므로 어떤 기기에서도 오버플로가 원리적으로 불가능합니다. 투명 input 오버레이 + one-time-code + inputMode="numeric" 구조는 그대로 — 문자 자동 채움이 계속 작동합니다.

다시 받기를 이 화면에지금은 「문자가 오지 않으면 돌아가서 다시 받아 주세요」 — 길을 잃은 사람에게 되돌아가라고 시킵니다. 새 설계는 「문자 다시 받기」 버튼을 이 화면에 둡니다. 30초 카운트다운 뒤 활성화되어 연타를 막고, 번호를 잘못 넣었다면 「← 번호 고치기」로 올라갑니다. 안내문은 12.5px·2.55:1에서 15px·4.67:1로 올렸고, 기다리는 사람에게 「보통 10초 안에 옵니다」라는 기준을 줍니다.

숫자는 더 크게칸 안 숫자 22px→24px 굵게, 칸 높이 54→58px. 입력된 칸은 잉크코발트 테두리 + blue-ink 숫자로 「들어왔다」를 보여줍니다. 색만으로 구분하지 않고 테두리 굵기(1.5px)도 함께 바뀝니다.

4부

비밀번호 설정 — 밤을 걷어내고, 할 일을 말한다

인증 직후 가장 낯선 순간에 세계가 밤으로 뒤집히는 것이 「가독성이 전혀 없다」의 정체였습니다. 밝은 세계로 되돌리고, 브랜드 토큰만 쓰고, 무엇을 왜 하는지를 문장이 직접 말하게 합니다.

C · 비밀번호 만들기 (밝은 세계)

저녁19:26

비밀번호를 만들어 주세요

다음부터는 문자 없이
이 비밀번호로 들어올 수 있어요.

새 비밀번호 (8자 이상)

한 번 더 입력

비밀번호 보이기

D · 다 되었을 때

저녁19:27

다 되었어요

이제부터 010-1234-5678와
이 비밀번호로 들어옵니다.

문구 — 전후표

지금 (밤의 성전)	새 문구	왜
~~둘만 아는 말 · 새 비밀번호 (8자 이상)~~	새 비밀번호 (8자 이상)	라벨은 시가 아니라 이름표. 은유가 앞에 서면 할 일이 뒤로 밀립니다.
~~다시 한 번, 같은 말 · 비밀번호 확인~~	한 번 더 입력	네 글자면 됩니다.
~~말을 심다~~ / ~~말이 심어지는 중 —~~	비밀번호 만들기 / 만드는 중…	버튼은 누르면 일어날 일을 말해야 합니다.
~~둘만 아는 말이 심어졌습니다.~~	다 되었어요	완료의 언어는 짧을수록 안심입니다.
~~다음부터는 이 말로, 고요히 들어오세요.~~	이제부터 010-○○○○-○○○○와 이 비밀번호로 들어옵니다.	아름다운데 지시가 없던 문장을, 다음에 할 일이 그대로 담긴 문장으로. 번호를 다시 보여줘 「아이디=내 번호」를 심어줍니다.
~~— 성전 뜰로 들어가기 —~~	우벨 시작하기	산토끼(가게 사장님)에게 성전은 남의 집 언어입니다.

판단 6 · 은유의 자리「둘만 아는 말」의 시심은 버리는 게 아니라 자리를 옮깁니다 — 첫 화면의 새벽빛, 완료 화면의 등불처럼 말없는 곳으로. 처음 온 사람 앞에서 은유가 라벨을 차지하면, 그 사람은 시를 읽는 게 아니라 번역을 해야 합니다. 계산대 앞에서 번역시키지 않습니다.

판단 7 · 보이기 체크「비밀번호 보이기」를 추가했습니다. 서서, 처음 만드는 비밀번호를, 점 여덟 개로 두 번 맞추는 일은 40~60대에게 실패율이 가장 높은 지점입니다. 보이기 하나로 「두 비밀번호가 다릅니다」 오류 자체가 줄어듭니다.

5부

대비표 — 전부 AA 통과, 못 하는 건 안 쓴다

기준: 본문 4.5:1 이상, 큰 글씨(24px 또는 18.5px 굵게) 3:1 이상. 최소 본문 15px · 최소 안내문 15px · 입력 글씨 18px 이상 · 라벨 14px 굵게. 12~13px 글씨는 이 흐름에서 폐지합니다 — 어르신이 서서 읽습니다.

탈락했던 조합 (다시 쓰지 않는다)

조합	어디 쓰였나	대비비	판정
#98A0B4 / #FBFCFF (--ms-ink3)	탭 게이트 문장 13px · OTP 안내 12.5px · placeholder	2.55:1	탈락 → 글자에서 퇴출. 헤어라인·비문자 장식 전용으로 강등
#4A5470 / #060B18	비밀번호 설정 라벨 10.5px	2.61:1	탈락 → 색·크기·자간 3중 탈락. 팔레트째 폐기
#2E3A5C / #060B18	비밀번호 설정 placeholder	1.76:1	탈락 → 팔레트째 폐기
#EFC46B 금색 글씨 버튼	「말을 심다」 sp-bell	11.96:1	비율은 통과하나 토큰 밖 색 + 자간 .28em → 폐기
#D9463E / #FBFCFF (--ms-danger)	(새 설계에서 확인) 오류 본문으로 쓸 경우	4.18:1	본문 탈락 → 아이콘·테두리 표식 전용. 오류 문장은 잉크색으로
#F6A62B / #FBFCFF (--ms-gold)	(예방 규칙) 금색을 글자로 쓸 경우	1.97:1	글자 금지 → 등불·점·빛 전용. 금색 글자는 --ms-gold-ink

새 조합 (전부 통과)

쓰임	크기·굵기	조합	대비비	AA
화면 제목	27px · 800	--ms-ink / --ms-screen	15.80:1	통과
본문·안내문	15~16px · 400~500	--ms-ink2 / --ms-screen	4.67:1	통과 (본문 하한 — 이보다 옅은 글자 없음)
본문 강조	15~16px · 700	--ms-ink / --ms-screen	15.80:1	통과
입력 라벨	14px · 700	--ms-ink / --ms-screen	15.80:1	통과 (ink2 아닌 ink — 라벨은 길잡이)
입력 글씨	18px (번호 22px) · 400	--ms-ink / --ms-card	16.20:1	통과 · iOS 확대 없음
placeholder	18px	--ms-ink2 / --ms-card	4.79:1	통과 (ink3에서 승격)
큰 버튼 글씨	17px · 800	#FFFFFF / --ms-blue	9.14:1	통과 · 그림자도 rgba(37,54,184,…)로 — #3E6DFF 퇴출
보조 링크	14.5px · 700	--ms-blue-ink / --ms-screen	11.65:1	통과
오류 문장	15px · 400~700	--ms-ink / danger-soft 상자	≥14.5:1	통과 — 빨간 건 아이콘·테두리, 글은 잉크
OTP 숫자	24px · 700	--ms-ink / --ms-card	16.20:1	통과
금색 글자(완료 등)	15px 이상 · 700	--ms-gold-ink / --ms-screen	5.33:1	통과 — 금빛 문장은 반드시 gold-ink로

규칙 요약① 글자 잉크는 --ms-ink와 --ms-ink2 둘뿐 — ink3은 글자 금지. ② 최소 15px, 라벨만 14px 굵게 허용. ③ 자간은 한글에 0 (숫자만 .02em 허용). ④ 애니메이션은 빛(점·radial)에만, 글자·버튼 라벨에는 금지. ⑤ 토큰 밖 색 신설 금지 — #3E6DFF·#EFC46B·#060B18 계열 전부 퇴출.

6부

실패했을 때 — 빨간 한 줄 대신, 다음 걸음을 준다

오류는 「무엇이 잘못됐나」보다 「이제 뭘 하면 되나」가 먼저입니다. 모든 오류 상자에 다음 걸음 버튼이 붙습니다. 오류 문장은 잉크색(15.8:1), 빨강은 표식에만 씁니다.

E-1 · 문자가 안 올 때

「문자 다시 받기」가 30초 뒤 살아난다.
두 번째도 안 오면 이 상자가 나온다.

문자가 두 번째도 오지 않았어요.
번호가 맞는지 한 번 확인해 주세요.
지금 번호: 010-1234-5678
번호 고치기 →

✓

번호가 맞다면 통신사 사정일 수 있어요.
이메일로 대신 들어가기 →
※ 이메일로 들어가면 나중에 번호를 꼭 이어주세요 — 골목 문패에 필요합니다.

E-2 · 번호를 틀렸을 때 / 시간이 지났을 때

인증번호가 맞지 않아요.
문자에 온 여섯 자리를 다시 확인해 주세요.

인증번호 시간이 지났어요.
새 문자를 받아서 다시 넣어 주세요.
새 문자 받기 →

틀리면 칸 테두리가 붉어지고 입력이 비워지며 포커스가 첫 칸으로 돌아간다. 만료면 「새 문자 받기」가 상자 안에 바로 있다.

E-3 · 비밀번호 로그인이 막힐 때

아이디 또는 비밀번호가 맞지 않아요.
비밀번호가 기억나지 않아도 괜찮아요.
문자로 들어가서 다시 만들기 →

비밀번호를 잊은 사람의 출구는 언제나 문자 인증이다 — 별도의 「비밀번호 찾기」 절차를 만들지 않고, 이미 있는 OTP → set-password 길로 되돌린다. 이미 가입된 번호로 문자를 받는 경우는 오류가 아니다: OTP는 그냥 로그인이 되므로, 그대로 들여보낸다.

로딩 규칙기다림에는 깜빡임 금지. 버튼은 모양 그대로, 글씨만 「문자가 가는 중…」「확인하는 중…」으로 바뀌고, 버튼 글씨 옆 금색 점 하나만 숨쉽니다(글자는 정지). 버튼이 흐려졌다 진해지는 ms-breathe는 폐지 — 기다리는 사람에게 고장 신호를 주지 않습니다.

구현 각주 (코딩 소네트에게)① 문장 하나는 JSX 한 줄에 — 여러 줄로 쪼개면 공백이 사라집니다(「어느 교회가봤는가」 사건). ② 조사는 lib/korean.ts의 particle()·ro()로 — 「010-…와/과」처럼 번호 뒤 조사가 갈립니다. ③ one-time-code·inputMode·16px·reduced-motion은 기존 코드에서 그대로 가져올 것. ④ SetPasswordForm의 sp-* CSS와 #060B18 팔레트는 파일째 걷어내고 ms-* 토큰으로. ⑤ 버튼 그림자·caret-color의 #3E6DFF를 rgba(37,54,184,…)·var(--ms-blue)로.