DAY 07바이브코딩 · 안정화 단계
최종 프로젝트 ② — 기능 완성 · PC · 휴대폰 화면 정리
DAY 06의 기본 구조를 바탕으로 꼭 필요한 기능을 완성하고, 화면 배치를 정리해서 PC와 휴대폰 모두에서 안정적으로 작동하는 프로젝트를 만듭니다. 화면 배치는 개발자 용어를 외우지 않고 우리말로 정확하게 요청하는 법을 배웁니다.
1.수업 구성 · 오늘 중요하게 볼 것
기능 완성 → 직접 눌러 보기 → 오류 고치기 → PC 화면 정리 → 휴대폰 화면 정리 → 다시 배포
꼭 필요한 기능을 완성하고, PC와 휴대폰에서 안정적으로 작동하는 프로젝트 만들기
필요한 화면과 기능을 만드는 것에 집중
실제로 작동하는가? 배치가 자연스러운가? 휴대폰에서도 괜찮은가? 오류는 없는가?
핵심 — "있다"에서 "제대로 작동한다"로 발전시키기
- STEP 01 점검은 모두 똑같이 합니다. 결과에서 1순위 기능 딱 하나만 고르세요.
- STEP 02~05 — 그 기능 하나를 완성하고, 직접 눌러 보고, 오류를 고칩니다.
- STEP 06~11 — 화면 정리는 Header와 첫 화면 하나만 PC와 휴대폰에서 정리합니다.
- STEP 13 작업목록과 Commit은 꼭 하고 마칩니다. 못 한 일은 DAY 08 목록에 넣으면 됩니다.
BUILD_SPEC.md가 아직 없다면 DAY 06의 BUILD_SPEC 만들기부터 하고 시작하세요.
2.STEP 01. 현재 프로젝트 상태 확인하기
무작정 작업을 시작하지 않고, 먼저 BUILD_SPEC과 현재 프로젝트를 비교합니다.
중요한 원칙 — 디자인보다 기능 먼저
3.STEP 02~03. 남은 꼭 필요한 기능 완성 · Database 마무리
남은 꼭 필요한 기능 완성하기
프로젝트마다 기능은 다릅니다 — 작업물 상세보기, 클래스 신청 입력창, 문의 입력창, 카페 메뉴 Database, 자료 목록 등
한 기능 완성 → 직접 확인 → 다음 작업. 바로 다음 기능으로 넘어가지 않습니다.
Database 기능 마무리하기
Database를 쓰지 않는 프로젝트는 건너뜁니다. 사용하는 경우 DAY 04에서 배운 방식(어떤 Table? 어떤 Column? 어떤 데이터? 어떤 작업으로?)을 그대로 활용합니다. 로그인이 필요한 프로젝트는 DAY 05에서 만든 이메일 로그인 방식과 "내 데이터만" 규칙을 그대로 씁니다.
핵심 — SQL 작성 능력보다 Database 작업을 정확하게 설명하는 능력이 중요합니다.
4.STEP 04. 직접 눌러 보며 확인하기
기능이 정말 작동하는지 확인하기
화면에 버튼이 있다고 작동하는 것은 아닙니다. 실제로 누르고 → 결과까지 확인해야 합니다. 개발자들은 이 과정을 Testing(테스트)이라고 부릅니다.
AI가 "정상입니다"라고 말하는 것이 아니라, 내가 브라우저에서 직접 누르고 · 입력하고 · 확인해야 합니다.
5.STEP 05. 원인 찾아 오류 고치기
오류는 원인을 찾아 그 부분만 고치기
문제가 생기면 전체를 다시 만드는 것이 아니라, 문제가 생긴 위치와 원인을 찾아 고칩니다. 확인하다가 문제가 생기는 것은 자연스러운 과정입니다. 개발자들은 이 과정을 Debugging(디버깅)이라고 부릅니다.
"안 돼. 고쳐줘."
문제 — 어디가 안 되는지, 어떤 결과가 필요한지 AI가 알기 어려움
1.문제가 생긴 기능 2.내가 한 행동 3.기대한 결과 4.실제 결과 5.고칠 범위
화면이 이상하면 Win + Shift + S로 그 부분을 캡처한 뒤, Claude Code 입력창에 Ctrl + V로 붙여 넣고 위 오류 요청과 함께 보내세요. "Card가 이상해요"보다 훨씬 정확하게 알아듣습니다.
붙여 넣기가 안 되면 — 캡처를 프로젝트 폴더에 저장하고 "[파일 이름] 이미지를 보고 문제를 찾아줘"
- 내 사이트를 연 브라우저에서 F12
- 위쪽 탭에서 Console 누르기
- 빨간 글씨 오류 줄을 드래그해 복사 (또는 캡처)
- Claude Code에 붙여 넣고 "이 오류의 원인을 먼저 설명해줘"
여러 오류를 한꺼번에 요청하지 않고 오류 하나 → 원인 확인 → 고치기 → 다시 확인 순서로 진행합니다.
게임에서 보스 방에 들어가기 전에 저장하듯, 기능이 제대로 돌아가는 지금 저장해 둡니다. 이제부터 화면 배치를 여러 곳 고치게 되는데, 그러다 망가져도 이 지점으로 돌아올 수 있습니다.
Stage → Commit (메시지 예: "핵심 기능 완성"). Push는 수업 끝에 한 번 해도 됩니다. 방법은 DAY 03의 Git 저장 과정 참고
6.화면 배치, 이렇게 말해도 돼요 — 개발자 용어 대신 우리말로
기능이 제대로 돌아가면 이제 화면 배치를 정리할 차례입니다. 예전에는 화면 배치를 고치려면 개발자들이 쓰는 영어 용어를 먼저 외워야 했습니다. 하지만 AI와 함께 만드는 지금은 무엇이 어떻게 보이기를 원하는지 우리말로 정확히 말하면 충분합니다. AI는 두 가지 말을 모두 알아듣습니다.
"Portfolio Section의 Card를 Grid 3열로 바꾸고 Gap을 넓혀줘. 이미지는 Aspect Ratio를 4:3으로 맞춰줘."
"작업물 Section의 카드를 한 줄에 3개씩 놓고, 카드 사이 간격을 넓혀줘. 사진은 모두 가로 4, 세로 3 비율로 맞춰줘."
| 개발자들은 | 무슨 뜻인가요? | 우리는 이렇게 말해요 |
|---|---|---|
| Container · Max Width | 넓은 화면에서 내용이 끝없이 퍼지지 않게 너비를 제한하기 | "PC에서 내용이 너무 넓게 퍼져. 가운데로 모아서 최대 너비를 정해줘." |
| Flexbox | 요소를 가로로 나란히(또는 세로로) 놓기 | "첫 화면을 왼쪽은 글, 오른쪽은 사진으로 나란히 놓아줘." |
| Grid | 카드 여러 개를 줄과 칸에 맞춰 놓기 | "카드를 한 줄에 3개씩 줄 맞춰 놓아줘." |
| Gap | 요소와 요소 사이 간격 | "카드 사이 간격을 조금 넓혀줘." |
| Alignment | 왼쪽 · 가운데 · 오른쪽 · 위아래 가운데에 맞추기 | "글과 사진의 높이 가운데를 맞춰줘." |
| Width · Height | 가로 크기 · 세로 크기 | "버튼이 너무 넓어. 가로를 줄여줘." / "첫 화면 높이를 줄여줘." |
| Aspect Ratio | 사진의 가로 : 세로 비율 (1:1, 4:3, 16:9) | "카드 사진을 모두 같은 비율로 맞추고, 찌그러지지 않게 잘라서 보여줘." |
| Overflow | 내용이 정해진 칸이나 화면 밖으로 넘치는 것 | "휴대폰에서 화면 밖으로 넘치는 곳이 있어. 찾아서 고쳐줘." |
7.STEP 06~08. PC 화면 정리하기
기능 → 화면 배치 → 세부 디자인 순서로 진행합니다. 아래 요청도 모두 우리말로 되어 있습니다.
내용이 너무 넓게 퍼지지 않게 하기
나란히 놓기 · 가운데 맞추기 점검하기
확인할 곳 — Header, 첫 화면, 문의 Section, 행동 버튼이 있는 곳
카드 줄 맞추기
카드가 있는 프로젝트라면 카드 너비 · 높이 · 간격 · 사진 비율을 확인합니다.
8.휴대폰 화면 맞추기, 이렇게 말해도 돼요
화면 크기에 따라 배치가 바뀌게 하기
같은 웹사이트라도 PC · 태블릿 · 휴대폰에서 배치를 다르게 보여 주는 것입니다. 휴대폰용 사이트를 따로 만드는 것이 아니라, 화면 크기에 맞춰 지금 배치를 조정하는 것입니다.
| 개발자들은 | 무슨 뜻인가요? | 우리는 이렇게 말해요 |
|---|---|---|
| Responsive (반응형) | 화면 크기에 맞춰 배치가 바뀌게 하기 | "휴대폰에서도 보기 좋게 화면을 맞춰줘." |
| Breakpoint | 배치가 바뀌는 화면 너비 기준 | "화면이 휴대폰만큼 좁아지면 카드를 한 줄에 1개씩 보여줘." |
| Desktop · Mobile | PC 화면 · 휴대폰 화면 | "PC 화면은 그대로 두고 휴대폰 화면만 고쳐줘." |
9.STEP 09~11. 휴대폰 문제 찾기 · 화면 맞추기 · 넘침 점검
휴대폰 화면에서 먼저 문제 찾기
AI에게 바로 "휴대폰 화면 맞춰줘"라고 하지 않고, 내 눈으로 먼저 휴대폰 화면을 확인합니다. 컴퓨터에서 휴대폰 화면을 흉내 내 볼 수 있습니다.
- Live Server로 내 사이트를 열고 F12
- 왼쪽 위의 휴대폰·태블릿 모양 아이콘 누르기 (단축키 Ctrl + Shift + M)
- 화면 위쪽 기종 목록에서 iPhone 같은 휴대폰 하나 고르기
- 위에서 아래까지 끝까지 스크롤하며 아래 문제를 찾고, 보이면 바로 캡처
- 다 봤으면 같은 아이콘을 다시 눌러 PC 화면으로 돌아오기
화면이 어색하게 보이면 새로고침(F5) 한 번. 여유가 되면 실제 휴대폰으로도 확인해 보세요.
이런 문제가 자주 보입니다
휴대폰 화면 맞추기 요청하기
바꿀 곳이 많은 요청이라 DAY 02에서 배운 Plan 모드로 보내면 좋습니다. 고치기 전에 계획을 먼저 보여 주니, 읽어 보고 괜찮을 때 진행하세요.
화면 밖으로 넘치는 곳 점검하기
중요 — 문제를 숨기는 것(X)이 아니라 원인을 고치는 것(O)입니다.
10.STEP 12. 고친 뒤 다시 확인하기
고쳤더니 다른 곳이 망가지는 문제
한 곳을 고친 뒤 잘 되던 다른 곳에 새 문제가 생기는 경우가 있습니다. 예: 휴대폰 메뉴바를 고쳤더니 PC 메뉴바가 깨짐, 문의 입력창을 고쳤더니 Database 불러오기가 안 됨. 개발자들은 이것을 Regression(회귀)이라고 부르지만, 우리는 "고친 뒤 다시 확인하기"만 기억하면 됩니다.
핵심 — "고쳤다"가 끝이 아니라 "다른 것이 안 망가졌는지"까지 확인. AI 확인과 내가 직접 눌러 보기를 함께 합니다.
도저히 안 고쳐지면 — 세이브 포인트로 돌아가기
같은 문제를 세 번 넘게 고쳐도 안 되면, 붙잡고 있기보다 마지막 Commit으로 돌아가 다른 방법으로 다시 요청하는 편이 빠릅니다.
11.STEP 13. DAY 08 작업목록 만들기
12.다시 배포 · 오늘 작업 저장
AI SPACE에 다시 배포하고 휴대폰으로 확인하기
오늘 고친 내용을 AI SPACE에 다시 올립니다. 오늘 정리한 휴대폰 화면은 실제 휴대폰으로 열어 봐야 제대로 확인할 수 있습니다. 배포는 수업 끝에 한 번만 합니다.
세이브 포인트 ③ — 오늘 작업 저장하기 — □ Stage → Commit(메시지 예: "핵심 기능 · 휴대폰 화면 정리") → Push까지 했나요? 방법이 기억나지 않으면 DAY 03의 Git 저장 과정을 참고하세요.
DAY 07 종료 상태 — 꼭 필요한 기능 대부분 완성, 직접 확인 완료, 주요 오류 수정, PC 화면 정리, 휴대폰 화면 맞춤. 다음은 디자인 다듬기 → 최종 점검 → GitHub Pages 공개 · 제출입니다.
13.오늘 배운 말 한눈에 보기
왼쪽은 개발자들이 쓰는 말, 오른쪽은 우리가 AI에게 쓰면 되는 말입니다. 왼쪽은 AI 답에 나오면 알아보는 정도면 충분합니다.
14.DAY 07 정리 & 다음 수업
다음 수업 예고 — DAY 08
최종 프로젝트 완성 — 다듬기 · 최종 점검 · GitHub Pages 공개 · 제출
- • 새 기능 추가 멈추기 → 디자인 다듬기 (이것도 우리말로 요청)
- • PC · 휴대폰 최종 점검 → GitHub Pages로 공개
- • 학원 카페에 주소 제출 → 강사 피드백 받아 고치기