[ARCHIVED 2026-08-19] 역사 자료 — 현행 규범이 아니다. 아카이브 사유와 대체 문서는 docs/README.md의 Archive 섹션을 참조.
Claude Functional Requirements
Updated: 2026-06-08
이 문서는 Claude Design에게 전달할 기능 요구사항 표다. 목적은 Claude가 어떤 화면이 있고, 사용자가 어떤 값을 입력하며, 어떤 행동 후 어디로 이동해야 하는지 이해하게 하는 것이다.
이 문서는 시각 디자인 지시서가 아니다. 레이아웃, 간격, 카드 모양, 색, 타이포그래피, 컴포넌트 형태, UI-flow 연출은 Claude Design이 자유롭게 결정한다. Claude가 완성 앱/프로토타입을 넘긴 경우 그 앱의 UI-flow가 정본이며, Codex는 필요한 인증, 데이터, Supabase 저장 함수만 연결한다.
전달 파일 묶음
| 파일 | 역할 |
|---|---|
docs/process/claude-free-design-contract.md | 필요 시 기능 연결에 쓰는 의미 계약과 역할 분리 원칙 |
docs/process/claude-handoff-rules.md | Codex와 Claude Design의 역할 분리 |
docs/claude-functional-requirements.md | 화면, 입력, 행동, 이동, 상태 요구사항 |
docs/architecture/session-hierarchy.md | 세션 데이터 위계가 필요할 때 참고 |
핵심 데이터 위계
| 레벨 | 의미 | 하위 데이터 | 디자인에서 보여줄 때 필요한 관점 |
|---|---|---|---|
| 하루 | 사용자가 선택한 날짜 | 여러 세션 | 하루에 세션이 0개, 1개, 여러 개일 수 있음 |
| 세션 | 한 번의 운동 기록 또는 계획 | 여러 종목 | 완료, 미완료, 예정 상태가 있음 |
| 종목 | 스쿼트, 벤치프레스 같은 운동 단위 | 여러 세트 | 종목별 세트 목록과 종목 메모가 있음 |
| 세트 | 실제 수행 또는 계획한 한 줄 기록 | 반복, 무게, 휴식, 난이도, 메모 | 기본 입력은 반복/무게, 상세 입력은 선택 사항 |
전체 화면 목록
| 화면 | 사용자 목적 | 주요 입력 | 주요 행동 | 이동 결과 | 핵심 marker |
|---|---|---|---|---|---|
| 로그인 필요 | 로그인 전 사용자를 인증으로 유도 | 없음 | Kakao·Google·Apple 중 선택 | 선택한 provider 인증 시작 | onboardingLogin |
| 프로필 설정 | 첫 로그인 사용자가 앱 안 프로필을 만든다 | 닉네임, 프로필 사진 | 저장, 로그아웃, 사진 제거 | 저장 성공 시 앱 진입 | profileGate, profileForm, profileName, profileAvatarInput, profileAvatarPreview |
| 홈 | 오늘의 요약과 운동 시작 진입 | 없음 | 운동 시작, 주요 탭 이동 | 운동 시작 또는 각 탭 | dashboardView, startWorkoutButton, mobileStartWorkoutButton, dashboardNavLinks |
| 운동 시작 | 세션 시작 전 정보를 기록하고 예정 세션을 불러올지 고른다 | 날짜, 시작 시간, 컨디션, 시작 전 메모 | 예정 세션으로 시작, 빈 세션으로 시작 | 운동 기록 | workoutView, sessionStartStep, conditionButtons, workout.session.date, workout.session.startTime, workout.usePlan, workout.skipPlan |
| 운동 기록 | 종목과 세트를 입력한다 | 세트 반복, 세트 무게, 세트 완료 여부 | 종목 추가, 세트 추가, 종목 완료/수정, 세션 종료 | 종목 선택 또는 세션 종료 | sessionRecordStep, addExerciseButton, exerciseTabs, draftList, setPerfComposer, workout.set.entryLabel, workout.finishStep |
| 종목 선택 | 기록할 운동 종목을 고른다 | 검색어, 장비/부위 필터 | 종목 선택, 닫기 | 운동 기록으로 복귀 | exercisePickerView, exerciseSearchResults, workout.picker.search, workout.picker.equip, workout.picker.part, workout.picker.select, workout.picker.cancel |
| 세션 종료 | 운동 전체를 저장하기 전 마지막 메모를 남긴다 | 운동 후 컨디션, 세션 후 메모 | 저장, 폐기 | 저장 후 앱 화면으로 이동 | sessionFinishStep, sessionFeelButtons, sessionNote, workout.finish.home, workout.discardSession |
| 세션 달력 | 날짜별 기록과 계획을 본다 | 날짜 선택, 계획 세트 입력 | 월 이동, 오늘, 계획 추가, 계획 삭제 | 선택 날짜 내용 갱신 | mobileSessionCalendarGrid, mobileSessionPrevMonthButton, mobileSessionNextMonthButton, mobileSessionTodayButton, mobileSessionsList, mobilePlannedSetsList |
| PR | 개인 최고 기록을 본다 | 없음 | 탭 이동 | PR 화면 유지 | mobilePrHeroName, mobilePrHeroValue, mobilePrHeroDelta, mobilePrList, prList |
| 길드 | 팔로우/친구 기준 랭킹을 본다 | 없음 | 출석왕, 볼륨왕, 무게왕 탭 선택 | 랭킹 목록 갱신 | mobileGuildTabs, mobileGuildRankList, mobileGuildLeaderboardTitle, mobileGuildRankingMeta |
| 회복 | 부위별 회복과 체성분 기반 섭취 목표를 본다 | 체중, 골격근량, 체지방률, 메모 | 회복 데이터 저장 | 최신 회복 데이터 갱신 | mobileRecoveryList, mobileNutritionTargets, bodyMetricForm, bodyWeightInput, skeletalMuscleInput, bodyFatInput, saveBodyMetricButton |
| 내 정보 | 계정과 앱 데이터를 관리한다 | 없음 | 내보내기, 가져오기, 로그아웃 | 파일 처리 또는 로그아웃 | mobileProfileView, mobileExportButton, mobileImportButton, mobileLogoutButton, importFile |
| 멤버 피드 | 특정 멤버의 운동 피드를 본다 | 없음 | 내 프로필로 돌아가기, 응원 | 멤버 피드 유지 또는 대시보드 | memberView, memberProfileName, memberFeedList, backFromMemberButton, feed.kudos |
인증 및 프로필 플로우
| 현재 상태 | 사용자 행동 | 시스템 처리 | 다음 화면 |
|---|---|---|---|
| 로그인 전 | Kakao·Google·Apple 중 선택 | 선택한 provider의 Supabase OAuth로 이동 | 인증 진행 |
| 인증 성공, 프로필 없음 | 프로필 입력 | 닉네임과 사진을 Supabase에 저장 | 앱 홈 |
| 인증 성공, 프로필 있음 | 없음 | 원격 데이터를 불러옴 | 앱 홈 |
| 인증 오류 | 다시 시도 | 선택한 provider 인증 재시도 | 인증 진행 |
| 로그인 상태 | 로그아웃 | 세션과 원격 데이터 상태를 초기화 | 로그인 필요 |
운동 기록 플로우
| 단계 | 사용자 입력 | 사용자 행동 | 조건 | 다음 단계 |
|---|---|---|---|---|
| 1. 세션 준비 | 날짜, 시작 시간, 컨디션, 시작 전 메모 | 운동 기록 시작 | 선택 날짜에 계획 있음 | 2. 플랜 확인 |
| 1. 세션 준비 | 날짜, 시작 시간, 컨디션, 시작 전 메모 | 운동 기록 시작 | 선택 날짜에 계획 없음 | 3. 운동 기록 |
| 2. 플랜 확인 | 없음 | 플랜 불러오기 | 계획 세트 있음 | 3. 운동 기록, 계획 세트가 입력 후보가 됨 |
| 2. 플랜 확인 | 없음 | 빈 세션 시작 | 사용자가 계획을 쓰지 않음 | 3. 운동 기록 |
| 3. 운동 기록 | 검색어 | 종목 추가 | 종목 선택 필요 | 종목 선택 화면 |
| 3. 운동 기록 | 반복, 무게 | 세트 추가 | 활성 종목 있음 | 완료 세트 목록 갱신 |
| 3. 운동 기록 | 휴식, 난이도, 세트 메모 | 세트 상세 저장 | 완료된 세트를 선택함 | 완료 세트 목록 갱신 |
| 3. 운동 기록 | 종목 메모 | 종목 입력 완료 | 활성 종목 있음 | 종목 완료 상태 |
| 3. 운동 기록 | 없음 | 세션 종료 | 최소 1개 세트 있음 | 4. 세션 종료 |
| 4. 세션 종료 | 세션 후 메모 | 세션 저장 | Supabase 저장 성공 | 세션/홈 화면 |
세션 달력 및 계획 플로우
| 사용자 행동 | 입력값 | 시스템 처리 | 표시 결과 |
|---|---|---|---|
| 이전 달 | 없음 | 표시 월을 한 달 전으로 이동 | 해당 월 달력 표시 |
| 다음 달 | 없음 | 표시 월을 한 달 후로 이동 | 해당 월 달력 표시 |
| 오늘 | 없음 | 선택 날짜와 표시 월을 오늘로 이동 | 오늘 날짜 상세 표시 |
| 날짜 선택 | 날짜 | 해당 날짜의 세션과 계획을 조회 | 여러 세션과 여러 계획 세트를 위계로 표시 |
| 예정 세트 추가 | 종목, 반복, 무게, 메모 | 선택 날짜의 계획 세트로 저장 | 선택 날짜 계획 목록 갱신 |
| 예정 세트 삭제 | 계획 세트 id | 해당 계획 세트 삭제 | 선택 날짜 계획 목록 갱신 |
회복 플로우
| 화면 영역 | 입력/데이터 | 시스템 처리 | 표시 결과 |
|---|---|---|---|
| 부위별 회복 | 최근 세션의 부위별 운동량 | 부위별 회복 진행률 계산 | 회복/주의/준비 상태 |
| 권장 섭취 | 최신 체성분 데이터 | 권장 칼로리, 단백질, 지방 계산 | 오늘 섭취 목표 |
| 체성분 입력 | 날짜, 체중, 골격근량, 체지방률, 메모 | Supabase 저장 | 최신 기록과 히스토리 갱신 |
| 체성분 기록 없음 | 없음 | 기본 안내 상태 | 입력 유도 상태 |
길드 플로우
| 탭 | 기준 | 표시 데이터 | 사용자 행동 |
|---|---|---|---|
| 출석왕 | 팔로우/친구 중 이번 달 운동일 수 | 랭킹 목록, 내 순위 | 탭 선택 |
| 볼륨왕 | 팔로우/친구 중 이번 달 총 볼륨 | 랭킹 목록, 내 순위 | 탭 선택 |
| 무게왕 | 주요 종목별 최대 무게 | 랭킹 목록, 내 순위 | 탭 선택 |
입력 필드 목록
| 의미 | 필드 marker | 값 타입 | 비고 |
|---|---|---|---|
| 세션 날짜 | workout.session.date | 날짜 | 운동 시작과 세션 달력에서 사용 |
| 세션 시작 시간 | workout.session.startTime | 시간 | 선택 입력 |
| 세션 컨디션 | workout.session.condition | 문자열 | 좋음, 보통, 무거움, 회복 |
| 시작 전 메모 | workout.session.preNote | 긴 텍스트 | 선택 입력 |
| 세션 후 메모 | workout.session.note | 긴 텍스트 | 선택 입력 |
| 종목 검색어 | workout.picker.search | 문자열 | 검색 결과 갱신 |
| 세트 반복 | workout.set.reps | 숫자 | 필수 |
| 세트 무게 | workout.set.load | 숫자 kg | 필수 |
| 세트 휴식 | workout.set.restSeconds | 숫자 초 | 선택 |
| 세트 난이도 | workout.set.difficulty | 숫자 1-10 | 선택 |
| 세트 메모 | workout.set.note | 짧은 텍스트 | 선택 |
상태 요구사항
| 상태 | 의미 | 기능 marker |
|---|---|---|
active | 현재 선택된 탭, 현재 단계, 현재 날짜 | data-lg-state="active" |
selected | 사용자가 선택한 옵션 | data-lg-state="selected" |
completed | 완료한 종목, 완료한 세션 | data-lg-state="completed" 또는 data-lg-status="completed" |
planned | 미래 또는 오늘의 예정 세션 | data-lg-status="planned" |
missed | 과거에 계획했지만 완료하지 못한 세션 | data-lg-status="missed" |
locked | 운동 중이라 시작 버튼을 새로 누를 수 없음 | data-lg-state="locked" |
resume | 운동 중 화면으로 복귀 가능한 상태 | data-lg-state="resume" |
empty | 기록이나 데이터가 없는 상태 | data-lg-state="empty" |
editing | 세트 상세를 편집 중인 상태 | data-lg-state="editing" |
빈 상태와 오류 상태
| 상황 | 사용자에게 필요한 정보 | 가능한 행동 |
|---|---|---|
| 로그인 전 | 운동 기록을 보려면 로그인이 필요함 | Kakao·Google·Apple 중 선택 |
| 프로필 없음 | 앱 안에서 사용할 닉네임과 사진이 필요함 | 프로필 저장, 로그아웃 |
| 세션 기록 없음 | 아직 저장된 운동 세션이 없음 | 운동 시작 |
| 선택 날짜 기록 없음 | 해당 날짜에 완료 세션이 없음 | 계획 세트 추가, 운동 시작 |
| 계획 없음 | 불러올 플랜이 없음 | 빈 세션 시작 |
| 회복 데이터 없음 | 체성분 기록을 남기면 섭취 목표를 계산함 | 회복 데이터 저장 |
| 저장 실패 | Supabase 저장 오류가 발생함 | 다시 저장 시도 |
스트레스 케이스
| 케이스 | 예시 |
|---|---|
| 긴 닉네임 | 박주희_하체볼륨_절대지켜_2026 |
| 긴 종목명 | 인클라인 덤벨 프레스 매우 긴 커스텀 이름 |
| 하루 여러 세션 | 오전 하체 세션, 저녁 상체 세션 |
| 한 종목 많은 세트 | 백스쿼트 20세트 |
| 큰 볼륨 숫자 | 1,234,567kg, 1,234.5t |
| 계획만 있는 날짜 | 완료 세션 0개, 예정 세트 여러 개 |
| 모바일 좁은 폭 | 360px 기준에서도 주요 행동이 가려지지 않아야 함 |
| 데이터가 없는 첫 사용자 | 모든 요약 영역이 빈 상태를 가져야 함 |
Claude에게 요청할 산출물 형식
| 산출물 | 요구사항 |
|---|---|
| 화면 HTML | 대상 화면의 완전 교체 HTML 또는 component HTML |
| 화면 CSS | 화면 단위 CSS. 이전 CSS 위에 덧씌우는 patch가 아님 |
| 상태 설명 | 빈 상태, 로딩, 오류, 활성, 완료, 예정 상태 설명 |
| 반응형 설명 | 모바일과 데스크탑을 같은 구조로 만들 필요 없음 |
| marker 체크 | 필요한 data-lg-* marker가 어디에 보존되는지 설명 |