수년 만에 가장 큰 사이트 리디자인을 완료했습니다. 아침 식사 중에.
AI를 사용하여 3일 만에 전체 웹사이트를 재구축했습니다—코딩 어시스턴트가 아니라 실제 개발자로서. 저는 결정을 내렸고, Claude Code가 28,000줄을 작성했습니다.
토요일 오전 8시 47분. 베트남식 돼지고기 바게트(반미 헤오 꽈이)를 먹고 있습니다. 그리고 2021년 이후 제 개인 사이트에서 가장 포괄적인 리디자인의 마지막 부분을 방금 배포했습니다.
5년. 웹사이트에 실질적인 작업을 한 지 그만큼의 시간이 흘렀습니다. 물론, 여기저기 카피를 수정하고, 블로그 게시물을 추가했습니다. 하지만 디자인? 아키텍처? 전체적인 경험? 팬데믹이 진정으로 끝나기 전부터 손대지 않았습니다.
오늘 아침, TRANSMISSION 디자인 시스템을 완성했습니다—새로운 타이포그래피, 색상 팔레트, 애니메이션, 프리미엄 제품 페이지가 포함된 완전한 비주얼 오버홀. 하지만 이것은 모든 것을 변환시킨 3일간의 스프린트의 마무리일 뿐입니다.
수치:
- 3일 동안 40개의 커밋
- 28,129줄의 코드 추가
- 4,950줄의 새 CSS
- 11개의 CSS 파일 (1개에서 증가)
- 완전한 다크 모드 시스템
- 모바일 우선 반응형 전체
- 실제 스크린샷이 포함된 커스텀 제품 페이지
전체 리디자인 소요 시간: 3일에 걸쳐 몇 시간. 1일차에만 36개 커밋. 오늘 마지막 작업: 아침 식사 중 30분.
디자인 에이전시 없음. Figma 목업 없음. 수개월의 타임라인 없음. 저와 Claude Code만. :D
명확히 해야 할 것: CSS를 한 줄도 작성하지 않았습니다. PHP도 작성하지 않았습니다. 배포 명령도 수동으로 실행하지 않았습니다. Claude Code가 구현의 100%를 했습니다—디자인, 코드, git 커밋, 배포. 저는 결정만 내렸습니다. "글로우 더 추가." "그 폰트 느낌이 안 맞아." "카드를 프리미엄하게."
이것이 2026년 AI 지원 개발의 실제 모습입니다.
---
시작점: 2021년 이후 방치
솔직하게 어디에 있었는지 말씀드리겠습니다.
2026년 1월 1일 기준 제 사이트:
- 700줄의 스파게티 코드로 된 하나의 CSS 파일
- 모든 곳에 Poppins 폰트 ("타이포그래피를 별로 생각하지 않았다" 선택)
- 디자인 시스템 없음 — 색상이 모든 곳에 하드코딩
- 페이지 절반에서 깨지는 기본적인 다크 모드
- 제품 페이지: 제품 페이지 없음, 전체 사이트가 블로그뿐
- 싸구려 양복이 "맞는다"는 것과 같은 의미로 "반응형"인 모바일 경험
본업, 생성형 AI 학습, 그리고 두 개의 AI 애플리케이션인 STRAŦUM과 DIALØGUE 구축에 집중하느라 개인 사이트는 구두쟁이의 맨발 아이들이 되어 있었습니다.
잠재 고객이나 협업자가 방문할 때마다, "2021이 전화했는데, 그 WordPress 테마 돌려달래"라고 외치는 사이트를 봤습니다.
---
왜 지금? 그리고 왜 이 방법으로?
2025년 말에 두 가지 일이 있었습니다:
첫째, STRAŦUM과 DIALØGUE를 출시했습니다. 글로벌 광고 에이전시의 VP로 본업을 유지하면서 혼자 만든 두 개의 프로덕션 AI 애플리케이션. 실제 사용자, 실제 매출 논의, 실제 신뢰성이 걸린.
개인 사이트가 이제 실제 제품의 현관이었습니다. 수준이 맞아야 했습니다.
둘째, Claude Code를 본격적으로 사용하기 시작했습니다. 챗봇이 아니라 개발 환경으로. 그리고 모든 것을 바꾼 것을 발견했습니다: [frontend-design](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design) 플러그인.
이 플러그인은 CSS만 작성하지 않습니다. 디자인을 생각합니다. 타이포그래피 페어링. 색상 이론. 공간 구성. AI 생성 코드가 "AI 슬롭"처럼 보이는 것을 막아주는 것입니다.
생각했습니다: 그냥... 전부 재구축하면 어떨까? 주말 해킹이 아니라. 제대로. 진짜 디자인 시스템으로. Claude Code가 무거운 작업을 하고 제가 결정을 내리면서.
---
3일간의 스프린트: 실제로 무슨 일이 있었나
1일차: 빅뱅 — 36개 커밋
하루에 36개 커밋을 할 계획은 없었습니다. 하지만 시작하니 멈출 수가 없었습니다.
초기 설정, 기존 테마 백업, CSS 모듈화 시작.
전체 CSS 아키텍처를 재구축했습니다. 하나의 700줄 파일이 다음으로 바뀌었습니다:
```
css/
├── style.css # 디자인 토큰만
├── components.css # 버튼, 카드, 내비게이션
├── homepage.css # 히어로, 제품, 게시물 섹션
├── about.css # About 페이지 전용
├── blog.css # 블로그 아카이브
├── dark-mode.css # 완전한 다크 모드 시스템
├── mobile-nav.css # 하단 내비게이션 바
├── search.css # 검색 오버레이
├── single-post.css # 블로그 게시물 타이포그래피
└── products.css # 프리미엄 제품 페이지
```
각 파일은 하나의 역할. 각 파일은 루트의 CSS 변수를 사용. 버튼 색이 왜 틀린지 700줄을 뒤지지 않아도 됩니다. :P
다크 모드 오버홀. 이전 다크 모드는 부끄러운 수준이었습니다—사라지는 텍스트, 대비 없는 버튼. 처음부터 다시 만들었습니다:
- 658줄의 전용 다크 모드 CSS
- 적절한 대비율 (WCAG 호환)
- 89개의 !important 선언 모두 제거 (네, 89개)
- 자동으로 전환되는 시맨틱 색상 토큰
하루 끝: 홈페이지 리디자인, About 페이지 재구축, 모바일 하단 내비게이션 추가, 뉴스레터 통합 완료. 36개 커밋.
2일차: 아키텍처 & 인프라 — 9개 커밋
2일차는 모든 것을 유지보수 가능하게 만드는 것이었습니다.
대규모 리팩토링: functions.php가 724줄의 혼돈에서 25줄의 깔끔한 includes로:
```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```
또한 로컬 개발을 위한 Docker 설정, GCP 보안 감사, 문서 작성.
3일차: TRANSMISSION 피날레 — 아침 식사 스프린트
frontend-design 플러그인이 가치를 증명한 순간입니다.
원하는 것을 설명했습니다: "레트로-퓨처리스틱. 아날로그 과거와 디지털 미래의 만남. 프리미엄하지만 기업적이지 않은. 기술적이지만 따뜻한." 그리고 아침 식사를 사러 갔습니다.
반미를 들고 돌아왔을 때, Claude Code가 완전한 TRANSMISSION 디자인 시스템을 생성해 놓았습니다:
타이포그래피:
- Playfair Display — 헤드라인 (우아한, 에디토리얼)
- DM Sans — 본문 (깔끔한, 가독성 좋은)
- JetBrains Mono — 코드와 데이터 (기술적 신뢰성)
색상:
```css
--color-cream: #fffbeb; /* 따뜻한 배경 */
--color-navy: #0f172a; /* 깊은 기본색 */
--color-cyan: #22d3ee; /* 에너지 액센트 */
--color-amber: #f59e0b; /* 따뜻한 액센트 */
```
유동적 타이포그래피:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
헤드라인이 모바일에서 데스크톱까지 자동으로 스케일. 미디어 쿼리 불필요.
그런 다음 제품 페이지를 다뤘습니다. 텍스트뿐이었던 페이지가 다음으로 변했습니다:
히어로 섹션:
- 터미널 스타일 아이브로우 텍스트
- Playfair 헤드라인: "What I'm Building"
- 통계 바: 2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- 미세한 애니메이션이 있는 부동 기하학적 도형
제품 카드:
- 프리미엄 네이비 그라데이션 배경
- 프로덕션 사이트의 실제 스크린샷 (목업이 아닌)
- 윈도우 컨트롤 점이 있는 브라우저 프레임 컨테이너
- 시안/앰버 글로우가 있는 호버 상태
- 화살표 마커가 있는 기능 목록
- 전체 너비 CTA
스크린샷만 해도 여정이었습니다. Claude Code가 프로덕션 사이트로 이동하여 페이지를 캡처하고, 1.8MB에서 229KB로 최적화하고 (86% 축소), 스타일이 적용된 컨테이너로 감쌌습니다.
---
스택: 놀라울 정도로 간단
사용한 모든 것:
Claude Code — 코드를 작성하고, 명령을 실행하고, 컨텍스트를 유지하는 AI. 파일 시스템에 접근하고, git 명령을 실행하고, 어제 만든 것을 기억하는 AI.
frontend-design 플러그인 — "AI 생성 CSS"와 "디자인된 것처럼 보이는 CSS"의 차이. 타이포그래피 이론, 색상 관계, 공간 구성이 내장.
Docker — 로컬 WordPress 개발. docker-compose up 한 번이면 프로덕션 미러.
Chrome DevTools MCP — Claude Code가 브라우저를 제어할 수 있음. "모바일 다크 모드 확인" → 렌더링된 페이지의 실제 스크린샷. 탭 전환 불필요.
gcloud CLI: Claude가 제어하는
---
솔직한 부분
마법은 아니었습니다. 문제가 있었습니다:
중첩 폴더 혼란: Docker 복사가 gambit-child/gambit-child/ 구조를 만들었습니다. 디버깅에 10분.
다크 모드에서 텍스트 사라짐: 일부 헤딩이 잘못된 색상을 상속받고 있었습니다. 더 구체적인 선택자로 수정.
이미지 최적화: 원본 스크린샷이 거대했습니다. macOS의 sips -Z 800이 외부 도구 없이 이미지 크기를 조절한다는 것을 배워야 했습니다.
WordPress 템플릿 배정: 새 제품 페이지가 WP admin에서 배정되어야 한다는 것을 잊었습니다. 고전적.
차이점은 디버깅이 몇 시간이 아니라 몇 분이 걸렸다는 것입니다. Claude Code가 렌더링된 페이지를 보고, 문제를 식별하고, 같은 대화에서 수정을 제안할 수 있었습니다.
---
전후: 수치
| 지표 | 2026년 1월 1일 | 2026년 1월 10일 |
|--------|-----------------|------------------|
| CSS 파일 | 1 | 11 |
| CSS 줄 수 | ~700 | 4,950 |
| PHP 아키텍처 | 모놀리식 | 모듈식 (6개 파일) |
| 타이포그래피 | 1개 폰트 | 3-폰트 시스템 |
| 색상 토큰 | ~5개 하드코딩 | 15+ 시맨틱 |
| 다크 모드 | 깨짐 | 658줄, WCAG 호환 |
| 제품 페이지 | 일반 텍스트 | 스크린샷이 포함된 프리미엄 |
| 모바일 내비게이션 | 없음 | 6개 액션이 있는 하단 바 |
| 애니메이션 | 0 | 7개 (fadeInUp, float, glow 등) |
| 마지막 대규모 업데이트 | 2021 | 오늘 |
총 변환: 40개 커밋에 걸쳐 123개 파일, 28,129줄 추가, 3일. 모두 Claude Code가 작성.
---
비용
돈: 디자인에 $0. Claude Code 구독. 이미 가지고 있던 GCP 호스팅.
시간: 3일 경과. 하지만 실제 활동 시간? 아마 총 2-3시간. 원하는 것을 설명하고, Claude Code가 만들고, 나중에 다시 확인하여 검토. 오늘 아침 마지막 리디자인을 시작하고, 아침 식사 갔다 와서 확인—실제 주의 시간 30분.
실제 기여: 코드 0줄. 원하는 것을 설명하고, Claude Code가 만든 것을 검토하고, "호버 상태에 글로우가 더 필요해" 또는 "그 간격이 어색해" 같은 것을 말했습니다.
비교: 디자인 에이전시는 이 범위에 8-12주와 $10,000 이상을 견적했을 것입니다. 그리고 여전히 Figma 파일을 직접 구현해야 했을 것입니다.
---
배운 것
1. 더 이상 개발자가 아닙니다—크리에이티브 디렉터입니다. Claude Code가 모든 코드를 작성했습니다. 저는 취향 결정을 했습니다. "그 애니메이션이 너무 느려." "시안에 다크 모드에서 글로우가 더 필요해." "히어로 통계를 더 눈에 띄게." 이것은 코딩과 근본적으로 다른 스킬입니다.
2. 먼저 모듈화하세요. Claude Code의 첫 본능은 시각적 변경 전에 코드베이스를 논리적 파일로 분할하는 것이었습니다. 이 기반 덕분에 이후의 모든 변경이 더 쉬워졌습니다.
3. 디자인 시스템은 복리로 쌓입니다. TRANSMISSION 토큰이 존재하자, 모든 새 컴포넌트는 기존 변수를 조합하는 것이었습니다. 시스템이 이미 있었기 때문에 제품 페이지는 45분 만에 완성.
4. frontend-design 플러그인이 차이입니다. 일반적인 AI 생성 CSS는 "AI 슬롭"처럼 보입니다—일반적이고, 안전하고, 기억에 남지 않는. frontend-design 플러그인은 타이포그래피 페어링, 색상 이론, 공간 구성을 생각합니다. AI가 생성한 것처럼 보이지 않는 이유입니다.
5. 점진적으로 출시하세요. 1개가 아니라 40개의 커밋. 준비된 것부터 라이브로. Claude Code가 git 워크플로를 처리—스테이징, 커밋, 푸시, PR 생성.
---
직접 해보세요
2021년 이후로 "충분히 괜찮은" 개인 사이트가 있다면:
1. frontend-design 플러그인과 함께 Claude Code 설치
2. 원하는 바이브를 설명 (저의 경우: "레트로-퓨처리스틱, 아날로그와 디지털의 만남")
3. 아키텍처부터 시작 — 꾸미기 전에 모듈화
4. 디자인 시스템 구축 — 토큰, 타이포그래피, 색상
5. 그런 다음 페이지 만들기 — 각각 만든 시스템 사용
6. 자주 배포 — "완료"를 기다리지 마세요
가장 어려운 부분은 기술이 아닙니다. 사이트가 어떻게 느껴져야 하는지 결정하는 것입니다.
그것을 알면, 나머지는 대화입니다.
업데이트: 구현보다 취향이 중요하다는 교훈은 Swift를 모르면서 네이티브 iOS 앱을 만들기 시작했을 때 더 명확해졌습니다. Claude가 하룻밤에 7,568줄의 코드를 스캐폴딩했지만 — 올바르게 느껴지게 만드는 "크리에이티브 디렉터" 작업은? 여전히 전적으로 인간의 몫입니다.
몇 년간 미루던 것을 마지막으로 재구축한 게 언제인가요? 결국 시작하게 된 계기는 무엇이었고 — 완료됐을 때 기분이 어땠나요?
감사합니다,
Chandler
---
여전히 만들고, 출시하고, 반미를 즐기고 있습니다.
---
