Day 6 — 프론트 기초 + 화면 뼈대 만들기
오늘의 목표
- HTML/CSS가 화면을 구성하는 기본 원리를 이해한다
- 와이어프레임을 실제 레이아웃으로 옮긴다
- 바이브코딩으로 내 프로젝트 전체 화면 뼈대를 만든다
준비물: Day 5에서 만든 첫 컴포넌트 + 와이어프레임(Day 1~2 스케치)
0. 복습 — 지난 시간 우리는
AI에게 코드 시키는 법을 배우고, 첫 컴포넌트를 만들었습니다. 오늘은 그 방식으로 화면 전체의 뼈대를 세웁니다. 개별 부품에서 → 집 전체 골조로.
1. HTML/CSS — 화면의 뼈대와 옷
바이브코딩으로 만들더라도, 나온 결과를 이해하고 수정하려면 기본 원리는 알아야 합니다.
| 역할 | 비유 | |
|---|---|---|
| HTML | 구조 (무엇이 있는가) | 건물의 뼈대·방 배치 |
| CSS | 스타일 (어떻게 보이는가) | 페인트·가구·인테리어 |
<!-- HTML: 구조 -->
<div class="todo-card">
<h3>장보기</h3>
<span>2026-01-15</span>
</div>
/* CSS: 스타일 */
.todo-card {
padding: 16px;
border-radius: 8px;
background: white;
}
💡 AI가 만든 코드에서
<div>,<span>,class="..."같은 게 보이면 → HTML(구조),padding,color,background같은 게 보이면 → CSS(스타일)라고 알아보면 됩니다.
2. 박스 모델 — 모든 요소는 상자다
화면의 모든 요소는 상자입니다. 이 상자들을 배치하는 게 레이아웃의 전부입니다.
┌─────────────────────────┐
│ margin (바깥 여백) │
│ ┌───────────────────┐ │
│ │ border (테두리) │ │
│ │ ┌─────────────┐ │ │
│ │ │ padding(안쪽) │ │ │
│ │ │ [ 내용 ] │ │ │
│ │ └─────────────┘ │ │
│ └───────────────────┘ │
└─────────────────────────┘
- padding: 내용과 테두리 사이 (안쪽 여백)
- margin: 다른 요소와의 거리 (바깥 여백)
- border: 테두리
💡 화면에서 "간격이 이상하다" 싶으면 십중팔구 margin/padding 문제입니다. AI에게 "이 카드 사이 간격을 더 넓혀줘"처럼 말하면 됩니다.
3. 레이아웃 — 요소를 나란히 / 쌓기
현대 웹 레이아웃은 대부분 Flexbox와 Grid 두 가지로 해결됩니다.
| 도구 | 언제 | 예시 |
|---|---|---|
| Flexbox | 한 줄로 나란히 / 쌓기 | 헤더의 로고+메뉴, 버튼 그룹 |
| Grid | 격자 배치 | 카드 목록, 갤러리 |
지금은 이름만 알아두세요. AI에게 시킬 때 이렇게 말하면 됩니다.
"할 일 카드들을 모바일에선 1열, 데스크톱에선 3열 그리드로 배치해줘"
"헤더에 로고는 왼쪽, 로그아웃 버튼은 오른쪽에 두고 가로로 정렬해줘"
4. 화면 설계 — 와이어프레임에서 시작
코드 짜기 전에 화면 목록과 대략적 배치를 정하는 게 먼저입니다. (Day 1 명세서의 "화면 목록" 기억나시죠?)
와이어프레임이란?
와이어프레임 = 색·디자인 없이 "무엇이 어디 있는지"만 그린 화면 스케치
종이에 네모로 그려도 됩니다.
┌──────────────────────────┐
│ [로고] [로그아웃] │ ← 헤더
├──────────────────────────┤
│ + 새 할 일 추가 │ ← 입력
├──────────────────────────┤
│ ☐ 장보기 1/15 🗑 │
│ ☑ 운동하기 1/12 🗑 │ ← 목록
│ ☐ 책읽기 1/20 🗑 │
└──────────────────────────┘
내 프로젝트 화면 목록 정리
필요한 화면:
1. 로그인 / 회원가입
2. (메인 화면) ____________
3. ____________
4. ____________
5. 실습 — 전체 화면 뼈대 만들기
오늘은 디자인 완성이 아니라 "구조 잡기" 가 목표입니다. 흑백이어도 됩니다.
🛠 실습 순서
1. 화면 목록을 확정한다 (3~5개)
2. 각 화면을 종이/도구로 와이어프레임 스케치
3. 가장 중요한 화면 1개부터 바이브코딩으로 구현
프롬프트 예시:
"할 일 관리 앱의 메인 화면을 만들어줘.
- 상단 헤더: 왼쪽 로고, 오른쪽 로그아웃 버튼
- 그 아래 새 할 일 입력창 + 추가 버튼
- 그 아래 할 일 목록 (체크박스, 제목, 마감일, 삭제버튼)
- 모바일에서도 잘 보이게 반응형으로
React + Tailwind로, 일단 가짜 데이터로 보여줘"
4. 화면 간 이동(네비게이션) 연결
"로그인 → 메인으로 이동하는 라우팅 추가해줘"
5. 동작 확인 후 commit & push
✍️ 막힐 때 보세요
디자인이 안 예뻐요 → 지금은 구조가 목표입니다. 예쁘게는 Day 20(UI 폴리싱)에서 다듬습니다. 일단 "동작하는 뼈대"에 집중하세요.
가짜 데이터를 어떻게 넣죠? → AI에게 "예시용 가짜 할 일 5개를 코드 안에 넣어서 보여줘"라고 하세요. 실제 API 연동은 Day 7~11에서 합니다.
화면이 너무 많아 막막해요 → 메인 화면 1개만 제대로 만드세요. 나머지는 그걸 변형하면 빨라집니다.
6. 오늘의 체크리스트
- HTML(구조) / CSS(스타일)의 역할을 구분할 수 있다
- 박스 모델(margin/padding)을 이해했다
- Flexbox/Grid가 무엇에 쓰이는지 안다
- 와이어프레임으로 화면을 스케치할 수 있다
- 메인 화면 뼈대를 만들고 화면 이동을 연결했다 ← 가장 중요!
- commit & push 했다
7. 다음 시간 예고
Day 7 — 백엔드 기초 복습 + 첫 CRUD API
- 이제 서버 쪽! 데이터를 실제로 저장·조회하는 API를 만듭니다
- ORM vs 직접 쿼리 / 환경변수 관리 / CRUD 1개 완성
- 준비물: 화면 뼈대가 올라간 내 저장소 + Day 3 API 명세
📌 숙제: 화면에 있는 "가짜 데이터"를 보며, 이게 서버에서 오려면 어떤 API가 필요한지 Day 3 명세서와 맞춰보세요.
화면이라는 무대가 생겼습니다. 다음 시간엔 그 무대에 진짜 데이터를 올립니다. 🎭