include vs AJAX vs iframe 차이와 활용법

include, AJAX, iframe의 차이

개요

• php 웹 개발에서 include,AJAX,iframe은 웹페이지의 동적으로 구성하기 위해 자주 사용되는 기술이라고 생각합니다. 저는 각 기술의 특징과 적합한 사용 방법을 이해하는 것이 효율적인 웹 개발을 위해 매우 중요하다고 생각합니다. 특히, 검색 엔진 최적화(SEO)관점에서 어떤 기술을 사용하지는에 따라 웹사이트의 노출 순위가 달라질 수 있기 때문에, 이에 대한 이해도가 중요하다고 생각합니다.

1. include

정의

• PHP에서 외부 파일의 내용을 현재 스크립트에 포함시키는 기능이다.

특징

• 서버에서 외부 파일의 내용을 현재 스크립트에 포함시키는 기능이다.

장점

• 코드 재사용 : 공통 코드를 모듈화하여 여러 페이지에서 활용 가능.
• 구조화 : 페이지를 기능별로 분리하여 관리에 용이하다.
• 검색 엔진 친화적 : 포함된 콘텐츠는 서버에서 합쳐져 클라이언트에 전달되므로 검색 엔진이 콘텐츠를 완전히 색인화가 가능하다.

단점

• 서버에서 파일을 처리하는 것이 추가적인 성능 저하를 일으킬 수 있다.
• 페이지 로드 이후에는 콘텐츠를 변경할 수 없음.(주로 정적인 콘텐츠 포함에 적함)

2. AJAX

정의

• AJAX는 클라이언트 측에서 JavaScript를 통해 서버와 비동기적으로 데이터를 교환하여 페이지
  일부를 갱신하는 기술입니다.

장점

• 부분 갱신 : 전체 페이지 새로고침 없이 특정 부분만 업데이트 즉 필요한 데이터만 로드하여 빠르게 반응.
• 인터페이스가 더 부드럽고 직관적이므로 사용자 경험 향상을 시키며 이를 통해 매끄러운 웹 애플리케이션 구현이 가능하다.

단점

• 검색 엔진 제한 : 비동기로 로드된 콘텐츠는 검색 엔진이 색인하지 못할 가능성이 있으며 AJAX로 동적으로 로드된 콘텐츠를 크롤링하는데 어려움을 겪을 수 있습니다. 따라서 검색 엔진이 콘텐츠를 인식할 수 있도록 JavaScript 렌더링이나 서버 사이드 렌더링 등의 추가적인 작업이 필요할 수도 있다.
• 브라우저 의존성 : 브라우저 설정 또는 호환성 문제가 가능하다.
  ex) Internet Explorer의 구버전에서는 XMLHttpRequest객체를 제대로 지원하지 않을 수도있고구식버전 Firefox에서는 fetch API를 지원하지 않아 XMLHttpRequest를 대신 사용할 수도 있다. 즉 AJAX의 브라우저 의존성 문제는 브라우저 버전이나 설정에 따라 기능이 제대로 작동하지 않거나 제한될 수 있다는 것입니다. 따라서 브라우저 호환성을 고려한 코드작성, 적절한 폴리필사용, CORS 설정 등을 통해 문제를 최소화할 수 있습니다.

3. iframe

정의

• iframe은 HTML 문서 내에 다른 HTML 문서를 포함하는 요소입니다.

장점

• 독립성 : 포함된 콘텐츠가 부모 페이지와 별개로 동작합니다.
• 외부 콘텐츠 활용 : 외부 서비스나 동영상, 맵 등을 쉽게 삽입이 가능합니다.

단점

• 검색 엔진 제한 : 검색 엔진은 iframe 내부 콘텐츠를 색인하지 못하는 경우가 많음
• 성능 저하 : 추가 HTTP 요청으로 로딩속도 저하 가능.
• 삽인된 문서에 대해 부모가 스타일을 제어하기 어려움.

공통점

• 동적 웹 페이지 구현 : 세 기술 모두 정적인 HTML 페이지에 동적인 요소를 추가하여 사용자에게 더욱 풍부한 경험을 제공합니다.
• 모듈화 와 재사용성 : 중복 코드를 줄이고 공통 요소를 관리하기 위한 목적으로 사용합니다.
• 프로젝트에서 include로 서버 사이드 템플릿 관리, AJAX로 비동기 데이터 로드,iframe으로 외부 서비스 삽입 등 혼합적인 사용이 가능하다.

검색 엔진과의 관계

• 검색 엔진은 웹 페이지의 콘텐츠 크롤링하여 색인화합니다. 하지만 include, AJAX, iframe은 검색 엔진 친화성 측면에서 차이가 있습니다.

1. include와 검색 엔진

• include는 서버에서 실행되며, 최종 결과물이 하나의 HTML 페이지로 클라이언트에 전달됩니다.
• 검색 엔진 친화적이며 포함된 콘텐츠가 HTML에 직접 포함되므로 크롤링과 색인화에 문제 없음.

2. AJAX와 검색 엔진

• AJAX로 로드된 데이터는 초기 HTML 문서에 포함되지 않고, JavaScript 실행 후 동적으로 추가됩니다.
• 검색 엔진 친화성 문제: 일부 검색 엔진은 JavaScript를 싱행하지 않아 AJAX로 추가된 콘텐츠를 색인화 하지 못할 수 있습니다.
• 해결책

ex ) JSON-LD

"@context": "https://schema.org",
"@type": "Movie",
"name": "범죄도시 4",
"director": "강윤성",
"datePublished": "2024-12-21",
"ratingValue": "7.5",
"genre": "액션, 범죄",
"actor": [
{
"@type": "Person",
"name": "마동석"
},
{
"@type": "Person",
"name": "손석구"
}
],
"countryOfOrigin": "대한민국",
"duration": "130",
"trailer": {
"@type": "VideoObject",
"name": "범죄도시 4 예고편",
"contentUrl": "예시 URL",
"embedUrl": "예시 URL"
}
}

ex)meta

• 기본 정보
  • charset: UTF-8
  • viewport: 초기 스케일과 반응형 지원
• 페이지 설명
  • 범죄도시 4는 강윤성 감독의 액션 범죄 영화로, 마동석과 손석구 주연의 작품입니다. 2024년에 개봉하며 강렬한 액션과 감동적인 이야기를 제공합니다.
• 키워드
  • 범죄도시 4, 액션, 범죄, 마동석, 손석구, 강윤성, 2024, 영화
• SNS 공유 정보
  • og:title: 범죄도시 4
  • og:description: 범죄도시 4는 강윤성 감독의 액션 범죄 영화로, 강렬한 액션과 감동적인 이야기를 제공합니다.
  • og:image: 영화 포스터 URL
  • og:url: 영화 상세 페이지 URL
    이 정보를 참고하여 HTML 메타 태그에 적절히 적용을 하면됩니다.

3. iframe과 검색엔진

• iframe 내부의 콘텐츠는 독립적인 문서로 취급되며 부모 페이지의 콘텐츠로 간주되지 않으므로 크롤링이나 색인화가 어려움
• 해결책
  • 중요한 데이터를 iframe에 의존하지 않고 부모 문서에 제공하며 iframe 사용을 최소화 하거나 중요한 콘텐츠는 iframe 외부에 포함시킵니다.

검색 엔진 관련 방법 비교표

방법	검색 엔진 친화성	이유	해결책
include	높음	모든 콘텐츠가 HTML에 포함됨.	별도의 처리 불필요.
AJAX	낮음	비동기 데이터는 색인화 어려움.	SSR, 구조화 데이터 활용.
iframe	낮음	독립적 콘텐츠로 색인화 제한적.	주요 콘텐츠는 HTML에 포함.

결론

• include는 검색 엔진 최적화(SEO)에 가장 유리하며,주로 서버 사이드 템플릿에 사용.
• AJAX는 동적인 사용자 경험 제공에 적합하지만, 검색 엔진 친화성을 보완하려면 추가적인 설정이 필요합니다.
• iframe은 외부 콘텐츠 삽입에 편리하지만 SEO와 성능 측면에서 주의가 필요합니다.

※ 최적의 선택은 프로젝트의 목적과 요구사항, 그리고 검색 엔진 친화성 여부에 따라 다르며 각 기술의 특성과 장단점을 충분히 이해한 후 이를 기반으로 효율적인 구현 방법을 선택하는 것이 중요하다고 생각합니다!!!