패턴
가입과 첫 경험
랜딩 → 가입 → 첫 연결 → 첫 “아하”까지 결정 4번, 입력 0–2번. 단계별 실제 컴포넌트 조합과 이탈 지점 대응.
결정 4번, 입력 0–2번
첫 사용은 설명하고 싶은 경험 하나를 찾는 데 집중한다. 모든 서비스 연결, 긴 프로필, 전체 기록 분류를 먼저 요구하지 않는다.
| 단계 | 화면·행동 | 미루는 것 |
|---|---|---|
| 0 랜딩 | 주 CTA “Google로 시작”, 보조 “이메일로 가입”(텍스트 링크), 예시 위젯 묶음(“예시” 표시) | 기능 설명, 언어 선택(브라우저 언어 자동) |
| 1 계정 | Google은 openid email profile만. 이메일은 한 페이지 2필드 | 이름(Google 값), 이메일 인증, 시간대(자동) |
| 2 첫 연결 /start | Calendar 미리 선택 → 가져오기 → 범위 시트 → Google 증분 동의 | 두 번째 출처, 기간 확장, 알림 |
| 3 가져오기 | 결과가 도착하는 대로 표시. 기다릴 필요 없음 | 정리, 설명 작성 |
| 4 “아하” | “2주 전 캘린더에 있던 일” 카드 1장 → 상세 | 다른 위젯 |
단계별 조합
아래는 실제 @/design 컴포넌트로 조립한 단계별 화면 조각이다. 번호 메모가 그 자리의 규칙이다.
실제 컴포넌트: 0 · 랜딩 /
1브랜드 표기, 헤드라인 한 줄, 주요 버튼 하나. 슬로건 목록·기능 그리드 없음.
2이메일 가입은 텍스트 링크(단독 링크라 44px).
3실제 모양 위젯 1장에 “예시” 태그. 미리보기는 aria-hidden.
4빛은 히어로 뒤 하나, 헤드라인은 --cb-ink만.
실제 컴포넌트: 1 · 가입 /signup — 불투명한 독립 페이지
1모달이 아니라 페이지. 배경마다 대비가 달라지는 일을 막는다(모달 최악 1.94:1).
2autocomplete email / new-password, 붙여넣기 허용, CAPTCHA 금지(WCAG 3.3.8).
3비밀번호 규칙은 항상 보이고 aria-describedby로 연결. 제출 실패 시 첫 오류로 초점.
4Google 창을 취소하면 오류 토스트 없이 같은 버튼으로 초점만 돌아온다.
실제 컴포넌트: 2 · 첫 연결 /start — 범위 시트
- 일정의 제목과 시간만 읽어요.
- 일정을 만들거나 바꾸지 않아요. 참석자·장소·설명은 읽지 않아요.
- 지난 30일만 가져와요. 언제든 연결을 끊고 지울 수 있어요.
Google 화면에는 위보다 넓은 권한이 표시돼요. 가져오는 것은 위 범위뿐이에요.
1Calendar가 미리 선택돼 있다. 주 버튼 “가져오기”를 누르면 3줄 범위 시트가 열린다.
2세 줄: 읽는 것 / 하지 않는 것(쓰기·발송) / 기간. 네 번째 줄은 없다.
3Google 화면이 더 넓은 권한을 보여줄 수 있음을 미리 한 줄로 알린다(PermissionNote).
4“나중에”·Esc는 오류가 아니다. 초점은 “가져오기”로 돌아간다. 빛 없음, 불투명 시트.
실제 컴포넌트: 3 · 가져오기
가져오기
10월 3일까지 읽음
다른 화면으로 가도 계속 읽어요.
끝나면 여기 모아둘게요.
Google Calendar
1처음엔 스켈레톤 3행, 결과는 도착하는 대로. 진행은 퍼센트가 아니라 날짜.
210초 넘게 걸리면 “끝나면 여기 모아둘게요”. 떠나도 손실 없음.
실제 컴포넌트: 4 · 첫 “아하”
2주 전 캘린더에 있던 일
수요일
Q4 roadmap sync
자세히 보기1제목은 사실만: “2주 전 캘린더에 있던 일”. 초대는 참석이 아니다.
2계정당 한 번의 브랜드 모먼트(모션 가이드). 주 행동은 상세로 가는 링크 하나.
이탈 지점과 대응
| 이탈 지점 | 대응 |
|---|---|
| 무슨 앱인지 모름 | 랜딩에 실제 모양 카드 1장(“예시” 라벨) |
| Google 창 취소 | 오류 토스트 없이 같은 버튼으로 초점 복귀 |
| 비밀번호 오류 | 규칙 상시 표시 + describedby. 첫 오류로 초점. 붙여넣기·보기 토글 |
| 범위 동의 거절 | 오류로 다루지 않는다. 홈을 not-collected + CTA 1개로 |
| 10초 넘게 걸림 | “끝나면 여기 모아둘게요”. 떠나도 손실 없음 |
| 결과 0건 | no-results로(읽은 기간과 함께) + 다른 출처 제안 |
| 이메일 인증 | 흐름을 막지 않고 첫 연결 뒤 배너로 |
- 이렇게 하지 않기직접 적은 기억을 근거를 되찾은 결과로 세지 않는다.
- 이렇게어떤 경험에도 묶이지 않은 자료도 검색으로 찾을 수 있어야 한다.