[WEB] - 인터랙티브 웹이란? 간단하고 쉽게 이해하기(인터랙티브 웹에 반대 개념은?)

🧹 간단 정리 

'인터렉티브 웹'이란 사용자가 웹사이트(또는 웹 애플리케이션)와 상호작용 할 수 있는 웹 페이지를 의미.

 

👨🏻‍💻 인터랙티브 웹이란?

• 인터랙티브 웹은 사용자의 입력에 즉각 반응하고, 페이지 전체 새로고침 없이 부분 갱신·상태 변화·피드백을 제공하는 웹 경험을 뜻합니다.
• 사용자와 웹이 마치 대화를 하듯이, 웹이 출력한 내용에 따라 사용자가 적절한 입력을 하는 식으로, 입력과 출력이 공존하는 웹
• 아래 7가지 특징중 1가지라도 포함되어 있으면 '상호작용 하는 웹' 즉 '인터렉티브 웹'으로 불려진다.

---

 

🚀 인터랙티브 웹의 특징

 

1. 클릭 또는 탭하기

사용자가 버튼, 링크, 메뉴 등을 클릭(또는 탭)했을 때, 페이지 전체를 다시 불러오지 않고 필요한 부분만 변화하는 경우.

예시) 버튼을 누르면 모달 창이 열리거나, 섹션이 펼쳐지는 기능

 

2. 양식 입력

사용자가 입력 폼에 데이터를 작성 후 제출했을 때, 결과가 새로고침 없이 즉시 반영되는 경우.

예시) 검색창에 검색어를 입력하면 자동 완성 제안이 뜨거나, 결과 리스트가 바로 갱신되는 기능

 

 

3. 동적 콘텐츠

사용자의 행동이나 서버에서 오는 데이터에 따라 콘텐츠가 실시간으로 바뀌는 경우.

예시) 주가/날씨 업데이트

 

4. 드래그 앤 드롭

사용자가 요소를 마우스나 손가락으로 끌어 옮길 때, 즉시 UI가 반응하여 위치가 바뀌는 경우.

 

5. 애니메이션 및 시각적 효과
사용자의 상호작용에 반응하여 웹 페이지에 애니메이션이나 시각적 효과가 발생하는 기능을 포함하는 웹페이지.
예시) 애플 홈페이지. 상품 페이지의 스크롤 내리면 페이지가 내려가는 게 아닌 애니메이션이 동작.

• 스크롤 전(좌), 스크롤 후(우)

 

애플 공식 홈페이지 속 애니메이션

 

 

 

6. 오디오 및 비디오 상호작용
사용자가 오디오나 비디오 콘텐츠를 제어할 수 있는 기능을 포함하는 웹페이지.
예시) 유튜브 영상 컨트롤, 재생, 일시 정지, 볼륨 조절 등이 있다.

 

7. 게임 및 인터랙티브 요소

사용자가 웹 페이지에서 직접 게임을 하거나 다른 인터랙티브 요소들과 상호작용하는 기능을 포함하는 웹페이지.

예시)웹 기반 미니게임, 인터랙티브 데이터 시각화

그럼 이쯤 되면 이렇게 생각할 수 있다.

"뭐야 그럼 그냥 다 인터랙티브 웹 아니야?" 

반은 맞고 반은 틀리다..!
'요즘 대부분의 웹'은 인터랙티브 웹이기에 '거의 다 인터랙티브 웹'이 맞다.

그럼 '인터랙티브 웹'이 아닌 웹의 특성은 무엇이 있을까!?

---

 

📌 스태틱 웹의 종류(인터렉티브의 반대)

인터렉티브 웹의 반대 개념은 '스태틱 웹' 혹은 '정적 웹'이라고도 불린다.
이러한 웹 페이지들은 다음과 같은 특징을 가진다.

1. 고정된 콘텐츠

정적 웹 페이지는 고정된 HTML 코드를 사용하여 만들어진 페이지

이 페이지들은 서버에 저장된 그대로의 형태로 사용자에게 전달되며, 페이지의 콘텐츠는 사전에 정의된 상태로 고정되어 있다.

 

한 마디로 페이지 속 내용이 변할 일이 없는 페이지
(JS로 API를 호출하면 동적으로 바뀔 수 있긴하다)

 

 

2. 사용자 상호작용 부재

사용자가 페이지와 상호작용하더라도, 페이지 내용이 변하지 않는다.

예를 들어, 사용자의 클릭이나 입력에 반응하여 내용이 변경되거나 새로운 정보가 표시되는 것이 없다.

 

3. 서버 측 스크립트 미사용

정적 웹 페이지는 서버 측 스크립트나 데이터베이스의 사용 없이

순수 HTML, CSS, 간단한 클라이언트 측 JavaScript를 사용할 수 있다.

 

정적 웹 페이지는 주로 정보 전달이 주목적이기 때문에

복잡한 프로그래밍이나 데이터 베이스 연동이 필요하지 않는다.

예를 들면.. 예술가가 본인 홈페이지를 만들고 단순히 작품만 전시한 페이지..?

 

---

 

 

👋🏻 마무리

인터렉티브 웹 : 사용자의 행동에 따라 동적으로 콘텐츠가 변화하거나, 사용자 경험을 제공하는 것이 특징

정적 웹 : 변하지 않는 페이지를 제공하는 것이 특징