코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초부터 실무까지

AI가 코딩하는 시대, HTML은 왜 배워야 할까요?

코딩은 처음이라! 웹 개발의 시작은 HTML부터

AI가 코드를 만들어주는데, HTML을 꼭 배워야 할까요?

ChatGPT, Claude Code와 같은 AI 도구의 등장으로 이제는 복잡한 코드를 직접 작성하지 않아도 웹페이지를 만들 수 있는 시대가 되었습니다.

자연어로 원하는 기능을 설명하면 AI가 코드를 생성하고, 디자인부터 개발까지 지원하는 바이브 코딩(Vibe Coding) 방식도 확산되고 있습니다.

그렇다면 HTML과 같은 기초 언어는 더 이상 배울 필요가 없을까요?

오히려 AI가 생성한 결과물을 제대로 이해하고 활용하려면 웹 개발의 기본 원리를 아는 것이 중요합니다.

AI가 코드를 대신 작성해 줄 수는 있지만, 생성된 HTML의 구조가 적절한지 판단하고, 원하는 방향으로 수정하고, 오류를 해결하려면 HTML에 대한 이해가 필요합니다.

HTML은 단순히 웹페이지를 만드는 언어가 아닙니다. 웹 콘텐츠의 의미와 구조를 정의하며, CSS, JavaScript, React 등 다양한 웹 개발 기술의 기반이 됩니다.

AI가 코드를 생성하더라도, 결과물을 이해하고 판단하는 능력은 개발자의 몫입니다.

이번 강의에서는 웹 개발의 가장 기본이 되는 HTML부터 차근차근 학습합니다.

💼 취업을 준비한다면 기본기는 더욱 중요합니다

프론트엔드 개발자나 웹 퍼블리셔를 준비한다면 단순히 **“AI로 웹페이지를 만들 수 있다”**는 것만으로는 충분하지 않습니다.

실제 업무에서는 다른 개발자가 작성한 코드를 읽고 수정하거나, 기존 프로젝트의 구조를 파악하고 유지보수해야 하는 경우가 많습니다. 또한 면접이나 기술 질문에서도 결과물을 만드는 방법뿐 아니라 HTML의 구조와 시맨틱 마크업, 웹표준과 웹접근성 등 기본 개념을 이해하고 있는지가 중요합니다.

AI를 사용하는 능력과 웹 개발 기본기는 서로 반대되는 역량이 아닙니다.

HTML 기본기가 있는 사람이 AI도 더 정확하게 활용할 수 있습니다.

HTML은 단순히 웹페이지를 만드는 언어가 아닙니다. 웹 콘텐츠의 의미와 구조를 정의하며 CSS, JavaScript, React 등 앞으로 배우게 될 다양한 웹 기술의 출발점입니다.

AI가 코드를 생성하더라도 결과물을 이해하고 판단하는 능력은 개발자의 몫입니다.

이번 강의에서는 그 출발점이 되는 HTML의 기본기를 차근차근 학습합니다.

🚀 이 강의는 무엇이 다른가요?

단순히 HTML 태그의 사용법을 암기하는 과정이 아닙니다.

HTML 문서의 기본 구조부터 주요 태그의 활용법까지 학습하고, 마지막에는 실제 디자인을 참고하여 웹페이지의 HTML 구조를 직접 작성합니다.

웹표준과 웹접근성을 고려한 마크업 방법도 함께 배웁니다.

이 과정에서 익힌 기초 지식은 이후 CSS, JavaScript를 학습하거나 AI를 활용해 웹사이트를 제작할 때도 도움이 됩니다.

HTML을 이해하면 AI가 만든 웹페이지도 다르게 보이기 시작합니다.

코딩이 처음이신가요?
웹 개발의 근본, HTML부터 시작해요! 🏃 

웹 개발의 핵심 언어, HTML ✔️

최근 웹페이지는 더 화려하며, 부드럽고 빠르게 작동하도록 변하고 있습니다. 하지만 화려함과 역동성은 모두 웹페이지의 내용을 쉽게 전달하고 강인하게 기억되도록 하는 보조 장치입니다. 보조 장치가 힘을 발휘하기 위해선, HTML이 본연의 역할을 제대로 하는 것이 무엇보다 중요합니다.

홈페이지를 구성하는 언어는 3개 밖에 없습니다. 그리 많지 않죠? 😊 엄밀히 따지면 크롬, 사파리, 파이어폭스 등 웹페이지를 보여주는 웹브라우저가 이해하는 언어는 3개 밖에 없습니다. 그중 HTML은 단연코 가장 중요한 핵심 언어입니다. CSS, JAVASCRIPT, React 등 많이 들어보셨을 언어들은 모두 HTML로 작성된 언어를 보완하는 역할을 합니다. HTML이 잘못 작성되었다면 주객이 전도된 웹페이지가 되겠죠? 이번 강의에선 HTML 태그를 이용하여 전달하고자 하는 내용을 정확하게 작성하는 것을 목표로 합니다.

웹페이지는 엄연한 문서입니다. 문서는 전달하고자 하는 내용과 목적이 분명하고, 목적한 바를 이룰 수 있도록 구성되어야 합니다. HTML 언어 본연의 기능에 충실하게 작성하는 방법을 배워보세요!

✔️ 도서 저자 직강 강의를 만나보세요!

• 본 강의는 영진닷컴의 도서 <코딩은 처음이라 with 웹 퍼블리싱>의 저자가 도서 내용을 기반으로 강의를 진행합니다. 도서와 함께 보시면 학습에 더 도움이 되실 거예요.

• 보충학습이 필요하시다면 저자의 유튜브 채널에서 추가 강의를 만나보세요.

🎯 이런 분들께 추천합니다

1. 코딩을 처음 시작하는 완전 초보자

웹 개발을 배우고 싶지만 어디서부터 시작해야 할지 막막한 분께 추천합니다.

2. AI와 바이브 코딩에 관심 있는 분

AI가 생성한 웹페이지의 HTML 구조를 이해하고, 결과물을 검토하거나 수정할 수 있는 기초 지식을 갖추고 싶은 분께 적합합니다.

3. 웹디자인에서 웹 퍼블리싱으로 영역을 확장하고 싶은 분

디자인을 실제 웹페이지로 구현하는 데 필요한 HTML의 기본 구조와 주요 태그를 학습할 수 있습니다.

4. CSS, JavaScript, React 학습을 준비하는 분

본격적인 프론트엔드 개발에 앞서 웹페이지의 기본 구조와 마크업 원리를 이해하고 싶은 분께 추천합니다.

📚 무엇을 배우게 되나요?

STEP 01. HTML, 웹 개발의 첫걸음

웹페이지가 어떤 구조로 만들어지는지 이해하고 HTML 문서 작성에 필요한 기본 문법을 학습합니다.

• HTML 학습을 위한 개발환경 준비

• DOCTYPE과 HTML 문서의 기본 구조

• 문자 인코딩과 언어 설정

• HTML 문서의 제목 및 기본 정보

• 블록 요소와 인라인 요소의 차이

HTML 문서를 직접 작성하면서 웹페이지의 기본 구조를 이해합니다.

STEP 02. 웹페이지를 구성하는 주요 HTML 태그

실제 웹페이지에서 자주 사용하는 HTML 요소를 학습합니다.

• 제목, 문단, 구분선 및 텍스트 관련 태그

• div와 HTML5 시맨틱 구조

• 목록과 테이블

• 하이퍼링크와 이미지 삽입

• 비디오 및 오디오 삽입

단순히 태그의 사용법을 배우는 것을 넘어 각 요소의 용도와 역할을 이해합니다.

특히 HTML5의 시맨틱 구조를 학습하면서 콘텐츠의 의미에 맞는 마크업 방법을 익힙니다.

STEP 03. 사용자 입력을 처리하는 HTML 폼

웹사이트에서 회원가입, 로그인, 검색 등에 활용하는 HTML 폼의 기본 구조를 학습합니다.

• form과 주요 입력 요소

• 기본 입력 필드의 사용법

• HTML5의 다양한 입력 타입

• 추가 입력 요소의 활용

사용자 입력 화면을 구성하기 위한 HTML의 기본 문법을 익힙니다.

STEP 04. 실전! 디자인을 보고 HTML로 구현하기

지금까지 학습한 HTML 문법을 실제 웹페이지 제작에 적용합니다.

• 실습 프로젝트 준비

• 이미지 리소스 저장 및 관리

• 디자인을 분석하여 HTML 구조 작성

• 웹표준을 고려한 마크업

• 웹접근성을 고려한 HTML 작성

• 폼 양식을 포함한 웹페이지 구조 구현

이론으로 배운 태그를 실제 디자인에 적용하면서 웹페이지의 구조를 직접 완성합니다.

단순히 코드를 따라 입력하는 것이 아니라, 디자인을 보고 어떤 HTML 요소를 사용해야 하는지 판단하는 경험을 쌓는 단계입니다.

학습 내용 📚

섹션 1

HTML 문서 타입부터, 제목, 리스트, 이미지, 테이블 등 웹페이지의 내용에 필요한 기본 태그를 학습합니다.

섹션 2

섹션 1에서 학습한 내용을 바탕으로 실무와 같이 디자인 참조하여 HTML 구조를 작성해봅니다. 디자인에서 코딩에 필요한 사항을 파악하고, 이미지 준비 후 내용에 맞춰 HTML을 작성합니다. 

✅ 수강 후에는 이런 것을 할 수 있습니다

• HTML 문서의 기본 구조를 이해하고 직접 작성할 수 있습니다.

• 주요 HTML 태그를 용도에 맞게 활용할 수 있습니다.

• HTML5의 시맨틱 태그를 이용해 웹 콘텐츠의 구조를 표현할 수 있습니다.

• 이미지, 링크, 목록, 테이블 및 폼 요소를 활용할 수 있습니다.

• 디자인을 분석하고 웹페이지의 HTML 구조를 구현할 수 있습니다.

• 웹표준과 웹접근성을 고려한 기본적인 마크업 방법을 이해할 수 있습니다.

• AI가 생성한 HTML 코드를 읽고 기본적인 구조와 요소의 역할을 파악할 수 있습니다.

이 과정을 마치면 CSS와 JavaScript를 학습하기 위한 기초를 갖출 수 있습니다.

🤖 AI와 함께 웹 개발을 시작하고 싶다면?

HTML 기초를 익히면 AI를 활용하는 방법도 달라질 수 있습니다.

예를 들어 AI에게 단순히 "웹페이지를 만들어 줘"라고 요청하는 것에서 한 단계 더 나아가 다음과 같은 구체적인 요구사항을 전달할 수 있습니다.

• "웹페이지의 구조를 HTML5 시맨틱 태그로 작성해 줘."

• "메뉴 영역은 nav 태그로 구성하고, 주요 콘텐츠는 main 태그 안에 배치해 줘."

• "입력 필드에 적절한 label을 추가해 줘."

• "이 HTML 코드의 구조를 분석하고 웹접근성 측면에서 개선할 부분을 알려줘."

HTML을 알고 있다면 AI가 생성한 결과물이 적절한지 판단하고, 더 구체적인 수정 사항을 요청할 수 있습니다.

이것이 AI 시대에도 HTML 기초 학습이 중요한 이유입니다.

※ AI 프롬프트 작성 및 바이브 코딩은 본 과정의 정규 실습에 포함되지 않습니다. 위 내용은 HTML 학습 후 활용할 수 있는 예시입니다.

🛠 수강 전 준비 사항

선수 지식

별도의 프로그래밍 경험이 없어도 수강할 수 있습니다.

컴퓨터의 기본적인 파일 및 폴더 관리 방법을 알고 있다면 더욱 원활하게 학습할 수 있습니다.

학습 방법

각 차시에서 학습한 HTML 태그를 직접 작성하고 브라우저에서 결과를 확인하면서 공부하는 것을 권장합니다.

마지막 실전 프로젝트에서는 앞서 학습한 주요 태그를 종합적으로 활용합니다.

🎓 HTML을 익혔다면 다음 단계로!

HTML로 웹페이지의 구조를 만들었다면 이제 디자인과 움직임을 추가할 차례입니다.

STEP 1. CSS로 웹페이지 디자인하기

HTML로 작성한 구조에 색상, 글꼴, 레이아웃 등을 적용하여 웹페이지를 디자인하는 방법을 학습합니다.

코딩은 처음이라 with 웹 퍼블리싱 - CSS

STEP 2. JavaScript로 웹페이지에 움직임 더하기

변수, 함수, 조건문, 반복문 등 JavaScript의 기초 문법을 익히고, HTML 요소를 제어하여 사용자와 상호작용하는 웹페이지를 제작합니다.

웹프로그래밍의 꽃! 자바스크립트 기초

STEP 3. React로 프론트엔드 개발 시작하기

HTML, CSS, JavaScript의 기초를 바탕으로 컴포넌트 기반의 React 개발 방식을 익히고 실제 웹사이트 제작에 도전합니다.

처음 만나는 React: 퍼블리셔를 위한 실전 가이드

AI가 코드를 작성하는 시대에도, 코드를 이해하는 능력은 여전히 중요합니다.

HTML을 시작으로 웹 개발의 기본기를 갖추고 새로운 기술에 도전해 보세요.