웹페이지가 HTML(뼈대)·CSS(꾸밈)·JS(동작)·API(데이터 통로)로 이뤄짐을 브라우저로 직접 확인하고, ‘이미지는 숫자(픽셀)’와 객체 인식 개념을 잡아 다음 비전 랩으로 연결합니다.
S4-01 웹이 뭐길래: 화면에 결과가 뜨는 이유
웹은 누구나 주소만 알면 열어볼 수 있는 결과 화면. 웹페이지는 HTML(뼈대)·CSS(꾸밈)·JS(동작) 세 언어로 이뤄집니다 — 사람 몸의 뼈대·옷·근육처럼요. 이번 세션 목표인 ‘사진 올리면 박스 쳐주는 미니 웹’의 큰 그림을 그립니다.
S4-02 HTML: 웹페이지의 뼈대 세우기
HTML은 ‘여기 거실, 여기 부엌’을 정하는 설계도. 내용은 태그(포장지)로 감싸고, index.html은 더블클릭만으로 브라우저가 엽니다. 단순한 페이지를 만들고 제목 글자를 직접 바꿔봅니다.
S4-03 CSS: 밋밋한 뼈대에 옷을 입히기
CSS는 뼈대 위에 입히는 옷과 화장. 선택자(무엇을)와 속성(어떻게)이 짝을 이뤄 한 줄이 완성됩니다. 버튼 색만 콕 집어 바꿔도 제목은 그대로인 걸 보며 선택자의 힘을 체감합니다.
S4-04 자바스크립트: 버튼을 눌렀을 때 일이 일어나게
자바스크립트는 동작을 맡는 근육. ‘이벤트(언제) → 동작(무엇을)’ 흐름으로, ‘초인종 울리면 문 열기’ 같은 규칙을 만듭니다. 버튼을 누르면 글자가 바뀌게 만들어 직접 눌러봅니다.
S4-05 프론트·백엔드·API: 보이는 것과 뒤에서 일하는 것
웹은 식당. 프론트엔드는 손님이 앉는 홀, 백엔드는 진짜 요리가 일어나는 주방, API는 주문 창구입니다. 무거운 분석은 왜 백엔드 몫인지 짚습니다.
S4-06 이미지는 숫자다: 컴퓨터가 사진을 보는 법
사진은 픽셀(작은 네모 점)의 격자이고, 픽셀 하나의 색은 RGB 세 숫자(0~255)입니다. 색마저 숫자라 컴퓨터가 계산으로 ‘분석’할 수 있고, 이것이 객체 인식의 출발점입니다.
S4-07 객체 인식: 컴퓨터가 박스 치고 이름표 다는 법
객체 인식은 위치(박스) + 이름(라벨) + 확신도를 한꺼번에 찾는 일. 대표 모델 YOLO는 사진 전체를 한 번에 훑어 빨라서 실시간 카메라에 잘 맞습니다. 결과 형태를 손으로 그려 예측합니다.
S4-08 전체 흐름 잇기: 사진 한 장이 박스가 되기까지
사진 고르기 → 버튼 → API → 모델 분석 → 결과 → 박스 그리기, 6단계로 각 단계의 담당(프론트·API·백엔드)을 짚습니다. 복잡한 앱도 ‘여섯 칸짜리 순서’로 보면 한눈에 이해됩니다.
S4-09 AI에게 시켜 미니 웹 골격 만들고 구조 읽기
화면 틀은 갖추되 핵심 기능 자리는 비워둔 ‘골격’을 만듭니다. 진짜 분석이 들어갈 자리는 TODO 주석으로 정직하게 표시 — ‘어디까지 진짜인지’를 솔직히 짚는 태도를 익힙니다.
S4-10 세션 정리: 웹과 영상인식, 한 장으로 묶기
웹 3요소·구조·이미지를 세 묶음으로 요약하고, ‘아직 준비 중’을 솔직히 표시하는 정직한 안내(honest UI) 태도로 골격을 닫습니다. 다음 비전 랩으로 연결합니다.