코딩을 한 줄도 모르는 마케터가, 디자이너 없이 자기 브랜드 홈페이지를 만들 수 있을까요? 결론부터 말하면 만들었습니다. 지금 보고 계신 atm.ai.kr이 그 결과물입니다. 이 글은 오늘부터 8일간 이어질 “AI 에이전트 팀으로 보름 만에 만든 것들” 시리즈의 첫 번째 이야기입니다.
왜 직접 만들기로 했나
처음엔 당연히 외주를 생각했습니다. 그런데 디자인과 개발을 합친 견적은 1인 사업자가 가볍게 결정하기 어려운 금액이었습니다. 시간도 만만치 않게 걸리고요.
그렇다고 노션이나 기성 웹사이트 템플릿을 쓰자니, 결정적인 문제가 있었습니다. ‘내 브랜드’가 안 나온다는 것이었죠. 폰트, 컬러, 여백, 그리고 무엇보다 톤. 템플릿은 누가 봐도 템플릿이고, 그건 ‘남의 옷을 입은’ 느낌을 줍니다. 브랜드를 만들겠다는 사람이 남의 옷을 입을 수는 없었습니다.
그래서 내린 결론은 단순했습니다. “그러면 내가 직접 만들자.”
핵심은 getdesign.md 한 장
직접 만들기로 했지만 저는 개발자가 아닙니다. 여기서 두 가지 도구가 등장합니다. Claude Code와 getdesign.md입니다.
Claude Code는 터미널에서 동작하는 AI 코딩 에이전트입니다. 자연어로 지시하면 실제 코드를 작성하고 파일을 만들어 줍니다. 하지만 “예쁘게 만들어줘”라고만 하면 결과물은 평범합니다. AI는 구체적인 기준이 있어야 일관된 결과를 냅니다.
그래서 만든 것이 getdesign.md입니다. 이름 그대로, 디자인 명세를 마크다운 문서 한 장에 정리한 것입니다. 여기에는 이런 내용을 담았습니다.
- 톤 & 무드: 원하는 느낌을 형용사로 (예: “미니멀하지만 미래적인”, “고대비, 에디토리얼”)
- 레퍼런스: 좋아하는 사이트 3개의 URL과 “이 사이트의 무엇이 좋은지”
- 컬러 시스템: 베이스/액센트 컬러 코드 (ATM은 블랙 + 시안 #00EAFF 그라디언트)
- 타이포그래피: 헤드라인/본문 폰트의 성격, 크기 위계
- 레이아웃 규칙: 섹션 구성, 여백, 그리드
- 콘텐츠 구조: 어떤 섹션이 어떤 순서로 들어가야 하는지
이 문서를 Claude Code에 넘기고 “이 명세대로 홈페이지를 만들어줘”라고 지시했습니다. 그러자 Claude Code는 getdesign.md를 읽고, 그 기준에 맞춰 실제 HTML/CSS 코드를 작성해 사이트를 구성하기 시작했습니다.
핵심은 이것입니다. 디자인을 ‘말’이 아니라 ‘글’로 정의하는 것. getdesign.md는 디자이너에게 건네는 브리프와 같은 역할을 합니다. 브리프가 구체적일수록 결과물이 좋아지는 것과 똑같습니다.
결과: 며칠 만에 완성된 ‘내 사이트’
며칠간 보고-고치고-다시 지시하는 과정을 반복한 끝에, 사이트가 완성됐습니다. 시안 그라디언트 헤드라인, 다섯 갈래 사업을 보여주는 섹션 카드, 브랜드 톤이 일관되게 흐르는 레이아웃까지. 제가 getdesign.md에 적었던 그대로였습니다.
중요한 점은, 저는 코드를 직접 작성한 적이 없다는 것입니다. 디자인 기준을 글로 정리하고, AI가 만든 결과를 보고 피드백을 주는 일만 했습니다. 그런데도 결과물은 디자이너와 개발자를 붙인 것처럼 나왔습니다.
따라 하는 5단계
코딩 없이 자기 사이트를 만들고 싶다면, 이 순서를 추천합니다.
- 원하는 느낌을 형용사로 적기 — “깔끔한”, “묵직한”, “미래적인” 등 추상적이어도 좋습니다.
- 레퍼런스 사이트 3개 고르기 — 그리고 각각 “무엇이 좋은지” 한 줄씩.
- 컬러·폰트·여백 규칙 정하기 — 베이스 컬러와 액센트 컬러만 정해도 절반은 끝납니다.
- getdesign.md로 정리해 Claude Code에 넘기기 — 위 내용을 마크다운 한 장으로.
- 보고, 고치고, 반복하기 — 한 번에 완성되지 않습니다. 피드백이 곧 디자인입니다.
마치며
홈페이지는 시작일 뿐입니다. 내일부터는 AI 에이전트 팀으로 하루 만에 만든 유료 서비스, 결제 시스템 연동, 앱 출시까지 차례로 공개합니다. 코딩을 몰라도 만들 수 있다는 걸, 결과물로 계속 보여드리겠습니다.
이 시리즈를 놓치지 않으려면 @aitrendmaster를 팔로우하세요. 그리고 여러분이 가장 만들어보고 싶은 사이트는 무엇인지 댓글로 알려주세요.
*© AI Trend Master | atm.ai.kr*
AITREND.KR News Letter
