📝 한줄 요약
꽤나 괜찮았던 MVP 홈페이지라고 생각했는데 사례발표를 따라서 맥킨지 수준의 홈페이지로 등극시킴
🎯 이런 분들께 도움돼요
- MVP는 만들었는데 "좀 아쉬운…" 분
- 디자인 감각이 없어서 어디서부터 손대야 할지 모르는 분
- Tailwind CSS, 디자인 시스템 같은 단어가 외계어인 분
- AI 도구끼리 조합해서 쓰는 게 가능한지 궁금한 분
---
😅 어제의 결과물, 솔직히
어제 만든 홈페이지는 기능적으로 괜찮았다. 상담 폼도 돌아가고, 내용도 깔끔했다. 근데 솔직히 — 디자인이 그랬다. 기본 CSS에 반듯한 레이아웃. "홈페이지 있긴 하네" 수준이지 "이 회사 뭔가 있다" 느낌은 아니었다.
글로벌 세일즈 컨설팅을 하겠다는 회사인데, 첫인상이 그래서야. 디자인을 바꿔야 했다.
---
🔧 오늘 사용한 도구들
| 도구 | 역할 | 한 줄 설명 |
|------|------|------------|
| Claude Code | 코딩 + 디버깅 | AI 코딩 에이전트. 코드 작성·수정·디버깅을 대화로 |
| Google Stitch ([stitch.withgoogle.com](https://stitch.withgoogle.com)) | 디자인 템플릿 생성 | Google의 AI 디자인 도구. 프롬프트로 웹 디자인 레이아웃을 생성 |
| Impeccable ([impeccable.style](https://impeccable.style)) | 디자인 스킬 확장 | "Design fluency for AI harnesses" — AI 코딩 도구의 디자인 어휘력을 확장하는 20개 스킬 플러그인 |
Impeccable은 2주차 사례 발표에서 소개된 내용을 보고 따라한 것이다. AI 코딩 도구에
/critique,/bolder,/animate같은 디자인 전문 커맨드를 추가해주는 플러그인인데, 설치가 한 줄이라 바로 적용할 수 있었다.```
npx skills add pbakaus/impeccable
```
---
🔧 실제로 어떻게 했나: 사례글 따라하기
Step 1. Google Stitch로 디자인 템플릿 뽑기
Day 1에서 정리한 콘텐츠를 JSON으로 구조화해서(`homepage_content.json`) Google Stitch에 넣었다. 섹션별 한국어 텍스트, 네비게이션 구조, 히어로 문구, 서비스 카드 내용까지 — 전부 JSON 파일 하나에 담아서 입력했다.
Stitch에서 "Architectural Authority" 컨셉으로 프리미엄 홈페이지 생성
→ code.html 파일로 출력Stitch가 Tailwind CSS 기반의 프리미엄 레이아웃을 만들어줬다. 반투명 네비게이션 바, 히어로 섹션에 시차 효과, 카드에 호버 애니메이션까지. 여기서 나온 code.html이 오늘 작업의 출발점이 됐다.
Step 2. 디자인 시스템 문서 만들기
Stitch 결과물이 예쁘긴 한데, 수정할 때 기준이 없으면 일관성이 깨진다. 그래서 디자인 시스템 문서를 따로 만들었다.
"Architectural Authority" 컨셉으로 디자인 시스템 문서 만들어줘.
고급 에디토리얼 저널 + 건축 블루프린트 느낌.
컬러: 딥 네이비 + 골드 악센트.
폰트: Noto Serif KR + Manrope.DESIGN.md라는 문서가 생겼다. 색상 팔레트, 타이포그래피, 카드 스타일, 버튼 동작까지 — 디자이너가 만드는 그런 가이드라인이 나왔다. 이걸 기준으로 삼으니까 이후 작업이 일관성 있게 진행됐다.
Step 3. Claude Code로 내용 갈아끼우기
Stitch가 만든 code.html은 영어 더미 텍스트였다. 여기에 우리 회사 내용을 넣는 건 Claude Code의 몫이었다.
code.html 파일을 content_restructured.md 내용으로 바꿔줘.
디자인은 유지하고, 내용만 ---- 에 맞게. 대표 프로필도 반영해줘.한 방에 됐다. 어제 정리해둔 콘텐츠 문서가 있으니까, 디자인 틀에 내용만 채워 넣는 건 금방이었다. 어제의 콘텐츠 정리 작업이 오늘의 속도를 만들었다.
Step 4. Impeccable 디자인 스킬로 품질 올리기
2주차 사례 발표에서 본 Impeccable 플러그인을 설치했다. /critique 커맨드를 돌리니까 Nielsen의 10가지 휴리스틱 기준으로 점수를 매기고, "여기는 시각 계층이 약하다", "이 카드 레이아웃은 AI 생성 느낌이 난다" 같은 구체적인 피드백이 나왔다.
/critique — 디자인 비평 (점수 + 개선점)
/bolder — 시각적 임팩트 강화
/animate — 스크롤 애니메이션 추가
/adapt — 반응형 최적화
/audit — 최종 접근성·성능 감사
디자인 스킬 파이프라인이라는 개념 자체가 새로웠다. 비평 → 강화 → 애니메이션 → 최적화 → 감사. 디자이너 없이도 디자인 리뷰 프로세스를 돌릴 수 있다는 게 인상적이었다.
Step 5. 디버깅 — 여기서 시간 좀 잡아먹었다
완벽할 줄 알았는데, 아이콘이 안 보였다. Material Symbols라는 구글 아이콘 폰트를 썼는데 렌더링이 안 되는 거다.
아이콘이 안 보여. 확인해줘.AI가 브라우저를 열어서 직접 확인하고(Playwright라는 도구 사용), 폰트 로딩 상태, CSS 설정, 여러 해결책을 시도했다. 결국 원인을 못 찾고 아이콘 라이브러리 자체를 Lucide로 교체하는 결정을 내렸다. SVG 기반이라 렌더링 문제가 없었다.
이게 중요한 포인트다. AI도 한 번에 해결 못 하는 문제가 있다. 근데 막히면 우회로를 찾아준다. 개발자한테 외주 줬어도 비슷한 시간이 걸렸을 문제였다.
Step 6. 세부 조정 — 티키타카의 진가
사진이 너무 커. 2/3로 줄여줘.
사진이 인위적이야. 창밖 도시 풍경으로 바꿔줘.
클릭하면 해당 섹션으로 안 넘어가.이런 식으로 하나씩 말하면 바로 고쳐졌다. 네비게이션 링크가 안 되는 건 섹션에 ID가 없어서였는데, AI가 알아서 진단하고 수정해줬다. 스무스 스크롤까지 추가해서 클릭하면 부드럽게 넘어가게.
---
😤 솔직히 어려웠던 것 — 반복 작업의 현실
AI와 일하면 "한 번에 뚝딱" 될 것 같지만, 현실은 좀 달랐다.
아이콘 렌더링 삽질 (약 40분)
Material Symbols 아이콘이 안 보이는 문제로 가장 오래 걸렸다. AI가 시도한 것만 해도:
1. 폰트 URL의 & 인코딩 수정
2. 링크 태그 형식 변경
3. CSS에 font-family, font-feature-settings 명시적 추가
4. Material Icons 폰트를 대안으로 추가
5. Playwright로 브라우저 열어서 폰트 로딩 상태 직접 확인
다 안 됐다. 결국 아이콘 라이브러리 자체를 Lucide(SVG 기반)로 교체하는 우회 결정. 이 과정에서 배운 것: AI도 원인 모르는 버그가 있다. 그때는 고집 부리지 말고 빨리 우회하는 게 낫다.
"이전으로 돌려줘" 순간
처음에 index.html(Day 1의 MVP)을 직접 리디자인하려 했다. 한참 작업했는데 결과가 마음에 안 들었다. "이전으로 복귀하자" 한 마디에 git checkout으로 원래 상태로 돌아갔다. Git 커밋을 해두니까 이렇게 맘 편하게 되돌릴 수 있었다.
이후 전략을 바꿔서 — index.html은 건드리지 않고, Stitch로 새 템플릿(code.html)을 만든 뒤 거기에 내용을 넣는 방식으로 갔다. 이게 훨씬 효율적이었다.
같은 말 여러 번 하기
세부 조정 단계에서는 비슷한 요청을 반복해야 했다.
- "CEO 영어 이름 ---- 로 바꿔줘" → 여러 곳에 흩어져 있어서 하나씩 수정
- "사진 바꿔줘" → 첫 번째 대안이 마음에 안 들어서 다시 요청
- "네비게이션 안 돼" → 원인 찾고, 수정하고, 확인하고
AI가 만능은 아니다. 하지만 반복 작업에서도 "짜증내지 않는 동료"라는 점은 확실하다.
---
🤯 오늘의 깨달음
Google Stitch × Claude Code = 역할 분담
Stitch는 디자인 레이아웃 을 만들고, Claude Code는 코드를 수정한다. 역할이 다르다. Stitch에 JSON으로 콘텐츠를 넣어서 템플릿을 뽑고, Claude Code로 세부 내용과 기능을 손보는 조합이 생각보다 잘 맞았다. AI 도구 하나에 의존하는 것보다 조합해서 쓰는 게 낫다.
Impeccable = 비개발자를 위한 디자인 언어
/critique라고 치면 전문 디자이너가 리뷰하듯이 점수를 매기고 개선점을 알려준다. 디자인 용어를 몰라도 "이 커맨드 실행해" 한 줄로 전문가 수준의 피드백을 받을 수 있다. 2주차 사례에서 이걸 봤을 때 "이건 따라해야겠다" 싶었고, 실제로 해보니 기대 이상이었다.
"디자인 시스템"이라는 게 이런 거구나
디자인 시스템이라는 말은 들어봤지만 뭔지 몰랐다. 오늘 직접 겪어보니 — 색상, 폰트, 간격, 카드 스타일 등을 미리 정해놓은 규칙서다. 이게 있으니까 AI가 일관된 디자인을 만들어내고, 수정할 때도 전체가 흐트러지지 않았다.
AI와 일하는 건 "외주"가 아니라 "협업"이다
"이거 해줘" → "됐습니다" 가 아니었다. 방향을 주면 AI가 만들고, 보면서 "이건 좀 아닌데" 하면 고치고, 다시 보고. 마치 옆에 디자이너·개발자가 앉아서 실시간으로 작업하는 느낌이었다. 다만 가끔 안 되는 것도 있고, 같은 말 반복해야 할 때도 있다. 완벽한 직원이 아니라, 배우 빠르고 성실한 인턴 같은 느낌이 더 정확하다.
---
✅ 결과
| | Day 1 (MVP) | Day 2 (프리미엄) |
|--|--|--|
| 사용 도구 | Claude Code만 | Google Stitch + Claude Code + Impeccable |
| 디자인 수준 | 기본 CSS, 기능적 | Tailwind + 글래스모피즘, 프리미엄 |
| 네비게이션 | 단순 스크롤 | 반투명 네비바 + 스무스 스크롤 |
| 레이아웃 | 1열 중심 | 비대칭 그리드 + 카드 레이아웃 |
| 아이콘 | 없음 | Lucide SVG 아이콘 |
| 이미지 | 이모지 대체 | 실제 CEO 사진 + 전문 이미지 |
| 인터랙션 | 없음 | 호버 효과 + 부드러운 전환 |
| 느낌 | "홈페이지 있긴 하네" | "이거 외주 준 거 아니야?" |
| 소요 시간 | 약 4시간 | 약 3시간 (삽질 40분 포함) |
---
💬 Day 2 핵심 팁
1. AI 도구를 조합하라 — Stitch로 디자인, Claude Code로 코딩, Impeccable로 리뷰. 하나에 의존하지 마라
2. 콘텐츠를 JSON으로 구조화해라 — Stitch든 Claude Code든, 구조화된 데이터를 넣을수록 결과가 정확하다
3. 디자인 시스템 먼저 만들어라 — "예쁘게 해줘"보다 "이 컨셉으로 해줘"가 100배 낫다
4. Git 커밋을 습관화하라 — "이전으로 돌려줘" 할 때 커밋이 있으면 1초, 없으면 멘붕
5. 막히면 빨리 우회하라 — 아이콘이 안 되면 다른 라이브러리로. 원인 분석에 40분 쓸 바에 대안 찾는 게 낫다
6. 세부 조정은 말로 하라 — "사진 너무 커", "여기 클릭 안 돼" — 이 정도면 충분하다
---
⚠️ 솔직한 한계
- AI가 한 번에 완벽하게 만들지는 않는다. 아이콘 렌더링처럼 AI도 못 푸는 문제가 있다.
- 같은 말 반복해야 할 때가 있다. 여러 곳에 흩어진 텍스트를 바꿀 때 하나씩 짚어줘야 했다.
- 되돌리기가 필요한 순간이 온다. 처음 시도가 마음에 안 들어서 통째로 되돌린 적 있다. Git 없었으면 큰일이었다.
- 디자인 "감각"까지 대체하진 못한다. "이건 좀 아닌데"라는 판단은 결국 내가 해야 한다. AI는 실행해주지만, 방향은 사람이 잡아야 한다.
---
📋 Day 2 바로 쓸 수 있는 프롬프트
[콘텐츠 파일]을 JSON으로 구조화해줘. 홈페이지 섹션별로: nav, hero, painPoints, solution, services, ceo, contact, footer.
[컨셉 키워드]로 디자인 시스템 문서 만들어줘. 색상 팔레트, 타이포그래피, 카드 스타일, 버튼 동작 포함해서.
[기존 템플릿 파일]을 [콘텐츠 파일] 내용으로 바꿔줘. 디자인은 유지하고 내용만 교체.
아이콘이 안 보여. 확인하고 대안 찾아줘.
Impeccable 설치 후:
/critique — 현재 디자인 점수 매기고 개선점 알려줘
---
🔗 오늘 사용한 도구 링크
- Google Stitch: [stitch.withgoogle.com](https://stitch.withgoogle.com) — AI 디자인 도구
- Impeccable: [impeccable.style](https://impeccable.style) — AI 코딩 도구용 디자인 스킬 플러그인
- Claude Code: [claude.ai/code](https://claude.ai/code) — AI 코딩 에이전트
- Lucide Icons: [lucide.dev](https://lucide.dev) — SVG 아이콘 라이브러리 (Material Symbols 대안)
- Formspree: [formspree.io](https://formspree.io) — 폼 백엔드 서비스
