HTML과 CSS — 내가 처음 '화면'을 만든 날

Coursera Meta Front-End Developer 코스

처음 코드를 입력했을 때, 솔직히 말하면 아무것도 이해하지 못한 상태였습니다.

그저 화면에 네모 하나가 나타나는 것만으로도 신기했습니다. 내가 만든 것이라는 실감이 없었고, 그래서 오히려 계속 보게 됐습니다. 그 작은 사각형은 단순한 코드의 결과물이 아니었습니다. 그것은 '구조를 만드는 사고'의 시작이었습니다.

Coursera의 Meta Front-End Developer Certificate 과정, 그중에서도 HTML과 CSS를 처음 다루는 이 단원은 비개발자인 저에게 꽤 낯설고도 특별한 경험이었습니다. 단순한 마크업 언어를 배우는 것을 넘어서, '화면을 설계한다'는 개념이 무엇인지를 처음으로 몸으로 느낀 시간이었습니다.

1. <div> 하나로 시작된 세계

프론트엔드의 시작은 놀랍도록 단순합니다.

이 한 줄이 의미하는 것은 단순한 '박스'가 아닙니다. 웹페이지를 구성하는 모든 것은 결국 '구역'입니다. 어디에 무엇을 배치할 것인가, 무엇이 위에 있고 아래에 있는가, 어떤 요소끼리 묶이는가 — 이 모든 설계 질문이 <div> 하나에서 출발합니다.

처음에는 이해가 되지 않았습니다. 왜 이렇게 많은 <div>를 사용하는지, 왜 굳이 이렇게 나누는지. 하지만 어느 순간 깨닫습니다.

"아, 이건 화면을 만드는 것이 아니라 공간을 설계하는 것이구나."

HTML 구조는 단순한 코드가 아니라 건축의 설계도와 같습니다. 어떤 방이 어느 위치에 있고, 그 방에 무엇이 들어가는지를 미리 정하는 일. 그 감각을 <div> 하나에서 처음으로 느낄 수 있었습니다.

2. HTML — 의미를 부여하는 언어

Meta 과정이 다른 입문 강의들과 구별되는 지점 중 하나는, HTML을 단순한 '화면 표시 언어'가 아니라 '의미를 정의하는 언어(Semantic Language)'로 가르친다는 점입니다.

이 코드는 단순히 글자 크기를 조절하는 것이 아닙니다. <h1>은 이 페이지의 핵심 주제를, <h2>는 하나의 항목을, <p>는 그에 대한 설명을 나타냅니다. 브라우저는 이 태그들을 통해 콘텐츠의 의미와 위계를 파악합니다.

이 구조를 제대로 이해하면, 웹페이지는 단순한 화면이 아니라 '정보 구조(Information Architecture)'가 됩니다. 검색 엔진이 페이지를 읽는 방식, 스크린 리더가 시각 장애인에게 내용을 전달하는 방식 — 모두 이 의미론적 마크업에 기반합니다.

처음에는 이 개념이 다소 추상적으로 느껴질 수 있습니다. 하지만 Little Lemon 메뉴 페이지 과제를 직접 만들어가며, 태그 하나하나가 단순한 꾸밈이 아니라 의미의 선언이라는 것을 자연스럽게 체득하게 됩니다.

3. CSS — 보이지 않는 힘의 체계

HTML이 '구조'라면, CSS는 '표현'입니다. 처음 CSS를 접했을 때는 단순히 색을 바꾸고 글자를 정렬하는 정도로 느껴졌습니다.

그러나 조금만 더 들어가면 알게 됩니다. CSS는 '보이게 만드는 기술'이 아니라, '어떻게 보여야 하는지를 결정하는 시스템'입니다. 선택자(selector), 속성(property), 값(value) — 이 세 요소의 조합이 화면의 모든 시각적 결정을 담당합니다.

특히 이 과정에서는 CSS 선택자의 우선순위(Specificity)와 상속(Inheritance) 개념을 함께 다룹니다. 이것이 바로 많은 입문자들이 "왜 내 CSS가 적용이 안 되지?"라는 벽에 부딪힐 때 필요한 핵심 개념입니다. 강의는 이 부분을 실제 코드와 함께 단계적으로 설명해주어, 막연한 시행착오를 줄여줍니다.

4. Bootstrap — 자동화된 설계 시스템

그리고 등장하는 것이 Bootstrap입니다.

이 몇 줄만으로 반응형 2열 레이아웃이 자동으로 만들어집니다. Bootstrap은 CSS 프레임워크(Framework)입니다. 수많은 개발자들이 반복적으로 사용하는 레이아웃 패턴을 미리 클래스(Class)로 정의해둔 시스템입니다. container, row, col — 이 세 단계의 계층 구조가 Bootstrap 그리드 시스템의 전부입니다.

Meta 과정은 Bootstrap을 단순한 도구로만 소개하지 않습니다. 왜 이런 구조가 필요한지, 내부에서 어떤 Flexbox 원리로 동작하는지를 함께 설명합니다. 그 덕에 Bootstrap 클래스를 외우는 것이 아니라, 그 원리를 이해하면서 사용할 수 있게 됩니다.

5. 반응형 — 화면은 하나가 아니다

Bootstrap을 통해 처음으로 깨닫는 것이 있습니다. 화면은 하나가 아니라는 것입니다.

이 한 줄이 말하는 것은 간결하면서도 깊습니다.

"작은 화면에서는 하나의 전체 열로, 큰 화면(lg 이상)에서는 절반 너비의 두 열로 나눠라."

이것은 단순한 기술적 조건문이 아닙니다. 다양한 환경에서 콘텐츠를 보는 사용자를 고려하는 설계 철학입니다. 스마트폰으로 접속하는 사람, 태블릿을 쓰는 사람, 데스크탑 앞에 앉은 사람 — 그 모든 경험을 하나의 HTML 파일로 아우르는 것. 그것이 반응형 웹 디자인(Responsive Web Design)의 핵심입니다.

Little Lemon 메뉴 페이지 과제에서 바로 이 반응형 구조를 직접 구현하게 됩니다. 단순한 실습처럼 보이지만, 그 안에는 프론트엔드 개발의 근본적인 사고 방식이 담겨 있습니다.

프론트엔드 핵심 개념 정리

6. "이게 다야?"에서 시작되는 진짜 공부

처음 HTML과 CSS를 접하면 이런 생각이 듭니다.

"생각보다 쉬운데?"

그런데 금방 깨닫습니다. 정렬이 조금만 틀어져도 전체 레이아웃이 무너지고, 구조가 복잡해지면 코드도 복잡해지며, 작은 수정 하나가 예상치 못한 곳에 영향을 줍니다.

이때부터 진짜 공부가 시작됩니다. '왜 이렇게 되는 거지?'라는 질문이 쌓이면서, 단순한 따라하기가 아니라 원리를 이해하는 단계로 넘어갑니다. Meta 과정의 강점이 바로 여기에 있습니다. 각 단계에서 '왜'에 대한 설명이 충분하기 때문에, 막혔을 때 그 질문을 스스로 해결해나갈 수 있는 기반이 생깁니다.

물론 아쉬운 점도 있습니다. 강의의 영어 의존도가 높고, 과제의 난이도 편차가 구간마다 다소 불균등하게 느껴집니다. 또한 Bootstrap 같은 프레임워크를 소개한 뒤 심화 응용까지 연결되지 않는 부분이 아쉽기도 합니다. 그럼에도 불구하고, 비개발자가 프론트엔드의 구조적 사고를 처음 익히기에 이 과정은 매우 잘 설계되어 있습니다.

7. 내가 처음 '화면'을 만든 날

코드를 입력하고, 브라우저를 새로 고침했을 때의 그 순간을 잊기 어렵습니다.

로고가 가운데에 반듯하게 정렬되어 있고, 메뉴 항목들이 두 열로 나뉘어 깔끔하게 배치되어 있었습니다. 아주 작은 페이지였지만, 화면 전체가 처음으로 내 의도대로 구성되어 있었습니다.

그 순간 들었던 생각은 단순하고도 강렬했습니다.

"내가 이걸 만들었다."

그것은 기술적 성취감이라기보다, 처음으로 디지털 공간 안에 '내가 설계한 구조'를 만들어냈다는 감각이었습니다. 프론트엔드 개발자들이 매일 경험하는 그 감각을 비로소, 아주 작은 규모로나마 느낄 수 있었습니다.

에필로그

처음에는 아무것도 이해하지 못한 채 시작했습니다. 태그가 뭔지, 클래스가 뭔지, 왜 이렇게 중첩해서 쓰는지. 하지만 지금은 조금씩 보이기 시작합니다.

HTML은 구조이고, CSS는 표현이며, Bootstrap은 그 모든 것을 빠르게 실현하는 설계 도구입니다.

그리고 프론트엔드 개발은 단순한 코딩이 아닙니다. 그것은 사용자가 보는 세계를 만드는 일입니다. 어떤 정보를 어떤 방식으로, 어떤 환경에서 보여줄 것인가 — 이 질문에 대한 답을 코드로 구현하는 일입니다.

나는 이제 막 그 세계의 입구에 들어섰습니다. 앞으로 얼마나 더 많은 것들이 펼쳐질지, 이 설렘이 오래 지속되기를 바랍니다.

---

Coursera Meta Front-End Developer Certificate | HTML & CSS 편