[WEB] 웹의 구분과 발전: 목적·생성·환경 3가지 기준 비교

 

🚀 들어가며

웹을 공부하다 보면 웹사이트, 웹서비스, 웹앱, 모바일 웹, PWA 같은 용어들이 서로 섞여 쓰이면서 혼란을 주곤 합니다.
저 역시 처음에는 “모바일 웹과 웹앱은 뭐가 다른 거지?”라는 질문에서 출발했지만, 정리하다 보니 사실 이 개념들은 각기 다른 구분 기준에서 나온다는 걸 깨달았습니다.

 

이번 글에서는 웹 구분의 주요 기준들과 각 기준에 따른 역사적 흐름을 정리하여, 개념이 어떻게 발전하고 얽혀왔는지를 설명합니다.

---

📌 웹을 나누는 주요 기준들

웹을 구분하는 기준은 크게 세 가지 축으로 나눌 수 있습니다.

1. 목적 기준: 정보 전달 vs 기능 제공
   • 웹사이트 → 웹서비스(과도기) → 웹앱 (+PWA는 웹앱의 진화형)
   • 본질적으로 “무엇을 하려고 만들어졌는가?”에 초점을 맞춤.
2. 콘텐츠 생성·배포 방식 기준: 정적 vs 동적
   
   • 과거에는 정적/동적이 곧 “목적”과 연결되어 있었음.
   • 현재는 독립된 기술 축으로, 렌더링·배포 방식에 따라 나눔 (SSG, SSR, SPA 등).
3. 접근 환경 기준: 모바일 웹 ↔ 데스크톱 웹
   • 접근 기기 차이에서 파생된 구분.
   • 여기서 레이아웃 전략(반응형 vs 적응형) 개념이 나옴.

👉 정리하면, 초창기에는 “정적/동적 = 목적 차이”처럼 얽혀 있었지만, 지금은 독립 기준으로 구분하는 것이 더 정확합니다.

 

📌 보충 설명
웹의 분류는 사용된 기술보다 목적과 상호작용 수준에 따라 결정됩니다.
즉, 정보 전달 중심(저상호작용) → 웹사이트, 기능 제공 중심(고상호작용) → 웹앱으로 이해하는 것이 본질적 기준입니다.

 

---

1. 목적 기준: 웹사이트 → 웹서비스 → 웹앱

✅ 웹사이트 (Website, 1990s)

• 정적 HTML 페이지 중심.
• 목적: 단순 정보 제공 (뉴스, 위키, 기업 소개).
• 기능성 거의 없음 → 사실상 전자 문서 모음.

✅ 웹서비스 (Web Service, 2000s)

• 서버 기술(CGI, PHP, ASP) + DB 연동으로 동적 페이지 생성.
• 단순한 정보 제공을 넘어 기능·비즈니스 로직을 제공.
• 예: Gmail(초기), 온라인 뱅킹, Amazon 쇼핑.
• 과도기적 단계: “웹도 앱처럼 동작할 수 있다”는 흐름의 시작.

✅ 웹앱 (Web Application, 2010s~)

• 브라우저에서 동작하는 완전한 애플리케이션.
• SPA, CSR, API 연동으로 앱 같은 UX 제공.
• 예: Google Docs, Notion, Trello.
• PWA: 웹앱의 최신 진화형 (설치·푸시·오프라인 지원).
  → 별도 범주라기보다, 웹앱의 고도화 버전으로 설명 가능.

📌 정리:
웹사이트(정보 제공) → 웹서비스(기능 제공의 시작) → 웹앱(완전한 애플리케이션).
즉, 웹서비스는 웹앱으로 넘어가는 과도기라 볼 수 있습니다.

 

📌 보충 설명
웹앱 → PWA/하이브리드/네이티브는 직선적 진화가 아니라 선택지(옵션)입니다.
참고: https://dekoms-coding.tistory.com/172

---

2. 콘텐츠 생성·배포 방식 기준: 정적 웹 vs 동적 웹

📖 초창기(1990s~2000s)

• 정적 웹: 고정된 HTML 파일을 서버에서 그대로 제공.
• 동적 웹: 서버에서 DB와 연동해 페이지를 생성.
• 당시에는 정적 = 정보 제공 / 동적 = 기능 제공으로 곧바로 이어졌음.

📖 현대(2010s~)

프론트엔드 프레임워크와 다양한 렌더링 방식의 등장으로, “정적/동적”은 목적과 직접 연결되지 않고, 구현·배포 방식의 문제로 자리잡음.

• 정적 (Static, SSG)
  • 빌드 시점에 미리 페이지 생성 → CDN 제공
  • 예: Gatsby, Next.js SSG
• 동적 (Dynamic, SSR/CSR)
  • 요청 시마다 서버나 클라이언트에서 생성
  • 예: Next.js SSR, SPA

📌 용어 보충

• MPA: Multi Page Application, 요청마다 새 HTML.
• SPA: Single Page Application, CSR로 동작.
• SSR: Server Side Rendering.
• SSG: Static Site Generation.

👉 따라서 지금은 2축을 독립적으로 고려해야 합니다

• 정적 vs 동적 = 콘텐츠 생성 축
• SSR/CSR/SSG/MPA = 렌더링·배포 축

📌 보충 설명
웹의 종류는 기술에 종속되지 않습니다. 웹앱이 곧 SPA는 아니며, SPA/SSR/SSG는 단지 구현 방식일 뿐입니다.
참고: https://dekoms-coding.tistory.com/273

---

3. 접근 환경 기준: 모바일 웹 ↔ 데스크톱 웹

스마트폰 등장 이후, 같은 서비스를 어떻게 PC와 모바일에서 보여줄지가 중요한 이슈가 되었습니다.

✅ 반응형 웹 (Responsive)

• 하나의 코드베이스, 화면 크기에 따라 CSS로 유동적 대응.
• 세부 전략: 풀 반응형 / 모바일 퍼스트 반응형 / 데스크탑 퍼스트 반응형 / 세미 반응형.

✅ 적응형 웹 (Adaptive)

• 기기별로 아예 다른 레이아웃 제공. (예: m.naver.com)
• 과거에는 보편적이었지만 지금은 드뭄.

📌 정리:
모바일/PC라는 접근 환경의 차이에서 → 레이아웃 전략(반응형 vs 적응형) 문제가 파생됩니다.

이 안에는 반응형 vs 적응형이라는 큰 구분뿐 아니라, 세미 반응형·모바일 퍼스트·데스크탑 퍼스트 같은 세부 전략들도 존재합니다. 참고:

https://dekoms-coding.tistory.com/179

https://dekoms-coding.tistory.com/183

---

🧭 최종 정리

웹은 다음 세 가지 축에서 발전해왔습니다.

1. 목적 기준:
   • 웹사이트 → 웹서비스(과도기) → 웹앱(+PWA)
2. 생성 방식 기준:
   • 정적 → 동적 (초창기엔 목적과 연결)
   • 지금은 SSR/SSG/SPA/MPA 등 배포·렌더링 축으로 독립
3. 접근 환경 기준:
   • PC vs 모바일 → 반응형/적응형 레이아웃 전략

👉 결론적으로,

• 본질적 기준은 “정보 전달 vs 기능 제공”.
• 기술적 기준은 “정적 vs 동적”.
• 환경적 기준은 “모바일 vs PC”.

이 세 가지를 구분해서 이해하면, 웹의 개념적 혼동을 깔끔하게 해소할 수 있습니다.