보민님의 블로그

[코드스테이츠 PMB 11기]ZIPAIR의 프론트엔드 탐색하기_W7D1 본문

PMB/데일리과제

[코드스테이츠 PMB 11기]ZIPAIR의 프론트엔드 탐색하기_W7D1

야옹씌 2022. 4. 26. 02:25
ZIPAIR의 프론트엔드 탐색하기

ZIPAIR는 일본항공을 모기업으로 두고 있는 중저가형 하이브리드 항공사이다. 어떤 페이지를 분석할까 고민하다 1월에 대한항공, 아시아나 모두 운행하지 않아 난감했을 때 ZIPAIR는 표가 있어 이용한 적이 있다. 처음 보는 항공사였지만 좋았던 기억이 있다. 그리고 Vue.js를 이용하여 SPA(Single Page Application) 웹어플리케이션을 개발한 경험이 있는데 ZIPAIR 또한 Vue.js를 이용하여 SPA로 제작된  랜딩페이지이기에 세상에 이건 운명...?이라는 말도 안되는 교집합을 가지고 오늘은 ZIPAIR를 분석해보려 한다.

+) ZIPAIR의 웹페이지를 만든 회사에 사용한 언어가 무엇인지 물어봤을 때 22년 01월 기준 Vue.js라는 대답을 받았었다.

 

우리가 보는 페이지는 HTML, CSS, JavaScript로 이루어져 있고 이 화면을 프론트엔드라 한다. 사용자들이 보는 화면을 개발하는 사람을 프론트엔드 개발자라 하고 이들은 JavaScript언어를 기반으로 프레임워크와 라이브러리를 이용하여 웹페이지를 개발한다. 요즘 많이 사용하는 프론트엔드 프레임워크로는 Vue.js와 React가 있다.

 

HTML의 역할
: 구조 만들기
콘텐츠의 레이아웃을 제어
웹 페이지 디자인을 위한 구조 제공
모든 웹 페이지의 기본 빌딩 블록

웹페이지에서 F12를 누르거나 오른쪽 마우스를 클릭해 '검사'를 누르면 개발자 도구로 들어갈 수 있다.

ZIPAIR의 HTML

<HEAD>

HTML은 <head>와 <body>로 이루어져 있다. head의 요소는 웹페이지에 직접 표시되진 않지만 현재 페이지의 인코딩(언어정보), 페이지 설명 등의 데이터를 설명하는 데이터가 삽입되어있다.

<title> 사이트 제목 </title>

<meta name="Description" content="소개 내용"/>

구글에 ZIPAIR를 검색했을때 나오는 웹페이지 제목과 웹페이지에 대한 설명 내용도 <head>에 담겨있다.

<link href="style.css" type="text/css" rel="stylesheet" /> 

<link> 태그는 외부의 문서와 연결하는 태그로 rel은 연결할 아이템과의 관계를 뜻한다. 
<script type="text/javascript" src="abc.js"> </script>
src속성에 js파일명을 기입하면 외부 js 파일을 연결할 수 있다.

<BODY>

웹페이지의 본문 영역으로 <body>~</body> 사이의 내용들이 랜더링을 통해 웹페이지에 표시된다.

ZIPAIR는 크게 <header><main><footer> 세 영역으로 나뉘어져있다. 아래의 이미지는 개발자 도구로 각 태그를 선택했을 때 잡히게 되는 영역이다.

<header>

 

<main>
<footer>

CSS의 역할
: 웹사이트 스타일 지정
웹 페이지 요소에 스타일을 적용
웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 함
주로 웹 페이지의 "모양과 느낌"을 처리

 

CSS Overview를 통해 어떤 엘리먼트(요소)가 몇 개 사용되었고 사이트에서 사용된 색과 font의 정보를 한눈에 알 수 있다. Media queries부분에서는 반응형 웹이 어떻게 제작되었을지 추측할 수 있다.

Overview가 아닌 요소마다의 css도 엘리멘트를 선택해서 확인할 수 있다. 사용된 컬러(color: #118066;)와 margin값(오른쪽으로 10px)으로 바깥과의 여백 등의 정보를 알 수 있다.

body영역의 css

css를 한 번에 모아서 설정할 수 있는데 body영역의 font-size를 16px, line-height(텍스트 줄 높이)를 1.5로 설정했다.

font는 font-family: hiragino kaku gothic pro,Noto Sans JP,sans-serif로 여러 개의 폰트가 기술되어 있다. 이는 hiragino kaku gothic pro가 없을 경우 다음 폰트인 Noto Sans JP를 사용하고, Noto Sans JP가 없을 경우 sans-serif를 사용하라는 뜻이다.

css를 삭제했을시의 페이지

<head>와 <body> 태그의 css파일을 모두 삭제했을 시의 화면이다. 스타일이 무너져 가시성이 나쁘다는 것을 알 수 있다.

 

JavaScript의 역할
: 상호 작용 증가
웹 페이지에 상호 작용 추가
복잡한 기능 및 기능 처리
기능을 향상시키는 프로그래밍 코드

개발자 도구로 js코드를 보게 되면 압축(Minify) / 난독화(Uglify) 되어있어서 실제 코드를 파악하기 힘들다. 

무언가 이벤트가 걸려있을 법한 요소를 찾아보고 해당 요소에 어떠한 JS코드가 연결되어있는지 알아보자.

인터랙션을 녹화하기 위해 모바일에서 사이트에 접속해 출발지를 선택했을 때 어떠한 동작이 일어나는지 확인해보았다. 기본값은 서울로 선택되어 있고 영역을 선택하면 출발지 선택의 팝업창이 뜬다.

개발자 도구의 Event Listeners를 통해 해당 영역에 어떠한 이벤트가 걸려있는지 확인할 수 있다. click이벤트가 설정되어 있고 해당 js영역으로 이동할 수 있다. function은 함수로 br함수는 4개의 매개변수를 받고 있다.

출발지를 선택했을 때의 JS코드만 살펴보았지만 검색하기, 언어, 통화 변경 등 페이지 안에는 다양한 인터랙션과 함께 js코드가 존재한다.

 

 

작년에 어떤 사이트를 똑같지만 똑같지 않게 만들어 달라던 고객의 요구가 있었다. 그때... 개발자 도구로 뜯어봤던 기억이 새록새록 났다. 참...^^ 즐거웠는데...ㅎㅎ 그 당시에도 js는 도대체 어떻게 봐야 할지 모르겠어서 그냥 만들고 말지 하고 무지성으로 싹 다 만들었던 기억이 난다. 개발자 도구에서 보면 변수명들이 알파벳으로만 나와서 파악하기가 쉽지 않다. 뭔가 방법이 있는 걸까 궁금하다. 그때는 사수도 없고 시간도 없어서 해당 사이트의 js를 해석할 시간에 코드를 직접 짜자는 마인드여서 지나갔는데 다시 만난걸 보니 찾아봐야겠다. 방법이 있는 건지 아니면 다른 분들도 틀만 보고 해석을 하지 못하는 건지.

 

프론트엔드를 분석하며 머리로 알고 있는 것과 말과 글로 표현하는 것은 또 다른 역량이라는 것을 오늘도 느낀다.

PM으로서 개발자와 효율적인 커뮤니케이션을 하기 위해 말로 전달할 수 있도록 지식과 개념을 확실하게 공부하고 정리해 놓자.

'PMB > 데일리과제' 카테고리의 다른 글

[코드스테이츠 PMB 11기]펫프렌즈의 Flow Chart와 동작 _W7D4  (0) 2022.04.29
[코드스테이츠 PMB 11기]네이티브앱, 모바일 웹앱, 하이브리드앱 비교분석하기_W7D2  (0) 2022.04.27
[코드스테이츠 PMB 11기]호텔 예약 수요를 분석 후 파이썬으로 가시화하기_W6D4  (0) 2022.04.22
[코드스테이츠 PMB 11기]zoom의 서비스 유형과 사업단계(린 분석)_W6D3  (0) 2022.04.21
[코드스테이츠 PMB 11기]펫프렌즈의 핵심지표와 GA_W6D2  (2) 2022.04.20
'PMB/데일리과제' Related Articles more