A-1: 웹과 HTML 개론
안녕하세요! 여러분의 프론트엔드 가이드, 홍순구 튜터입니다.
드디어 첫 수업이에요! 오늘부터 우리는 인스타그램을 직접 만들어봅니다. 놀라지 마세요, 진짜로요. 물론 처음부터 완벽한 인스타그램은 아닙니다. 오늘은 로그인 페이지의 뼈대부터 세워볼 거예요.
프론트엔드 개발의 가장 큰 매력을 먼저 알려드릴게요. 코드를 한 줄 치면, 화면이 바뀝니다. 파일을 저장하는 순간, 브라우저에서 바로 결과를 확인할 수 있어요. 수업이 끝나면 "나도 웹페이지를 만들었다!" 하는 성취감을 느끼실 겁니다.
💡 오늘 수업의 핵심 — "웹이 어떻게 돌아가는지 이해하고, HTML로 인스타그램 로그인 페이지의 뼈대를 세운다" 🎯
🎯 학습 목표
- 웹 브라우저가 서버에서 페이지를 가져오는 과정을 이해합니다.
- HTML 문서의 기본 구조(
<!DOCTYPE>,<html>,<head>,<body>)를 직접 작성합니다. - 시멘틱(Semantic) 태그(
<header>,<main>,<footer>)로 페이지에 의미 있는 구조를 부여합니다. - VS Code와 Live Server를 설치하고, 코드 → 저장 → 브라우저 확인 흐름을 체험합니다.
Step 1: "인터넷은 어떻게 돌아가는 걸까?"
여러분이 스마트폰으로 인스타그램을 열면, 그 순간 눈에 보이지 않는 곳에서 엄청난 일이 벌어지고 있어요. 오늘 만들 코드를 이해하려면, 먼저 이 보이지 않는 세계를 잠깐 들여다봐야 합니다.
클라이언트(Client)와 서버(Server)
카페를 떠올려보세요.
- 손님이 카운터에 가서 "아메리카노 한 잔 주세요"라고 주문합니다.
- 바리스타가 커피를 만들어서 손님에게 건네줍니다.
웹도 똑같습니다.
- 클라이언트(Client) = 손님 = 여러분의 웹 브라우저(Chrome, Safari 등)
- 서버(Server) = 바리스타 = 웹페이지 데이터를 보관하고 있는 컴퓨터
브라우저가 "인스타그램 로그인 페이지 보여주세요!"라고 요청하면, 서버가 해당 페이지의 데이터를 만들어서 보내줍니다.
URL — 서버의 주소
카페에 가려면 주소를 알아야 하듯, 서버에도 주소가 있어요. 이 주소를 URL(Uniform Resource Locator)이라고 부릅니다.
브라우저 주소창에 이런 걸 본 적 있죠?
https://www.instagram.com/accounts/login
하나씩 뜯어보면:
| 부분 | 의미 | 비유 |
|---|---|---|
https:// |
통신 방식 (암호화된 연결) | 교통수단 (택시? 버스?) |
www.instagram.com |
서버 이름 | 건물 이름 (인스타그램 본사) |
/accounts/login |
서버 안의 특정 페이지 | 몇 층 몇 호실 (로그인 페이지) |
HTTP — 주문서와 응답
브라우저와 서버가 대화할 때 사용하는 약속을 HTTP(HyperText Transfer Protocol)라고 해요. 어렵게 들리지만 카페 비유로 보면 간단합니다.
- HTTP 요청(Request) = 주문서. 브라우저가 서버에 "이 페이지 주세요!"
- HTTP 응답(Response) = 완성된 음료. 서버가 브라우저에 "여기요, 받으세요!"
서버가 보내주는 응답 안에는 뭐가 들어있을까요? 바로 HTML 코드입니다. 브라우저는 이 HTML을 읽고, 화면을 그려서 여러분에게 보여줍니다.
HTML — 서버가 보내주는 설계도
HTML(HyperText Markup Language)은 웹페이지의 설계도입니다.
건물을 지으려면 설계도가 필요하듯, 웹페이지를 화면에 그리려면 HTML이 필요해요. HTML이 "여기에 제목을 넣고, 그 아래에 입력칸을 넣고, 맨 아래에 저작권을 넣어"라고 지시하면, 브라우저가 그대로 화면을 구성합니다.
오늘 우리가 배우는 것이 바로 이 HTML이에요. 설계도를 직접 작성하는 겁니다!
Step 2: "개발자의 작업실을 꾸미자"
설계도를 그리려면 도구가 필요하겠죠? 우리의 도구는 VS Code라는 코드 편집기와, Live Server라는 확장 프로그램입니다.
VS Code 설치
VS Code는 전 세계 개발자가 가장 많이 사용하는 코드 편집기예요. 이미 설치되어 있다면 다음으로 넘어가세요!
설치 후 처음 열면 영어로 되어 있을 수 있어요. 왼쪽 확장 탭에서 Korean Language Pack을 검색해서 설치하면 한국어로 바뀝니다.
Live Server 확장 설치
VS Code 왼쪽에 네모 4개가 쌓인 아이콘이 보이시나요? 그게 확장(Extension) 탭입니다. 여기서 Live Server를 검색하고 Install 버튼을 눌러주세요.
Live Server가 하는 일은 간단해요. 코드를 저장하면, 브라우저가 자동으로 새로고침됩니다. 일일이 F5를 누를 필요가 없어요!
첫 번째 파일 만들기
이제 프로젝트 폴더를 만들고 첫 파일을 생성해봅시다.
- 바탕화면이나 원하는 위치에
instagram-clone-frontend폴더를 만듭니다. - VS Code에서 파일 → 폴더 열기로 이 폴더를 엽니다.
- 왼쪽 탐색기에서 새 파일 아이콘을 누르고,
index.html이라고 입력합니다. - 파일 안에 딱 한 줄만 써보세요.
안녕하세요!
저장(Ctrl + S, 맥은 Cmd + S) 한 뒤, 화면 하단의 Go Live 버튼을 클릭하세요!
브라우저가 열리면서 "안녕하세요!"가 보이나요? 축하합니다! 여러분은 방금 첫 웹페이지를 만들었어요. 코드를 한 줄 쳤더니 화면에 바로 나타났죠? 이게 프론트엔드의 매력입니다.
🙋 학생 질문 — "index.html이라는 이름이 꼭 이래야 하나요?"
파일 이름은 자유롭게 지을 수 있어요. hello.html, my-page.html 다 괜찮습니다.
그런데 index.html은 특별한 이름이에요. 웹 서버가 폴더에 들어왔을 때 가장 먼저 찾는 파일이 index.html이거든요.
책으로 치면 목차 페이지와 같은 역할이라 관례적으로 메인 페이지에 이 이름을 씁니다.
Step 3: "HTML 문서의 뼈대"
"안녕하세요!" 한 줄로 웹페이지가 만들어지긴 했지만, 이건 제대로 된 HTML이 아니에요. 기둥 없이 지붕만 올린 건물과 같습니다. 이제 HTML 문서의 정식 구조를 배워봅시다.
태그(Tag) — HTML의 기본 단위
HTML은 태그(Tag)라는 명령어로 이루어져 있어요. 태그는 꺾쇠괄호(< >)로 감싸서 표현합니다.
<title>내 첫 웹페이지</title>
이 한 줄을 뜯어보면:
| 요소 | 이름 | 역할 |
|---|---|---|
<title> |
여는 태그(Opening Tag) | "여기서부터 제목이야" |
내 첫 웹페이지 |
내용(Content) | 실제 들어가는 텍스트 |
</title> |
닫는 태그(Closing Tag) | "제목은 여기까지야" |
여는 태그와 닫는 태그 사이에 내용을 넣는 구조, 이것이 HTML의 전부입니다!
속성(Attribute) — 태그에 붙이는 추가 정보
태그에 추가 정보를 붙일 수 있어요. 이걸 속성(Attribute)이라고 부릅니다.
<html lang="ko">
lang= 속성 이름 (이 페이지의 언어)"ko"= 속성 값 (한국어)
"이 HTML 문서는 한국어로 작성됐어요"라고 브라우저에게 알려주는 거예요.
HTML 기본 구조
이제 index.html 파일을 열고 기존 내용을 지운 다음, 아래 코드를 따라 쳐보세요.
<!-- instagram-clone-frontend/index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 웹페이지</title>
</head>
<body>
안녕하세요! HTML의 세계에 오신 것을 환영합니다.
</body>
</html>
저장하면 브라우저에 "안녕하세요! HTML의 세계에 오신 것을 환영합니다."가 보일 거예요. 아까와 비슷해 보이지만, 이번에는 정식 구조를 갖춘 HTML입니다!
각 줄이 하는 일을 살펴볼게요.
| 코드 | 역할 |
|---|---|
<!DOCTYPE html> |
"이 문서는 HTML5 표준이에요" — 브라우저에게 알려주는 선언문 |
<html lang="ko"> |
HTML 문서의 시작. 모든 태그를 감싸는 최상위 태그 |
<head> |
눈에 보이지 않는 정보 (제목, 문자 인코딩 등) |
<meta charset="UTF-8"> |
한글이 깨지지 않도록 문자 인코딩을 지정 |
<title> |
브라우저 탭에 표시되는 페이지 제목 |
<body> |
화면에 보이는 모든 내용 |
⚠️ 주의: <head>는 사람 눈에 보이지 않는 메타 정보, <body>는 화면에 보이는 내용입니다. 이 둘을 헷갈리면 안 돼요!
💡 직접 바꿔보세요! <title> 안의 텍스트를 "인스타그램 클론"으로 바꾸고 저장해보세요. 브라우저 탭 이름이 바뀌는 걸 확인할 수 있어요.
Step 4: "이름표를 붙이자 — 시멘틱 태그"
HTML 기본 구조를 잡았으니, 이제 <body> 안을 더 체계적으로 나눠봅시다. 여기서 아주 중요한 개념이 등장합니다.
<div> — 이름표 없는 택배 상자
페이지를 영역별로 나누고 싶을 때, 가장 단순한 방법은 <div> 태그를 쓰는 거예요. <div>는 "나눈다(Division)"는 뜻으로, 그냥 빈 상자입니다.
<body>
<div>여기는 상단 영역</div>
<div>여기는 중앙 영역</div>
<div>여기는 하단 영역</div>
</body>
브라우저에서 보면 텍스트가 줄바꿈되어 보이긴 하지만, 이 상자들에는 이름표가 없어요. 10개, 20개 쌓이면 "어떤 div에 뭐가 들었지?" 알 수가 없습니다.
시멘틱(Semantic) 태그 — 의미가 담긴 이름표
시멘틱(Semantic)은 "의미가 있는"이라는 뜻이에요. 시멘틱 태그는 <div> 대신 용도가 이름에 드러나는 태그입니다.
같은 구조를 시멘틱 태그로 바꿔볼까요?
<body>
<header>여기는 머리글 영역</header>
<main>여기는 본문 영역</main>
<footer>여기는 바닥글 영역</footer>
</body>
브라우저 화면은 <div>를 썼을 때와 똑같아 보여요. 눈에 보이는 차이는 없습니다. 그렇다면 왜 굳이 시멘틱 태그를 쓸까요?
왜 시멘틱 태그인가? — 세 가지 이유
첫째, 시각 장애인을 위한 스크린 리더(Screen Reader)
시각 장애인 사용자는 화면을 눈으로 볼 수 없어서, 스크린 리더라는 프로그램이 페이지를 소리로 읽어줍니다.
<div>를 만나면: 아무 안내 없이 그냥 텍스트만 읽습니다.<nav>를 만나면: "탐색 영역입니다"라고 안내한 뒤 내용을 읽어줍니다.
이름표 없는 택배 상자와 "냉장고"라고 적힌 가구, 어떤 쪽이 더 편할까요?
둘째, 검색엔진(구글, 네이버)
검색엔진의 로봇(크롤러)이 웹페이지를 방문해서 내용을 분석합니다.
<main> 태그 안의 내용을 핵심 콘텐츠로 인식하고, <nav>는 메뉴로 인식해요.
시멘틱 태그가 있으면 검색 결과에 더 잘 노출됩니다.
셋째, 동료 개발자 (그리고 6개월 후의 나)
<div>만 가득한 코드보다 <header>, <main>, <footer>가 적힌 코드가 읽기 쉽죠? 코드만 봐도 "아, 여기가 머리글이구나" 바로 알 수 있습니다.
5대 시멘틱 태그 정리
| 태그 | 영어 뜻 | 역할 | 비유 |
|---|---|---|---|
<header> |
머리글 | 페이지 상단 — 로고, 제목 | 신문의 제호 |
<nav> |
Navigation(탐색) | 메뉴, 링크 모음 | 책의 목차 |
<main> |
본문 | 페이지의 핵심 내용 | 기사 본문 |
<section> |
구획 | 본문 안의 주제별 구분 | 기사의 소단원 |
<footer> |
바닥글 | 페이지 하단 — 저작권, 연락처 | 신문 하단 발행 정보 |
직접 만들어보기
index.html의 <body> 안을 아래처럼 바꿔보세요.
<!-- instagram-clone-frontend/index.html -->
<body>
<header>머리글 — 로고가 들어갈 곳</header>
<nav>탐색 — 메뉴가 들어갈 곳</nav>
<main>
<section>본문 첫 번째 구획</section>
<section>본문 두 번째 구획</section>
</main>
<footer>바닥글 — 저작권 정보</footer>
</body>
저장하고 브라우저를 확인해보세요. 텍스트만 나열된 것처럼 보이죠? CSS를 배우면 이 영역들에 색깔과 레이아웃을 입혀서 확 달라지게 만들 수 있어요. 지금은 구조만 잡는 것에 집중합시다.
🙋 학생 질문 — "그러면 div는 아예 안 쓰는 건가요?"
아니에요! <div>는 여전히 많이 씁니다.
시멘틱 태그로 표현할 수 없는 순수한 그룹핑이 필요할 때 <div>를 사용해요.
예를 들어, CSS 스타일을 적용하기 위해 여러 요소를 하나로 묶을 때가 그렇습니다.
"의미가 있으면 시멘틱 태그, 의미 없이 묶기만 하면 <div>" — 이렇게 기억하면 편해요.
Step 5: "인스타그램 로그인 페이지의 뼈대를 세우자"
이론은 충분합니다! 지금까지 배운 시멘틱 태그를 총동원해서, 진짜 인스타그램 로그인 페이지의 뼈대를 만들어볼게요.
실제 인스타그램 로그인 페이지 분석
먼저 인스타그램 로그인 페이지를 열어보세요. 화면을 크게 세 영역으로 나눌 수 있습니다.
| 영역 | 눈에 보이는 것 | 시멘틱 태그 |
|---|---|---|
| 상단 | 로고 "Instagram" | <header> |
| 중앙 | 로그인 안내 + 입력칸 + 버튼 | <main> 안의 <section> |
| 하단 | 저작권, 언어 선택 | <footer> |
로그인 페이지에는 메뉴가 없으니 <nav>는 아직 필요 없어요. 네비게이션 메뉴는 다음 시간(A-2)에 추가합니다.
HTML로 조립하기
index.html을 아래 코드로 완전히 교체해봅시다.
여기서 처음 보는 태그 두 개가 나옵니다. 잠깐 설명드릴게요.
<h1>— 제목(Heading) 태그입니다. 가장 중요한 제목에 사용해요.<p>— 문단(Paragraph) 태그입니다. 일반 텍스트를 감쌉니다.
이 태그들은 다음 시간에 자세히 배울 거예요. 지금은 "제목은 <h1>, 문단은 <p>로 감싼다" 정도만 기억해두세요.
<!-- instagram-clone-frontend/index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram - 로그인</title>
</head>
<body>
<header>
<h1>Instagram</h1>
</header>
<main>
<section>
<p>친구들의 사진과 동영상을 보려면 로그인하세요.</p>
<!-- 로그인 폼은 A-4 모듈에서 추가합니다 -->
</section>
</main>
<footer>
<p>© 2026 Instagram Clone Project</p>
</footer>
</body>
</html>
저장하고 브라우저를 확인해보세요.
"이게 인스타그램이라고요?" 네, 아직은 스타일이 없어서 투박해요. 하지만 뼈대는 완벽합니다. CSS를 입히면 인스타그램처럼 예뻐질 거예요. 지금 중요한 건 구조가 올바르게 잡혀있다는 겁니다.
🙋 학생 질문 — " 이건 뭔가요?"
<!-- 내용 --> 은 주석(Comment)이에요. 브라우저가 이 부분을 완전히 무시합니다.
화면에 표시되지 않아요. 개발자가 코드에 메모를 남길 때 사용합니다.
"여기에 나중에 로그인 폼을 추가할 거야"라고 미래의 나에게 쪽지를 붙여둔 거죠.
🙋 학생 질문 — "© 이건 무슨 암호인가요?"
©는 HTML 특수 문자(Entity)예요.
브라우저에서 ©(저작권 기호)로 바뀌어 보입니다.
키보드로 직접 입력하기 어려운 기호를 이런 코드로 표현할 수 있어요.
지금은 "특수 기호를 넣는 방법이 있구나" 정도만 알아두시면 됩니다.
💡 새로 등장한 태그 정리
| 태그 | 의미 | 쓴 곳 |
|---|---|---|
<meta name="viewport" ...> |
모바일 화면에서도 페이지가 올바르게 보이도록 설정 | <head> 안 |
<h1> |
가장 중요한 제목 (다음 시간에 자세히!) | 로고 |
<p> |
문단 (다음 시간에 자세히!) | 안내 문구, 저작권 |
<!-- --> |
주석 — 브라우저가 무시하는 메모 | 어디든 사용 가능 |
Step 6: "완성된 뼈대를 브라우저에서 검사하기"
마지막 스텝입니다! 우리가 만든 HTML이 브라우저에서 어떻게 인식되는지 직접 확인해봅시다.
Chrome DevTools 열어보기
Chrome 브라우저에서 우리 페이지를 열고, 키보드에서 F12를 눌러보세요. (맥은 Cmd + Option + I)
화면 옆이나 아래에 개발자 도구(DevTools)가 열립니다. Elements 탭에 우리가 작성한 HTML 코드가 트리(나무) 구조로 펼쳐져 보여요.
태그 위에 마우스를 올려보세요
Elements 탭에서 <header> 태그 위에 마우스를 올려보세요. 브라우저 화면에서 해당 영역이 파란색으로 하이라이트됩니다!
<main>, <footer>도 하나씩 올려보세요. 내가 작성한 시멘틱 태그가 화면의 어느 부분에 해당하는지 눈으로 확인할 수 있어요.
이 DevTools는 앞으로 계속 사용할 강력한 도구예요. 오늘은 "이런 게 있구나" 정도만 경험하고, CSS와 JavaScript를 배우면서 더 깊이 활용해봅시다.
마무리
오늘 배운 핵심 세 가지
🎯 하나, 웹은 클라이언트(브라우저)가 서버에 요청을 보내고, 서버가 HTML로 응답하는 구조입니다.
🎯 둘, HTML은 태그로 이루어진 웹페이지의 설계도이고, 기본 구조는 <!DOCTYPE> → <html> → <head> + <body> 입니다.
🎯 셋, 시멘틱 태그(<header>, <main>, <footer> 등)는 의미 있는 이름표를 붙여서 접근성, 검색엔진 최적화, 코드 가독성을 높여줍니다.
다음 시간 예고
오늘 만든 인스타그램 로그인 페이지는 뼈대만 세운 상태예요.
다음 시간에는 이 뼈대에 제목(<h1>~<h6>)과 문단(<p>), 그리고 페이지를 서로 연결하는 링크(<a>) 를 채워넣을 거예요.
네비게이션 메뉴도 만들어봅시다!
과제
[구현] 인스타그램 회원가입 안내 영역 추가하기
현재 index.html의 <main> 안에는 로그인 안내 <section> 하나만 있어요.
실제 인스타그램 로그인 페이지를 보면, 아래쪽에 "계정이 없으신가요? 가입하기"라는 영역이 있습니다.
<section> 태그를 하나 더 추가해서 회원가입 안내 영역을 만들어보세요. 어떤 시멘틱 태그를 선택했는지, 그 이유를 <!-- 주석 -->으로 적어보세요.
[탐구] 좋아하는 웹사이트 3곳에서 시멘틱 태그 찾아보기
좋아하는 웹사이트 3곳을 열고, F12를 눌러 Elements 탭에서 시멘틱 태그를 찾아보세요.
<header>,<nav>,<main>,<footer>가 있나요?- 아니면
<div>만으로 구성되어 있나요? - 각 사이트의 구조를 간단히 메모하고, 시멘틱 태그를 사용한 사이트와 그렇지 않은 사이트를 비교해보세요.
생각해볼 주제
1. 시멘틱 태그 없이 만든 페이지, 시각 장애인 사용자에게는 어떤 경험일까?
스크린 리더(Screen Reader)는 <nav> 태그를 만나면 "탐색 영역입니다"라고 안내하고, <main>을 만나면 "본문 영역입니다"라고 알려줍니다.
만약 모든 태그가 <div>라면, 스크린 리더는 어떤 안내를 해줄 수 있을까요?
2. HTML은 "프로그래밍 언어"일까?
"HTML을 배우고 있다"고 말하면 "그건 프로그래밍 언어가 아니야"라는 답변을 듣는 경우가 있습니다. HTML(HyperText Markup Language)과 프로그래밍 언어(Programming Language)의 근본적인 차이는 무엇일까요? "조건 판단"과 "반복"이라는 키워드를 힌트로 생각해보세요.
✅ 예시 답안정답 보기
🎯 [과제 1 예시답안] 인스타그램 회원가입 안내 영역 추가하기
채점 포인트
| 항목 | 배점 | 기준 |
|---|---|---|
<section> 태그 사용 |
40% | <main> 안에 두 번째 <section>을 올바르게 추가했는가 |
| 시멘틱 태그 선택 근거 주석 | 30% | <!-- --> 주석으로 왜 이 태그를 골랐는지 설명했는가 |
| HTML 구조 유지 | 20% | 기존 코드를 망가뜨리지 않고 추가했는가 |
| 텍스트 내용 | 10% | 회원가입 안내 문구가 자연스러운가 |
완성 코드
기존 <main> 안에 <section>을 하나 더 추가하면 됩니다.
<!-- instagram-clone-frontend/index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram - 로그인</title>
</head>
<body>
<header>
<h1>Instagram</h1>
</header>
<main>
<section>
<p>친구들의 사진과 동영상을 보려면 로그인하세요.</p>
<!-- 로그인 폼은 A-4 모듈에서 추가합니다 -->
</section>
<!-- 회원가입 안내 영역: <section>을 선택한 이유
- 로그인과 회원가입은 서로 다른 주제이므로 별도 구획으로 분리
- <aside>가 아닌 이유: 부가 정보가 아니라 핵심 행동 유도(CTA)
- <footer>가 아닌 이유: 페이지 바닥글이 아니라 본문의 일부 -->
<section>
<p>계정이 없으신가요? 가입하기</p>
</section>
</main>
<footer>
<p>© 2026 Instagram Clone Project</p>
</footer>
</body>
</html>
💡 튜터의 포인트
핵심은 왜 <section>인가를 설명할 수 있느냐입니다.
회원가입 안내는 로그인과 별개의 주제이면서도 페이지 본문(<main>)에 속하는 콘텐츠예요.
<aside>는 "곁다리 정보"에 쓰는 태그인데, 회원가입 유도는 곁다리가 아니라 핵심 행동 유도(CTA)입니다.
<footer>는 페이지 전체의 바닥글이지, 본문 안의 영역이 아니고요.
"정답이 하나만 있는 게 아니다"는 점도 기억해두세요.
<div>를 썼다면 틀린 건 아니지만, 주석으로 "시멘틱 태그 중 적절한 것을 찾지 못해서 <div>를 사용했다"고 적었다면 그것도 좋은 답입니다.
중요한 건 선택의 이유를 설명할 수 있느냐예요.
🎯 [과제 2 예시답안] 좋아하는 웹사이트 3곳에서 시멘틱 태그 찾아보기
채점 포인트
| 항목 | 배점 | 기준 |
|---|---|---|
| 3곳 이상 조사 | 30% | 서로 다른 웹사이트 3곳을 확인했는가 |
| 시멘틱 태그 존재 여부 기록 | 30% | <header>, <nav>, <main>, <footer> 4개 태그의 사용 여부를 기록했는가 |
| 비교 분석 | 40% | 시멘틱 태그를 쓴 사이트와 그렇지 않은 사이트의 차이를 자기 언어로 정리했는가 |
조사 예시
아래는 예시일 뿐이에요. 여러분이 직접 확인한 결과가 다를 수 있습니다!
| 웹사이트 | <header> |
<nav> |
<main> |
<footer> |
비고 |
|---|---|---|---|---|---|
| MDN Web Docs | O | O | O | O | 시멘틱 태그를 교과서처럼 사용 |
| 네이버 | O | O | X | O | <main> 대신 <div id="content"> 사용 |
| 개인 블로그 A | X | X | X | X | 전부 <div> — 접근성이 아쉬움 |
💡 튜터의 포인트
실제로 조사해보면 시멘틱 태그를 완벽하게 쓰는 사이트는 의외로 많지 않다는 걸 알게 됩니다.
특히 오래된 웹사이트나 레거시 코드는 <div>만으로 구성된 경우가 많아요.
그렇다고 시멘틱 태그가 쓸모없는 건 아닙니다. 최근에 만들어진 사이트일수록, 그리고 접근성을 신경 쓰는 조직일수록 시멘틱 태그 사용률이 높아요. 여러분이 지금 배우는 습관이 앞으로의 코드 품질을 결정합니다.
🤔 [생각해볼 주제 1 예시답안] 시멘틱 태그 없이 만든 페이지, 시각 장애인 사용자에게는?
[문제 상황 요약]
<div> 만으로 구성된 페이지와 시멘틱 태그를 쓴 페이지가 눈에 보이는 차이는 없습니다.
하지만 시각 장애인 사용자가 스크린 리더로 페이지를 탐색할 때는 경험이 완전히 달라집니다.
[튜터의 가이드 및 해설]
스크린 리더는 시멘틱 태그를 랜드마크(Landmark)로 인식합니다.
시멘틱 태그가 있을 때:
<nav>를 만나면: "탐색 영역, 항목 5개" — 사용자가 메뉴임을 즉시 파악<main>을 만나면: "본문 시작" — 광고/메뉴를 건너뛰고 본문으로 바로 이동 가능<footer>를 만나면: "바닥글 영역" — 연락처/저작권 정보임을 인지
스크린 리더 사용자는 랜드마크 간 점프 기능으로 페이지를 빠르게 탐색할 수 있어요.
<nav>로 바로 가거나, <main>으로 건너뛰거나, <footer>에서 연락처를 찾을 수 있습니다.
<div> 만 있을 때:
- 모든
<div>가 동일하게 읽힘: "그룹" — 무슨 그룹인지 알 수 없음 - 랜드마크 점프 불가 — 페이지 처음부터 끝까지 순서대로 읽어야 함
- 100개의
<div>중 본문이 어디인지 찾으려면 하나씩 다 들어야 함
이건 "눈을 감고 책을 읽는데, 목차가 있는 책 vs 목차 없이 표지부터 끝까지 넘기는 책"과 같습니다.
실무에서 왜 중요한가?
웹 접근성(Web Accessibility)은 단순한 선의가 아니라 법적 요구사항이기도 합니다. 한국의 「장애인차별금지법」과 「웹 접근성 품질 인증」, 미국의 ADA(Americans with Disabilities Act) 등이 공공기관과 일정 규모 이상 기업에 웹 접근성을 의무화하고 있어요.
🎯 면접관을 홀리는 핵심 멘트
"시멘틱 태그는 CSS와 무관하게 스크린 리더의 랜드마크 탐색을 가능하게 합니다.
<div>만으로 구성된 페이지에서는 시각 장애인 사용자가 100개의 요소를 순서대로 읽어야 하지만,<nav>,<main>,<footer>같은 시멘틱 태그가 있으면 원하는 영역으로 바로 점프할 수 있어요. 시멘틱 태그는 보이지 않는 사용자를 위한 기계가 읽을 수 있는 목차입니다."
🤔 [생각해볼 주제 2 예시답안] HTML은 "프로그래밍 언어"일까?
[문제 상황 요약]
"HTML 배우고 있어요"라고 말했더니 "그건 프로그래밍 언어 아니야"라는 답이 돌아왔습니다. HTML(HyperText Markup Language)과 JavaScript 같은 프로그래밍 언어는 무엇이 다를까요?
[튜터의 가이드 및 해설]
핵심 차이는 "판단과 반복을 할 수 있느냐"입니다.
프로그래밍 언어가 할 수 있는 것:
만약 (로그인 성공) 이면 → 피드 페이지로 이동
아니면 → "비밀번호가 틀렸습니다" 표시
게시물이 있는 동안 → 하나씩 화면에 그리기를 반복
프로그래밍 언어(JavaScript, Java, Python 등)는 조건 판단(if)과 반복(for/while)이 가능합니다. 입력에 따라 다른 결과를 만들어낼 수 있어요. 이런 능력을 가진 언어를 컴퓨터 과학에서는 튜링 완전(Turing Complete)하다고 표현합니다.
HTML이 하는 것:
<h1>Instagram</h1>
<p>친구들의 사진과 동영상을 보려면 로그인하세요.</p>
HTML은 "여기에 제목을 넣고, 여기에 문단을 넣어"라고 구조를 선언할 뿐입니다. 조건에 따라 다른 결과를 만들거나, 같은 동작을 반복하는 능력은 없어요. 그래서 HTML은 프로그래밍 언어가 아니라 마크업(Markup) 언어로 분류됩니다.
그렇다고 HTML이 덜 중요한가?
절대 아닙니다. 웹페이지의 구조와 의미를 정의하는 건 HTML만의 고유한 역할이에요. JavaScript가 아무리 강력해도, HTML 없이는 화면에 아무것도 그릴 수 없습니다.
비유하자면: HTML은 건물의 설계도이고, JavaScript는 설계도대로 지은 건물 안의 엘리베이터, 자동문, 조명 센서 같은 동적 장치입니다. 설계도 없이 엘리베이터만 있으면 건물이 될까요? 안 됩니다.
🎯 면접관을 홀리는 핵심 멘트
"HTML은 프로그래밍 언어가 아니라 마크업 언어입니다. 프로그래밍 언어의 핵심은 조건 판단과 반복 — 즉 입력에 따라 다른 결과를 만들어내는 능력인데, HTML은 이 능력이 없어요. HTML은 '무엇이 어디에 있는가'를 선언할 뿐입니다. 하지만 역할이 다른 것이지 중요도가 낮은 게 아닙니다. 시멘틱 HTML이 잘 짜여 있어야 접근성, SEO, 유지보수 모두 좋아지고, 이 위에서 JavaScript가 동적 기능을 수행합니다."