값을 박으면
색을 코드 곳곳에 직접 적으면, 바꿀 때 수십 군데를 다 고쳐야 한다.
MODULE 06 · 웹·디자인·배포
자연어로 만든 웹을
세상에 올리기
한 페이지 웹 만들기부터 design.md·자체 토큰, 버셀 배포까지 — 4개 레슨
AI 에이전트 실무 교재 · Module 06
Lesson 19 · 첫 웹
첫 웹은 파일 하나면 충분하다
- 01한 페이지index.html 한 장에 입력칸·버튼·목록을 다 담는다 — 브라우저로 열면 그게 앱
- 02자연어 주문코드 없이 한 문단의 부탁으로 동작하는 웹을 받아낸다
- 03설명 먼저곧장 만들게 하지 말고 ‘화면 구성’을 글로 받아 방향을 한 번 거른다
Lesson 19 · 주문서
주문서에 꼭 넣을 네 가지
- 01목적 한 줄“입력하면 추가, 체크하면 완료” — 화면이 뭘 하는지부터 못 박는다
- 02파일·제약index.html 하나, 외부 라이브러리 없이 순수 HTML/CSS/JS
- 03데이터 보존“새로고침해도 남게” — 가장 자주 빠뜨리는 요구
- 04반응형“모바일에서도 안 깨지게” 한 줄로 휴대폰까지 챙긴다
Lesson 20 · design.md
디자인을 그림이 아니라 글로
- 01한 장의 약속색·글꼴·버튼을 글로 적어, 이후 모든 웹이 같은 톤을 갖게 한다
- 02네 축색 · 타이포 · 간격 · 컴포넌트 — 디자인 시스템의 뼈대
- 03어썸 design.md다크/라이트·상태(호버·포커스·비활성)·‘하지 말 것’까지 미리 정한다
Lesson 20 · 한눈에
“
디자인은 그림이 아니라
글로 고정할 때 재사용된다.
색·타이포·간격·컴포넌트를 design.md 한 장에 적어두면, 이후엔 “이 문서를 따라서” 한마디로 같은 톤이 유지된다.
Lesson 21 · 토큰
정의는 한 곳, 사용은 이름으로
이름으로 부르면
--accent 한 곳에 정의하고 그 이름만 쓰면, 한 줄만 고쳐도 전체가 바뀐다.
Lesson 21 · 자체 스타일
약속을 토큰으로 살려내기
- 01네 축 옮기기design.md의 색·타이포·간격·컴포넌트를 :root CSS 변수로 정의
- 02의미 기반 이름--blue가 아니라 --accent — ‘어디에 쓰는가’로 이름 짓기
- 03var()로 참조스타일이 값이 아니라 토큰 이름을 부르게 바꾼다
- 04한 줄 교체--accent 한 줄만 바꾸면 버튼·강조가 한꺼번에 따라온다
Lesson 22 · 배포
내 컴퓨터 밖으로 내보내기
- 01로컬 확인내 컴퓨터에서 브라우저로 먼저 미리 본다
- 02버셀에 올리기vercel 명령으로 폴더를 가리키면 미리보기 주소가 생긴다
- 03공개 주소vercel --prod 로 누구나 접속하는 vercel.app 주소 완성
Lesson 22 · 흐름
“
만든 것은 올려야
‘작품’이 된다.
자연어로 웹을 만들고(L19), design.md로 룩을 굳히고(L20), 토큰으로 색을 입혀(L21), 버셀로 공개(L22)하기까지. 다음은 하네스와 컨텍스트다.
Module 06
출처 · 더 읽을거리
- MDN — Using CSS custom properties (variables)
토큰(CSS 변수)·var() 표준 · developer.mozilla.org - Vercel — CLI 공식 문서
vercel · vercel --prod 배포 절차 · vercel.com/docs/cli - Anthropic — Claude Code 공식 문서
웹 생성·파일 작업 코딩 에이전트 · docs.anthropic.com/en/docs/claude-code