SEO(검색 엔진 최적화, Search Engine Optimization), PWA(Progressive Web App)란?

🔹 SEO(검색 엔진 최적화, Search Engine Optimization)란?

SEO는 웹사이트가 Google, Naver, Bing 같은 검색 엔진에서 상위에 노출되도록 최적화하는 작업을 의미합니다.

✅ SEO의 핵심 요소

1. 메타 태그 (Meta Tags)
   • 검색 결과에서 보이는 제목(title), 설명(description) 등을 설정.
   • 예: <meta name="description" content="이 사이트는 React로 만든 웹 애플리케이션입니다.">
2. robots.txt 파일
   • 검색 엔진이 내 웹사이트를 크롤링할 수 있도록 허용 또는 차단하는 설정 파일.
   • 예: Disallow: /admin → 관리자 페이지는 검색 엔진에 노출되지 않도록 설정.
3. Sitemap (사이트맵.xml)
   • 사이트 내 모든 페이지의 구조를 검색 엔진이 쉽게 이해하도록 돕는 파일.
   • 예: https://yourwebsite.com/sitemap.xml
4. 웹 접근성 & 성능 최적화
   • 검색 엔진은 로딩 속도, 반응형 디자인(모바일 최적화), 사용자 경험(UX) 등을 고려함.
   • 예: Lighthouse 같은 도구로 사이트 최적화 점수 측정 가능.

🔥 SEO가 중요한 이유

• Google/Naver 검색에서 웹사이트가 상위에 노출되면 방문자가 많아짐.
• 검색 유입(Organic Traffic)이 많으면 광고 없이 무료로 홍보 효과를 얻을 수 있음.

🔹 PWA(Progressive Web App)란?

PWA는 웹앱을 네이티브 앱(모바일 앱)처럼 동작하게 만들어주는 기술입니다.

✅ PWA의 주요 기능

1. 오프라인 지원 (Offline Support)
   • 인터넷이 없어도 기본적인 기능을 사용할 수 있도록 캐싱(Cache) 저장.
   • 예: Google Docs는 오프라인에서도 문서 편집 가능.
2. 홈 화면 추가 (Add to Home Screen)
   • 사용자가 웹사이트를 모바일 홈 화면에 앱처럼 설치할 수 있음.
   • 예: Twitter Lite, Starbucks PWA는 앱 설치 없이 바로 사용 가능.
3. 푸시 알림 (Push Notifications)
   • 웹사이트에서도 모바일 앱처럼 푸시 알림을 받을 수 있음.
   • 예: 카카오톡 웹버전에서 푸시 알림을 받을 수 있음.
4. 빠른 로딩 속도 (Faster Loading)
   • 서비스워커(Service Worker)라는 기술을 사용해 웹페이지를 더 빠르게 로딩함.
   • 예: Instagram PWA 버전은 데이터 절약과 빠른 로딩 지원.

🔥 PWA가 중요한 이유

• 네이티브 앱처럼 빠르고 부드러운 경험 제공.
• 앱스토어에 등록하지 않고도 설치 가능.
• 모바일 유저를 위한 최적화된 웹 환경 제공.

🚀 SEO & PWA 정리

                  구분                                         설명                                                   필요 여부

SEO (검색 엔진 최적화)	Google/Naver 검색 결과에서 상위에 나오게 하는 기술	웹사이트가 검색 유입이 필요하면 사용
PWA (프로그레시브 웹 앱)	웹사이트를 앱처럼 동작하게 만드는 기술	모바일 유저가 많고, 빠른 로딩이 필요하면 사용

✅ 리액트 프로젝트 예시

• SEO: robots.txt로 검색 엔진 최적화 가능.
• PWA: manifest.json, logo192.png, logo512.png 필요 없으면 삭제 또는 변경.