HTML(화면의 뼈대)

화면에 놓인 글·사진·버튼 하나하나에 "이건 제목", "이건 사진" 같은 이름표를 붙여 두는 방식이에요. 사람은 눈으로 보고 알지만 기계는 이 이름표만 보고 알아요.

쉽게 말하면

가게에 물건을 들여놓을 때 그냥 쌓아 두지 않죠. 매대에 올리고 이름표와 가격표를 붙여요. 손님도 알아보고, 직원도 알아보고, 재고 세는 사람도 알아보게요. HTML이 그 이름표예요. 화면에 올라가는 글·사진·버튼마다 "이건 간판 글씨", "이건 안내문", "이건 진열 사진", "이건 계산대 벨"이라고 붙여 두는 일이에요.

손님은 이름표가 없어도 눈으로 보고 대충 알아봐요. 하지만 기계는 이름표만 봐요. 검색 엔진도, 화면을 소리로 읽어 주는 기기도, 휴대폰 화면에 맞게 줄을 다시 접는 프로그램도 전부 이름표를 읽고 판단해요. 그래서 보기엔 똑같은 두 화면이 기계 앞에서는 전혀 다른 물건이 돼요.

이름표가 없는 화면

큰 글씨 / 봄맞이 할인 작은 글씨 / 3월 한 달 사진 / (설명 없음)

사람 눈에는 제목처럼 보이지만, 기계는 "그냥 큰 글자"로만 알아요. 검색에도 제목으로 안 잡히고, 소리로 읽어 주는 기기는 어디가 제목인지 몰라요.

이름표가 붙은 화면

제목 / 봄맞이 할인 안내문 / 3월 한 달 사진 / 봄 신메뉴 접시(설명 붙음)

보이는 모습은 같은데 기계가 뜻을 알아요. 검색 결과에 제목으로 나오고, 눈이 불편한 손님에게도 순서대로 읽혀요.

이름표 몇 개만 알면 화면이 읽혀요

이름표는 꺾쇠 괄호 안에 짧은 영어 단어로 써요. 종류가 백 개가 넘지만 실제로 화면을 이루는 건 열 개 안쪽이에요. 사장님이 알아야 할 건 문법이 아니라 무엇이 무엇을 뜻하는지예요.

이름표	가게로 치면	화면에서 하는 일
h1, h2, h3	간판, 코너 표지판, 선반 라벨	제목이에요. h1이 제일 큰 제목이고 숫자가 커질수록 아래 단계예요. 한 장에 h1은 하나가 정석이에요
p	벽에 붙인 안내문	문단이에요. 설명하는 글은 거의 다 이거예요
img	진열해 둔 상품 사진	사진이에요. 사진 설명을 같이 적는 칸(alt)이 있어요
a	전단지에 적힌 "자세히 보기"	누르면 다른 곳으로 가는 링크예요
button	계산대 호출 벨	누르면 무슨 일이 일어나는 버튼이에요. 이동이 아니라 동작이에요
ul, li	메뉴판의 항목 줄	목록이에요. ul이 판이고 li가 한 줄이에요
form, input	손으로 적는 주문서와 빈칸	손님이 이름·연락처를 적어 보내는 곳이에요
header, footer	가게 앞머리와 맨 아래 안내	화면 위쪽 묶음과 아래쪽 묶음이에요

이름표는 여는 표와 닫는 표가 짝이에요. 상자에 뚜껑을 덮는 것과 같아요. 여는 표에서 시작해 닫는 표까지가 그 상자 안이고, 상자 안에 또 상자를 넣을 수 있어요. 안내문 상자 안에 링크 상자를 넣으면 문장 중간에 눌리는 글자가 생기는 식이에요.

짝이 어긋나면 화면이 무너져요

닫는 표를 빼먹으면 그 상자가 계속 열려 있는 상태가 돼요. 그러면 뒤에 오는 내용이 전부 그 상자 안으로 빨려 들어가서 아래쪽 전체가 이상하게 보여요. 화면 절반이 갑자기 파란 글씨가 됐다거나 여백이 다 밀렸다면 대부분 이 문제예요. 원인은 밀린 곳이 아니라 그 위에 있어요.

HTML은 뼈대까지만 해요

화면 하나를 만드는 데는 서로 다른 일 세 가지가 들어가요. 이걸 섞어 생각하면 개발자와 말이 안 통해요. 셋은 각각 다른 파일이고 다른 사람이 고칠 수도 있어요.

역할	가게로 치면	이걸 고치면
HTML(뼈대)	매대 배치와 이름표	무엇이 어떤 순서로 있는지가 바뀌어요. 문구·사진·버튼의 존재 자체
CSS(모양)	인테리어, 조명, 간판 서체와 색	보이는 모습만 바뀌어요. 색·크기·여백·글꼴
자바스크립트(동작)	직원이 움직이는 일	누르면 열리고 계산되고 보내지는 반응이 바뀌어요

그래서 "글씨 색만 바꿔 주세요"는 모양 쪽 일이고, "이 문구를 위로 올려 주세요"는 뼈대 쪽 일이에요. 뼈대를 건드리는 수정이 보통 더 크고 조심스러워요. 매대를 옮기면 그 옆 배치가 다 따라 움직이니까요.

화면을 눈으로 직접 만지는 건 캔버스 편집기 쪽이 편하고, 색과 글꼴만 바꾸고 싶다면 글꼴 이야기를 보는 게 빨라요. 이 문서는 그 아래에 깔린 뼈대 이야기예요.

왜 사장님이 이걸 알아야 하나

직접 쓸 일은 없어요. 그런데 이름표가 제대로 붙었는지 아닌지가 돈이 되는 네 가지를 좌우해요.

1검색 노출. 검색 엔진은 제목 이름표와 사진 설명을 보고 이 화면이 무슨 화면인지 판단해요. 큰 글씨로만 그려 둔 제목은 제목으로 세어 주지 않아요. 자세한 건 검색 노출 쪽에 있어요.
2눈이 불편한 손님. 화면을 소리로 읽어 주는 기기는 이름표 순서대로 읽어요. 이름표가 없으면 "버튼"이라고만 읽고 무슨 버튼인지 말해 주지 못해요. 접근성 이야기예요.
3휴대폰 화면. 좁은 화면에서 줄을 다시 접을 때 기준이 이름표예요. 뼈대가 반듯하면 알아서 접히고, 엉켜 있으면 글자가 잘려요. 반응형
4나중에 수정하는 값. 이름표가 정직하게 붙어 있으면 남이 봐도 어디를 고쳐야 하는지 바로 알아요. 뒤죽박죽이면 사람을 바꿀 때마다 파악하는 시간을 다시 사야 해요.

장면 1 · 외주 개발자가 말했다

“여기 제목이 h1이 아니라 그냥 큰 글씨로 돼 있어요. 이름표부터 정리할게요.”

이제 해석돼요. 보기엔 제목인데 기계는 제목으로 못 읽는 상태라는 뜻이에요. 화면은 아무 문제 없어 보이니까 사장님 눈에는 헛일처럼 느껴지지만, 검색 노출과 낭독 기기가 여기서 갈려요. 돈 받고 하는 정리 중에 가장 값어치 있는 것에 속해요.

장면 2 · 다른 화면에서 문구를 복사해 붙였더니 아래가 무너졌다

“글자만 옮겼는데 그 아래 전체가 파란 글씨가 되고 여백이 다 밀렸어요.”

글자만 옮긴 게 아니라 열려 있는 이름표까지 반쪽만 옮긴 거예요. 뚜껑 없는 상자가 하나 생기면 뒤에 오는 내용이 다 그 안에 들어가요. 무너진 지점을 고치려 하지 말고, 그 위에서 짝이 안 맞는 표를 찾아야 해요. 되돌리기가 가장 빠른 길이고요(되돌리기).

바이브캠퍼스에서는 어디에 있나

바이브캠퍼스에서는 사장님이 이름표를 직접 쓰지 않아요. 말로 원하는 화면을 설명하면 뼈대가 만들어져요. 그래도 이 문서를 읽어 둔 값이 나오는 순간이 세 번 있어요.

1주문할 때. "제목은 하나, 그 아래 안내문, 그다음 사진과 신청 버튼"처럼 순서로 말하면 원하는 모양이 한 번에 나와요. 색부터 말하는 것보다 훨씬 잘 맞아요(프롬프트).
2코드를 열어 볼 때. 만들어진 화면의 코드를 볼 수 있어요. 전부 이해할 필요 없이 h1·p·img·button만 눈에 들어오면 어디가 무엇인지 짚을 수 있어요.
3남에게 넘길 때. 코드를 내려받아 다른 사람에게 맡길 때, 뼈대가 반듯한지가 곧 인수인계 난이도예요(인수인계).

직접 해보기

제목·안내문·버튼 순서로 화면 하나 만들어 보세요

스튜디오에서 "제목 한 줄, 아래에 짧은 안내문, 그 아래 사진 하나와 신청 버튼"처럼 순서대로 말해 보세요. 방금 읽은 이름표들이 그대로 화면이 되는 걸 눈으로 확인할 수 있어요.

스튜디오 열기

만드는 순서 자체가 처음이라면 템플릿으로 시작하기가 편해요. 이미 뼈대가 반듯하게 짜인 화면을 가져와서 글자만 내 가게 것으로 바꾸는 방식이에요.

헷갈리기 쉬운 것

HTML이 프로그래밍인가요? 아니에요. HTML은 계산하거나 판단하지 못해요. "무엇이 어디에 있다"만 적는 목록이에요. 재고를 세거나 할인율을 계산하는 건 자바스크립트나 서버가 해요.

글씨 크기는 HTML로 정하나요? 이름표가 크기를 데리고 오긴 해요. h1은 원래 크게 보이거든요. 하지만 크기를 정하려고 h1을 쓰면 안 돼요. h1은 "제일 중요한 제목"이라는 뜻이고 크기는 모양 쪽(CSS)에서 따로 정해요. 크게 보이고 싶어서 간판을 하나 더 세우면 손님이 어느 가게인지 헷갈려요.

화면 한 장이 파일 한 개인가요? 기본적으로는 그래요. 소개·가격·문의를 각각 다른 주소로 두면 뼈대도 각각이에요. 한 장에 다 넣을지 나눌지는 여러 페이지 쪽 판단이에요.

자주 묻는 것

Q. 저도 HTML을 배워야 하나요?: 쓰는 법은 안 배워도 돼요. 대신 읽는 눈만 가지면 크게 이득이에요. h1은 제목, p는 문단, img는 사진, a는 링크, button은 동작. 이 다섯 개면 개발자와 대화가 됩니다.
Q. 워드로 글 쓰는 것과 뭐가 달라요?: 워드는 "이 글자를 크고 굵게"라고 꾸미는 도구예요. HTML은 "이건 제목이다"라고 뜻을 붙여요. 그래서 워드 문서를 그대로 붙여 넣으면 겉모습만 오고 뜻이 안 와요. 붙여 넣은 다음 제목을 제목으로 다시 잡아 줘야 해요.
Q. 사진 설명(alt)은 꼭 적어야 하나요?: 적으세요. 세 가지가 한꺼번에 좋아져요. 눈이 불편한 손님이 무슨 사진인지 알 수 있고, 검색이 그 사진을 이해하고, 사진이 안 열렸을 때 대신 그 글이 보여요. 한 줄이면 충분해요. "봄 신메뉴 접시 사진" 정도요.
Q. 화면이 이상해졌어요. HTML 문제인지 어떻게 알아요?: 글자와 배치가 무너졌으면 뼈대나 모양 문제예요. 특히 어떤 지점 아래로 전부 이상해졌다면 짝이 안 맞는 이름표가 그 위에 있어요. 반대로 눌러도 아무 반응이 없거나 빨간 글씨가 뜨는 건 동작 쪽 문제예요(에러 메시지 읽기).
Q. 만든 화면의 HTML은 제 것인가요?: 네. 코드를 내려받아 다른 곳에서 그대로 쓸 수 있어요(코드 내보내기). 뼈대는 특정 회사 전용 형식이 아니라 모든 브라우저가 읽는 공통 표기라서, 옮겨도 그대로 보여요.

확인해 보세요

외주 개발자가 "제목이 h1이 아니라 그냥 큰 글씨로 돼 있어요"라고 했어요. 무슨 뜻일까요?

하나 더

상품 사진에 설명(alt)을 안 적으면 어떻게 되나요?

더 깊이 (안 읽어도 괜찮아요)

뜻이 있는 이름표와 무지 상자 · 이름표 중에 아무 뜻이 없는 것도 있어요(div). 그냥 상자예요. 화면 전체를 무지 상자로만 만들어도 보이기는 똑같이 보여요. 그래서 급하게 만든 화면은 대개 무지 상자 더미예요. 문제는 기계가 볼 게 없다는 거예요. 창고에 똑같은 무지 박스만 쌓여 있으면 사람이 하나하나 열어 봐야 하는 것과 같아요. header·main·footer처럼 뜻이 있는 이름표를 쓰는 걸 시맨틱 마크업이라고 불러요. 개발자가 이 말을 쓰면 이름표를 정직하게 붙이자는 뜻이에요.

닫는 표가 없는 이름표 · 짝이 원칙인데 예외가 있어요. 안에 넣을 내용이 애초에 없는 것들이에요. 사진(img)이나 줄바꿈(br)이 그래요. 사진은 그 자체로 끝이라 뚜껑을 덮을 게 없어요. 그래서 코드에서 닫는 표가 안 보여도 그게 빠진 게 아닐 수 있어요.

브라우저는 틀려도 알려 주지 않아요 · 이름표를 틀리게 써도 브라우저는 오류를 띄우지 않아요. 나름대로 짐작해서 어떻게든 그려 줘요. 이게 HTML이 오래 버틴 이유이자 함정이에요. 틀렸다고 알려 주지 않으니 틀린 채로 오래 굴러가요. 브라우저마다 짐작이 조금씩 달라서 "내 컴퓨터에서는 잘 보이는데 손님 폰에서는 깨진다"는 일도 여기서 나와요. 그래서 뼈대를 반듯하게 유지하는 게 취향이 아니라 안전장치예요.

이것만 기억하세요

·HTML은 화면 속 글·사진·버튼에 붙이는 이름표예요. 사람은 몰라도 되지만 기계는 이것만 봐요
·h1은 제목, p는 문단, img는 사진, a는 링크, button은 동작. 다섯 개면 대화가 돼요
·뼈대(HTML)·모양(CSS)·동작(자바스크립트)은 다른 일이에요. 뼈대 수정이 제일 큰 수정이에요
·어떤 지점 아래로 전부 무너졌으면 짝이 안 맞는 이름표가 그 위에 있어요
·사진 설명 한 줄이 검색 노출과 접근성을 같이 올려 줘요