brunch

매거진 PM 신병 훈련소의 기록

라이킷 4 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이상현 Aug 20. 2022

랜딩페이지에 숨은 프론트엔드 언어 찾아보기

[코드스테이츠 PMB 13기] | '데이트립' 랜딩페이지 분석

오늘 분석해볼 프로덕트는 공간 큐레이션 플랫폼 '데이트립'이다. 최근 자주 사용하는 앱이고, 사실 위클리 프로덕트였는데 마무리가 늦어 데일리로 먼저 올라가게 되었다. (데이트립의 자세한 소개는 위클리 프로젝트를 참고하면 된다!)

각설하고 오늘은 몰입 학습을 통해, 웹 프론트엔드의 3가지 언어인 HTML/CSS/Javascript의 기초적인 부분을 알아보았다. 각 요소들이 어떤 구조로 구성되어 있는지 살펴보고, 데이트립의 HTML/CSS/Javascript가 어떻게 이뤄져 있는지 알아보자.

HTML 요소

HTML 문서는 <html> 태그로 시작하고 </html> 태그로 끝난다. HTML 문서 내부는 <head> 태그와 <body>태그로 이루어져있다.

주요 태그들은 아래 사이트를 참고했다.

https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8

1. 데이트립 랜딩 페이지 <head>

각 태그가 어떤 의미를 가지고 어떤 기능을 하는지 간단히 짚고 오니 구조가 조금은 보이는 것 같기도 하다.

가장 먼저 <!DOCTYPE>으로 html 버전을 지정하고, 문서의 언어를 ko로 명시했다. 또한 <head> 선언 후 <meta charset="utf-8">을 입력해 인코딩 형식을 UTF-8로 고정했다. 이후 뷰포트 메타 태그로 사용자가 보이는 영역(visible area)를 지정하고, <link> 태그로 별도로 저장한 CSS를 HTML 문서 내에서 불러오는 등 화면에 직접적으로 보이지 않는 정보들을 정의하고 있다.

2. 데이트립 랜딩 페이지 <body>

<body> 부분에선 데이트립 랜딩페이지 HTML 문서의 컨텐츠를 포함하는 모든 영역을 정의하고 있다. 가장 먼저 보이는 것은 자바스크립트를 html 문서 내부에서 정의하거나, 외부의 자바스크립트 파일을 html 문서에 연결하는 <script> 태그였다. 또 <div> 태그로 레이아웃을 나눠주고 있고, 이미지를 삽입하는 <img> 태그와 src 속성을 통해 이미지 경로를 지정해주고 있다.

랜딩페이지 타이틀 영역은 <h#> 태그로 폰트나 사이즈 등을 지정하고, 타이틀의 두 텍스트 사이에 <br>를 삽입해 줄바꿈 효과를 주고 있다.

3. 시맨틱 태그

또한 HTML5에서는 *시맨틱 웹을 중요시해 시맨틱 태그라는 새로운 태그를 만들었다고 한다. 기존 HTML 표준에서도 각 태그는 대부분 의미를 가지고 있었지만, 의미를 가진 태그가 부족한 편이었고, 의미가 불명확하거나 시대의 흐름에 뒤처진 태그도 있어 이 부분을 보완하기 위함이라고 한다. 시맨틱 태그를 사용하면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 명확히 알 수 있다는 장점이 있다.

*시맨틱 웹(Semantic Web) : 컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹.

화면 구조와 레이아웃 태그는 아래와 같다.

출처 : https://velog.io/@ru_bryunak

<header>

일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치

페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 상단바나 검색창 등이 안에 들어갈 수 있음

section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 할 수 있음

<nav>

내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용

보통은 안에 <ul>을 넣어 목록 형태로 사용

<main>

문서의 주된 콘텐츠를 표시

두 개 이상 보여져서는 안 됨

두 개 이상의 main 요소를 쓸 경우 하나 이외의 전부를 hidden 속성을 써서 가려야 함

시맨틱 태그 중에서는 Internet Explorer에서 유일하게 지원되지 않는 태그

<article>

웹 페이지의 내용에 사용

문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용

<section>

웹 페이지의 섹션에 사용

웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그

<aside>

본문의 주요 부분을 표시하고 남은 부분을 설명

특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용

<footer>

일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치

페이지 맨 아래에 쓸 때는 사이트의 라이선스, 주소, 연락처 등을 넣는다

이에 따라 데이트립 랜딩 페이지의 레이아웃을 구분해보았다.

<nav>와 <article>, <aside>는 찾을 수 없었다. 찾아보니 이전 HTML 문서는 수십 개로 중첩된 복잡한 '<div> 지옥'인 경우가 많았다고 한다. 이를 보완하기 위해 HTML5에서 시맨틱 태그를 추가했다고 하는데, 데이트립 HTML 문서를 보면 1) 시맨틱 태그를 추가하지 않고 이전과 같은 방식으로 문서를 작성했거나, 2) 랜딩페이지에서 해당 태그들을 굳이 설정할 기능이 없기 때문에 일부 시맨틱 태그를 찾아볼 수 없는 것이 아닐까 추측한다.

이게 div 지옥?

CSS 요소

CSS는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격이라고 할 수 있다. CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재하는데, 방법은 아래의 3가지라고 한다.

1. HTML 태그의 style 속성을 이용

2. <style> 태그를 통해 HTML 문서 내부에 기술 (<style> 태그는 주로 <head>태그 내부에 사용)

3. CSS 파일로 분리하여 HTML 문서에 연결

1번 처럼 사용시 HTML과 CSS를 분리하는 장점이 없어지기 때문에 2, 3번을 주로 사용한다고 하는데, 오늘 Q&A 세션에서 동기분들이 나눴던 얘기가 3번 사례인 것 같다!

출처 | https://ofcourse.kr/css-course/CSS-%ED%8C%8C%EC%9D%BC-%EB%B6%84%EB%A6%AC

CSS를 별도의 파일로 저장 후 HTML 문서 내에서 불러오는 것이므로, 해당 태그를 지우면 연결이 끊어져 스타일 적용이 해제되는 것으로 이해했다.

데이트립은 3번 방식으로 CSS 파일을 분리해 HTML 문서에 연결한 모습을 알 수 있다. <p> 태그를 통해 하나의 paragraph로 나뉘어져있는 'about' 엘리먼트를 보면, 글자 크기 16px/폰트 'montserrat, sans-serif'/컬러 헥스코드 #000000 등 어떤 스타일을 적용했는지 확인할 수 있다.

JavaScript 요소

Javascript는 웹 페이지에 상호 작용을 추가하고, 다양한 이벤트에 따라 특정 동작을 수행하도록 하는 기능을 넣을 수 있다.

자바스크립트 코드는 찾았는데 어떤 기능을 수행하는지 모르겠다. 참고한 문서대로 자바스크립트로 작성됐을법한 요소들을 클릭해 이벤트 리스너로 확인해도 확인이 되지 않았고, 코드들은 구글링을 해도 어떤 의미인지 알 수 없었다. 구글링해보니 var에 Cacheable 코드가 작성된 걸로 보아 캐시와 관련된 내용 같다는 정도가 지금 내 개발 지식상 추측할 수 있는 한계였다..!