랜딩페이지의 뼈와 살을 분류해보자(feat. html, css, js, react)

드디어 7주차에 접어들었다.. 이번 주차에서는 웹 기반 (최소한의)기술스택을 배운다. 오늘 과제는 관심있는 프로덕트를 선정해 웹 랜딩 페이지를 찾고, 랜딩페이지의 프론트엔드 요소를 분석해보는 것이다. 얼마전 브런치에 올렸던 글을 통해 카페노노라는 커뮤니티에서 연락을 받았는데, 검색해보니 마침 랜딩페이지가 있어서 카페노노의 랜딩페이지를 분석해 보았다. 사실 육안으로 보았을 때 배경/글/이미지가 전부여서 구조가 그렇게 어렵진 않겠다 하고 시작했는데..... 열어보니 내가 하필 react로 구현된 페이지를 골랐다^^.. 공부 되고 좋..다..

 

먼저 HTML 구조를 통해 페이지의 뼈대를 살펴보고, CSS 요소와 js요소(이 페이지에서는 jsx)를 분석해 보고자 한다. 모든 태그와 컴포넌트를 다 다루기에는 무리가 있어서, 개념을 설명할 정도의 예시만 사용했다. 

 

---

 

1. HTML 요소

 

먼저 html 요소를 살펴보자. html은 언어라고도 하기 조금 애매한게, 사실상 페이지의 구조에 가깝다. 아래 실제 랜딩페이지와 페이지의 구조를 그린 그림을 비교해 두었는데, 하나씩 자세히 살펴보자. 

 

 

html의 태그는 범위를 구분해주는 역할을 한다. 예를 들어 신문을 생각해 본다면, 각각 다른 페이지이지만 헤드라인이 있는 위치, 소제목이 있는 위치, 본문이 있는 위치와 영역은 정해져 있지 않나. html의 <div/> 태그는 이렇게 각각의 영역을 나누는 태그이다. 조금 더 자세히 들어간다면 제목은 <h1/> 소제목은 <h3/>태그로, 본문의 각 문단은 <p/>태그로 표현할 수 있겠다. 상세 태그까지 다 표기하기에는 너무 복잡해질 것 같아 뼈대만 확인할 수 있도록 <div/> 태그만 표시해 두었는데, 색이 진할수록 가장 위에 쌓이는 것이라 이해하면 된다. 정리하자면 <div/>라는 영역 안에 <h1/>,<h3/>, <p/>와 같은 태그를 활용해 글을 배치하는 것이다. 이미지도 마찬가지다. 

 

 

버튼을 클릭하면 어느 페이지로 이동할까요?

 

그렇다면 버튼은 어떨까? 위의 화면에서 "지금 다운로드" 버튼을 예시로 들면, 해당 버튼을 클릭 시 앱스토어 다운로드/플레이스토어 다운로드 라벨이 뜨고, 앱스토어 다운로드 버튼을 누르면 해당 페이지로 이동한다. 이렇게 버튼을 클릭했을 때 다른 페이지의 링크로 넘어가는 경우, 즉 '이 영역은 링크 영역입니다' 라고 표시하는 태그는 <a/>태그다. 위의 사진과 같이 개발자도구로 확인해보면 <a/>태그 안에 다운로드 페이지에 해당하는 URL이 있음을 볼 수 있다. 과제 가이드에서 버튼 클릭 시 다른 페이지로 이동하는 건 제외하라고 한 이유가, js요소를 확인할 수 있는 예시가 아니라 <a/>태그에 URL만 넣으면 되기 때문일지 모르겠다는 생각을 했다. 

 

 

---

 

2. CSS 요소

 

 

다음으로는 css 요소이다. css는 말 그대로 스타일에 관련된 언어이다. 색상, 폰트, 그림자, 등등 심미적인 부분을 담당한다. 이 역시 개발자 도구에서 확인하고자 하는 컴포넌트를 클릭하면 쉽게 확인할 수 있는데, 카페노노의 로그인 페이지에서 파란색 버튼을 클릭해 보았다. 

 

원래 화면

위 스크린샷은 로그인 페이지의 원본 화면이다. 개발자도구에서 버튼을 확인해 보았을 때 버튼의 background 색상으로 #5867FF값이 들어가 있음을 확인할 수 있다. 회원가입 버튼, 휴대폰 버튼도 같은 색상이다. 해당 색상을 삭제하면 어떤 일이 일어날까?

 

CSS 색상 삭제 화면

위 화면은 #5867FF 색상을 제거한 화면의 모습이다. 인증번호 받기, 휴대폰, 회원가입의 버튼 색이 사라진 것을 확인할 수 있다. 

 

 

---

 

3. JS 요소(react)

랜딩페이지 <head/>의 <script/>영역

위 스크린샷은 랜딩페이지의 헤드 영역에 해당하는 코드이다. 자세히 보면 <script src="URL" defer></script>라고 쓰여진 것을 볼 수 있는데, 스크립트 태그의 src 속성을 살펴보면 아래와 같다. 

 

즉, 간단히 말하면 스크립트 태그 안의 URL에 해당하는 외부 자바스크립트 파일을 참조하겠다는 뜻이다. 그렇다면 원본 스크립트 파일을 살펴보자. 아래와 같이 원본 파일을 찾아보았다. 

 

 

이제 이 파일을 조금 더 자세히 들여다보자. js 요소를 확인해 보는 것이 목적이니 무언가 컴포넌트 클릭 시 이벤트가 발생하는 경우를 찾아야 할 것 같아서, onclick과 같은 이벤트 핸들러를 위주로 검색하다가 아래 코드를 발견했다. react 문법을 자세히 모르기 때문에 정확하게 어떤 플로우의 코드인지는 모르겠지만, 이벤트 핸들러의 이름으로 대충 짐작해 본다면 파악할 수 있는 것들은 아래와 같다. 

 

위의 코드는 회원가입 시 휴대폰 번호를 입력하는 코드인데, 하나씩 살펴보면 placeholder:H("login.mobilePhoneNumber")라고 되어있다. 자세히 모르지만 placeholder를 검색했을 때 input 데이터를 처리하는 속성이라는 것으로 보아 입력한 휴대폰 번호와 관련된 것임을 파악할 수 있다. 또 뜯어보면, onPressEnter라는 속성도 발견할 수 있는데, 간단히 설명하자면 엔터 시 확인 버튼을 클릭하는 것과 같은 효과를 주는 것이다. 실제 사이트에서 실행해보면, 전화번호 입력 후 확인 버튼을 눌러도 인증 번호가 발송되고 엔터를 눌러도 인증 번호가 발송됨을 확인해 볼 수 있다. 정리하자면 위의 코드는 전화번호를 입력하고 버튼을 클릭하면 입력된 전화번호가 서버로 전송될 수 있도록 하는 코드이지 않을까 추측해볼 수 있다. 

 

 

 

그렇다면 전화번호가 실제로 전송되고 있는 것이 맞을까 확인해보자. 전화번호 입력 후 인증번호가 발송된 다음 네트워크 패널에서 로그를 살펴보면 otp라는 로그 안의 Request Payload에서 tel : "010-xxxx-xxxx"를 확인할 수 있다. 코드를 정확하게 해석하진 못했어도, '버튼을 누르면 서버로 전화번호가 전달되고, 서버에서 해당 전화번호로 인증번호를 발송하겠구나'를 추측해볼 수 있는 것이다. 

 

 

뜻하지 않게 리액트까지 공부하게 되었다.. 하지만 오히려좋아 언젠가는 리액트 공부해야지 했는데 이참에 시작하는 것도 나쁘지 않을 것 같다. 오늘의 과제 끝!

 

 

 

*참고 사이트 

jsx 이벤트 처리 문법 https://ko.reactjs.org/docs/handling-events.html

react DOM : https://ko.reactjs.org/docs/dom-elements.html