-
[코드스테이츠 PMB 14기] W7D1 Google 웹 페이지 FE 시점으로 분석코드스테이츠 PMB 14기/Daily 2022. 10. 6. 15:09
Google
무슨 말이 더 필요할까. 구글은 전세계 온라인을 집어삼키고 있는 거대한 기업이다. 만약 지금 구글이 없어진다면 인류는 석기시대로 돌아간 듯한 느낌을 받을 것이다. 구글의 다양한 제품과 사업은 우리 생활에 지대한 영향을 끼치고 있다. 심지어 사람들은 자신이 평상시에 구글과 관련한 서비스를 인지하지 못한 채 사용하고 있기도 하다. 단순히 검색 영역을 넘어서 AI, 투자, 건강, 인프라 등 다양한 영역에서 영향력을 행사하고 있다.
그런 구글의 랜딩페이지로 들어가면 구글이 하고 있는 일들과 비교했을 때 과도하게 심플하다. 단순한 버튼 몇 개와 검색창이 전부다. 자신들이 포탈 회사가 아니라 검색 회사임을 강조하는 느낌이다. 우리나라의 대표적인 검색 사이트인 네이버의 경우만 보더라도 다양한 버튼과 광고가 웹 페이지에 자리잡고 있다. 구글은 자사의 구글 애드센스라는 수익 수단을 가지고 있어 광고를 띄울 필요가 없으며, 과거부터 이어지고 사용자가 검색에 집중할 수 있도록 한 심플한 랜딩페이지를 고수한다고 생각한다.
그럼 이 페이지는 어떤 구조로 구성되어 있을까? 우리가 보는 웹 페이지는 프론트엔드 영역에 있다고 할 수 있다. 구글의 서버 컴퓨터에 있는 웹 페이지 코드를 우리의 기기로 받아와 크롬이나 사파리같은 브라우저가 코드를 해석하고 그 결과를 우리에게 보여주는 과정을 거친다. 이때 서버로부터 받아오는 코드는 크게 HTML, CSS, JavaScript 세 요소로 나뉜다.
HTML
HTML은 Hyper Text Markup Language의 줄임말로, 웹 페이지의 뼈대라 할 수 있다. HTML은 건물을 지을 때 세우는 철근과 같다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것이다. 형태는 <명령어> ... </명령어> 로 시작과 끝을 나타내며 <head>, <body>, <div> 등을 이용하여 웹 페이지의 구성과 틀을 정의할 수 있다.
구글의 웹 페이지를 보면 전체가 <body>에 속해있다. 파랗게 블러처리된 부분이 바디 요소를 나타내는 부분인데 페이지 전체를 덮고 있는 것으로 보아 이 안에 모든 바디 요소가 속해 있다고 볼 수 있다. 바디는 HTML 문서의 본문에 해당하는 곳으로 실제 화면에 나타나는 내용을 나타내는 부분이다. 즉, 사용자가 웹브라우저 상에 표현하고자 하는 내용들을 다양한 태그를 통해 구성하며 웹문서의 대부분을 차지하게 된다.
<head>는 HTML 문서에 관한 기본 정보를 포함하고 있는 부분으로, 주로 문서의 제목, 제작자, 문서정보 등이 포함된다. <html>, <head>, <title> 등의 태그를 적어주더라도 실제 화면상에는 아무런 내용이 출력되지 않는다. 그런데 왜 이런 태그가 존재하냐면, HTML 태그를 읽는 웹브라우저에게 필요한 내용을 알려주는 역할을 한다. 예를 들어 타이틀은 화면에 출력되지는 않지만 웹브라우저의 제목 표시줄에는 출력하는 역할을 한다.
CSS
CSS는 Cascading Style Sheet 의 줄임말로 웹 페이지를 꾸며주는 요소이다. 건물에 비유하자면 내부 인테리어를 꾸며주는 것이다. 버튼의 색이나 크기, 작성되는 텍스트의 서체나 정렬 등 페이지에서 각 요소들이 어떻게 보여질 것인가를 정해준다.
구글의 로고를 보자. 로고는 이미지로 처리되어 입력되고 중앙 하단에 배치되도록 짜여있다. 보통 웹 사이트 화면을 블록처럼 나누어 구성하는데, 그 블록은 <div class = "o3j99 LLD4me yr19Zb LS8OJ"> 로 설정 되어 있고, 그 안에서 가운데 정렬 하단 배치를 의미한다. 사이즈는 높이 92px로 설정되어 가로 길이는 자동 272px로 설정되는 것으로 보인다.
JavaScript
자바스크립트는 웹 페이지에서 각 요소가 어떻게 동작할 것인지 프로그래밍해주는 요소이다. 건물에서 조명을 켜기 위해 전기 배선을 설계하는 것과 같다. 어떤 요소를 클릭하거나 텍스트를 입력하는 등 웹 페이지를 사용하면서 발생하는 상호작용을 위한 요소이다.
위 이미지에서 검색 박스의 마이크 버튼은 음성인식 검색을 지원한다. jscontroller로 정의된 요소로, 버튼에 마우스를 올리면 '음성 검색' 이 적혀진 라벨이 노출되게 되어있다. 역할은 버튼으로 정의되며, jsaction="h5M12e;rcuQ6b:npT2md" 요소에 음성 검색을 위한 자바스크립트 코드가 포함되어 있을 것으로 추측한다.
구글의 이런 간단한 웹페이지도 수 많은 알 수 없는 글자들을 통해 구현된다는 것이 놀랍다. 이런 부분이 말로만 듣던 '버튼하나 추가하는게 그렇게 어렵나요?' 에 대한 반박이라 할 수 있겠다. 사용자가 해당 페이지에 랜딩할 때마다 최적화된 UI를 통한 서비스를 제공받게끔 해야 하므로 이런 소소한 요소들이 추가된다고 할 수 있다. 정말 버튼 하나가 추가되면 그 버튼으로 인해 기존에 구성되었던 요소들을 전부 다시 손봐야 하는 상황이 생길 수 있다. 물론 개발자의 역량이나 회사가 가지고 있는 프레임워크에 따라 수정이 간편할 수 있겠으나, 이를 구축하기 위해서 어마어마한 리소스가 투입된다.
이번 과제를 통해, 앞으로 PM 업무를 보며 개발자에 대한 리스펙을 가지고 역지사지의 자세로 커뮤니케이션 해야겠다는 다짐을 하며 과제를 마친다.
Reference
http://www.homejjang.com/03/html_structure.php
'코드스테이츠 PMB 14기 > Daily' 카테고리의 다른 글
[코드스테이츠 PMB 14기] W7D3 기상청 오픈 API (0) 2022.10.11 [코드스테이츠 PMB 14기] W7D2 앱 서비스의 이해 (0) 2022.10.07 [코드스테이츠 PMB 14기] W6D4 전기차 충전소 데이터를 이용한 가설 검증 (0) 2022.10.04 [코드스테이츠 PMB 14기] W6D3 한컴 Docs 린 분석 (0) 2022.09.30 [코드스테이츠 PMB 14기] W6D2 '뉴닉' 웹페이지 데이터 추적하기 (0) 2022.09.29