+ CSS로 레이아웃을 잡는 방법이 표준이 됩니다.

둘째, 서버사이드 언어가 등장합니다. 이전까지 홈페이지는 모든 사람에게 똑같은 내용만 보여줬습니다. 하지만 PHP, ASP 같은 기술이 나오면서 “로그인한 사람에게는 이름을 표시해줘”, “데이터베이스에서 상품 목록을 가져와서 보여줘” 같은 동적인 홈페이지가 가능해졌습니다.

💡 서버사이드(Server-side)란? 홈페이지 내용을 사용자 컴퓨터가 아니라 서버(원격 컴퓨터) 에서 처리해서 보내주는 방식입니다. 예를 들어 네이버 뉴스 목록은 내 컴퓨터가 만드는 게 아니라 네이버 서버가 만들어서 보내줍니다.

---

4단계 | Web 2.0 & Ajax 혁명 (2005–2012)

“페이지를 새로고침하지 않아도 되는 시대의 시작”

2004년 Gmail이 출시되었을 때 사람들은 깜짝 놀랐습니다. 이메일을 클릭해도 페이지가 새로고침되지 않고 바로 내용이 나왔거든요. 이것이 바로 Ajax 기술입니다.

이후 jQuery 라는 JavaScript 라이브러리가 등장해 개발자들의 삶을 엄청나게 편하게 해줬습니다. 복잡한 코드를 짧고 간단하게 쓸 수 있게 된 것입니다.

또한 WordPress, Drupal 같은 CMS(콘텐츠 관리 시스템) 가 보급되면서, 코딩을 모르는 사람도 관리자 페이지에서 글을 쓰고 수정할 수 있게 됩니다. 블로그 문화가 폭발적으로 성장한 것도 이 시기입니다.

💡 Ajax란? 페이지 전체를 새로 불러오지 않고, 필요한 데이터만 서버에서 조용히 가져오는 기술입니다. 카카오톡에서 새 메시지가 오면 앱이 새로고침되지 않아도 알림이 뜨는 것이 비슷한 원리입니다.

💡 CMS란? Content Management System의 약자로, 홈페이지 내용을 쉽게 관리하는 프로그램입니다. 코딩 없이도 글 쓰기, 사진 올리기, 메뉴 수정이 가능합니다.

---

5단계 | 모바일 & 반응형 웹 시대 (2010–2015)

“스마트폰이 모든 것을 바꿨다”

2007년 아이폰이 등장하고, 스마트폰으로 인터넷을 사용하는 사람이 폭발적으로 늘어납니다. 문제는 기존 홈페이지들이 작은 화면에서는 너무 작게 보인다는 것이었습니다.

이 문제를 해결하기 위해 반응형 웹 디자인(Responsive Web Design) 이 등장합니다. 화면 크기에 따라 레이아웃이 자동으로 변하는 기술입니다.

HTML5와 CSS3 가 발표되어 별도 플러그인 없이도 동영상 재생, 애니메이션, 둥근 모서리 같은 것들이 가능해졌습니다. 그리고 Adobe Flash는 아이폰에서 작동하지 않아 서서히 역사 속으로 사라집니다.

Bootstrap 이라는 도구가 나와서 반응형 레이아웃을 훨씬 쉽게 만들 수 있게 됩니다.

💡 반응형(Responsive)이란? 하나의 홈페이지가 PC에서는 넓게, 태블릿에서는 중간, 스마트폰에서는 세로로 길게 자동으로 모양을 바꾸는 것입니다. 지금 대부분의 홈페이지가 이 방식을 사용합니다.

---

6단계 | JavaScript 프레임워크 전쟁 (2013–2020)

“웹사이트가 앱처럼 작동하는 시대”

이 시기에 웹 개발의 복잡도가 폭발적으로 증가합니다. 홈페이지가 단순한 문서가 아니라 구글 지도, 유튜브처럼 복잡한 앱 수준으로 발전했기 때문입니다.

이를 체계적으로 관리하기 위해 JavaScript 프레임워크들이 등장합니다.

• React (Facebook, 2013년): 현재 가장 인기 있는 프레임워크
• Vue.js (2014년): 배우기 쉬워서 입문자에게 인기
• Angular (Google, 2016년): 대규모 기업용으로 많이 사용

이 프레임워크들은 컴포넌트(Component) 라는 개념을 도입합니다. 버튼, 메뉴, 카드 같은 UI 요소를 레고 블록처럼 만들어두고 재사용하는 방식입니다.

또한 Node.js 의 등장으로 JavaScript가 서버에서도 동작하게 됩니다. 이제 프론트엔드(화면)와 백엔드(서버) 모두 JavaScript 하나로 개발할 수 있게 된 것입니다.

💡 프레임워크(Framework)란? 홈페이지를 만들 때 자주 쓰는 기능들을 미리 만들어 모아둔 도구 모음입니다. 집을 지을 때 벽돌을 하나씩 만들지 않고 기성품을 쓰는 것과 같습니다.

💡 프론트엔드 vs 백엔드? 프론트엔드는 사용자 눈에 보이는 화면(버튼, 글자, 이미지), 백엔드는 눈에 보이지 않는 서버, 데이터베이스 처리를 말합니다.

---

7단계 | AI & 노코드 시대 (2020–현재)

“코드를 몰라도, AI에게 말만 해도 홈페이지가 만들어지는 시대”

현재 웹 개발은 두 가지 방향으로 동시에 진화하고 있습니다.

첫째, 개발 도구의 고도화. Next.js 같은 프레임워크가 성능과 SEO를 자동으로 최적화해주고, Vercel, Netlify 같은 플랫폼에서는 GitHub에 코드를 올리는 것만으로 배포가 완료됩니다.

둘째, AI와 노코드의 부상. GitHub Copilot, Cursor 같은 AI 도구가 코드를 자동으로 작성해주고, v0.dev에서는 “로그인 화면 만들어줘”라고 말만 하면 코드가 생성됩니다. Webflow, Framer 같은 노코드(No-code) 툴로 코딩 없이도 수준 높은 홈페이지를 만들 수 있습니다.

💡 노코드(No-code)란? 코딩 없이 드래그 앤 드롭이나 설정만으로 홈페이지를 만드는 방법입니다. 마치 파워포인트로 슬라이드를 만들듯이 웹사이트를 만들 수 있습니다.

---

📌 한눈에 보는 정리