마지막으로 '개발자'라는 용어는 소프트웨어 엔지니어, 코더, 프로그래머, 프론트엔드 및 백엔드 개발자, 그리고 다양한 유형의 IT 전문가를 모두 포괄하는 용어입니다. 이들은 웹사이트를 구성하고 구동하는 다양한 웹 기술의 코드를 작성하거나 관리하는 사람들입니다.
SEO 담당자로서 C++ 및 Java와 같은 프로그래밍 언어, PHP 및 JavaScript와 같은 스크립팅 언어, HTML, XML 또는 CSS와 같은 마크업 언어를 완벽하게 숙달하는 것이 현실적으로 가능할 수도 있고 그렇지 않을 수도 있습니다.
그리고 프로그래밍, 스크립팅, 마크업 언어는 훨씬 더 많습니다. SEO 전문가가 아닌 정규직 프로그래머라 할지라도 모든 종류의 언어를 마스터하는 것은 엄청나게 어려운 일일 것입니다.
하지만 SEO 전문가로서 웹을 구성하는 다양한 언어, 기술, 기술 스택을 이해하는 것은 필수적입니다. 개발자가 실제로 실행할 SEO 권장 사항을 제시할 때는 개발자의 사고방식, 어려움, 업무 내용 등을 이해하고 그들이 사용하는 언어로 소통할 수 있어야 합니다.
개발자들이 아는 모든 것을 알 필요는 없지만, 개발자들이 하는 일을 잘 이해하고 있어야 더 나은 질문을 하고, 그들에게 공감을 불러일으키는 방식으로 SEO 관련 조언을 제공할 수 있으며, 결과적으로 그 조언이 실행될 가능성이 높아집니다.
상대방의 언어를 구사하고 그들의 세계를 이해하면, 모두가 같은 목표를 향해 힘을 합쳐 긍정적인 결과를 만들어내는 협력적인 환경 조성에 기여하게 됩니다.
물론, 협력적인 관계 구축 외에도 전문 SEO 전문가가 되려면 기술적인 문제 해결과 예방에 많은 노력을 기울여야 하므로 웹 기술의 다양한 측면을 이해하는 것은 선택 사항이 아니라 필수적입니다.
웹 기술은 복잡하고 어렵게 느껴질 수 있지만, 이 가이드가 여러분의 이해를 돕고 부족한 부분을 채워주는 데 도움이 되기를 바랍니다.
바로 뛰어 들자!
인터넷 vs. 월드 와이드 웹
대부분의 사람들은 이 두 용어를 혼용해서 사용하지만, 엄밀히 말하면 두 용어는 관련이 있기는 해도 같은 의미는 아닙니다.
인터넷은 서로 연결된 독립적인 컴퓨터들의 분산형 네트워크로 시작되었습니다.
미국 국방부는 시간이 흐르면서 이 사업에 관여하게 되었고, 그중에는 초기 패킷 교환 네트워크이자 TCP/IP(전송 제어 프로토콜 및 인터넷 프로토콜)를 최초로 사용한 ARPANET(고등 연구 프로젝트국 네트워크) 프로젝트 개발 계약도 포함되었습니다.
ARPANET 프로젝트는 다음과 같은 결과를 가져왔습니다.인터넷일하는다양한 컴퓨터 네트워크를 결합하여 더 큰 "네트워크의 네트워크"를 만들 수 있는 환경입니다.
월드 와이드 웹의 개발은 1980년대 영국의 컴퓨터 과학자 팀 베너스-리 경의 공으로 여겨집니다. 그는 하이퍼텍스트 문서를 연결하는 기술을 개발했고, 이는 인터넷 "위에" 구축된 정보 공유 모델로 이어졌습니다.
문서(웹 페이지)는 "HTML"(하이퍼텍스트 마크업 언어)이라는 마크업 언어로 형식을 지정하도록 지정되었으며, 사용자가 클릭하여 다른 웹 페이지로 이동할 수 있는 "하이퍼링크"를 사용하여 서로 연결될 수 있었습니다.
웹 호스팅
웹 호스팅, 또는 줄여서 호스팅은 개인과 기업이 웹페이지나 웹사이트를 인터넷에 올릴 수 있도록 해주는 서비스입니다. 호스팅 회사는 "서버"라고 불리는 컴퓨터들을 보유하고 있는데, 이 서버들은 여러분이 이미 알고 있는 컴퓨터와 크게 다르지 않지만 물론 차이점도 있습니다.
웹 호스팅 업체는 웹 호스팅 외에도 다양한 서비스를 제공하는 여러 유형이 있습니다. 이러한 서비스에는 도메인 이름 등록, 웹사이트 제작 도구, 이메일 주소, 웹사이트 보안 서비스 등이 포함될 수 있습니다.
간단히 말해, 호스팅 업체는 웹사이트가 게시되는 곳입니다.
웹 서버
웹 서버는 웹 문서와 리소스를 저장하는 컴퓨터입니다. 웹 서버는 클라이언트(브라우저)로부터 웹 페이지, 이미지 등에 대한 요청을 받습니다. 웹 페이지를 방문하면 브라우저는 해당 웹 페이지를 브라우저에 표시하는 데 필요한 모든 리소스/파일을 요청합니다. 그 과정은 대략 다음과 같습니다.
클라이언트(브라우저)에서 서버로: "이 웹페이지가 필요한데, 페이지에 있는 모든 텍스트, 이미지 및 기타 자료를 제공해 주세요."
서버에서 클라이언트로: "좋아요, 여기 있습니다."
웹 페이지가 표시되는(렌더링되는) 속도는 서버 속도와 요청된 파일의 크기 등 다양한 요인에 영향을 받습니다.
가장 흔히 접하게 될 서버 유형은 세 가지입니다.
- Apache는 Linux를 비롯한 여러 운영 체제와 호환되는 오픈 소스 무료 소프트웨어입니다. 흔히 사용되는 약어인 "LAMP 스택"은 Linux, Apache, MySQL(관계형 데이터베이스) 및 PHP(서버 측 스크립팅 언어)의 조합을 의미합니다.
- IIS는 "인터넷 정보 서비스(Internet Information Services)"의 약자로, 마이크로소프트에서 개발한 독점 소프트웨어입니다. IIS 서버는 윈도우 NT 운영 체제에서 실행되기 때문에 흔히 "윈도우 서버"라고 불립니다.
- NGINX(발음은 "엔진 X")는 고성능 서버로, 로드 밸런싱, 리버스 프록시 등 다양한 기능을 제공한다고 알려져 있습니다. NGINX의 목표와 존재 이유는 다른 유형의 서버보다 뛰어난 성능을 제공하는 데 있습니다.
서버 로그 파일
흔히 "로그 파일"로 줄여 부르는 이 파일들은 웹 페이지 및 이미지와 같은 관련 리소스에 대한 요청에 대한 서버 활동 기록입니다. 일부 서버는 이미 이러한 활동을 기록하도록 구성되어 있을 수 있으며, 다른 서버는 구성해야 합니다.
로그 파일은 웹사이트에서 실제로 무슨 일이 일어나고 있는지에 대한 "실제 상황"을 보여주며, 요청된 페이지 또는 파일, 요청 날짜 및 시간, 요청을 보낸 사용자 에이전트, 응답 유형(찾음, 오류, 리디렉션 등), 리퍼러, 그리고 제공된 바이트 수 및 클라이언트 IP 주소와 같은 몇 가지 항목을 포함합니다.
SEO 담당자는 로그 파일 분석에 익숙해져야 합니다. 이 주제에 대해 더 자세히 알아보려면 JafSoft에서 제공하는 웹 서버 로그 파일 샘플 설명을 참조하세요.
FTP
FTP는 파일 전송 프로토콜의 약자로, 웹페이지, 이미지, XML 사이트맵, robots.txt 파일, PDF 파일과 같은 리소스 파일을 웹 호스팅 계정에 업로드하여 웹 브라우저를 통해 웹에서 접근하고 볼 수 있도록 하는 데 사용됩니다. 이러한 용도로 사용할 수 있는 무료 FTP 소프트웨어 프로그램이 있습니다.
인터페이스는 익숙한 파일 폴더 트리 구조로 되어 있어 왼쪽에는 로컬 컴퓨터의 파일이, 오른쪽에는 원격 서버의 파일이 표시됩니다. 로컬 파일을 서버로 드래그 앤 드롭하여 업로드할 수 있습니다. 이렇게 하면 파일을 인터넷에 업로드할 수 있습니다! 더 자세한 내용은 Wired에서 제공하는 FTP 초보자 가이드를 참고하세요.
도메인 이름
도메인 이름은 (일반적으로) 텍스트 문자열이며 URL(Uniform Resource Locator)에 사용됩니다. 간단히 말해서, URL https://www.website.com에서 "website"가 도메인 이름입니다.
루트 도메인 및 서브도메인
루트 도메인은 우리가 흔히 생각하는 URL(https://www.website.com)의 "웹사이트"와 같은 도메인 이름입니다. 서브도메인은 URL에서 www. 뒤에 오는 부분입니다. 서브도메인의 다른 예로는 news.website.com, products.website.com, support.website.com 등이 있습니다.
도메인과 서브도메인의 차이점에 대한 자세한 내용은 다음을 참조하세요.
URL 대 URI
URL은 "Universal Resource Locator"(예: https://www.website.com/this-is-a-page)의 약자이고, URI는 "Uniform Resource Identifier"의 약자로 전체 URL의 부분 집합입니다(예: /this-is-a-page.html).
HTML, CSS 및 자바스크립트
HTML, CSS, JavaScript를 여기에 함께 묶은 이유는 각각이 별도의 섹션으로 다뤄질 가치가 없어서가 아니라, SEO 담당자들이 이 세 가지 언어가 현대 웹 페이지 코딩의 상당 부분을 차지한다는 점을 이해하는 것이 중요하기 때문입니다 (물론 예외도 많으며, 그중 일부는 이 섹션의 다른 곳에서 설명하겠습니다).
HTML은 "하이퍼텍스트 마크업 언어"의 약자로, 월드 와이드 웹의 웹 페이지를 만드는 데 사용되는 최초이자 기본 언어입니다.
CSS는 "캐스케이딩 스타일 시트(Cascading Style Sheets)"의 약자로, 웹 페이지의 HTML 요소를 스타일링하고 배치하는 데 사용되는 스타일 시트 언어입니다. 이를 통해 표현과 콘텐츠를 분리할 수 있습니다.
자바스크립트(프로그래밍 언어 "자바"와 혼동하지 말 것)는 웹 페이지에 상호작용 기능을 구현하기 위한 클라이언트 측 스크립팅 언어입니다.
AJAX 및 XML
AJAX는 "비동기 JavaScript 및 XML"의 약자입니다. 비동기 방식이란 클라이언트/브라우저와 서버가 독립적으로 작동하고 통신할 수 있음을 의미하며, 이를 통해 사용자는 서버에서 발생하는 작업과 관계없이 웹 페이지와의 상호 작용을 계속할 수 있습니다. JavaScript는 비동기 서버 요청을 처리하는 데 사용되며, 서버의 응답을 받으면 JavaScript는 사용자에게 표시되는 페이지 콘텐츠를 수정합니다. 서버에서 클라이언트로 비동기적으로 전송되는 데이터는 XML 형식으로 패키징되어 JavaScript에서 쉽게 처리할 수 있습니다. 이는 클라이언트와 서버 간의 트래픽을 줄여 응답 시간과 속도를 향상시킵니다.
XML은 "확장 가능한 마크업 언어(Extensible Markup Language)"의 약자로, HTML과 유사하게 태그, 요소, 속성을 사용하며 데이터를 저장하고 전송하도록 설계되었습니다. 반면 HTML은 데이터를 표시하는 데 사용됩니다. SEO(검색 엔진 최적화) 측면에서 XML은 주로 XML 사이트맵 파일에 사용됩니다.
구조화된 데이터(일명 Schema.org)
구조화된 데이터는 검색 엔진이 페이지의 콘텐츠, 또는 적어도 페이지의 특정 요소를 더 잘 이해할 수 있도록 페이지의 HTML에 추가할 수 있는 마크업입니다. 승인된 표준 형식을 사용하면 검색 엔진이 페이지의 관련 데이터를 더 쉽게 분석할 수 있도록 추가 정보를 제공할 수 있습니다.
구조화된 데이터는 레시피, 문학 작품, 제품, 장소, 다양한 유형의 이벤트 등의 특정 측면을 표시하는 데 일반적으로 사용됩니다.
Schema.org는 웹 페이지의 구조화된 데이터 마크업을 위한 공통의 표준화된 스키마 세트를 만들기 위한 공동 노력으로 2011년 6월 2일에 출시되었습니다(곧이어 Yandex도 합류). 그 이후로 "Schema.org"라는 용어는 "구조화된 데이터"라는 용어와 동의어가 되었으며, Schema.org의 구조화된 데이터 유형은 새로운 유형이 비교적 빈번하게 추가되면서 지속적으로 발전하고 있습니다.
구조화된 데이터의 주요 장점 중 하나는 검색 엔진이 정보를 더 쉽게 이해할 수 있도록 데이터의 모호성을 해소하는 데 도움이 된다는 점입니다. 또한 특정 마크업 요소를 추가하면 리뷰 별점, 레시피 조리 시간 등과 같은 추가 정보가 검색 결과 페이지(SERP)에 표시될 수 있습니다. 단, 구조화된 데이터를 추가한다고 해서 이러한 SERP 기능이 반드시 표시되는 것은 아닙니다.
구조화된 데이터 어휘는 여러 가지가 있지만, JSON-LD(JavaScript Object Notation for Linked Data)는 Schema.org 가이드라인에 따라 Google이 선호하고 권장하는 구조화된 데이터 마크업 방식으로 자리 잡았습니다. 하지만 마이크로데이터나 RDFa와 같은 다른 형식도 지원됩니다.
JSON-LD는 기존 HTML 요소를 감싸야 하는 마이크로데이터와 달리 웹 페이지의 HTML 헤더 섹션에 단일 블록으로 추가할 수 있어 페이지에 추가하고 유지 관리 및 변경이 더 쉽고 오류 발생 가능성도 적습니다.
프런트엔드 vs. 백엔드, 클라이언트 측 vs. 서버 측
혹시 "저는 프런트엔드 개발자입니다"라고 말하는 개발자를 만나서 그 의미가 무엇인지 궁금했던 적이 있나요? 아니면 "아, 그건 백엔드 기능이군요"라는 말을 들어본 적이 있나요? 이 모든 것이 혼란스러울 수 있지만, 쉽게 이해할 수 있습니다.
"프런트엔드"와 "클라이언트 측"은 둘 다 같은 의미입니다. 즉, 브라우저에서 실행된다는 뜻입니다. 예를 들어, 자바스크립트는 원래 브라우저의 웹 페이지에서 실행되도록 개발되었으며, 이는 서버에 대한 호출 없이 작동한다는 것을 의미합니다.
"백엔드"와 "서버 측"은 둘 다 같은 의미입니다. 즉, 서버에서 실행된다는 뜻입니다. 예를 들어, PHP는 서버 측 스크립팅 언어로, 브라우저가 아닌 서버에서 실행됩니다. 워드프레스와 같은 일부 콘텐츠 관리 시스템(CMS)은 웹 페이지에 PHP 기반 템플릿을 사용하며, 서버에서 콘텐츠를 불러와 브라우저에 표시합니다.
프로그래밍 언어와 스크립팅 언어
엔지니어와 개발자는 용어에 대한 설명과 정의가 서로 다를 수 있습니다. 어떤 이들은 궁극적으로 차이가 없거나 경계가 모호하다고 주장하지만, 프로그래밍 언어(C나 파스칼 등)와 스크립팅 언어(자바스크립트나 PHP 등)의 일반적인 차이점은 프로그래밍 언어는 명시적인 컴파일 단계를 필요로 하는 반면, 사람이 작성한 읽기 쉬운 코드는 컴퓨터가 이해할 수 있는 특정 기계어 명령어 집합으로 변환된다는 점입니다.
CMS (콘텐츠 관리 시스템)
CMS는 웹사이트(또는 좀 더 세련된 용어로 "디지털 콘텐츠")를 만들고 관리하는 데 사용되는 소프트웨어 애플리케이션 또는 관련 프로그램 모음입니다. 기본적으로 CMS를 사용하면 웹 페이지, 블로그 게시물 및 기사를 생성, 편집, 게시 및 보관할 수 있으며 일반적으로 다양한 내장 기능을 제공합니다.
CMS를 사용하여 웹사이트를 제작한다는 것은 코드를 처음부터 작성할 필요가 없다는 것을 의미하며, 이것이 CMS가 널리 인기를 얻는 주요 이유 중 하나입니다.
CMS의 또 다른 공통적인 특징은 플러그인입니다. 플러그인은 핵심 CMS 기능 목록에 포함되지 않은 기능을 확장하기 위해 핵심 CMS와 통합될 수 있습니다.
일반적인 CMS로는 WordPress, Drupal, Joomla, ExpressionEngine, Magento, WooCommerce, Shopify, Squarespace 등이 있으며, 그 외에도 매우 많습니다.
콘텐츠 전달 네트워크 (CDN)
때때로 "콘텐츠 전송 네트워크"라고도 불리는 CDN은 지리적으로 분산된 대규모 서버 네트워크로, 웹 콘텐츠를 요청하는 클라이언트와 더 가까운 서버에서 콘텐츠를 제공하여 지연 시간(전송 시간)을 줄이는 것을 목표로 합니다.
CDN은 웹 콘텐츠의 복사본을 여러 서버에 캐시한 다음, 웹사이트 방문자에게 가장 가까운 서버에서 요청된 웹 콘텐츠를 제공합니다. CDN은 높은 가용성과 성능을 동시에 제공하기 위해 사용됩니다.
HTTPS, SSL 및 TLS
웹 데이터는 코드로 이루어진 데이터 패킷을 통해 컴퓨터 간에 전송됩니다. 클라이언트(웹 브라우저)는 사용자가 서버에 웹 페이지를 요청할 때 사용자 인터페이스 역할을 합니다. HTTP(하이퍼텍스트 전송 프로토콜)는 브라우저가 서버와 통신하고 요청을 보내는 데 사용하는 프로토콜입니다. HTTPS는 이 프로토콜의 보안 버전입니다.
웹사이트 소유자는 웹사이트를 HTTPS로 전환하여 사용자와의 연결을 더욱 안전하게 만들고 제3자가 통신을 가로채거나 변경하는 "중간자 공격"에 대한 취약성을 줄일 수 있습니다.
SSL은 "보안 소켓 계층(Secure Sockets Layer)"의 약자로, 서버와 브라우저 간의 통신 암호화를 설정하는 표준 보안 프로토콜입니다. TLS(전송 계층 보안)는 SSL의 최신 버전입니다.
HTTP/1.1 및 HTTP/2
팀 버너스 리가 1989년에 HTTP 프로토콜을 발명했을 당시, 그가 사용했던 컴퓨터는 오늘날의 컴퓨터만큼의 처리 능력과 메모리를 갖추고 있지 않았습니다. HTTP/1.1을 사용하여 서버에 연결하는 클라이언트(브라우저)는 일련의 네트워크 요청-응답 과정을 통해 정보를 수신하는데, 이러한 과정을 흔히 서버와의 "왕복 통신" 또는 "핸드셰이크"라고 부릅니다.
왕복 통신마다 시간이 소요되며, HTTPS는 SSL/TSL 계층이 추가된 HTTP 연결이므로 서버와의 또 다른 핸드셰이크 과정이 필요합니다. 이 모든 과정에 시간이 걸려 지연이 발생합니다. 과거에는 충분히 빨랐던 속도가 지금도 반드시 충분히 빠르다고 할 수는 없습니다.
HTTP/2는 HTTP 1.1 이후 처음으로 나온 새로운 버전입니다. 간단히 말해, HTTP/2는 멀티플렉싱, 압축, 요청 우선순위 지정, 그리고 서버 푸시(서버가 클라이언트가 아직 요청하지 않은 리소스를 전송할 수 있도록 하는 기능)를 활용하여 서버가 HTTP/1.1보다 더 많은 리소스를 클라이언트/브라우저에 더 빠르게 전달할 수 있도록 합니다.
Application Programming Interface (API)
응용 프로그램이란 간단히 말해 특정 작업을 수행할 수 있는 소프트웨어의 한 종류를 가리키는 일반적인 용어입니다. 응용 프로그램에는 소프트웨어, 웹 브라우저, 데이터베이스 등이 포함됩니다.
API는 애플리케이션, 일반적으로 데이터베이스와의 인터페이스입니다. API는 요청을 받아 시스템에 원하는 바를 전달하고 응답을 반환하는 메신저와 같습니다.
레스토랑에서 특정 요리를 주문하고 싶을 때, 주문을 받는 웨이터는 손님과 주방 사이에서 소통하는 메신저 역할을 합니다. 이는 마치 API를 사용하여 데이터베이스에서 정보를 요청하고 검색하는 것과 유사합니다.
AMP, PWA 및 SPA
오늘날 웹사이트를 만들고 싶다면 선택지가 많습니다.
콘텐츠 전달에는 HTML을, 디자인에는 CSS를, 상호작용 요소에는 JavaScript를 사용하여 처음부터 직접 구축할 수 있습니다.
또는 워드프레스, 마젠토, 드루팔과 같은 CMS(콘텐츠 관리 시스템)를 사용할 수도 있습니다.
또는 AMP, PWA 또는 SPA를 사용하여 구축할 수도 있습니다.
AMP AMP는 Accelerated Mobile Pages의 약자로, 구글에서 시작한 오픈 소스 프로젝트입니다. AMP는 특정 HTML 태그와 다양한 기능 구성 요소를 정의하고 있으며, 지속적으로 발전하고 있습니다. AMP의 장점은 AMP 규격에 맞춰 코딩했을 때 웹 페이지 로딩 속도가 매우 빠르다는 것이고, 단점은 일부 원하는 기능이 아직 지원되지 않을 수 있으며, 분석 추적에 문제가 발생할 수 있다는 것입니다.
PWA는 프로그레시브 웹 앱(Progressive Web App)의 약자로, 기존 웹사이트와 모바일 앱의 장점을 결합한 기술입니다. PWA는 푸시 알림, 오프라인 작업 기능, 모바일 앱 시작 아이콘 생성 등 네이티브 앱과 유사한 사용자 경험을 제공합니다.
PWA는 클라이언트와 서버 간 통신에 "서비스 워커"를 사용하여 빠른 웹 페이지 로딩 속도와 네이티브 모바일 앱과 같은 기능을 동시에 제공합니다. 하지만 PWA는 자바스크립트 프레임워크 기반이므로 몇 가지 기술적인 어려움에 직면할 수 있습니다.
SPA(단일 페이지 애플리케이션)는 사용자가 세션 동안 페이지를 요청할 때마다 서버와의 반복적인 통신을 통해 페이지를 로드하는 기존 웹 페이지와는 다릅니다. SPA는 브라우저 내에서 실행되므로 사용자가 세션 동안 새 페이지를 볼 때 서버 요청을 통한 페이지 재로딩이 필요하지 않습니다.
SPA의 주요 장점은 개발 과정이 간소화되고 사용자 경험이 매우 빠르다는 점입니다. 반면, 검색 엔진이 자바스크립트로 제공되는 콘텐츠를 해석하는 능력이 일관적이지 않아 SEO에 문제가 발생할 가능성이 있다는 점이 주요 단점입니다. 또한 디버깅이 더 어려워 개발 시간을 더 많이 소모할 수 있습니다.
이러한 웹 기술 각각의 미래 성공은 궁극적으로 개발자들의 채택 여부에 달려 있다는 점을 주목할 필요가 있습니다.
맺음말
물론 웹 기술의 모든 세부 사항을 다루려면 매우 두꺼운 책이 필요하겠지만, 이 가이드는 전문 SEO 담당자인 여러분이 웹 기술의 다양한 핵심 측면에 대한 이해에 부족한 부분을 채우는 데 도움이 되는 정보를 제공할 것입니다.
이 글에는 더 자세히 알아보고 싶은 주제에 대한 링크를 많이 제공했습니다. SEO 전문가가 알아야 할 주제는 robots.txt 파일, 메타 로봇 태그, rel 캐노니컬 태그, XML 사이트맵, 서버 응답 코드 등 훨씬 더 많습니다.
_____
by 데이비드 포트니
출처: 검색엔진워치닷컴
