첫 번째 현대적 애플리케이션 만들기 - UI 디자인
처음으로 디자인이 정교한 제품 페이지를 봤을 때의 그 느낌을 기억하시나요? 기능이 비슷한데도 남의 페이지는 더 "고급스러워" 보입니다. 색상이 깔끔하고, 여백이 편안하고, 버튼의 둥근 모서리가 절묘합니다. 문득 이런 생각이 들곤 하죠——"그들은 어떻게 설계한 걸까? 우리도 이런 페이지를 만들 수 있지 않을까?"
이런 "남들이 어떻게 만드는지 알고 싶다"는 생각이 바로 프론트엔드 디자인의 가장 좋은 출발점입니다. 작업을 시작하기 전에, 우리가 이미 갖춘 능력을 먼저 돌아봅시다:
- 앞선 수업들에서 NanoBanana로 디자인 소재를 대량 생성하는 법을 배웠고, 프롬프트 속의 "스타일"이 최종 출력에 어떤 영향을 미치는지 이해했습니다.
- Figma와 MasterGo 같은 전문 디자인 도구를 알게 되었고, 디자인 시안이 어떻게 구성되는지 익혔습니다.
- 디자인 시안에서 프론트엔드 코드로 이어지는 변환 프로세스도 살펴봤습니다.
하지만 실제로 자신의 프로젝트를 위한 괜찮은 페이지를 만들려고 하면, 여전히 막힐 수 있습니다. 도구는 쓸 줄 알고, 소재도 생성할 수 있지만, "좋아 보이는" 것이 어떤 것인지 모르고, 더 나아가 우수한 페이지를 어떻게 분해하고 모방해야 할지도 모릅니다. 걱정하지 마세요. 이번 수업이 바로 이 문제를 해결해 드립니다.
앞뒤 내용을 엮기 위해, 몇 가지 작은 질문을 먼저 생각해 보세요:
- 현대 웹 페이지는 보통 어떤 블록들로 구성될까요?
- "예쁘다"는 주관적인 느낌일까요, 아니면 수치화할 수 있는 숫자(색상 값, 글자 크기, 간격, 둥근 모서리)일까요?
- 만약 어떤 웹사이트의 시각적 스타일을 모방한다면, 어디서부터 시작하시겠어요?
이 질문들에 대한 명확한 답이 아직 없다면 괜찮습니다——바로 이번 수업에서 가르쳐 드릴 내용입니다. 작업 중 이해하기 어려운 단계가 있으면 언제든 현재 페이지를 스크린샷으로 찍어 대형 모델에 물어보세요. 과감하게 시도하고, 실수를 두려워하지 마세요. 모든 시도가 배우고 성장하는 기회입니다.
🎯 핵심 질문
디자인이 뛰어난 APP 또는 웹 페이지를 마주했을 때, 그것이 어떻게 설계되었는지 분석하고 AI 디자인 도구를 활용해 "거짓말처럼 똑같이" 모방하려면 어떻게 해야 할까?
이번 수업에서 배울 것
- 디자인을 "보는" 법 배우기: 페이지를 받으면 무엇을 봐야 하고 어떻게 분해하는지 알게 됩니다
- 입문 방법론 익히기: 참고 찾기 → 분석 → 모방 → 비슷해지기 → 입문
- 2가지 디자인 루트 이해하기: Figma/MasterGo와 Claude Design/Open Design(UI design Skills 포함)
- 실전 모방: 실제 웹 페이지 하나를 골라 0부터 높은 재현도로 전달까지 모방하기
- 디자인 시스템 축적하기: 대기업의 디자인 규범을 나만의 것으로 만들기
📚 선수 지식
이 튜토리얼은 이미 AI 프로그래밍 도구(예: Trae)를 사용할 수 있고, 프로젝트에 프론트엔드 시각 역량을 채우고 싶은 개발자에게 적합합니다. 먼저 이미지 생성 감각을 만들고 싶다면 NanoBanana 소재 생산을 먼저 학습하길 권장합니다. 디자인 도구를 더 깊이 파고 싶다면 Figma와 MasterGo 입문을 함께 학습해 보세요.
제 1장: 프론트엔드 디자인 입문, "베끼기"에서 시작
이전 절에서 우리는 세 가지 질문을 제기했습니다——페이지가 어떤 블록으로 이루어지는지, 무엇이 좋아 보이는지, 어떻게 모방하는지. 이번 절은 먼저 방법론부터 다룹니다: 프론트엔드 디자인의 첫 수업은 창조가 아니라 복제입니다.
서예를 배울 때 먼저 임서(臨書)를 하고, 그림을 배울 때 먼저 석고상을 그리는 것처럼, 왜 하필 "베끼기"일까요?
- 디자인의 "좋음"은 수치화될 수 있습니다——색상 값, 글자 크기, 간격, 둥근 모서리, 그림자는 모두 숫자입니다
- 성숙한 디자인을 픽셀 단위로 복제하면, 그 뒤의 모든 결정을 이해할 수밖에 없게 됩니다
- "비슷하게 베끼는" 데 성공하면, 다음에 비슷한 장면을 만났을 때 "어느 방향으로 베껴야 할지" 알게 됩니다
💡 한 줄 요약: 좋은 제품을 모방할 수 있다면, 이미 프론트엔드 디자인의 기본기를 갖춘 것입니다. 그 기반 위에서 변경을 할 수 있다면, 이미 출사(出師)한 것입니다.
1.1 왜 모방이 가장 빠른 입문 방법인가
어떤 분들은 걱정합니다: "나는 남의 것을 베끼는 건데, 이렇게 정말 배울 수 있을까?" 답은: 배울 수 있고, 그것도 가장 빠른 경로입니다. 그 이유는 모방이 결과를 그대로 옮기는 것이 아니라 스스로 과정을 재현하도록 강제하기 때문입니다:
- 모든 간격을 측정하도록 강제되면서, "여백이 어떻게 호흡감을 만드는지" 이해하게 됩니다
- 모든 색상 값을 조사하도록 강제되면서, "이 색상 조합이 왜 조화로워 보이는지" 이해하게 됩니다
- 모든 계층을 비교하도록 강제되면서, "주요 정보와 보조 정보가 어떻게 배열되는지" 이해하게 됩니다
우수한 페이지를 "파라미터 수준"까지 분해한 뒤 다시 재건할 수 있게 되면, 이제 막 "감각만으로" 작업하는 많은 사람들보다 디자인에 대한 이해가 훨씬 깊어집니다.
1.2 대기업도 "참고"한다, 이것은 비밀이 아니다
디자이너의 작업 방식에는 자연스럽게 참고가 포함됩니다: Pinterest에서 영감을 찾고, Dribbble에서 트렌드를 보며, 경쟁사 분석으로 구조를 봅니다. AI 시대에 이는 더욱 확대되었습니다——도구가 "참고"를 실행 가능한 능력으로 직접 바꿔주기 때문입니다:
- Claude Design은 저장한 참고 웹사이트를 가져와 그 스타일로 초안을 생성할 수 있습니다
- Open Design은 151세트의 오픈소스 디자인 시스템을 내장하여, 한 번의 클릭으로 자신의 프로젝트에 적용할 수 있습니다
- 각종 UI design Skill이 "대기업의 시각 규범"을 AI가 실행 가능한 명령으로 패키징합니다
그러므로 당신의 질문은 "베낄 수 있는가"가 아니라 "어떻게 전문적이고, 합법적으로, 그리고 자신만의 것으로 베끼는가"여야 합니다.
참고를 어디서 찾을까? 먼저 이 웹사이트들을 즐겨찾기에 추가하세요
참고의 첫 단계는 "참고 라이브러리"를 쌓는 것입니다. 아래 웹사이트들은 용도별로 분류되어 있습니다. 모두 즐겨찾기에 추가하고 필요에 따라 활용하길 권장합니다:
| 웹사이트 | 용도 | 어떤 것을 찾기 좋은가 |
|---|---|---|
| Awwwards | 웹 디자인계의 "오스카" | 최고의 창의성, 모션, 인터랙션, "최고"의 모습을 배운다 |
| Recent(구 Godly) | 고품질 웹사이트 영감 모음 | AI, Web3, 포트폴리오 사이트의 선구적 디자인 |
| Landbook | 랜딩 페이지 디자인 선별 | 업종/색상별로 공식 사이트, 가격 페이지, 첫 화면 레이아웃 필터링 |
| Lapa Ninja | 7300+ 랜딩 페이지 스크린샷 라이브러리 | 요소별로 내비게이션, 기능 소개, 고객 평가 조회 |
| Mobbin | 실제 App 인터페이스 라이브러리 | Uber, Notion 등의 실제 페이지와 흐름 연구 |
| Dribbble | 디자이너 커뮤니티 | 색상, 아이콘, 일러스트 스타일과 마이크로 인터랙션 영감 |
| Behance | 완전한 프로젝트 사례 라이브러리 | 디자인 아이디어, 리서치 과정과 완전한 포트폴리오 보기 |
이 웹사이트들이 어떤 모습인지 먼저 살펴보세요(이미지를 클릭하면 확대됩니다):
💡 나만의 참고 라이브러리 만들기
마음에 드는 페이지를 만나면 즉시 스크린샷 + 링크 저장을 하고, "랜딩 페이지 / 컴포넌트 / 색상 / 모션" 단위로 분류해 보관하세요. 모방할 때 이 라이브러리에서 바로 대상을 골라 사용하면, 임시로 인터넷에서 찾는 것보다 훨씬 빠릅니다.
1.3 참고 vs 표절: 뚜렷한 경계선
| 구분 | 참고(권장 ✅) | 표절(위험 ❌) |
|---|---|---|
| 대상 | 레이아웃 구조, 시각적 스타일, 디자인 규범 | 브랜드 로고, 전용 아이콘, 오리지널 일러스트 |
| 방식 | 이해한 뒤 다시 만들고, 자신의 제품에 녹여낸다 | 소재, 코드, 이미지를 직접 복사한다 |
| 결과 | 스타일은 비슷하지만 내용은 완전히 다르다 | 문구, 색상, 소재까지 완전히 똑같다 |
| 위험 | 낮음 | 저작권/상업적 위험 높음 |
제 7장에서 저작권 경계를 자세히 다룹니다. 먼저 한 문장만 기억하세요: "규칙"을 베끼는 것은 괜찮지만, "결과"를 베끼는 것은 위험합니다.
제 2장: 잘 보아야 잘 만든다——페이지 분해하기
"비슷하게 베끼려면" 먼저 "이해할 수 있어야" 합니다. 이번 장은 범용적인 페이지 분해 프레임워크를 가르쳐 드립니다.
2.1 구조 보기: 페이지는 어떤 블록으로 이루어지는가
대부분의 현대 웹 페이지는 4대 블록으로 분해할 수 있습니다:
┌─────────────────────────┐
│ ① 내비게이션 Nav │ Logo · 메뉴 · 로그인/CTA
├─────────────────────────┤
│ ② 첫 화면 Hero │ 메인 제목 · 부제목 · 메인 버튼 · 제품 이미지
├─────────────────────────┤
│ ③ 콘텐츠 영역 Sections │ 기능 카드 · 데이터 표시 · 평가 · 가격
├─────────────────────────┤
│ ④ 푸터 Footer │ 링크 · 저작권 · 구독
└─────────────────────────┘페이지를 볼 때는 세부 사항을 먼저 보지 말고, 눈으로 그 "골격도"를 그려 보세요: 어느 부분이 내비게이션이고, 어느 부분이 첫 화면이며, 중간이 몇 개의 구간으로 나뉘고, 각 구간에 몇 개의 요소가 있는지.
2.2 시각 보기: 수치화할 수 있는 4가지 요소
| 요소 | 무엇을 볼 것인가 | 어떻게 기록할 것인가 |
|---|---|---|
| 색상 | 주 색상, 배경색, 텍스트 색이 각각 무엇인가 | 색상 추출기로 Hex 값을 직접 추출 |
| 글꼴 | 제목/본문이 어떤 글꼴, 몇 호, 얼마나 굵은가 | 브라우저 DevTools에서 font-family/size/weight 확인 |
| 간격 | 블록 사이, 카드 내부의 여백 | 자주 쓰이는 8 / 16 / 24 / 48 px 리듬 기록 |
| 둥근 모서리와 그림자 | 카드, 버튼의 둥근 모서리 반경과 그림자 강도 | DevTools에서 border-radius / box-shadow 확인 |
💡 프론트엔드 디자인의 천부적 장점
당신은 프론트엔드 개발자이고, DevTools가 바로 당신의 디자인 분석기입니다. 마우스 오른쪽 클릭 → 요소 검사로, 어떤 페이지의 색상 값, 글자 크기, 간격, 둥근 모서리가 모두 그대로 드러납니다. 이것은 디자이너가 꿈꾸고, 개발자가 태생적으로 가진 능력입니다.
흔한 색상 추출 도구: Chrome DevTools의 색상 선택기, color-picker 계열 확장 프로그램. 또한 스크린샷을 멀티모달 대형 모델에 바로 던져 디자인 규범을 추출하도록 할 수도 있습니다.
2.3 컴포넌트 보기: "재사용 가능한 부품" 분해하기
페이지를 하나씩 컴포넌트로 분해하고, 각 컴포넌트의 스타일 파라미터를 기록합니다:
버튼 Primary Button
- 배경: #4F46E5
- 텍스트: #FFFFFF, 14px / 600
- 둥근 모서리: 8px
- 내부 여백: 12px 24px
- 그림자: 0 2px 8px rgba(79,70,229,0.3)
카드 Card
- 배경: #FFFFFF
- 둥근 모서리: 16px
- 테두리: 1px solid #E2E8F0
- 그림자: 0 4px 12px rgba(15,23,42,0.08)3-5개의 페이지를 분해하면, 손에 "컴포넌트 스타일 라이브러리"가 생깁니다——이것이 바로 나만의 디자인 시스템의 시초입니다.
2.4 "본 디자인"을 "AI가 알아듣는 말"로 번역하기
AI 도구에 모방을 시킬 때는, 시각을 구조화된 설명으로 번역해야 합니다. 더 자세히 볼수록, 더 정확히 번역할수록, AI가 더 비슷하게 베낍니다.
이 랜딩 페이지의 스타일을 참고해, 비슷한 구조의 페이지를 만들어 주세요:
- 구조: 내비게이션 + 첫 화면(Hero) + 기능 카드 3개 + 가격 영역 + 푸터
- 색상: 주 색상 Indigo #4F46E5, 배경 #F8FAFC, 텍스트 #0F172A
- 글꼴: 제목 Space Grotesk 700, 본문 Inter 400
- 간격: 블록 96px, 카드 내부 24px, 그리드 24px
- 둥근 모서리: 카드 16px, 버튼 8px
- 그림자: 0 4px 12px rgba(15,23,42,0.08)제 3장: AI 시대의 프론트엔드 디자인 도구 전망
"그들은 어떻게 설계했을까?"라는 답은 점점 더 다양해지고 있습니다. 다음은 2가지 대표적인 루트로, "수동 세밀 제어"부터 "대화형 자동 생성"까지 아우릅니다.
3.1 루트 1: Figma / MasterGo——전문 디자인 시안 도구
편집 가능하고, 협업이 가능하며, 픽셀 단위로 제어 가능한 디자인 시안이 필요하다면, Figma(국제 주류) 또는 MasterGo(국산, 더 가볍게 시작)를 사용하세요:
- 캔버스에서 레이아웃을 구성하고, 컴포넌트를 조정하며, 인터랙션 프로토타입을 만듭니다
- Figma Make / MasterGo AI 같은 기능으로 생성 및 일괄 조정을 지원합니다
- 최종적으로 프론트엔드가 디자인 시안대로 구현하거나, 플러그인으로 코드를 변환합니다
적합한 경우: 엄격한 디자인 시안 전달, 팀 협업, 복잡한 인터랙션이 필요한 시나리오. 도구 조작은 Figma와 MasterGo 입문을 참고하세요.
3.2 루트 2: Claude Design / Open Design——대화형 디자인 캔버스
이런 도구들의 공통점은 자연어로 직접 인터랙티브한 디자인 프로토타입을 생성한다는 점입니다. 정적 이미지가 아니라요. 대표 도구는 Claude Design과 그 오픈소스 대안인 Open Design입니다.
Claude Design: 공식 대화형 디자인 캔버스
Claude Design은 Anthropic이 출시한 AI 디자인 제품입니다(진입 경로 claude.ai/design):
- 한 문장의 요구사항을 입력하면 기본적으로 3개의 디자인 변형을 만들어 랜딩 페이지, 와이어프레임, 프레젠테이션 등에 적용합니다
- 디자인 시스템 가져오기(GitHub 저장소, Figma 내보내기, 웹사이트 스크린샷, 브랜드 파일)를 지원하며 색상/글꼴/컴포넌트를 자동 추출합니다
- 캔버스 안에서 직접 댓글로 수정하고, 드래그로 미세 조정하며, 최종적으로 HTML / PDF / PPTX로 내보내거나 Claude Code에 넘겨 실제 코드로 구현합니다
대표적인 사용 시나리오:
① 참고 스크린샷에서 고해상도 페이지를 직접 복제(가장 자주 사용)
제품 설명과 스타일 참고를 입력하면, Claude가 완전한 랜딩 페이지를 자동 생성합니다——왼쪽 대화에서 prompt와 생성 과정을 기록하고, 오른쪽 캔버스에서 결과를 실시간 렌더링합니다.
Create a high-fidelity landing page designed to raise $500,000 from angel investors
for "雾屿咖啡 Mist Island Coffee" - a boutique specialty coffee shop that combines
premium coffee, quiet workspaces, and warm community events.
Tone should feel warm, premium, calm, and trustworthy - think a mix of Blue Bottle
Coffee + Apple Store + minimalist lifestyle design.
② 기본적으로 3개의 디자인 변형을 생성, 방향을 고른 뒤 정밀 다듬기
Claude Design은 단 하나의 답만 주는 것이 아니라, 기본적으로 여러 방향을 생성해 선택하게 합니다——에디터풍, 뮤지엄풍, Zine풍 등, 클릭해서 더 세밀하게 다듬을 수 있습니다.
③ 인터랙티브 프로토타입 생성(정적 이미지뿐만 아니라)
생성된 페이지는 실제로 클릭하고 입력할 수 있는 HTML입니다——버튼에 hover 효과가 있고, 폼에 입력할 수 있으며, 데이터가 실시간으로 계산됩니다.
④ 제품 프레젠테이션/PPT 만들기
웹 페이지뿐만 아니라 완전한 슬라이드(여러 페이지, 내비게이션 포함, PDF/PPTX로 내보내기 가능)도 생성할 수 있습니다.
⑤ 애니메이션 비디오 생성
"From template"을 통해 애니메이션이 있는 HTML 비디오를 만들 수 있습니다——스토리보드 스크립트 + 실제 렌더링된 애니메이션 화면, 재생 컨트롤 바가 있습니다.
⑥ 기존 디자인 반복(캔버스에서 직접 댓글 달기)
프로토타입을 생성한 뒤 prompt를 다시 쓸 필요 없이, Comment 버튼을 클릭해 요소를 선택하고 댓글을 쓰면, Claude가 부분적으로 수정합니다.
⑦ 모바일 App 페이지 디자인
기기 사이즈(iPhone 등)를 지정하고, 기기 외곽선이 있는 모바일 UI 프로토타입을 생성할 수 있습니다.
적합한 경우: 디자인 배경이 없고, Figma 학습 곡선을 건너뛰고 싶으며, 빠르게 인터랙티브 프로토타입을 얻고 싶은 사람.
Open Design: Claude Design의 오픈소스 대안
구독하고 싶지 않거나, 데이터 프라이버시를 더 중시한다면 Open Design(nexu-io 오픈소스 프로젝트)을 시도해 보세요. Claude Design과 같은 루트입니다: 대화형 디자인 프로토타입 생성. 차이점은 로컬 우선, BYOK(자체 모델 키), 어떤 Agent에도 묶이지 않음입니다.
두 가지 핵심 개념이 있습니다:
| 개념 | 설명 | 당신에게 주는 가치 |
|---|---|---|
| Skills(스킬) | 16개의 명령형 디자인 스킬(카피라이팅, 색상, 창의적 가이드, 브레인스토밍…) | 하나의 스킬 = 하나의 전문 작업 템플릿 |
| Templates(템플릿) | 288개의 실행 가능한 템플릿(프로토타입, 슬라이드, 모션…), 모두 example.html 포함 | fork해서 데이터만 바꾸면 전달 가능 |
| Design Systems(디자인 시스템) | 151세트의 이식 가능한 디자인 시스템(색상 팔레트, 글꼴, 모션, 문체) | 한 문장으로 대기업 시각 규범 적용 |
이 도구는 로컬의 코딩 Agent(Claude Code, Codex, Cursor, Qwen, Kimi 등, 공식적으로 21종 지원)를 감지해 "디자인 엔진"으로 사용합니다——당신이 가진 Agent가 곧 디자이너입니다. 또한 Claude Code 등의 도구 생태계 안의 UI design Skill(예: frontend-design)도 디자인 규범을 AI가 실행 가능한 명령으로 패키징해, AI가 규범대로 출력하도록 할 수 있습니다.
대표적인 사용 시나리오:
① 새 프로젝트: Skill + 디자인 시스템 + 정밀도 선택
프로토타입을 만들 때 와이어프레임 또는 고해상도를 선택하고, 대상 플랫폼(반응형 웹 / 모바일 등)을 지정하며, 내장된 150+ 디자인 시스템 중 하나를 시각적 기반으로 선택할 수 있습니다.
Open Design을 사용해 Linear의 디자인 시스템을 적용하고, SaaS 제품의 랜딩 페이지 HTML을 생성해 주세요
② Studio 작업 공간: 대화 중심, 실시간 생성
왼쪽은 대화 패널(AI의 사고 단계, Todo 목록, Write 작업 표시), 오른쪽은 iframe 캔버스로 생성 결과를 실시간 렌더링합니다——Claude Design과 비슷하지만, 하단에 로컬에서 어떤 CLI Agent(Claude Code, Codex, deepseek 등)를 호출 중인지 표시합니다.
③ 디자인 시스템을 적용해 슬라이드/PPT 생성
Slide deck 유형을 선택하고 주제를 입력하면 완전한 다중 페이지 슬라이드를 생성할 수 있습니다. 아래는 커뮤니티 사용자가 Open Design으로 생성한 한국어 발표 슬라이드입니다.
④ 고해상도 모바일 App 프로토타입 생성
다중 화면 동시 미리보기를 지원하며, iPhone 기기 외곽선, Tab 바, 카드 레이아웃, 진행 바 등 컴포넌트가 모두 포함됩니다.
⑤ UI design Skill로 AI 출력 규범화
Claude Code / Cursor에 frontend-design 같은 Skill을 설치하면, AI가 페이지를 작성할 때 자동으로 디자인 규범을 따릅니다:
# Claude Code에서 호출
/frontend-design 로그인 페이지를 구현해 주세요
→ Skill 내장 디자인 규범에 따라 자동 출력:
- 색상: 주 색상 #4F46E5, 성공 #10B981, 오류 #EF4444
- 간격: 8px 기준 그리드
- 컴포넌트: 접근성 표준을 충족하는 Button / Input / Form
- 반응형: 모바일 / 태블릿 / 데스크톱 3단계 대응⑥ 로컬 프라이빗 프로젝트는 외부 네트워크를 거치지 않음
회사 내부 프로젝트, 민감 데이터가 포함된 제품 디자인은 모든 파일이 로컬에서 처리되며, 모델은 로컬 배포 또는 BYOK를 사용할 수 있습니다:
# 로컬에서 Open Design 시작, 모델은 로컬 배포된 Qwen 사용
OPENAI_API_KEY=your-local-key OPENAI_BASE_URL=http://localhost:8000/v1 \
opendesign
# 모든 디자인 파일은 로컬 ~/.open-design/에 저장되며, 어떤 제3자 서버도 거치지 않음
적합한 경우: 데이터 프라이버시를 중시하고, 이미 코딩 Agent가 있으며, 디자인 프로세스를 완전히 제어하고 싶은 개발자.
3.3 두 루트를 어떻게 선택할까
| 비교 항목 | 루트 1: Figma / MasterGo | 루트 2: Claude Design / Open Design |
|---|---|---|
| 포지셔닝 | 전문 디자인 시안 도구 | 대화형 AI 디자인 캔버스 |
| 대표 도구 | Figma, MasterGo | Claude Design(공식), Open Design(오픈소스 대안) |
| 산출물 | 편집 가능한 디자인 시안 | 인터랙티브 HTML 프로토타입 |
| 시작 난이도 | ⭐⭐ 중 | ⭐ 낮음 |
| 비용 | 무료 버전 사용 가능 | Claude Design은 구독 필요; Open Design은 오픈소스 무료(BYOK) |
| 적합한 경우 | 엄격한 전달과 협업 | 빠른 프로토타입 검증, 프라이버시 우선 |
💡 현실에서의 조합 사용법
참고 → 디자인 → 전달 전 과정에서 혼용할 수 있습니다: Claude Design / Open Design으로 빠르게 방향과 프로토타입을 만들고 → 최종 확정 후 Figma/MasterGo로 가져와 정밀 다듬고 → Claude Code에 넘겨 코드로 작성합니다. 각 루트의 장점을 취해 단점을 보완합니다.
제 4장: 실전 1: "남의 웹 페이지"를 비슷하게 모방하기
목표는 매우 구체적입니다: 마음에 드는 실제 웹 페이지 하나를 골라 "비슷하게" 모방합니다. 여기서는 랜딩 페이지를 예로 듭니다.
Step 1: 대상 선정
구조가 명확하고 관심이 있는 랜딩 페이지(SaaS 공식 사이트, 제품 소개 페이지 등)를 선택하세요. 그 스크린샷과 링크를 저장합니다.
Step 2: 제 2장 프레임워크로 분해
브라우저에서 마우스 오른쪽 클릭 → 검사하고, 4단계로 기록합니다:
대상: 어떤 SaaS 공식 사이트 랜딩 페이지
① 구조: 내비게이션(Logo/메뉴/CTA) → Hero(제목/부제목/버튼/스크린샷) → 기능 카드 3개 → 가격(3단계) → 푸터
② 색상: 주 색상 #0F172A 어두운색, 강조 #6366F1, 배경 #FFFFFF / #F8FAFC
③ 글꼴: 제목 Inter 800 48px, 본문 Inter 400 16px
④ 컴포넌트: 버튼 둥근 모서리 8px/단색, 카드 둥근 모서리 16px/연한 회색 배경/테두리 없음Step 3: AI 디자인 도구에 넣어 첫 버전 생성
분해 결과를 Claude Design / Open Design에 넣고 이 규범에 따라 생성하게 합니다:
다음 디자인 규범에 따라 비슷한 구조의 랜딩 페이지를 생성해 주세요:
[Step 2의 분해 기록을 붙여넣기]
제품: 내 프로젝트(한 문장으로 용도 설명)
요구사항: 위의 색상, 글꼴, 간격, 둥근 모서리 규범을 픽셀 단위로 준수첫 버전은 보통 "신공은 비슷하지만 형태는 다릅니다"——구조는 맞지만 세부에 오차가 있습니다. 이것은 실패가 아니라, 다음에 어디를 조정해야 할지 알려주는 신호입니다.
Step 4: 블록별로 대조하며 반복 수정
참고 스크린샷과 생성 결과를 나란히 놓고, 블록별로 대조하며 "수정 명령"으로 근접시킵니다:
| 발견된 문제 | 수정 명령 |
|---|---|
| 주 색상이 너무 밝음 | "주 색상을 #0F172A로, 강조 색상을 #6366F1로 변경" |
| 버튼 둥근 모서리가 맞지 않음 | "모든 버튼을 8px 둥근 모서리, 단색 배경으로 통일" |
| 간격이 너무 좁음 | "블록 간격을 96px로, 카드 내부 여백을 24px로 변경" |
| 글꼴이 맞지 않음 | "제목은 Inter 800, 본문은 Inter 400으로 변경" |
| 장식 요소가 많음 | "배경 장식을 제거하고 핵심 콘텐츠만 유지" |
Step 5: 수용 기준——"비슷함"
자신이 입문했는지 어떻게 판단할까요? 객관적인 기준을 하나 정해 보세요:
- [ ] 두 장의 스크린샷을 찍기: 원본 웹 페이지 vs 모방 버전
- [ ] 두 이미지를 나란히 확대해 픽셀 단위로 대조
- [ ] 색상 값, 글자 크기, 간격, 둥근 모서리가 육안으로 레이아웃 차이를 구분할 수 없음
- [ ] 50%로 축소해 다시 대조해도 여전히 어느 쪽이 원본인지 구분할 수 없음
💡 "비슷함"은 목적이 아니라 수단입니다. 스타일이 완전히 다른 웹사이트 2-3개를 모방하면, 자연스럽게 "디자인 감각"을 쌓게 됩니다: 언제 여백을 넉넉히, 언제 채도를 높게, 언제 둥근 모서리를 절제할지. 이때 새로운 페이지를 모방하면 훨씬 빨라집니다.
제 5장: 실전 2: 디자인에서 코드로
모방해 낸 디자인 시안/프로토타입은 결국 제품의 실제 페이지가 되어야 합니다. 두 가지 전달 경로가 있습니다:
5.1 경로 A: AI 디자인 도구 → 프론트엔드 코드
- Claude Design: 캔버스에서 최종 확정 후
/design-sync로 Claude Code에 동기화해, 디자인에서 바로 코드를 이어 쓸 수 있습니다. 스크린샷에서 다시 시작할 필요 없습니다 - Open Design: HTML을 직접 내보낼 수 있고, 이후 Agent에 넘겨 프로젝트 컴포넌트로 개조할 수 있습니다
- Figma/MasterGo: 플러그인 또는 MCP로 React / Vue 코드를 내보낼 수 있습니다
5.2 경로 B: 스크린샷 → 멀티모달 대형 모델로 재현
가장 간단한 방법: 모방해 낸 디자인 스크린샷을 멀티모달 대형 모델에 바로 던져 "React 컴포넌트로 재현"하고, 블록별로 구현해 나갑니다.
세 가지 "디자인-코드 변환" 경로의 자세한 비교는 디자인 프로토타입에서 프로젝트 코드까지를 참고하세요. 컴포넌트 수준의 엔지니어링 효율화를 원하면 현대 컴포넌트 라이브러리로 인터페이스 업데이트하기를 참고하세요.
제 6장: 대기업의 디자인 시스템을 나만의 것으로 만들기
페이지 3개를 모방하면 깨닫게 됩니다: 예쁜 페이지 뒤에는 항상 안정적인 "디자인 시스템"이 있습니다. 제로부터 만들기보다는 거인의 어깨 위에 서는 편이 낫습니다.
6.1 "이식 가능한 디자인 시스템"이란 무엇인가
Open Design은 디자인 시스템을 DESIGN.md 파일로 만듭니다(Linear, Vercel, Stripe, Apple, Cursor, Figma…). Claude Design은 당신의 코드 저장소/디자인 파일에서 자동으로 추출합니다. 이들은 본질적으로 같은 일입니다:
DESIGN.md = 색상 Token + 글꼴 규범 + 간격 리듬 + 컴포넌트 스타일 + 사용 규칙실제 예시 구조입니다:
# Design System: Linear
## Colors
- background: #08090A
- primary: #5E6AD2
- text: #F7F7F8
## Typography
- heading: 22px / 600, letter-spacing -0.4px
- body: 14px / 400
## Radius
- card: 8px
- button: 6px
## Spacing
- 4 / 8 / 12 / 16 / 24 / 32 px
## Do / Don't
- Do: 여백을 넉넉히, 색상 사용은 절제
- Don't: 그라데이션 미사용, 그림자 겹침 미사용6.2 나만의 디자인 시스템을 만드는 세 단계
- 기반 선택: 인정하는 대기업 디자인 시스템을 적용합니다(예: Linear의 절제된 다크, Apple의 여백)
- 파라미터 수정: 주 색상을 브랜드 색상으로 교체하고, 둥근 모서리와 간격을 조정합니다
- 파일로 축적:
DESIGN.md또는 Skill로 저장해, AI가 매번 생성할 때 자동으로 준수하게 합니다
6.3 고급: UI design Skill로 스타일 고정
디자인 시스템을 Skill로 패키징하면, 한 문장으로 호출할 수 있습니다:
my-brand skill의 디자인 규범을 사용해, 기능 페이지 3개의 첫 화면 안을 생성해 주세요Skill 생성 및 사용 방법은 LLM과 Skills로 인터페이스를 예쁘게 만들기를 참고하세요.
제 7장: 저작권과 윤리
모방 능력이 강할수록 경계를 지키는 것이 중요합니다:
규칙은 베끼고, 결과는 베끼지 마세요. 레이아웃, 색상, 간격 같은 "규칙"은 배울 수 있습니다. 로고, 아이콘, 일러스트, 문구 같은 "결과"는 직접 복사하지 마세요.
상업 프로젝트는 신중하게 하세요. 상업 전달 전에 확인해야 합니다: 소재 저작권, 글꼴 라이선스(상업용 글꼴은 구매 필요), 참고 웹사이트의 이용 약관.
AI 생성 콘텐츠의 귀속. 플랫폼마다(Claude Design, Open Design 등) 약관이 다르므로, 상업 사용 전에 서비스 계약을 확인하세요.
AI 참여 표기. 일부 플랫폼/법규는 콘텐츠가 AI로 생성되었음을 공개하도록 요구합니다.
최종 검수. 브랜드 식별 요소, 광고 소재 등 민감한 장면은 반드시 인적 검수를 거치세요.
💡 제안
학습과 프로토타입 단계에서는 모방을 자유롭게 하세요. 상업 전달에 들어갈 때는 "참고"를 "나만의 디자인 시스템의 재창작"으로 바꾸고, 생성 기록을 보관하세요.
요약
이번 장은 "프론트엔드 디자인 입문"을 실행 가능한 경로로 구체화했습니다:
- 마인드: 프론트엔드 디자인 입문은 "베끼기"에서 시작하며, 규칙은 베끼되 결과는 베끼지 않습니다
- 보기: 구조(4대 블록) + 시각(색상/글꼴/간격/둥근 모서리) + 컴포넌트 세 층으로 어떤 페이지든 분해하며, DevTools가 분석기입니다
- 도구: 2가지 루트——Figma/MasterGo(세밀한 디자인 시안), Claude Design / Open Design + UI design Skills(대화형 프로토타입)
- 모방: 대상 선정 → 분해 → 생성 → 블록별 반복 → 픽셀 단위 대조 수용
- 축적: 대기업의 DESIGN.md를 나만의 디자인 시스템으로 개조하고, Skill로 고정합니다
💡 다음 행동
오늘 완전한 모방 연습을 한 번 해 보세요:
- "베끼고 싶은" 랜딩 페이지 하나를 찾고, DevTools로 그 색상/글꼴/간격/둥근 모서리를 분해하세요
- Claude Design 또는 Open Design으로 첫 버전을 생성하고, 블록별로 "비슷해질" 때까지 수정하세요
- 최종 확정본을 AI에 넘겨 코드로 만들고, 자신만의 DESIGN.md도 함께 저장하세요