바벨릭 랜딩 페이지 — 레포 안 독립 폴더 landing-page/, Plantap 템플릿 기반 디자인 규칙·제품 한 장 설명·기획서·구현 (2026-09-03)

• 기간: 2026-09-03 (세션 1개, 오너 지시 원문 "바벨릭 랜딩 페이지를 만들어줘 (기존 github에 별도 폴더안에 독립적으로 생성)" + 튜토리얼 순서(draft.md → 검토 → design.md → landing-prd.md → /landing 구현 → 실행) + 템플릿 https://plantab.framer.website/ + "폰트는 Wanted Sans 써줘")
• 랜딩: PR #1179 (a54d8285) — 마이그레이션 없음, 루트 앱 Vercel 배포 무관(별도 프로젝트 전제)
• 설계서: 없음(artifact 아님) — 기획서 정본은 landing-page/landing-prd.md(8장 "예상 효과·개선사항" 포함)
• 정본: landing-page/design.md(디자인 규칙) = landing-page/src/styles/tokens.css · landing-page/draft.md(제품 한 장 설명) · landing-page/landing-prd.md 5장(최종 카피)·5.11(용어 규칙) · landing-page/README.md(게이트 규칙)
• 도구: 템플릿 실측 = Browser 팬 getComputedStyle 덤프 + 키 큰 뷰포트 캡처(스크롤 캡처는 빈 화면 — body margin-top 오프셋으로 우회) · 레포 조사 워크플로(제품 사실·사용자와 불편·기능 목록·자산·게이트 감사 + 비판 검토) · 카피 패널(작성자 3 + 심사 3) · 사실 검증 에이전트(83항목 대조) — 산출물은 세션 스크래치패드(커밋 제외)
• 게이트: 새 게이트 없음. 루트 게이트 영향 감사 27항목 = CI 차단 0 (루트 npm test 이름 규칙 *.test.*·test-* 금지, check:utf8 BOM 검사 2건만 폴더에 닿음)
• 버그리포트: 없음
• 계약: 없음(앱 코드·서버 무변경)

Phase 현황

Phase	내용	상태
Phase 0	레포 조사(제품 사실·사용자·기능·자산·게이트) + 비판 검토	✅
Phase 1	Plantap 템플릿 실측 → design.md + 토큰 CSS (Wanted Sans·기울임 금지)	✅
Phase 2	draft.md(5항목) → draft-review.md(검토) → 카피 패널 → landing-prd.md	✅
Phase 3	독립 Vite 프로젝트 + 9섹션 구현(CSS 폰 목업) + 사실 검증 반영	✅
Phase 4	미리보기 실측(데스크톱·모바일·메뉴·FAQ) + PR·CI·머지	✅

1. 배경

www.barbelic.com 은 곧 앱이라 처음 오는 사람이 로그인 화면부터 본다. 앱을 소개하려면 말로 설명해야 했고, 링크를 공유해도 미리보기에 "Barbelic 운동일지" 제목뿐이었다. 오너는 랜딩 페이지를 기존 GitHub 레포 안 별도 폴더에 독립적으로 만들어 달라고 했고, 진행 순서(제품 한 장 설명 → 비판 검토 → 템플릿에서 디자인 규칙 추출 → 기획서 → /landing 구현, / 는 비움 → 실행)와 두 규칙(글꼴 Wanted Sans, 기울임체 금지)을 지정했다.

2. 문제 제기

1. 랜딩에 쓸 사실이 흩어져 있었다. 제품 정의·탭 라벨·로그인 방식·가격·스토어 상태가 PRD·심사 노트·코드에 따로 있고 일부는 낡았다(탭 라벨 문서 2종이 코드와 다름, 개인정보처리방침 URL v3 잔존).
2. 레포 게이트가 새 폴더를 어떻게 볼지 몰랐다. 루트 npm run check 는 16단계 체인이고, 일부는 루트 전체를 훑는다.
3. 앱 화면 캡처가 없다. 추적된 스크린샷은 로그인 화면 1장뿐이고 데모 계정도 없다.
4. 세트 스코어 정의가 같은 날 바뀌었다. 랜딩 작업 중 main 에 #1174(나누는 값 = 최근 수행 1RM, RPE 없어도 산출, 여유 있게 들수록 높음)가 랜딩돼, 초안 카피와 목업 숫자의 방향이 반대였다.

3. 해결 방안

원칙(오너 지시): 별도 폴더에 독립 · /landing 경로, / 비움 · 템플릿 Plantap 을 그대로 따르되 글꼴 Wanted Sans · 기울임 금지 · 튜토리얼 문서 4종 순서.

접근:

• 조사를 먼저 병렬로(제품 사실 / 사용자와 불편 / 기능 목록 / 자산 / 게이트 감사) 하고 비판 검토 1회로 모순·공백(세트 스코어 라벨, 태그라인 띄어쓰기, 코치 페르소나 근거 없음 등)을 잡았다.
• 디자인은 템플릿을 실측해 색·글꼴 크기·여백·모서리·판(panel) 구조를 표로 만들고, 같은 값을 토큰 CSS 로 옮겨 문서와 코드가 1:1 이 되게 했다.
• 카피는 작성자 3(유저 이야기 / 차별점 / 최소) + 심사 3(이해도 / 사실 / 전환) 으로 만들고, 마지막에 사실 검증 에이전트가 83항목을 코드·문서와 대조했다.
• 앱 화면은 CSS 로 그린 목업만 쓴다(실제 라벨은 코드 그대로, 숫자는 계산이 맞는 예시). 확인되지 않은 숫자·후기·스토어 배지·경쟁 앱 실명은 넣지 않는다.
• 폴더명은 landing/ 대신 landing-page/ — 이 레포에서 "랜딩"은 마이그레이션 랜딩 절차 용어라 충돌한다.

4. 적용한 내용

Phase 0 조사

• 산출: 제품 사실(브랜드 표기(2026-09-08 정정: 첫 글자 B 대문자 Barbelic, 당시 소문자 지침 폐지), 로그인 3종, 무료·광고 없음은 스토어 등록 값에만, 스토어 미출시, 법률 URL v4) · 사용자와 불편(오너 원문 인용 20여 건) · 기능 목록(탭 = 운동하기·일지·피드·그룹·메뉴) · 자산(B 마크 PNG 만, 앱 캡처 없음) · 게이트 감사 27항목.
• 비판 검토가 잡은 것: 세트 스코어 화면 라벨과 정의 변경 예정, "역대 추정 1RM 중 최대값"은 화면 값이 아님, 데스크톱에는 그룹이 없음, GitHub 비공개라 링크 불가, 실사용자 이름·그룹명은 랜딩에 못 씀.

Phase 1 디자인

• design.md: 색 12 토큰(먹색 #0E160F · 본문 #505851 · 포인트 초록 #317039 · 연두 #E4EFD3 · 회색 #F6F7F6), 글자 역할 13종(Display 64/72 → 모바일 40/52, H2 48/56 → 34/40), 판 인셋 12px · 모서리 20/24/32px · 알약 버튼, 컴포넌트 12종, 움직임·접근성·금지 목록. Wanted Sans 는 굵기 400~1000 이라 제목 600·버튼 700 으로 한 단계 올림, 한글 자간 -0.03em.
• 토큰 CSS + 전역 CSS(em·i 등 기울임 강제 해제, [hidden] 우선) + 공용 패턴 CSS(기능 분할·기능 행·체크 목록·Bento·단계 카드·통계 카드·목업 부품).

Phase 2 문서

• draft.md 5항목(한 줄 정의 / 누가 / 지금은 어떻게 / 뭐가 불편 / 뭐가 달라지나) — 근거 없는 부분은 (오너 확인) 표시.
• draft-review.md — 항목별 "이해되는가 / 빠진 정보 / 다듬을 부분" + 검토 전 원문 + 남은 질문 6.
• 카피 패널 결과: 히어로는 최소 안("몇 kg 몇 회 옆에, 얼마나 강하게 들었는지까지"), 구조는 차별점 안(주장 → 증거 → 내 운동이 적히나 → 풀업 기록 → 그룹 보드 → 안심 → FAQ → CTA), 용어 풀이 문구는 유저 이야기 안에서 가져와 합쳤다. 심사 지적으로 본문 문장 길이·괄호 풀이·해요체·중간 CTA·"티어→등급"·"세트 강도" 금지가 들어갔다.
• landing-prd.md 12장: 목적·대상·핵심 메시지·섹션 9개·최종 카피·경로/기술·링크·예상 효과·비주얼 원칙·하지 않는 것·오너 확인 10·수용 기준 11.

Phase 3 구현

• landing-page/: Vite 8 + React 18 + TS, 의존성 react·react-dom. App.tsx 가 pathname 으로 /landing 만 렌더, / 는 null.
• 섹션 9개 + 내비·푸터. 공용 부품: Button(4종) · Panel/SectionHead/Eyebrow · Icons(24종 선 아이콘) · PhoneFrame · 스크롤 등장(initAppear, reduced-motion 존중).
• 사실 검증 반영: 세트 스코어 정의를 #1174 로(목업 점수 9.6/9.4/9.2 — 같은 무게면 여유 있게 든 세트가 높음, "최근 수행 1RM" 표기), 히어로 목업을 입력 화면이 아닌 세션 상세로, 리포트 기간 단위 월·분기·연(주 삭제), 복귀 버튼 위치 문구, 2026-09-03 = 목요일, 러닝 최장 거리 10.2km 통일, 그룹 시작 문구의 대괄호 제거, 인입 접수 절차 약속 삭제.

Phase 4 검증·랜딩

• 미리보기: 1280px 전 섹션, 390px 가로 스크롤 없음, 햄버거 메뉴 열림/Escape 닫힘, FAQ 한 번에 하나, Wanted Sans 로드, font-style: italic·<em>·<i> 0, 콘솔 오류 0, / 200 빈 화면.
• 게이트: 루트 check:utf8 통과, 테스트 이름 규칙·BOM 준수. CI 1회 → 머지.

작업 중 드러난 것

• CSS import 순서: 엔트리에서 App 을 CSS 보다 먼저 import 하면 섹션 CSS 가 공용 CSS 보다 먼저 묶여 모바일 카드 숨김이 뒤집혔다 — CSS import 를 App 앞에.
• Framer 사이트 캡처: 스크롤 뒤 스크린샷은 빈 화면(등장 애니메이션 + 캡처 영역 어긋남). 키 큰 뷰포트 + body.style.marginTop 음수 오프셋으로 전 구간 캡처.
• 워크플로 세션 한도: 심사 1건이 "session limit" 으로 실패 → resume 으로 캐시 재사용 재실행.
• <i> 금지의 부작용: 진행바·상태 아이콘의 빈 <i> 까지 걸려 <span> 으로 통일.

5. 적용 결과

항목	전	후
처음 온 사람의 첫 화면	로그인 버튼 3개	한 문장 정의 + 앱 화면 목업 + 시작 버튼(3초 안에 정체)
앱 소개 방법	말로 설명	/landing 링크 하나
디자인 규칙	없음	design.md + 토큰 CSS 1:1 (다음 마케팅 화면도 같은 규칙)
제품 한 장 설명	없음(PRD·심사 노트 산재)	draft.md 5항목 + 검토 + 오너 확인 표시
레포 게이트 영향	미지	감사 27항목 CI 차단 0, 규칙 2개만 준수
카피 사실 정확도	초안 틀림 16·근거 없음 4	대조 83항목 반영, 금지어 0, 미구현 약속 0
미검증	—	실제 배포(별도 Vercel 프로젝트 연결)와 OG 이미지는 이번 범위 밖. 시각적 완성도는 스크린샷 기준(사람 눈 판단은 오너 몫)

6. 이번 개선으로 향상된 것

• 랜딩 카피·디자인·구현이 문서 4종으로 연결돼, 문구 하나를 바꿔도 어디를 고칠지(draft → PRD 5장 → 섹션 파일) 바로 보인다.
• 앱과 완전히 분리된 폴더라 랜딩을 아무리 고쳐도 앱 게이트·배포에 닿지 않는다.
• 세트 스코어 새 정의(#1174)를 사용자에게 처음 설명하는 문장("최근에 확인한 내 최대 힘과 견준 점수")이 생겼다.

남은 것

• 오너 확인 10건(landing-prd.md 11장): 무료 문구 · 경험자 대상 · "코치나 반장" · 스토어 준비 중 표기 · 세트 스코어 새 정의 공개 시점 · 별도 Vercel 프로젝트 · OG 이미지 · 문의 이메일 노출 · 태그라인 띄어쓰기 · 엑셀·메모앱 여부.
• 배포 연결(Vercel Root Directory = landing-page)과 도메인 결정은 오너 작업.