시리즈 「내가 AI 에이전트로 진짜 만든 것들」 3편 (완결)
관련 링크: https://atm.ai.kr (완성된 홈페이지)
디자인 도구: Claude Design, getdesign.md / 배포: Netlify
!ATM 홈 — 공식 홈페이지를 Claude로 직접 제작
“디자이너 없이 브랜드 사이트가 가능할까”
브랜드를 운영하다 보면 어느 시점에 반드시 마주치는 질문이 있습니다. “공식 홈페이지 언제 만들지?”
저는 그동안 유튜브 채널 페이지와 SNS, 노션 페이지 정도로 버텨왔습니다. 하지만 클라이언트 제안서를 보낼 때마다 명함 한 줄이 부족했죠. 그래서 결심했습니다. “외주 안 주고, 디자이너 없이, Claude로 직접 만들어보자.”
그렇게 나온 게 atm.ai.kr 입니다. 이번 글은 그 제작 과정을 통째로 공개합니다.
1단계 — 기획: Claude로 IA와 콘텐츠 구조 한 번에
홈페이지에서 가장 중요한 건 코드도, 디자인도 아닙니다. “무엇을, 어떤 순서로 보여줄 것인가.” 이걸 IA(Information Architecture)라고 합니다.
저는 Claude에 다음과 같이 물었습니다.
“AI 에이전시 + 콘텐츠 비즈니스를 함께 운영하는 1인 브랜드의 공식 홈페이지를 만들려고 해. 방문자가 처음 들어와서 30초 안에 ‘무엇을 하는 사람인지, 어떻게 일을 맡기는지’ 알 수 있도록 IA를 짜줘.”
Claude가 제안한 구조는 이랬습니다.
| 섹션 | 역할 |
|—|—|
| Hero | 한 줄 가치 제안 + 핵심 CTA(문의·구독) |
| About | 운영자·브랜드 미션 |
| Services | 콘텐츠 / 컨설팅 / 제안서 등 카테고리 |
| Works · Cases | 클라이언트 사례, 자체 콘텐츠 결과물 |
| Contact | 문의 폼 + 채널 링크 |
여기에 더해 각 섹션의 카피라이팅 초안까지 Claude가 같이 써줬습니다. 코드 작성 전에 ‘말’이 먼저 만들어진 셈입니다.
2단계 — 디자인: Claude Design + getdesign.md 적용
기획이 끝나도, ‘예쁘게’는 다른 문제입니다. 이때 사용한 도구가 두 가지입니다.
Claude Design (Claude의 디자인 모드)
- 기획 텍스트를 던지면 레이아웃·색·타이포 제안을 시각화 해줌
- 컴포넌트별로 “더 미니멀하게” / “히어로 좀 더 임팩트” 같은 자연어 디렉션이 통함
- 화면에서 바로 결과를 보면서 디렉션을 조정 → 빠른 디자인 반복
관련 블로그 내용 자세히 보기 (필수)
코딩 없이 내 브랜드 홈페이지 만들기 — Claude Code와 getdesign.md로 atm.ai.kr를 만든 과정
- 마크다운 기반의 디자인 시스템 가이드. 컬러·타이포·간격 등 디자인 결정을 .md 파일에 명시해두고, AI가 코드를 짤 때 그대로 참조
- “버튼은 항상 #1d97c4 → #00EAFF 그라디언트”, “히어로 폰트는 Pretendard 800” 같은 룰을 텍스트로 박아놓음
- 이게 있어야 페이지가 늘어도 디자인이 일관되게 유지됨
조합 효과
[Claude Design] 으로 한 페이지 빠르게 시각화
↓
[getdesign.md] 에 확정된 룰을 기록
↓
[Claude Code] 가 .md 룰을 보면서 나머지 페이지를 같은 톤으로 작성
이 흐름 덕분에 5개 섹션이 혼자 만들었는데도 일관된 브랜드 사이트처럼 보이게 됐습니다.
3단계 — 브랜드: ATM 시그니처 컬러·로고 일관 반영
홈페이지가 ‘내 브랜드’처럼 보이려면 ATM의 시각 자산이 일관되게 들어가야 했습니다. ATM 브랜드 가이드라인에 정의된 규칙을 그대로 .md 디자인 시스템에 옮겨 넣었습니다.
- 메인 그라디언트:
#3C8CE7 → #00EAFF(135deg) - 메인 컬러: AI Blue
#1d97c4, Deep Navy#020239, Cyan#00EAFF - 한글 헤드라인: Pretendard / Noto Sans KR Bold
- 로고: 가로형 워드마크 단독형 — 회색→시안 그라디언트
- CTA 버튼: 그라디언트 배경 + 화이트 텍스트 + 둥근 모서리(9999px)
이걸 코드 컴포넌트로 토큰화해두니, 새 페이지를 추가해도 색 한 줄 안 틀려요. ‘브랜드 가이드를 .md로 명시 → AI가 그걸 따라 코드 작성’ 의 조합이 핵심이었습니다.
4단계 — 런칭: Netlify 원클릭 배포 + 도메인 연결
마지막은 배포입니다. ATM 홈페이지는 정적 사이트 구조라서 Netlify를 선택했습니다.
Netlify 배포 과정
- GitHub 리포지토리를 Netlify에 연결
- 빌드 명령(
npm run build)과 퍼블리시 디렉토리만 설정 - 첫 빌드가 성공하면 임시 URL이 자동 생성됨
- 커스텀 도메인
atm.ai.kr을 Netlify에 등록 - DNS 설정에서 CNAME / A 레코드를 Netlify가 안내해주는 값으로 변경
- HTTPS 인증서는 Netlify가 자동 발급 (Let’s Encrypt)
이후로는 git push 한 번 = 자동 배포 입니다. 글 한 줄 고치고 푸시하면 1~2분 뒤 라이브에 반영됩니다.
왜 Netlify인가 (https://www.netlify.com/ )
- 정적 사이트 + 자동 빌드 + 커스텀 도메인 + 무료 HTTPS, 1인 브랜드 사이트에 최적
- 폼(Contact) 도 별도 서버 없이 Netlify Forms 로 처리 가능
- 빌드 로그·롤백·프리뷰 URL 모두 대시보드에서 한 화면
결과 — Claude 한 사람만 있으면 충분했다
이번 프로젝트의 결론은 단순합니다.
“브랜드 홈페이지 정도는, 잘 정의된 .md + Claude + 정적 호스팅이면 충분히 1인이 만들 수 있다.”
핵심은 AI에게 일을 시키는 방식이었습니다. 디자인 룰을 텍스트로 박아두고(getdesign.md), 시각화는 Claude Design으로 빠르게 돌리고, 결정된 룰대로 Claude Code가 페이지를 그려내는 흐름 — 이게 1인 브랜드 사이트 제작의 새 표준이 될 거라고 봅니다.
지금 atm.ai.kr 에 들어가 보시면, 이 글에서 설명한 모든 결정이 화면으로 보입니다. 그리고 만약 본인 브랜드 사이트를 같은 방식으로 만들고 싶다면, PRD 한 페이지 + 디자인 .md 한 페이지 부터 만들어 보시길 권합니다. 거기서부터 절반은 끝난 일입니다.
시리즈 마무리
「내가 AI 에이전트로 진짜 만든 것들」 시리즈를 끝까지 함께 해주셔서 감사합니다.
1편 [MOA 소개], 2편 [MOA 설계기], 3편 [ATM 홈페이지 제작기] — 세 편 모두 ‘AI 에이전트로 진짜 만들 수 있다’는 사례 답변이었습니다. 다음에는 다른 프로젝트로 또 만나뵐게요.
#AI홈페이지 #ClaudeDesign #getdesignmd #Netlify #브랜드사이트 #AITrendMaster
작성자 소개
AITREND.KR News Letter
