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

🧹 간단 정리 

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

 

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

• 사용자와 웹이 마치 대화를 하듯이, 웹이 출력한 내용에 따라 사용자가 적절한 입력을 하는 식으로, 입력과 출력이 공존하는 웹
• 아래 7가지 특징중 1가지라도 포함되어 있으면 '상호작용 하는 웹' 즉 '인터렉티브 웹'으로 불려진다.

---

🚀 인터랙티브 웹의 특징

1. 클릭 또는 탭하기

사용자가 버튼, 링크, 메뉴 등을 클릭(탭)하여 페이지 내 특정 동작 및 변화를 일으키는 기능을 포함하는 웹페이지..

2. 양식 입력

사용자가 양식에 데이터를 입력하고 제출하여 웹 페이지에서 특정 행동을 취하게 하는 기능을 포함하는 웹페이지..
예시) 검색 엔진에서 검색어를 입력 후 검색결과를 받기

3. 동적 콘텐츠

웹 페이지의 콘텐츠가 사용자의 행동이나 선택에 따라 실시간으로 변경되는 기능을 포함하는 웹페이지.

예시) 예를 들어, 소셜 미디어 피드, 실시간 뉴스 업데이트 등이 있다.

4. 드래그 앤 드롭

사용자가 어떤 요소를 마우스나 터치로 드래그하여 다른 위치로 이동시키는 기능을 포함하는 웹페이지.

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

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

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

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

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

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

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

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

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

---

 

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

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

1. 고정된 콘텐츠

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

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

 

한 마디로 페이지 속 내용이 변할 일이 없는 페이지

 

2.사용자 상호작용 부재

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

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

 

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

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

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

 

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

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

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

 

---

마무리

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

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