SEO와 PWA에 대해 알아보자 !

아카시아·2021년 11월 5일

1. SEO (Search Engine Optimization, 검색 엔진 최적화)

정의 : 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.
웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 되면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라 할 수 있다.
기본적인 작업방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다.

정의 : HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱
몇 가지의 스마트한 기능들을 추가하면 어떤 웹 사이트도 PWA로 바꿀 수 있다. 즉, 네이티브 앱을 개발하는 것을 상당히 어렵지만 PWA는 훨씬 더 빠르게 개발할 수 있다. 또한, 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있다.
온라인에서 볼 수 있는 많은 사이트들도 실제로는 PWA이다. 이 중 트위터닷컴이 대표적이다. 스마트폰으로 이 사이트에 들어가면 홈 화면에 트위터닷컴을 추가할 수 있다. 그러고 나서 스마트폰에 저장된 트위터 사이트를 열어보면, 모양도 네이티브 앱처럼 보이고 기능도 모두 똑같다. 브라우저 창 같은건 없고 아이폰이든 안드로이드든 실행하는 데 있어서 아무런 차이도 없다. 그냥 로그인해서 이용하면 된다. 이것이 PWA로 웹 애플리케이션을 만들 때의 가장 큰 장점이라 할 수 있다.

네이티브 앱은 일반적으로 해당 플랫폼에 특화된 프로그래밍 언어로 만드는 경우가 많다.
원하는 플랫폼에서 실행되는 앱을 만들기 위해선 관련된 기술도 알아야 한다.
여러 군데의 모바일 환경에 대해서 전부 앱을 만들고 싶다면 그런 각각의 다양한 환경에 필요한 기술들을 알고 있어야 한다. 따라서 하나의 앱을 만들어 모든 앱스토어에 출시하는 것은 쉬운 일이 아니다.

두 개의 환경에서 모두 실행되는 앱을 개발하는 방법 중 대표적인 것이 바로 PWA이다.
PWA는 일단 홈 화면에 저장되면 브라우저에서 실행되며 네이티브 앱처럼 동작한다. 그리고 보안상의 이유로 브라우저가 접근하지 못하는 시스템 하드웨어와 소프트웨어에도 접근이 가능하다.
여러 브라우저들이 PWA를 위한 기술들을 빠르게 채택하고 있지만 iOS의 경우, PWA에 필요한 기술들을 사파리 브라우저가 지원하지 않는 경우가 많다. 애플은 아직까지 관련 기술들을 완전히 지원하지 않기 때문에 다른 플랫폼에서와 동일한 환경을 구성하는 것이 조금 번거롭다.

보안 연결(HTTPS) : PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에 보안 연결을 통해서 서비스를 제공해야 한다.
서비스 작업자(Service Worker) : 서비스 작업자는 백그라운드에서 실행되는 스크립트이다. 서비스 작업자는 네트워크와 관련된 요청의 처리를 도와주기 때문에 그 점에 대해선 걱정하지 않고 더운 복잡한 작업을 수행할 수 있다.
매니페스트 파일(manifest file) : 이것은 JSON 파일이며, PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있다. 여기에서는 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있다.

낭만적인 개발자