HTML Academy · 강의

PE 철학 HTML부터 시작하기

HTML 우선 방식이 보편적인 접근성을 보장하는 이유 이해하기

PE 철학 HTML부터 시작하기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

점진적 향상 정의

점진적 향상(PE)은 HTML만으로 사용할 수 있는 경험을 구축한 다음, 표현을 위한 CSS와 상호작용을 위한 JavaScript를 계층적으로 추가하는 방식입니다. 각 계층은 이전 계층을 향상하며, 페이지가 작동하는 데 필수적인 계층은 없습니다.

HTML로 시작하는 이유

HTML은 가장 견고한 계층입니다. 형식이 잘못되어도 부분적으로 구문 분석하고, 이해하지 못하는 태그는 무시하며, 스크립트나 스타일시트 없이도 작동합니다. 반면 CSS 파일이 없으면 외관이 저하되고, 손상된 JS 묶음은 페이지를 사용할 수 없게 만들 수 있습니다.

세 계층

콘텐츠(HTML), 표현(CSS), 동작(JS)입니다. 제출 버튼은 실제 <button type="submit">입니다. JS가 실패해도 양식이 제출됩니다. CSS는 보기 좋게 만들고, JS는 AJAX를 위해 제출을 가로챌 수 있지만, 기본 HTML이 동작을 보장합니다.

<form action="/checkout" method="post">
  <input name="email" type="email" required>
  <button type="submit">Continue</button>
</form>

오류에 대한 회복력

네트워크 연결이 끊깁니다. 스크립트를 불러오지 못합니다. 사용자는 JS를 비활성화합니다. 연결이 느리면 묶음이 도착하기 전에 시간 초과됩니다. PE 페이지는 이 모든 상황에서 원활하게 기능이 축소됩니다. 사용자는 HTML만으로도 읽고, 탐색하고, 제출할 수 있습니다.

성능상의 이점

스크립트가 로드되기 전에 사용할 수 있는 HTML을 렌더링하는 페이지는 첫 콘텐츠 표시가 더 빠르고, 상호작용까지 걸리는 시간이 더 짧으며, 핵심 웹 바이털 점수가 더 좋습니다. 브라우저는 JS가 시작될 때까지 기다리지 않고 의미 있는 콘텐츠를 표시합니다.

접근성상의 이점

실제 HTML 요소에는 접근성 기능이 기본으로 제공됩니다. <button>은 키보드로 활성화할 수 있고, <input type="email">에는 알맞은 가상 키보드가 표시되며, <a>는 화면 낭독기가 링크로 안내합니다. PE는 별도 비용 없이 접근성 기본값을 제공합니다.

SEO상의 이점

검색 엔진 크롤러는 JavaScript를 실행하지 않고도 구문 분석할 수 있는 HTML을 선호합니다. PE로 구축한 페이지는 JS를 실행하지 않아도 완전히 색인되지만, SPA 전용 페이지는 크롤러의 스크립트 지원에 의존하므로 콘텐츠를 놓치는 경우가 많습니다.

PE와 SPA

단일 페이지 애플리케이션은 모든 것을 클라이언트 측에서 렌더링하므로 JS가 실패하면 완전히 중단됩니다. PE는 그 반대입니다. 서버가 완전한 HTML을 생성하고, JS는 기본 기능을 맡지 않은 채 미리 가져오기, 낙관적 업데이트 또는 페이지 내 편집과 같은 향상 기능을 추가합니다.

PE를 장려하는 프레임워크

Remix, Next.js Server Components, SvelteKit 및 Astro는 모두 점진적인 JS 향상과 함께 서버에서 렌더링되는 HTML을 우선합니다. 이러한 프레임워크를 선택하면 PE가 가장 수고가 적은 경로가 됩니다.

PE가 어려운 경우

고도로 상호작용적인 사용자 인터페이스(협업 편집기, 그리기 앱, 실시간 게임)는 JS 없이는 의미 있게 존재할 수 없습니다. 이러한 앱의 "JS 없는 대체 경로"는 정적 읽기 전용 모드일 수 있습니다. 아무것도 없는 것보다는 낫지만 필연적으로 축소됩니다. 절충점을 솔직하게 인정하십시오.

핵심 원칙

"작동하게 만든 다음, 보기 좋게 만들고, 빠르게 만드십시오." HTML 양식을 먼저 만들고 curl로 작동을 확인하십시오. 레이아웃을 위해 CSS를 추가하십시오. 페이지 내 검증, 낙관적 업데이트 또는 AJAX 제출을 위해 JS를 추가하십시오. 각 계층은 선택 사항이며, 결과적으로 모든 사용자에게 훌륭한 경험을 구성합니다.

지식 점검

점진적 향상의 핵심 약속은 무엇입니까?

요약

점진적 향상은 CSS나 JS 없이도 작동하는 의미론적 HTML에서 시작한 다음, 표현을 위해 CSS를 추가하고 상호작용을 위해 JS를 추가합니다. 각 계층은 선택 사항이며, 페이지는 오류가 발생해도 원활하게 기능이 축소됩니다. PE는 성능, 접근성, SEO 및 회복력에서 이점을 제공하지만, 상호작용이 많은 앱에서는 초기 설계 작업이 더 많이 필요합니다.

자주 묻는 질문

“PE 철학 HTML부터 시작하기” 강의는 무료인가요?

네 — “PE 철학 HTML부터 시작하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“PE 철학 HTML부터 시작하기”에서 뭘 배우나요?

HTML 우선 방식이 보편적인 접근성을 보장하는 이유 이해하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“PE 철학 HTML부터 시작하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기