한 문단의 부탁으로 동작하는 웹 한 페이지를 받아내고, 그 룩을 design.md 한 장에 글로 굳힌 다음, 나만의 토큰으로 색을 입혀, 마지막엔 누구나 들어올 수 있는 주소로 배포한다. 만드는 것에서 끝내지 않고 ‘공개’까지 한 번에 통과하는 모듈이다.
Lesson 19
간단한 웹앱 만들기
“투두 리스트 하나 만들어줘”라고 적으면, 잠시 뒤 브라우저에서 진짜로 클릭되는 웹이 열린다. 코드를 한 줄도 안 쳤는데.
웹앱이라고 하면 서버, 프레임워크, 배포 같은 단어부터 떠올라 주눅이 든다. 첫 웹은 그렇게 거창하지 않아도 된다.
파일 하나로 끝나는 한 페이지 웹 — index.html 한 장이면 입력칸도, 버튼도, 목록도 다 들어간다. 브라우저로 더블클릭해 여는 순간 그게 곧 ‘앱’이다. 첫걸음은 이 한 장이면 충분하다.
에이전트에게 웹을 시킬 때 결과를 가르는 건 그림 실력이 아니라 주문서의 구체성이다. 무엇을 하는 화면인지, 파일은 몇 개인지, 외부 라이브러리를 쓸지, 데이터가 남아야 하는지 — 이 네 가지만 분명히 적어도 결과가 확 안정된다.
주문서에 꼭 넣을 네 가지
막연히 “예쁜 투두 앱”이라고 하면 매번 다른 게 나온다. 아래 항목을 명시하면 같은 결과로 수렴한다.
목적 한 줄. “할 일을 입력하면 목록에 추가되고, 체크하면 완료 표시” — 화면이 뭘 하는지부터 못 박는다.
파일·라이브러리 제약. “index.html 하나로, 외부 라이브러리 없이 순수 HTML/CSS/JS.” 범위를 좁혀야 결과가 단순해진다.
데이터 보존. “새로고침해도 내용이 남게.” 당연해 보여 가장 자주 빠뜨리는 요구다.
반응형. “모바일에서도 깨지지 않게.” 한 줄로 휴대폰 화면까지 챙긴다.
그리고 1모듈에서 익힌 안전한 리듬은 여기서도 그대로다. 곧장 만들게 하지 말고, ‘화면 구성을 글로 먼저 설명’받아 방향을 한 번 거른 뒤 “좋아”로 진행시킨다.
붙여넣기 프롬프트 · 한 페이지 웹앱 생성
한 페이지짜리 간단한 웹앱을 만들어줘.
- 목적: 할 일을 입력하면 목록에 추가되고, 체크하면 완료 표시되는 투두 리스트
- 파일은 index.html 하나로, 외부 라이브러리 없이 순수 HTML/CSS/JS
- 입력칸 + 추가 버튼 + 목록, 새로고침해도 내용이 남게 localStorage 사용
- 모바일에서도 깨지지 않게 반응형으로
먼저 화면 구성을 글로 한 번 설명해주고, 내가 "좋아"라고 하면 그때 파일을 만들어줘.
완성되면 파일을 어떻게 열어 확인하는지가 궁금해진다. 만든 폴더에서 브라우저로 열기만 하면 된다.
terminal — 내 프로젝트 폴더
# 1) 만들어진 파일 확인❯ ls
index.html
# 2) 그냥 더블클릭해서 브라우저로 열어도 되고,# 명령으로 한 번에 열 수도 있다 (운영체제별)❯ open index.html # macOS❯ start index.html # Windows❯ xdg-open index.html # Linux
자주 하는 실수
“데이터가 남게 해달라”는 말을 빠뜨리면 새로고침할 때마다 목록이 사라진다. 또 “파일은 하나로”를 안 적으면 갑자기 폴더 구조가 복잡해지기도 한다. 제약을 적는 게 곧 디자인이다.
실습 19
내 첫 한 페이지 웹
빈 연습 폴더를 하나 만들고 작업 대상으로 연다.
위 프롬프트를 붙여넣고, 먼저 ‘화면 구성 설명’을 받는다.
설명이 어색하면 “목록은 위로, 입력칸은 아래로” 같은 식으로 한 번 다듬는다.
마음에 들면 “좋아”. 만들어진 index.html을 브라우저로 열어 직접 클릭해본다.
목표: ‘자연어 주문 → 동작하는 웹’의 전 과정을 한 번 통과하는 것. 완성도보다 ‘진짜 돌아간다’는 감각이 먼저다.
한 문장 요약
첫 웹은 파일 하나면 충분하다.
목적·파일·데이터·반응형 네 가지만 분명히 적으면, 코드를 몰라도 동작하는 한 페이지 웹이 손에 들어온다. 다음 레슨에선 이 웹의 ‘룩’을 매번 다시 설명하지 않도록 글로 고정한다.
Lesson 20
디자인md와 어썸 디자인md
웹을 만들 때마다 “좀 더 차분하게, 강조색은 파랑 말고…”를 반복하고 있다면, 그 취향을 매번 말로 하지 말고 한 장의 문서에 적어두면 된다.
그 문서가 design.md다. 디자인을 그림이 아니라 글로 정의한, 우리 브랜드의 약속이다.
사람 디자이너에게 일을 맡길 때도 ‘가이드’를 먼저 준다. 색은 무엇이고 글꼴은 무엇이며 버튼은 어떻게 생겼는지. 에이전트도 똑같다. design.md는 그 가이드를 글과 토큰으로 적어, 이후 만드는 모든 웹이 같은 톤을 갖게 만든다.
design.md가 정하는 건 크게 네 축이다. 이 네 가지가 디자인 시스템의 뼈대다.
그림 1. design.md 한 장이 색·타이포·간격·컴포넌트를 정의한다. 글로 적힌 한 장의 디자인 약속.
색
배경·본문·강조·보조를 HEX로. 어디에 무엇을 쓸지까지 정한다.
타이포
본문 글꼴과 제목·본문·캡션의 크기 위계.
간격
기본 여백 단위와 섹션 사이 간격 규칙.
컴포넌트
버튼·카드·입력칸의 모서리·테두리·그림자 규칙.
‘어썸 design.md’ — 한 단계 끌어올리기
기본 design.md가 ‘색·글꼴·간격이 무엇인가’를 적는 거라면, 잘 만든 디자인 문서는 ‘예외 상황까지’ 미리 정한다.
다크/라이트 두 모드의 색, 마우스를 올렸을 때(호버)·입력 중일 때(포커스)·누를 수 없을 때(비활성)의 규칙. 여기에 하지 말 것 목록까지 있으면 일관성이 흔들리지 않는다. “그림자 남발 금지”, “강조색을 본문 글에 쓰지 말 것” 같은 금지가 사실 디자인을 지키는 진짜 장치다.
붙여넣기 프롬프트 · design.md 초안 받기
우리 브랜드의 design.md를 만들어줘. 아래 분위기를 글과 토큰으로 정리해줘.
- 분위기: 차분하고 신뢰감 있는, 종이 질감의 따뜻한 미니멀
- 다음 항목을 빠짐없이: 1)색(배경/본문/강조/보조 HEX) 2)타이포(본문 글꼴, 제목·본문·캡션 크기)
3)간격(기본 여백 단위, 섹션 간격) 4)컴포넌트(버튼·카드·입력칸의 모서리·테두리·그림자)
- 각 항목에 "왜 이렇게 정했는지" 한 줄 근거를 붙이고, 값은 그대로 복붙해 쓸 수 있게 정리해줘.
디자인을 머릿속에만 두면 웹을 만들 때마다 새로 설명해야 하고, 그때그때 조금씩 달라진다. 한 장에 글로 고정해두면 다음부터는 “이 design.md를 따라서”라는 한마디로 끝난다. 다음 레슨에서 바로 그 적용을 해본다.
실습 20
내 브랜드 design.md 한 장
좋아하는 분위기를 한 문장으로 적는다 — 예: “차분하고 따뜻한 종이 질감”.
위 프롬프트로 design.md 초안을 받는다.
색·타이포·간격·컴포넌트 네 축이 다 들어왔는지 확인한다.
변형 프롬프트로 ‘하지 말 것’ 목록과 상태 규칙을 더해 한 단계 끌어올린다.
목표: 매번 말로 하던 취향을 재사용 가능한 한 장의 문서로 굳히는 것. 이 문서가 다음 모든 웹의 기준이 된다.
한 문장 요약
디자인은 그림이 아니라 글로 고정할 때 재사용된다.
색·타이포·간격·컴포넌트 네 축을 design.md 한 장에 적어두면, 이후엔 “이 문서를 따라서” 한마디로 같은 톤이 유지된다. 다음은 이 약속을 실제 토큰으로 웹에 입히는 차례다.
Lesson 21
자체 스타일 지정
design.md에 적은 약속은 아직 글일 뿐이다. 이제 그 색과 간격에 이름표를 붙여, 코드가 실제로 따르는 ‘토큰’으로 바꾼다.
토큰이란 거창한 게 아니다. 자주 쓰는 값에 이름을 붙여둔 변수다.
“강조색은 #2440C8”이라고 코드 곳곳에 직접 박으면, 나중에 색을 바꿀 때 수십 군데를 다 고쳐야 한다. 대신 --accent: #2440C8처럼 한 곳에 이름으로 정의해두고 그 이름만 갖다 쓰면, 정의 한 줄만 고쳐도 전체가 바뀐다. 이게 ‘나만의 룩’을 손쉽게 갈아끼우는 비결이다.
웹에서는 이걸 CSS 변수(커스텀 프로퍼티)로 적는다. design.md의 네 축을 그대로 토큰으로 옮기면, 글로 적은 약속이 코드로 살아난다.
style.css — 내 디자인 토큰
/* design.md의 약속을 한 곳에 이름표로 정의 */:root {
/* 색 */
--bg: #F7F4EE; --ink: #1D1B16;
--accent: #2440C8; --sub: #9C4A14;
/* 간격 (8px 기준 단위) */
--gap: 8px; --gap-lg: 24px;
/* 모서리 */
--radius: 12px;
}
/* 쓸 때는 값이 아니라 '이름'을 부른다 */.btn {
background: var(--accent);
border-radius: var(--radius);
padding: var(--gap)var(--gap-lg);
}
이제 룩을 바꾸고 싶으면 :root 안의 값 한 줄만 손대면 된다. 강조색을 코발트에서 번트 시에나로 바꾸려면 --accent 한 줄이면 끝이고, 버튼·링크·테두리가 한꺼번에 따라온다.
붙여넣기 프롬프트 · design.md를 토큰으로 적용
이 폴더의 design.md에 정의된 색·타이포·간격·컴포넌트를
style.css의 :root CSS 변수(토큰)로 옮겨줘.
- 토큰 이름은 --bg, --ink, --accent 처럼 의미 기반으로
- index.html의 기존 스타일이 이 토큰을 var()로 참조하도록 바꿔줘
- design.md에 없는 값은 임의로 정하지 말고 나에게 물어봐
다 바꾼 뒤, 강조색만 한 줄 바꿔서 전체 룩이 함께 바뀌는지 예시로 보여줘.
이름은 ‘무슨 색인가’가 아니라 ‘어디에 쓰는가’로 짓는다. --blue보다 --accent가 낫다. 나중에 강조색이 파랑이 아니게 돼도 이름이 어색해지지 않기 때문이다. design.md의 항목 이름을 그대로 토큰 이름으로 가져가면 글과 코드가 어긋나지 않는다.
실습 21
한 줄로 룩 바꾸기
레슨 19에서 만든 웹에, 레슨 20의 design.md를 토큰으로 적용시킨다.
브라우저로 열어 색·간격이 design.md대로 입혀졌는지 확인한다.
--accent 한 줄만 다른 색으로 바꾼다.
새로고침해, 버튼·강조가 한꺼번에 바뀌는지 눈으로 확인한다.
목표: ‘정의는 한 곳, 사용은 이름으로’의 위력을 체감하는 것. 룩 교체가 한 줄이 되는 순간이 토큰의 본질이다.
한 문장 요약
값은 한 곳에 이름으로, 사용은 그 이름으로.
design.md의 약속을 토큰으로 옮기면 룩 교체가 한 줄이 된다. 이제 잘 차려입은 웹이 손에 있다. 남은 건 이걸 내 컴퓨터 밖, 누구나 들어올 수 있는 곳에 올리는 일이다.
Lesson 22
버셀로 배포하기
내 노트북에서만 열리던 웹을, 친구에게 링크 하나로 보낼 수 있는 진짜 ‘공개된 사이트’로 만든다. 명령 몇 줄이면 된다.
지금까지 만든 웹은 내 컴퓨터 안에서만 산다. 브라우저를 닫으면 아무도 못 본다.
배포(deploy)란 이 웹을 늘 켜져 있는 남의 컴퓨터(서버)에 올려, 인터넷 주소를 붙여 누구나 들어오게 만드는 일이다. 예전엔 서버를 사고 설정하느라 며칠이 걸렸지만, 지금은 정적 페이지 하나쯤은 몇 분이면 끝난다.
그 흐름은 늘 세 단계다. 내 컴퓨터에서 확인하고(로컬) → 올리고(배포) → 주소로 공개된다.
그림 2. 로컬 → 배포 → 공개. 내 컴퓨터에서 미리 본 웹을 버셀에 올리면 누구나 접속하는 주소가 생긴다.
버셀(Vercel) — 정적 웹을 가장 쉽게 올리는 곳
버셀은 한 페이지짜리 웹을 올리기에 특히 편하다. 폴더를 가리키면 알아서 주소를 만들어 준다. 명령은 이렇다.
terminal — 내 프로젝트 폴더
# 1) 버셀 도구 설치 (최초 한 번)❯ npm i -g vercel
# 2) 프로젝트 폴더에서 배포 — 질문 몇 개에 엔터만 눌러도 된다❯ vercel
? Set up and deploy “~/my-web”? yes✓ 빌드 없이 정적 파일 업로드
✓ Preview: https://my-web-xxxx.vercel.app
# 3) 진짜 공개 주소로 올리기 (프로덕션)❯ vercel --prod
✓ Production: https://my-web.vercel.app
이제 그 vercel.app 주소를 누구에게 보내도 똑같이 열린다. 코드를 고치고 vercel --prod를 다시 실행하면 같은 주소에 최신 버전이 덮인다.
배포 전 체크
공개되는 순간 전화번호·키 같은 민감한 값이 화면이나 코드에 남아 있지 않은지 한 번 본다. 또 “내 컴퓨터에서만 열리던 경로”(예: file:///Users/...)를 직접 가리키는 부분이 없는지 확인한다. 공개 주소에선 그 경로가 안 열린다.
실습 22
내 웹을 세상에 공개하기
레슨 21까지 완성한 웹 폴더를 작업 대상으로 연다.
에이전트에게 “이 폴더를 버셀로 배포하는 절차를 단계별로 안내하고, 필요한 명령을 알려줘”라고 시킨다.
안내대로 vercel을 실행해 미리보기 주소를 받는다.
이상 없으면 vercel --prod로 공개 주소를 만들고, 휴대폰으로 접속해 확인한다.
목표: ‘로컬 → 배포 → 공개’ 흐름을 손으로 한 번 완주하는 것. 한 번 올려보면 다음부터는 명령 한 줄이 된다.
모듈 6 마무리
만든 것은 올려야 ‘작품’이 된다.
자연어로 한 페이지 웹을 만들고(L19), 디자인을 design.md에 글로 굳히고(L20), 토큰으로 룩을 입혀(L21), 마지막에 버셀로 공개(L22)하기까지 한 흐름을 통과했다. 다음 모듈에서는 이런 작업을 더 깊고 안정적으로 다루는 ‘하네스와 컨텍스트’로 들어간다.
