육십육 (SIXTYSIX)
66일, 같이 시작한 사람들과 끝까지.
▶ 라이브 데모 (V1) — sixtysix-taupe.vercel.app
▶ V2 미리보기 — sixtysix-v2.vercel.app · 배포 버전과 현재 로컬 구현은 다를 수 있음
모바일 화면 기준으로 만들었습니다. 데스크톱에서는 브라우저 개발자도구의 기기 모드(430×932)로 보시면 의도한 화면이 나옵니다.
같은 날 시작한 30명 코호트와 함께 하나의 습관을 66일 동안 매일 인증하고 완주하는 습관 챌린지 커뮤니티 모바일 웹 MVP입니다.
V1은 HTML · CSS · JavaScript로 구현한 12개 화면의 동결된 비교 기준입니다. 현재 개발 대상은 React · TypeScript 기반 V2입니다.
프로젝트 구성
현재 개발 대상은 V2입니다. 진행 상태·검증 결과·다음 작업은 PROGRESS.md, 작업 원칙은 HANDOFF.md에 모았습니다.
| 경로 | 역할 |
|---|
sixtysix/ | V1 정적 모바일 웹. 동결된 비교 기준 |
sixtysix-v2/ | React·TypeScript 앱, Fastify 서버, Vercel API 진입점 |
backend/ | PostgreSQL migration, OpenAPI 계약, DB·worker 도구 |
qa/ | V1 Playwright 회귀 테스트, V2 모바일 검수 |
v2/ | 범위 결정·설계·기능별 구현 기록 |
brand/ | 로고·파비콘 원본과 사용 규정 |
V2는 localStorage 기반 데모 6화면과 실제 계정용 로그인·계정·모집·활동·알림·운영자 화면을 제공합니다. 실제 계정은 API와 PostgreSQL을 사용하며 데모 기록과 분리됩니다. 공급자 실계정 검수와 남은 화면은 후속 작업입니다.
cd sixtysix-v2
npm ci # 최초 설치, Node.js 22
npm run dev # http://localhost:5173
npm test
npm run build # 프런트·서버 타입 검사 포함
실제 계정 기능은 별도 터미널에서 npm run dev:api로 API를 실행해야 합니다. 환경변수 설정과 구조는 V2 README, 모바일 검수는 QA README를 확인하세요.
인증 검수 Preview는 기존 V2 미리보기와 별도입니다. 배포·worker의 마지막 원격 확인 내용은 진행 기록 26~28장을 따릅니다.
아래 화면·디자인·배포 설명은 V1 기준입니다. V2 상세는 sixtysix-v2/README.md를 보세요.
무엇을 푸는 서비스인가
습관 챌린지 단톡방에 들어갔다가 조용히 나온 경험에서 출발했습니다.
| 문제 | 육십육의 답 |
|---|
| 인증이 채팅에 묻혀 내가 어디까지 왔는지 안 보인다 | 홈과 기록에 항상 떠 있는 66칸 진행판 |
| 며칠 빠지면 복귀할 명분이 없어 이탈한다 | 내보내지 않는 휴면 상태와 인증 한 번이면 되는 복귀 규칙 |
| 랭킹과 공지가 수작업이라 유실된다 | 자동 산정 랭킹과 공지 목록 |
| 66일이 끝나도 남는 게 없다 | 완주 배지와 졸업 화면, 다음 코호트 예약 |
개인 습관 트래커도, 채팅방도, 랭킹 경쟁 앱도 아닙니다. 같은 날 시작한 코호트의 소속감으로 완주율을 만드는 커뮤니티입니다.
V1 화면 12개
| 화면 | 역할 |
|---|
| 1 | 온보딩 | 습관 선택과 코호트 배정 |
| 2 | 홈(오늘) | 사용자 상태 6개에 따라 히어로와 다음 행동이 바뀜 |
| 3 | 챌린지 탐색 | 검색 · 카테고리 · 조건 필터 · 정렬 |
| 4 | 챌린지 상세 | 규칙 요약, 기간, 멤버, 참여 |
| 5 | 오늘 인증 작성 | 사진 선택 · 한 줄 40자 · 공개 범위 |
| 6 | 코호트 피드 | 스토리 레일과 인증 카드, 응원 · 저장 |
| 7 | 인증 상세 | 응원 · 저장 · 신고 |
| 8 | 기록 | 66칸 진행판, 통계, 저장한 인증, 배지 |
| 9 | 마이 | 프로필, 배지, 설정, 데모 상태 전환 |
| 10 | 코호트 랭킹 | 순위보다 완주 페이스 중심 |
| 11 | 공지 | 운영 공지 |
| 12 | 졸업(완주) | 완주 배지, 66일 여정, 다음 코호트 |
사용자 상태 6개
0일차 · 연속 중 · 오늘 완료 · 끊김 · 휴면 · 완주
홈 화면이 상태마다 다르게 보입니다. 마이 → 데모 → 데모 상태 전환에서 직접 바꿔볼 수 있습니다.
설계에서 신경 쓴 것
66칸 진행판을 표시 전용으로 만든 이유 — 11열 × 6행이면 타일이 34px입니다. 44px 터치 기준에 못 미쳐서 클릭 대상으로 두지 않고, 날짜별 상세는 아래 목록에서 진입하게 했습니다.
색상만으로 상태를 구분하지 않기 — 진행판 타일은 6가지 상태(완료 · 늦은 인증 · 면제권 · 미인증 · 오늘 · 미래)를 채움, 점, 사선, 테두리로 구분합니다. 배지도 아이콘과 라벨을 항상 함께 씁니다.
대비를 계산해서 색을 정하기 — 대표 컬러 코랄 위에 흰 텍스트는 3.6:1로 기준 미달이라 검정(#1A1A1A, 4.8:1)을 씁니다. 코랄을 텍스트로 쓸 때는 어두운 변형(#C63A1E, 4.6:1)을 따로 둡니다.
사진이 없으면 사진을 만들지 않기 — 텍스트만 남긴 "간단 인증"은 스토리 레일에서도 다른 이미지로 자리를 채우지 않고, 남긴 한 줄을 그대로 보여줍니다.
정책을 규칙 문장으로 노출하지 않기 — "미인증 시 스트릭 리셋" 대신 "어제는 쉬었어요. 오늘 인증하면 다시 이어져요."로 씁니다.
문서
작업을 이어받는다면 HANDOFF.md 를 먼저 보세요. 현재 단계·원칙·다음 할 일이 정리돼 있습니다.
기획 → 디자인 규정 → 화면상세 → 구현 → QA 순서로 진행했습니다.
| 문서 | 줄 수 | 내용 |
|---|
sixtysix/sixtysix-design-rull.md | 1,600 | 디자인 토큰, 컴포넌트 계약, 카드뉴스 규칙, 접근성, QA 기준 |
sixtysix/sixtysix-project.md | 2,040 | 12화면 명세, 정책 10개, 상태 6개, 샘플 데이터, 완료 정의 |
sixtysix/assets/images/IMAGE-PROMPTS.md | 131 | 생성 이미지 10장의 프롬프트와 사용 화면 |
V1 배포
main 브랜치에 푸시하면 Vercel이 자동으로 배포합니다. 배포 루트는 sixtysix/ 입니다.
V1 실행
cd sixtysix
python3 -m http.server 8900
# http://localhost:8900
file:// 로 열면 이미지 경로와 localStorage 가 동작하지 않습니다.
V1 테스트
Playwright 회귀 테스트를 360 · 390 · 430px 세 폭에서 실행합니다.
cd qa
npm install && npx playwright install chromium
npm test
현재 등록 테스트는 210개입니다. 2026-09-30 목록 확인 기준이며, 이번 정리에서는 V1 브라우저 회귀를 재실행하지 않았습니다.
핵심 흐름 9개(온보딩, 인증, 면제권, 복귀, 탐색, 응원·저장, 상태 전환, 졸업, 손상된 저장소 복구)와 12화면 구조·접근성, 스크린샷 회귀를 검사합니다. 자세한 항목은 qa/README.md.
V1 구조
sixtysix/ 배포 대상 (정적)
├── index.html
├── css/ tokens · components · app
├── js/ data · state · components · app
└── assets/images/ 생성 이미지 10장
qa/ 회귀 테스트 (배포에 포함되지 않음)
└── tests/ flows · layout · assets · visual
디자인 토큰
| 역할 | 값 |
|---|
| 대표 | #F04E2C 코랄 레드 — Primary, 활성 탭, 66칸 채움 |
| 액센트 | #1F6F5F 딥 그린 — 인증 완료 · 복귀 전용 |
| 배경 | #FBF8F2 웜 화이트 |
앱 셸 430px, 콘텐츠 폭 394px, 좌우 여백 18px. Pretendard 본문에 D+N · 스트릭 · 66 카운트만 Anton.
V1의 모든 인원 · 인증 · 순위 · 공지는 샘플 데이터입니다. 로그인, 사진 업로드, 알림, 실제 코호트 매칭은 구현 범위에 없습니다.
