Opus 5.5로 엄청나게 아름다운 웹사이트를 만드는 Claude Code 사용법

원제 · How To Use Claude Code To Build Insanely Beautiful Sites With Opus 5.5

25:274분 읽기AI LABS2026. 09. 30.컴퓨터/소프트웨어 · 마케팅/광고 · AI/미래기술

핵심 요약

Claude Code의 Opus 5.5 모델 기반에서 체계적인 6단계 프로세스(기획, Context 주입, 디자인 스킬, 스타일 시스템 고정, GitHub/Vercel 자동 배포, Scroll World 적용)를 적용하면 AI 특유의 정형화된 틀을 벗어난 시네마틱 3D 스크롤 웹사이트를 구축한다.

하이라이트

  • Claude Code와 Opus 5.5 모델을 결합하면 단순한 프롬프트 입력만으로 고급 디자인 웹사이트를 자동 생성한다.

  • Hullmark 스킬은 AI 특유의 정형화되고 일률적인 레이아웃 패턴을 탈피하도록 디자인 규칙을 강제한다.

  • aura.build 등에서 가져온 design.md 파일은 색상, 폰트, 간격을 고정하여 AI 모델 고유의 기본 스타일 지배를 차단한다.

  • GitHub CLI와 Vercel CLI를 연결하면 로컬 수정 사항이 원격 저장소 및 라이브 배포 환경에 자동 연동된다.

  • Scroll World 스킬과 생성형 AI 비디오 도구를 활용하여 3D 시네마틱 스크롤 웹사이트 구현이 가능하다.

  • Code Rabbit의 AI Deep Scan 및 automated review 기능을 통해 PR 단위의 버그, 보안 취약점, 시퀀스 다이어그램 검토를 자동화한다.

타임라인

  1. 개발 환경 세팅 및 Claude Code 기본 제어법

    AI가 생성한 웹사이트가 비슷해지는 원인은 모델의 한계가 아니라 체계적인 디자인 프로세스의 부재에서 비롯된다. Warp 터미널 내에서 'claude' 명령어를 실행하여 CLI 환경을 시작하고, 필요에 따라 Opus 5.5, Sonnet, Fable 모델을 선택한다. /context, /compact, /clear, /rename, /resume 등의 슬래시 명령어로 컨텍스트 윈도우 메모리와 세션을 관리한다.

    • Warp 터미널과 VS Code, Claude Code를 결합해 개발 환경을 구성한다.
    • 터미널 기본 명령어(ls, cd, mkdir)를 통해 프로젝트 폴더를 자유롭게 이동하고 관리한다.
    • Opus 5.5 모델은 정교한 시각적 디자인 출력에 최적화되어 있다.

  2. 1단계: plan 모드를 통한 사전 아키텍처 및 요구사항 정의

    Shift + Tab 또는 /plan 명령어로 plan 모드를 활성화한다. Claude Code가 기술 스택과 사이트 구성에 관한 질문을 던지며, 이에 대답함으로 전체적인 웹사이트 구축 계획을 수립한다. 수립된 계획에 따라 자동으로 파일 구조와 초안 코드가 생성되며, 백그라운드 로컬 서버를 통해 즉시 웹사이트 형태를 확정한다.

    • plan 모드는 코드 변경 없이 기획 및 대화에만 집중하는 모드이다.
    • Next.js 기술 스택과 필요한 페이지 섹션 구조를 미리 결정한다.
    • 사전 기획 단계를 거쳐 코드 재작성으로 인한 시간 낭비를 방지한다.

  3. 2단계: Claude.md를 활용한 비즈니스 맥락 및 일관성 주입

    새 세션이 열리면 이전 작업 기억이 사라지는 문제를 해결하기 위해 Claude.md 파일을 활용한다. /init 명령어는 초기 실행 환경과 파일 구조만 생성하므로, 웹사이트의 타겟 고객, 브랜드 비전, 전환 목표 등 비즈니스 맥락을 직접 텍스트로 명시해야 한다. 이를 통해 반복적인 스타일 수정에도 기존 비즈니스 전략이 훼손되지 않는다.

    • Claude.md 파일은 새로운 세션이 시작될 때 컨텍스트 윈도우에 프로젝트 정보를 자동 주입한다.
    • /init 명령어로 기본 구조 파일을 생성한 후 세부 비즈니스 목표를 추가한다.
    • 비즈니스 맥락 주입을 통해 디자인 변경 반복 과정에서도 프로젝트의 본래 목적을 유지한다.

  4. 3단계: Hullmark 스킬을 통한 AI 디자인 패턴 탈피

    Claude Code 스킬은 specific task를 위한 지침 파일이다. Hullmark 스킬을 설치하면 에이전트가 자주 빠지는 전형적인 레이아웃 및 디자인 습관을 교정한다. ! 느낌표 기호를 입력하여 터미널 모드로 스킬을 설치한 후, 디자인 검토 및 재구축 프로세스를 수행해 정교한 레이아웃을 완성한다.

    • Hullmark 스킬은 AI 생성 특유의 획일적인 레이아웃 패턴을 깨뜨린다.
    • 터미널 모드(! 명령어)를 이용해 Claude Code 내부에서 직접 설치 명령어를 실행한다.
    • 여백, 레이아웃, 요소 배치가 정교하게 다듬어진 웹사이트 구조로 전환된다.

  5. 4단계: design.md로 색상 및 글꼴 시스템 고정

    디자인 스킬을 사용하더라도 AI 모델은 학습된 기본 폰트와 색상 조합을 답습하는 경향이 있다. design.md 파일에 색상 값, typography, 여백 제약을 명시하면 Claude Code가 모든 시각 요소를 해당 기준에 맞춰 구현한다. 외부 디자인 시스템을 다운로드하여 design.md로 명명한 뒤 이를 참조하도록 프롬프트를 전달한다.

    • AI 모델 고유의 기본 색상(크림색, 오프화이트 등) 지배 현상을 design.md로 통제한다.
    • aura.build 등에서 수급한 design.md를 프로젝트 루트에 배치하여 스타일 규칙을 강제한다.
    • 전체 웹사이트 개편 시에도 일관된 브랜드 팔레트와 폰트 가이드라인이 유지된다.

  6. 5단계: GitHub 및 Vercel CLI 기반의 자동 배포 파이프라인

    GitHub 저장소를 초기화하고 비공개 리포지토리를 연동하여 안전한 버전 관리를 시작한다. gh cli 및 vercel cli 설정을 완료하면 Claude Code가 이슈 대응 및 지속적 배포 과정을 직접 명령어로 제어한다. 백그라운드에서 빌드 오류 발생 시 에러 로그를 분석해 자동 수정 작업을 수행한다.

    • GitHub 체크포인트(커밋)를 생성해 코드 변경 위험 시 이전 상태로 복구한다.
    • GitHub CLI 및 Vercel CLI를 통해 터미널 외부 이탈 없이 원격 리포지토리 생성과 라이브 배포를 처리한다.
    • 원격 커밋 반영 시 Vercel과 실시간 동기화되어 배포 버전이 즉시 업데이트된다.

  7. 6단계: Scroll World 스킬과 Code Rabbit AI 리뷰를 통한 3D 시네마틱 사이트 완성

    독립된 Git 브랜치에서 Scroll World 스킬을 실행하여 데스크톱 및 모바일 전용 비디오 클립(각 9개, 총 18개) 기반 스크롤 시퀀스를 기획 및 구현한다. PR 생성 후 Code Rabbit AI 리뷰 에이전트를 통해 5개 레이어별 변경 사항 분석, 11개 주요 이슈 및 보안 위험 진단, 자동 수정 프롬프트 수급을 진행한다. 검토 완료 후 메인 브랜치로 머지하여 최종 3D 시네마틱 웹사이트를 라이브 상태로 게시한다.

    • Scroll World 스킬로 Runway 등의 generative AI 비디오 클립을 제어하는 3D 스크롤 연출을 구현한다.
    • Git 브랜치 및 PR(Pull Request) 시스템을 도입해 메인 배포 환경의 안정성을 보장한다.
    • Code Rabbit AI를 활용하여 PR 단위 코드 검토, 시퀀스 다이어그램 생성, Deep Scan 보안 진단을 자동 실행한다.

설명

How to use Claude Code efficiently: Claude Code for beginners, with Claude Code setup and tips. Thanks to CodeRabbit for sponsoring this video! Check them out at https://coderabbit.link/ad-ai-labs-001 and start a free 14-day trial, no credit card, 2-click setup. Community with All Resources: https://ailabspro.io/?v=DP7mgLUKN_U The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ Hallmark Skill: https://www.usehallmark.com/ Scroll world: https://github.com/oso95/scroll-world Aura Build: https://www.aura.build/ What we cover in this video How to Use and Setup Claude Code - How to use Claude Code for beginners: what it is, and how it differs from the Claude AI web app (it can create and edit files on your computer) - Installing Warp as the terminal, then installing Claude Code with one command - Installing VS Code so you can see the files Claude Code creates - Opening a project folder so Claude Code works inside it How to Use Claude Code in Terminal - Basic terminal commands (ls, cd, mkdir) to move between folders and start new projects - Opening new tabs in Warp and running more than one Claude Code session - Terminal mode: running terminal commands from inside Claude Code with an exclamation mark Claude Code Tips: How to Use Claude Code Effectively - Choosing your model: we used Fable 5.1 for design, and Opus or Sonnet work for simpler tasks - Pressing Escape to interrupt Claude and give it a correction - Using @ to point Claude at a specific file - Managing the context window with the context, compact, and clear commands - Saving chats with rename and coming back to them with resume - Pressing Escape twice to go back to a point where everything worked Claude Code Tutorial: How to Use Claude Code to Build a Website - Stage 1, Plan: using plan mode so Claude asks the right questions before building anything - Stage 2, CLAUDE.md: saving the business context so every new session remembers why the site exists - Stage 3, Hallmark: a design skill that moves Claude away from the generic AI-generated look - Stage 4, design.md: locking your colors, fonts, and spacing with a file from Aura.build - Stage 5, Deploy: saving checkpoints with GitHub and putting the site live on Vercel - Stage 6, Scroll World: turning the landing page into a cinematic scrollable website with AI-generated video clips How to Use Claude Code Efficiently as You Build - Skills save you from explaining the same process in every prompt - CLAUDE.md means you don't repeat your project details in each new chat - A design.md keeps your branding the same, even when you revamp the whole site - The GitHub CLI and Vercel CLI let Claude Code handle uploads and deployment fixes for you Shipping Safely with GitHub, Vercel, and CodeRabbit - Commits, branches, and pull requests explained without code - Reviewing the Scroll World pull request with CodeRabbit: 11 issues found, sorted by risk, each with a prompt you can give Claude Code - Running CodeRabbit's AI Deep Scan across the whole project, which flagged a security risk in our form's email field Claude Code How to Use: A-Z - How to use Claude Code A-Z: from installing it to a live, scrollable website on your own link - Built for vibe coding: you describe what you want, Claude Code builds it, and you never need to read the code - The AI tools used: Claude Code, Warp, VS Code, GitHub, Vercel, Aura.build, Runway, and CodeRabbit What This Video Doesn't Cover - How to use Claude Code for free: we don't cover free access here, but CodeRabbit's trial is free for 14 days - How to use subagents in Claude Code: this video builds the basics first (plan mode, skills, CLAUDE.md), not subagents - Claude Cowork: everything here is done in Claude Code in the terminal, not Claude Cowork 00:00 Intro 00:50 Setup 03:03 Terminal Commands 03:54 Claude Code Basics 05:33 Planning 08:01 CLAUDE.md 10:02 Hallmark Skill 11:42 Design File 14:06 Deployment 18:16 Scroll World 21:58 Code Rabbit Review 25:05 Final Site Hashtags #ai #claude #ClaudeCode #ClaudeAI #vibeCoding #aiTools #ClaudeCowork #HowToUseClaudeCode

이 영상에 대해 글쓰기