데모 웹사이트 링크: https://apple-chair.vercel.app/
Lumbra Neo — Claude Code 작업 로그
요추 지지 의자 소개 페이지(lumbra-neo.html)를 design.md 기반으로 만들고 점진적으로 개선해 나간 대화 기록.
1차 작업 — 초기 구축
프롬프트 ①
요추 지지하는 아주 특별한 허리에 좋은 의자를 판매하는 소개 웹사이트를 만들고 싶어. 지금 복사한 design.md 파일을 참고해서 이를 기반으로 html css 방식으로 웹사이트을 구성해. 해당 디자인은 애플 톤인데, 여기에서 다른건 다 똑같이 따라하되 이미지만 인터넷에서 구해와 적당한 고급 의자 이미지 스톡 사용해서.
Claude 작업 요약
제품명을 "Lumbra Neo"로 명명, finish 3종(Citrus / Indigo / Blush)을 design.md 그대로 활용
페이지 구조: 글로벌 네비(44px) + 스티키 서브내비(52px) / Hero("허리, 다시 시작하다.") / Adaptive Lumbar Engine 2×2 카드 + 다크 액센트 / Citrus·Indigo·Blush 풀블리드 쇼케이스 / 2-column 스플릿 피처 2개 / 색상 셀렉터 / Tech Specs 좌우 2열 / Final CTA + Footer
design.md 원칙 준수: 박스 섀도우 0개,
#0071e3azure는 서브내비 Buy 버튼에만 1회 사용, 28px 카드 라운드 / 999px 버튼 라운드, 헤드라인 사이즈별 네거티브 트래킹Unsplash 스톡 이미지 URL 6장 적용, SF Pro Display → Pretendard → -apple-system fallback
프롬프트 ②
대표 이미지나 안나오고있는거같아 이미지가 있어야 할 부분이 비어있네 그리고가능하면 png 형태로 투명 이미지 사용해봐.
Claude 작업 요약
Unsplash 핫링크 차단으로 추정 → 외부 이미지를 모두 인라인 SVG 의자 일러스트로 교체
<symbol>+<use>패턴으로 3/4 정면(#chair-main)·옆모습(#chair-side) 두 뷰 정의, 페이지 전체 8군데 재사용fill="currentColor"로 그라데이션 위에서는 흰색, fog 배경에서는 ink 색 자동 전환요추 지지 영역을 반투명 흰 ellipse로 강조, 등판 메쉬 가로선, 5-star 베이스 + 휠 4개 + 가스 피스톤, 옆모습은 척추 S 커브 강조
PNG 사용을 원하면
images/chair.png로 교체하거나 Base64 data URI 두 가지 옵션 안내
프롬프트 ③
svg말고 이미지 사용해줘 적당한거로 png로 너무 허접해 전체적으로
Claude 작업 요약
Unsplash 검색 페이지에서 직접 검증한 photo ID로 실제 작동하는 URL 6장 확보 (Hero / Citrus·Indigo·Blush 쇼케이스 / 스플릿 피처 2개)
그라데이션 쇼케이스 디자인 조정: 원래 design.md는 PNG 투명 의자가 그라데이션 위에 떠 있는 컨셉이었으나, JPG 사진은 자체 배경이 있어 28px 라운드 카드로 감싸 그라데이션 위에 띄우는 방식으로 변경 (애플의 다른 페이지에서도 쓰는 패턴)
PNG 투명 의자의 한계 솔직 공유: 안정적 핫링크 가능한 무료 소스가 거의 없음, removebg 등으로 직접 만든 PNG를 로컬에 두고 쓰는 방법 안내
2차 작업 — 대대적 개선
프롬프트 ④
lumbra-neo.html 이 파일을 지금부터 크게 개선할거야. 1) 폰트가 너무 촌스럽고 애플 느낌이 덜 들고 가독성이 심하게 떨어져 특히 뒤에 그라디언트 있을때는 더. 기본적으로 가독성 개선이 되어야 하고 쉐도우도 필요할때 넣어줘 2) 그라디언트가 아마 css로 만든거같은데 차라리 이미 있는 그라디언트 이미지를 찾아서 사용해봐 지금 너무 별로야 최대한 애플톤의 그라디언트 배경을 사용해 3) 섹션마다 패딩이랑 마진이 너무 불안정해 전체적으로 공통성을 유지하도록 개선해봐 안정감이 느껴지도록 4) 트랜지션 및 애니메이션을 적극적으로 사용해. aos라이브러리를 사용하고 마우스 호버시 트랜지션이 작동해서 애플스러운 애니메이션이 작동하도록 개발해
Claude 작업 요약
1) 폰트 & 가독성
Pretendard Variable 폰트를 CDN 추가 (한글에서 SF Pro에 가장 근접한 가변 폰트)
그라디언트 위 모든 텍스트에
text-shadow: 0 2px 24px rgba(0,0,0,0.28)적용본문 색상을
--color-graphite→--color-slate로 진하게,font-feature-settings,text-rendering: optimizeLegibility추가
2) 그라디언트 이미지화
CSS 그라디언트 대신 Unsplash Codioful 그라디언트 사진을
::before로 배경 적용Citrus/Indigo/Blush 톤별 이미지 사용, 로드 실패 시 개선된
radial-gradient폴백,::after비네팅 오버레이로 색감 다듬음
3) 일관된 간격 시스템
--space-section-y: clamp(96px, 12vw, 160px)/--space-section-x: clamp(22px, 4vw, 40px)토큰화--space-block-gap,--space-card-gap,--container-max전역 통일
4) AOS + 호버 트랜지션
AOS v2.3.4 CDN 추가, 모든 헤드라인·카드에 fade-up + 스태거 딜레이
--ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1)Apple 시그니처 이징 정의카드 호버 시 lift + shadow, 이미지 scale(1.04~1.06) 줌, 버튼·링크 화살표 translate, 스와치 scale(1.18),
prefers-reduced-motion대응
프롬프트 ⑤
피드백이야. 1) 텍스트 하나 하나 마다, 예를 들어서 lumbra neo / 허리 다시 시작하다 / 요추 받쳐주는.. 이런 텍스트 부분들은 전부 다 각각으로 aos 적용되어야 하고 최대한 전체적으로 통일적으로 작동하되, 부드럽게 작동하면서 애플 느낌의 트랜지션과 애니메이션이 각각 제목급 텍스트에 적용되어야 해. 텍스트 하나하나마다 딱딱 움직이면서 달라붙고 이런 애플스러운 텍스트 구분 애니메이션이 들어갔으면 좋겠어 2) 특히 애니메이션/트랜지션이 부드럽게 움직여야 하는데 마우스 호버했을때 ease in out으로 움직여야 해 부드러운 곡선으로 작동되도록 만들어 3) 전체적으로 컴포넌트 구성이랑 그래프, 예시, 뭐 각도 예시 이런것들을 최대한 디벨롭해봐. 애플스럽게. 너무 지금 비어있고 허접해보여 많이 개선해야 해 애플 레벨로 4) 섹션별로 비슷하되 약간씩 다르게 좀 환기되는느낌을 줘봐애플도 보면 랜딩페이지도 다 같은 섹션 안쓰잖아 약간씩 바리에이션을 줘봐
Claude 작업 요약
1) 텍스트 단어별 reveal 애니메이션
splitToWords()JS 함수로 모든 제목급 텍스트를 단어 단위<span>으로 분리각 단어
translateY(108%) → 0+ 페이드인, 70ms 스태거 딜레이 → 한 단어씩 차례로 달라붙는 split-text.reveal-words클래스를 hero / section / finish / card / split 헤드라인 + eyebrow + subheadline 전체 적용,<br>보존
2) ease-in-out 호버
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1)정의, 모든 hover 트랜지션(카드 lift / 이미지 zoom / 버튼 / 링크 / 스와치 / 메뉴)에 적용등장 애니메이션은
--ease-out(감속)로 분리해 진입은 자연스럽게
3) Apple-level SVG 다이어그램
Adaptive Support: 인체 실루엣 + S-curve 척추 + 측정 그리드(T1/L1/S1) + 펄스하는 압력 센서 3개 + 라벨 라인 + Active/Tracking/Anchored 상태
Aero Mesh: 6각형 직조 패턴 2겹(앞뒤 깊이) + 광택 오버레이 + 좌→우 흐르는 통기 화살표(
stroke-dashoffset애니메이션)Sync Tilt: 의자 측면 실루엣 3개(90°/105°/128°) + 각도 아크 + FOCUS/WORK/RELAX 라벨 + 단계 인디케이터(+15°, +23°)
4D Armrest: 입체 그림자 패드 + 4축 측정 화살표 + pill 라벨(↕80 / ↔40 / ⤡60 / ↻30°) + 기준 격자
4) 섹션 바리에이션
NEW Stat Strip: 히어로와 Lumbar Engine 사이에 큰 숫자 3개(128개 / 60Hz / 0.2초), 그라디언트 텍스트 + 칸막이 보더
Indigo showcase: 이미지 하단
finish-spec-bar로 3개 spec callout(Anodized / Matte 88% / +₩120,000)Blush showcase:
side-layout클래스로 텍스트-이미지 좌우 분할, 세로 4:5 비율로 다른 리듬Selector section: radial glow 배경 추가
Hero / Lumbar / Citrus는 기본 유지로 통일감 확보
3차 작업 — 다이어그램 확장 + Idling Gradient + Sticky Scroll
프롬프트 ⑥
지금 설명 그래픽 아주 좋아. 이대로만 해. 이런거 아주 좋으니까 이런 섹션 몇개 더 추가해. 지금부터 한 3개는 더 추가하고, 그리고 그라데이션이 너무 애플답지 않아. 좀 아이들링하게 움직이는 애니메이션느낌으로 구현해 봐. 그리고 스크롤에 따라서 텍스트가 따라오거나 (픽스드로 따라오다가 특정 지점에서올라오는 애플 특유의 픽스드 제목 느낌) 그런 감각으로 한번 개선해봐. 좋은 부분은 개선하고 추가할부분은 추가해. 뭔말인지알지?
Claude 작업 요약
1) 신규 SVG 다이어그램 섹션 3개
Cushion Architecture (Sticky-Stack) — 좌판 5층 구조를 카드 4장으로 분리
Layer 01 Memory Foam: 폼 셀 버블 + 압력 인덴트 호흡 애니메이션 + PRESSURE 화살표
Layer 02 Cooling Gel Matrix: 6각형 채널 패턴 + HEAT IN(빨강 화살표) + 좌우 −3.4°C 방출 흐름
Layer 03 High-Density Core: 9구역 그리드 + 영역별 밀도 점도 + SIT-BONE ZONE 점선 하이라이트
Layer 04 Aluminum Sub-frame (dark): 브러시드 메탈 + 3.2mm 두께 측정선 + 150kg LOAD 화살표 + 스크류 디테일
Pressure Mapping (Live Heatmap) — 좌판 탑다운 + 4단계 컬러 블롭(빨강·노랑·초록·파랑) 호흡 애니메이션 + 9구역 그리드 + 해부학 라벨(좌골 결절/대퇴부/꼬리뼈) + LIVE 표시 + 컬러 레전드 칩
Precision Caster + Floor Types — 캐스터 분해도(Pin → Bracket → Tri Bearing 회전 → PU 75mm 휠) + ⌀75 어노테이션, 3가지 바닥(원목/카펫/타일) 패턴 + 안전 체크 배지 + 푸시 포스 0.4kgf
2) Gradient idling 애니메이션
@keyframes gradientIdle— 22초 주기로scale(1.10→1.14)+ 미세 translate + saturate 변화로 살아 숨쉬듯 천천히 떠다님@keyframes auroraSpin—.gradient-aurora레이어가 38초 주기로 회전, 흰 빛이 부드럽게 돔,mix-blend-mode: screen으로 자연 합성세 finish-showcase(Citrus / Indigo / Blush) 전부 적용
3) Apple식 Sticky Scroll Pinned Headline
Cushion Architecture 섹션을
grid-template-columns: 1fr 1.25fr로 분할왼쪽
.sticky-pane에position: sticky; top: 120px적용오른쪽 4장의 레이어 카드가 스크롤되는 동안 왼쪽 제목이 뷰포트에 고정 → 섹션 끝에서 자연스럽게 같이 올라가는 애플 시그니처 동작
pane에 "소재 백서 다운로드" CTA 링크 포함
기타 개선
section.band.ink다크 섹션 유틸리티 추가SVG 펄스·플로우·회전 애니메이션 클래스 풀세트 (
pulse,pulse-2,flow,breathe,drift,spin-slow)Tech Specs에 좌판 구조·캐스터 행 신규 추가