오늘 할 일: 하얀 종이에 분위기 입히기
지난 장에서 우리는 my-first-page 폴더 안에 index.html 하나로 자기소개 페이지를 만들었습니다.
아마 지금 화면은 꽤 정직할 겁니다. 흰 배경, 기본 글자, 왼쪽에 붙은 문장들. 나쁘지는 않지만 아직 "웹페이지"라기보다 "메모장"에 가깝습니다.
이번 장에서는 이 페이지에 옷을 입힙니다.
오늘의 목표는 단순합니다.
style.css파일을 새로 만든다.index.html에 CSS 파일을 연결한다.카드형 박스, 가운데 정렬, 둥근 버튼, 그림자를 넣는다.
마음에 들 때까지 Claude에게 분위기를 다시 요청한다.
코드를 직접 외울 필요는 없습니다. 우리는 원하는 화면을 말로 설명하고, Claude Code가 바꾸는 파일을 확인한 뒤 승인하면 됩니다.
먼저 Claude Code 열기
프로젝트 폴더로 이동한 상태에서 Claude Code를 실행합니다.
cd my-first-page
claude이미 my-first-page 폴더 안에 있다면 claude만 입력해도 됩니다.
claude이제 지난 장에서 만든 index.html이 있는 폴더 안에 들어와 있어야 합니다.
확인하고 싶다면 Claude에게 이렇게 물어보세요.
현재 폴더에 어떤 파일이 있는지 확인해줘.index.html이 보이면 준비 완료입니다.
첫 번째 부탁: CSS 파일을 따로 만들어줘
HTML 안에 스타일을 직접 넣을 수도 있지만, 오늘은 파일을 분리합니다.
index.html: 페이지의 내용style.css: 페이지의 디자인
이렇게 나누면 나중에 수정하기 훨씬 편합니다.
Claude에게 아래 문장을 그대로 입력하세요.
현재 index.html에 연결할 style.css 파일을 새로 만들어줘.
index.html에는 style.css가 연결되도록 head 안에 link 태그를 추가해줘.
아직 디자인은 크게 바꾸지 말고, CSS 연결이 잘 되었는지 확인할 수 있게 배경색만 아주 연한 회색으로 넣어줘.여기서 중요한 표현은 두 가지입니다.
style.css 파일을 새로 만들어줘그리고
index.html에 연결해줘초보자가 자주 놓치는 부분이 바로 "연결"입니다. CSS 파일만 만들어도 HTML이 그 파일을 불러오지 않으면 화면은 바뀌지 않습니다.
변경 파일 목록을 먼저 본다
Claude가 작업을 제안하면 터미널에 이런 식으로 변경 파일이 보일 수 있습니다.
Modified index.html
Created style.css여기서 멈춰서 한 번 봅니다.
오늘 우리가 기대한 파일은 정확히 두 개입니다.
index.html수정style.css생성
이 목록이 맞다면 승인합니다.
y만약 전혀 예상하지 못한 파일을 여러 개 만들려고 한다면 바로 승인하지 말고 이렇게 물어보세요.
왜 이 파일들이 필요한지 설명해줘. 지금은 index.html과 style.css만 수정하고 싶어.Claude Code를 쓸 때 가장 좋은 습관은 "바로 y"가 아니라 "보고 y"입니다.
브라우저에서 새로고침하기
이제 index.html을 브라우저에서 다시 열어봅니다.
이미 열려 있다면 새로고침만 하면 됩니다.
Windows:
Ctrl + RMac:
Command + R
배경이 아주 연한 회색으로 바뀌었다면 CSS 연결 성공입니다.
화려한 디자인보다 이 확인이 먼저입니다. 연결이 안 된 상태에서 아무리 멋진 CSS를 만들어도 화면은 그대로입니다.
두 번째 부탁: 카드처럼 정리해줘
이제 본격적으로 페이지를 보기 좋게 바꿔보겠습니다.
Claude에게 아래 프롬프트를 입력하세요.
현재 index.html과 style.css를 사용해서 자기소개 페이지를 보기 좋게 디자인해줘.
원하는 스타일은 다음과 같아.
- 전체 내용이 화면 가운데 오게 해줘.
- 자기소개 내용은 카드형 박스 안에 넣어줘.
- 카드에는 흰색 배경, 둥근 모서리, 은은한 그림자를 넣어줘.
- 제목은 조금 크게, 본문은 읽기 편한 크기로 해줘.
- 버튼이 있다면 둥글고 눌러보고 싶게 만들어줘.
- 전체 분위기는 깔끔하고 친근하게 해줘.
HTML 구조가 필요하면 최소한으로만 정리하고, 디자인 코드는 style.css에 작성해줘.이 프롬프트는 꽤 강력합니다.
"예쁘게 해줘"라고만 말하지 않고, 화면에서 보이는 요소를 하나씩 말했기 때문입니다.
가운데 정렬
카드형 박스
둥근 모서리
그림자
글자 크기
버튼 모양
전체 분위기
디자인을 잘 모를 때는 전문 용어를 쓰려고 애쓰지 않아도 됩니다. "어디에 놓을지", "어떤 느낌인지", "무엇이 눈에 띄어야 하는지"만 말하면 충분합니다.
승인 전 체크리스트
Claude가 여러 파일을 동시에 수정하려고 할 수 있습니다.
이번 단계에서는 보통 이런 변경이 자연스럽습니다.
Modified index.html
Modified style.css승인하기 전에 세 가지만 봅니다.
index.html과style.css만 수정하는가?내가 요청하지 않은 새 파일을 만들지는 않는가?
기존 자기소개 내용이 사라지지는 않는가?
괜찮다면 승인합니다.
y조금 이상하다면 승인하지 말고 이렇게 말하세요.
내 자기소개 문장은 유지하고, 디자인만 다시 수정해줘.
새 파일은 만들지 말고 index.html과 style.css만 사용해줘.이 한 문장만으로도 Claude의 움직임이 훨씬 차분해집니다.
새로고침으로 전후 비교하기
브라우저로 돌아가 새로고침합니다.
이번에는 꽤 달라졌을 겁니다.
하얀 종이 같던 페이지가 가운데 놓이고, 자기소개가 카드 안에 담기고, 버튼이 조금 더 버튼다워졌을 겁니다.
여기서 끝내도 됩니다. 하지만 Claude Code의 재미는 "다시 요청하기"에서 시작됩니다.
디자인은 한 번에 완성하지 않아도 됩니다. 보고, 말하고, 다시 바꾸면 됩니다.
감각을 말로 바꾸는 법
디자인 요청이 막힐 때는 이렇게 말하면 됩니다.
조금 더 미니멀하게
전체 디자인을 조금 더 미니멀하게 바꿔줘.
색은 줄이고, 여백을 넉넉하게 하고, 그림자는 더 은은하게 만들어줘.미니멀은 "아무것도 없는 것"이 아닙니다. 덜어내서 더 또렷하게 보이게 하는 것입니다.
매거진 표지처럼
이 페이지를 매거진 표지처럼 바꿔줘.
제목이 가장 먼저 보이게 하고, 큰 여백과 세련된 글자 배치를 사용해줘.
너무 복잡한 장식은 넣지 말고, 한 장짜리 소개 페이지처럼 보여줘."매거진 표지처럼"이라고 말하면 Claude는 글자의 크기, 배치, 여백을 더 과감하게 잡으려고 합니다.
모바일에서도 예쁘게
모바일 화면에서도 예쁘게 보이도록 CSS를 다듬어줘.
작은 화면에서는 카드 너비가 화면을 넘지 않게 하고, 글자 크기와 여백도 자연스럽게 조정해줘.요즘 웹페이지는 컴퓨터보다 휴대폰에서 먼저 볼 때가 많습니다. 그래서 "모바일에서도"라는 문장은 거의 마법 주문처럼 자주 쓰게 됩니다.
조금 더 따뜻하게
전체 분위기를 조금 더 따뜻하게 바꿔줘.
차가운 회색보다는 부드러운 베이지나 연한 색감을 사용하고, 버튼 색도 자연스럽게 맞춰줘.색 이름을 정확히 몰라도 괜찮습니다. "따뜻하게", "차분하게", "산뜻하게", "고급스럽게"처럼 느낌을 말하면 됩니다.
한 번에 많이 바꾸지 않기
Claude에게 이런 요청을 할 수도 있습니다.
디자인을 완전히 멋지게 바꿔줘.하지만 초보자에게는 추천하지 않습니다.
왜냐하면 너무 많은 것이 한 번에 바뀌면, 무엇이 좋아졌고 무엇이 이상해졌는지 판단하기 어렵기 때문입니다.
대신 이렇게 나눠서 요청하세요.
버튼 디자인만 더 예쁘게 바꿔줘.카드의 여백과 그림자만 더 자연스럽게 조정해줘.제목이 더 눈에 띄게 글자 크기와 간격을 조정해줘.작게 요청하면 결과도 작게 바뀝니다. 그러면 내가 원하는 방향을 잡기 쉬워집니다.
마음에 안 들 때 쓰는 말
결과가 마음에 들지 않아도 실패가 아닙니다. 그냥 다음 요청의 재료가 생긴 것입니다.
이럴 때는 "별로야"보다 구체적으로 말해보세요.
전체적으로 너무 화려해. 색을 줄이고 더 차분하게 바꿔줘.카드가 너무 작아 보여. 너비를 조금 넓히고 여백을 더 줘.버튼 색이 너무 튀어. 본문 분위기와 어울리게 바꿔줘.글자가 너무 작아서 읽기 어려워. 본문 글자 크기를 조금 키워줘.디자인 대화의 핵심은 "좋다/싫다"가 아니라 "무엇을 어떻게"입니다.
오늘의 완성 기준
이번 장의 완성 기준은 거창하지 않습니다.
브라우저에서 봤을 때 다음 네 가지가 보이면 성공입니다.
내용이 화면 가운데에 있다.
자기소개가 카드 안에 정리되어 있다.
글자 크기와 여백이 읽기 편하다.
버튼이나 링크가 있다면 누르고 싶게 보인다.
여기까지 왔다면 이제 당신의 페이지는 "그냥 HTML 파일"이 아니라 "디자인이 들어간 웹페이지"입니다.
마지막으로 저장하고 한 번 더 보기
마지막으로 Claude에게 정리를 부탁해도 좋습니다.
현재 디자인에서 불필요하게 반복된 CSS가 있으면 정리해줘.
화면 모습은 크게 바꾸지 말고, style.css를 읽기 쉽게 정돈해줘.수정 파일 목록을 확인합니다.
Modified style.css예상한 변경이라면 승인합니다.
y그리고 브라우저를 새로고침합니다.
이제 비교해보세요.
처음의 하얀 화면과 지금의 카드형 페이지. 같은 내용인데 전혀 다르게 느껴질 겁니다.
그게 CSS의 힘입니다. 그리고 이제 당신은 그 힘을 외워서 쓰는 대신, Claude에게 정확히 부탁해서 꺼내 쓸 수 있습니다.
다음 장에서는 이 페이지에 작은 기능을 넣습니다. 버튼 하나를 누르면 화면 분위기가 바뀌는 다크모드입니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.