1. cladue update를 사용해서 버전을 업데이트해준다.

2. /model 명령어를 치고 방향키로 내려보면 Fable 5를 따로 사용할 수 있는 선택지가 나온다.

3. 해당 모델을 선택하고 페이블로 개발을 진행한다.

실제 사용 사례

• Noah Wachnik — 마인크래프트 제작: https://x.com/noahwachnik/status/2064473058597863857

• VEO (@vrexec) — "지금 하던 일 멈추고…": https://x.com/vrexec/status/2064408603256074282

• Riley Brown — 맥킨지 보고서 테스트: https://x.com/rileybrown/status/2064407515752722521

• Shlok Khemani — 요세미티 실측 3D 재현: https://x.com/shloked/status/2064480977641230785

• Leon Lin — Lumenform 웹디자인 테스트: https://x.com/LexnLin/status/2064471970989629809

• BijanBowen — 네트워크 패킷 고속도로 시각화: https://x.com/bijanbowen/status/2064473191163035814

• Jake Fitzgerald — 휴머노이드 로봇 설계: https://x.com/earthtojake/status/2064535702138990855

데모 웹사이트 링크: 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개, #0071e3 azure는 서브내비 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에 좌판 구조·캐스터 행 신규 추가

이번에 클로드의 엔트로픽이 스페이스X와 계약을 맻음으로 인해 콜로서스1 (SpaceX의 데이터센터) 시설의 모든 컴퓨팅 자원을 사용할 수 있게 되었습니다.

대당 300메가와트 이상의 Nvidia GPU를 총 22만개 이상 추가로 확보하였으며, 이러한 대규모 컴퓨팅 파워 확장을 기반으로 클로드 모델의 성능을 크게 향상시킬 예정이라고 합니다.

이러한 파격적인 혜택은 클로드 Pro부터 Max 유저들에게 더욱 크게 체감될 것이며, 구독자들의 서비스 성능을 "직접적으로" 개선할 것이라고 하네요.

하지만 이건 단순한 파트너쉽 계약이 아닙니다.

OpenAI의 챗지피티를 양쪽 전선에서 함께 압박해가는 "전술적 결정" 입니다.

유일한 약점이던 컴퓨팅 파워 문제를 해결한 클로드는 이제부터 그 어느때보다 강력해지게 될텐데,

컴퓨터 공학이나 프로그래밍을 기존에 배운적이 없으신 분들은 이러한 신기술에 접근하기 어려운 것이 현실입니다.

이러한 어려움을 겪고있는 분들을 위해 이번에 "비전공자를 위한 클로드 코드 강의"를 개설하였는데요,

현재 오픈 이벤트로 얼리버드 30% 할인을 딱 30일동안만 진행중입니다.

지금 가장 똑똑한 방법으로 클로드를 시작해보세요!