지난 시간 우리는 페이지를 하나 만들었습니다 — 안녕하세요, OOO입니다.
작동은 잘 되는데, 솔직히 좀 밋밋하죠. 오늘은 그 페이지를 보기 좋게 다듬습니다.
2회차에 우리는 집(구조)을 다 지었습니다. 벽이 어디 있고 방이 몇 개인지 — 그건 끝났어요.
오늘 하는 일은 도배하고 가구 놓기입니다. 벽을 부수거나 방을 새로 만들지 않아요. 바뀌는 건 “보이는 것”뿐 — 글자 크기, 색, 사진, 여백.
#22989D 같은 것)나 글꼴 이름을 외울 필요 없어요. 느낌으로 말하면 AI가 알아서 해줍니다.
dev 서버를 실행해줘 (npm run dev). 브라우저에서 어떤 주소를 열어야 하는지 알려줘.
localhost:3000 비슷한 주소가 뜨고, 그 주소를 열면 2회차에 만든 페이지가 그대로 보이면 OK.
app 폴더가 있어야 함)⌘ + Shift + 4 → 페이지 영역 드래그윈도우 + Shift + S → 페이지 영역 드래그이게 오늘의 “BEFORE” 사진입니다. 75분 뒤에 얼마나 달라지는지 직접 보게 됩니다.
신문을 보면 큰 제목, 중간 소제목, 작은 본문이 한눈에 구분됩니다. 만약 모든 글자가 같은 크기면? 뭐가 중요한지 알 수 없어요. 이걸 “글자 위계”라고 합니다. 오늘 우리 페이지에도 위계를 줍니다.
맨 위 제목 글자를 더 크고 굵게 만들어줘. 한눈에 "이게 제목이구나" 하고 보이게 해줘.
안티그래비티가 변경안을 보여주면 Apply(또는 Accept)를 누릅니다.
제목과 소개 문장을 페이지 가운데로 정렬해줘.
옷을 잘 입은 사람은 보통 색을 3개 안쪽으로 씁니다. 색이 7개쯤 되면 광대처럼 보이죠.
페이지도 똑같아요. 오늘 색은 딱 세 가지만 정합니다 — 배경색 1 · 글자색 1 · 포인트색 1.
종이에 색 세 개를 적어보세요. 정확한 색 이름이 아니어도 됩니다 — “느낌”으로 적어도 OK.
페이지 배경색을 (내가 정한 배경색)으로 바꾸고, 글자색은 그 배경 위에서 잘 보이는 색으로 해줘.
글자가 배경에 잘 안 보여. 더 또렷하게 보이도록 색을 조정해줘.
제목과 중요한 부분에 (내가 정한 포인트색)을 살짝 써서 눈에 띄게 강조해줘. 포인트색은 너무 많이 쓰지 말고 조금만.
색을 3개로 줄이고 차분하게 정리해줘
안티그래비티가 사진을 페이지에 넣으려면, 그 사진이 정해진 서랍에 들어 있어야 합니다.
그 서랍의 이름이 public 폴더예요. 사진을 거기 넣어두면 AI가 찾아 쓸 수 있습니다.
my-photo.jpg
내 사진 (1).jpg → ✗)public 폴더를 찾습니다public 폴더 위에 놓습니다 (드래그 앤 드롭)public 폴더를 펼쳤을 때 그 안에 내 사진 파일이 보이면 OK.
public 폴더에 있는 my-photo.jpg 사진을 제목 아래에 넣어줘. 너무 크지 않게, 동그란 모양으로 보여줘.
※ my-photo.jpg 자리에는 4-1에서 정한 본인 파일 이름을 그대로 씁니다.
.jpg/.png까지)사진을 더 작게 만들어줘사진을 액자 끝까지 꽉 채우면 답답해 보입니다. 사진 둘레에 여백(매트)이 있어야 사진이 살아나죠.
페이지도 같습니다. 글자와 사진이 화면 가장자리에 딱 붙어 있으면 답답해요. 여백을 줍니다.
내용이 화면 가장자리에 너무 붙어 있어. 좌우와 위아래에 여백을 넉넉히 줘서 시원하게 만들어줘.
제목, 사진, 소개 문장 사이의 간격을 보기 좋게 띄워줘.
우리 페이지를 볼 사람들은 대부분 휴대폰으로 봅니다. 폰 화면에서도 안 깨지는지 확인합니다.
브라우저 창의 가로 폭을 마우스로 잡고 휴대폰처럼 좁게 줄여 봅니다.
이 페이지를 휴대폰처럼 좁은 화면에서도 글자와 사진이 깨지지 않고 잘 보이게 해줘.
사진이 화면 폭을 넘지 않게 해줘
1-2에서 찍어 둔 “BEFORE” 스크린샷과 지금 화면을 나란히 놓고 봅니다.
| 증상 | 해결 |
|---|---|
| 부탁했는데 화면이 그대로다 | 저장(⌘S) → 브라우저 새로고침 → dev 서버 켜져 있는지 확인 (세 가지 순서대로) |
| 사진이 안 보인다 | 파일 이름이 프롬프트에 쓴 이름과 정확히 같은지(대소문자·확장자), public 폴더에 있는지 확인 |
| 글자가 배경에 묻혀 안 보인다 | 안티그래비티에 글자가 배경에 잘 보이게 색을 바꿔줘 |
| 색이 너무 많아 정신없다 | 색을 3개로 줄여서 차분하게 정리해줘 |
| 사진이 너무 크거나 화면을 넘는다 | 사진을 더 작게, 화면 폭 안에 들어오게 해줘 |
| dev 서버가 꺼진 것 같다 | 안티그래비티에 npm run dev를 다시 실행해줘 |
| AI가 바꾼 게 마음에 안 든다 | 방금 바꾼 거 마음에 안 들어. 원래대로 되돌리고 다시 해줘 |
| public 폴더 | 사진·파일을 두는 “정해진 서랍”. 여기 있어야 안티그래비티가 찾아 씀 |
| 정렬 | 글자·요소를 어디에 맞출지 (가운데 정렬, 왼쪽 정렬) |
| 여백 | 요소 둘레의 빈 공간. 답답함을 푸는 가장 쉬운 도구 |
| 글자 위계 | 제목·소제목·본문의 크기 차이. 무엇이 중요한지 보이게 함 |
| 반응형 | 휴대폰·PC 등 화면 크기가 달라도 안 깨지게 만든 것 |
| dev 서버 | 내 컴퓨터에서 페이지를 미리 띄워 보는 도구 (localhost) |