김영감의 영감노트
[PMB 8기] HTML,CSS, JS 까지 with 쿠팡플레이의 랜딩페이지 본문
우리는 하루에도 수십 번 새로운 웹 페이지를 열어본다. 일상과 같은 당연해 보이는 이 페이지들은 사실 복잡한 언어들이 상호작용하며 만들어 낸 결과물이다. 그중 가장 대중적으로, 그리고 기본적으로 쓰이는 언어들이 HTML, CSS, JavaScript(이하 JS)이다.
위 그림에서 간략히 볼 수 있듯이 HTML은 웹 페이지의 뼈대 역할을 한다. CSS는 그 뼈대에 옷을 입히고, JS는 옷을 입힌 것에 더해 움직임을 만들어준다. 좀 더 자세하게 정의와 역할을 알아보면 다음과 같다.
HTML(Hyper Text Markup Language)
- 웹 문서를 만들기 위해 사용하는 가장 기본적인 웹 언어의 한 종류.
- 웹 페이지 내에서 제목, 이미지, 문단, 표 등 다양한 요소들의 자리를 결정하고 영역을 나누어 주는 역할.
- 즉, 웹의 구조 설계를 담당.
CSS(Cascading Style Sheets)
- 마크업 언어(앞서 언급한 HTML, XML 등)가 실제로 어떻게 표현될지를 결정.
- 색상, 레이아웃, 폰트, 이미지 크기 등을 지정하여 다양한 요소의 스타일을 입히는 역할.
- 즉, 웹 페이지의 시각적인 표현을 담당.
JS(JavaScript)
- 앞서 이야기한 HTML은 정적 언어로, 실시간으로 변화하는 것을 만들어내지 못하여 해당 문제를 해결하기 위해 등장한 언어.
- 페이지 내의 여러 요소들에게 동적인 움직임을 부여하여 페이지를 인터렉티브 하게 꾸며주는 역할.
- 즉, 웹의 동적 처리를 담당.
프론트엔드의 기본인 3개의 언어를 알아보면서 실제로 어떻게 적용되고 작성되었는지 궁금해졌다. 그래서 복잡한 웹 서비스 페이지가 아닌 간단한 랜딩 페이지에서 HTML, CSS, JS가 어떻게 적용되고 구현되는지 알아보려고 한다.
1. 쿠팡플레이 & 선정 이유
쿠팡 플레이는 쿠팡에서 최근 서비스하고 있는 OTT 서비스이다. 2020년 7월 싱가포르의 OTT 서비스인 훅(HOOQ)을 인수했다는 소식이 있었는데, 그 해 12월 24일 국내 OTT 서비스 중에는 후발주자로 서비스를 시작했다.
주요한 특징으로는 싱가포르 OTT 서비스를 기반으로 해서인지 해외 영화 콘텐츠가 많은 편이다. 또한 스포츠 생중계가 특징인데 유럽 프리미어 리그 중계, 미국 NFL 중계 등으로 소비자들의 호응을 얻고 있다. 무엇보다 월 2,900이면 가입할 수 있는 쿠팡 와우 회원이라면 누구나 사용할 수 있어 가성비가 매우 좋은 편이다. 최근에는 국내 유명 코미디 TV show인 SNL을 독점 방송하며 이슈가 되기도 하였다.
아직 부족한 콘텐츠라는 단점이 있지만 극강의 가성비 등으로 점차 시장 점유율을 높여갈 것으로 보인다.
HTML, CSS, JS를 기준으로 분석해볼 랜딩 페이지를 찾기 위해 여러 페이지들을 둘러보았다. 서비스를 시작한 지 얼마 안 된 스타트업이나 앱 환경에 집중된 서비스를 제공하는 경우, 랜딩 페이지의 코드가 너무 복잡하여 분석이 쉽지 않았다. 이러한 현상은 대기업일수록 적었는데, 서비스 규모가 큰 기업들의 랜딩 페이지는 대부분 간결하고 이해하기 쉬웠다. 쿠팡 플레이의 랜딩 페이지 또한 구조화가 잘 되어 있었다.
개발자 수준의 전문 지식이 없는 필자에게는 쿠팡 플레이를 통해 3가지 언어의 개념과 구현 과정을 살펴보는 것이 가장 나은 선택지라 생각되어 쿠팡 플레이의 랜딩페이지를 분석 주제로 선택하게 되었다. (최근 쿠팡 와우를 구독한 것도 결정에 큰 영향을 미쳤다..)
2. 쿠팡 플레이 랜딩페이지의 HTML 구조
HTML를 활용한 일반적인 구조는 위 그림과 같다. 왼쪽 그림은 HTML의 기본적인 문법구조를 설명한 것이다. Body 영역이 실제 우리에게 보이는 영역이며 해당 영역을 자세히 설명하면 오른쪽 그림과 같다. < > 안에 있는 이름을 시멘틱 태그라고 하며 해당 태그를 사용해서 영역을 지정할 수 있다. 글의 목적성을 고려하여 더 자세한 문법과 태그 사용법은 다른 글에서 다뤄볼 예정이다.
그렇다면 쿠팡 플레이 랜딩 페이지에서 보이는 부분, 즉 Body의 구조는 어떻게 설정되었는지 확인해보자.
<body> 영역을 보면 <div>(각 콘텐츠를 분할하여 구조를 설정하는 용도)를 사용해서 각 콘텐츠를 나누고 있다. class(요소에 대한 이름 정하는 용도)로 콘텐츠 대부분을 'PreLogin_00000'로 정의하고 있으며 그 뒤에 각 부분의 이름을 headBackground, section 1, section 2, section 3... 등으로 보여주어 해당 부분의 용도를 짐작할 수 있다. 이를 바탕으로 body 영역은 전체를 감싸는 Container와 4개의 section 그리고 Footer로 이루어진 점을 알 수 있다. 이를 실제 랜딩페이지 화면에서 구분해보면 다음과 같다.
<footer> 영역이 상당히 크고 <header> 보이지 않는다는 특징이 있었다.
3. 쿠팡 플레이 랜딩 페이지의 중심 CSS 스타일
CSS은 보이는 영역의 디자인적 요소를 결정한다. 쿠팡 플레이 랜딩 페이지에서 가장 눈에 띄는 디자인 요소는 배경색과 폰트 그리고 이미지다. 배경색이 검은색으로 보이는데 어떤 Hex 색상 코드를 가지고 있는지, 폰트는 맑은 고딕인지 등 몇 가지 궁금점이 생겼다. 해당 궁금점에 대한 답을 찾아보면서 CSS를 파헤쳐보자.
1) 배경색은 실제 어떤 색일까? Hex 색상 코드 알아보기
배경색을 실제로 알아보기 위해 HTML 상 body 부분의 CSS를 살펴보았다. background 부분에서 배경색이 #000, 즉 검은색인 점을 확인할 수 있었다.
또한 위의 사진처럼 'font-family'라는 문법을 확인할 수 있었는데, 이는 페이지 내의 쓰이는 모든 폰트를 정해놓은 것이다. font-family 속성 값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 맨 앞에서부터 순서대로 폰트를 읽는다. 예를 들어 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 되는 것이다. 모든 폰트가 없을 경우를 대비해 마지막 폰트는 어떤 시스템에도 호환이 가능할 generic-font를 작성해야 한다. 이 'font-family' 부분을 통해 body에서 사용될 수 있는 모든 폰트를 확인할 수 있었다.
2) Section 1에 쓰인 폰트는??
각각의 폰트를 모두 찾아볼 순 없어 가장 메인 카피가 쓰인 section 1(위 사진) 영역의 폰트를 찾아보려고 한다.
'와우 회원이라면 모든 콘텐츠 무료!'라는 카피는 h1 태그에 들어있다. 해당 부분의 style을 찾아보았지만 폰트의 유형을 찾을 수 없었다. 자료 조사를 하다 보니 CSS는 상속이라는 개념이 있다는 것을 알 수 있었는데, (CSS의 원문인 Cascading이 상속, 흐름을 뜻하는 말이라고 한다.) 위 사진의 하단 부를 보면 Inherited from이 적혀있는 것을 볼 수 있다. 즉, '와우 회원이라면 모든 콘텐츠 무료!'가 속해 있는 h1 태그의 폰트는 은 h1이 속해있는 section.PreLogin_section 1 ~~ 에서 지정된 폰트가 상속되어 지정된다는 것을 알 수 있었다.
사실 더 쉬운 방법으로 '검색' 기능을 누르고 원하는 부분에 마우스 오버를 하면 해당 부분에 적용된 CSS 결과를 훨씬 쉽게 찾을 수 있다. 위의 사진은 실제로 코드가 어떻게 쓰였는지에 대한 호기심으로 찾아보았다.
4. 쿠팡 플레이 랜딩페이지에서 쓰인 JS
쿠팡 플레이 랜딩페이지에는 footer 부분의 '자주 묻는 질문'에서 유일하게 JS를 이용한 인터렉티브 디자인이 적용되었다. 해당 기능은 어떻게 구현되는 것일까? 이에 대한 답을 찾기 위해 개발자 도구를 열심 뒤적여보았지만, JS 코드는 HTML과 CSS 코드와는 다르게 찾기가 매우 어려웠다.
겨우 방법을 찾을 수 있었는데, 개발자들이 크롬 개발자 도구를 통해 디버깅하는 과정을 활용하여 JS 코드를 찾을 수 있었다.(위 영상 참고)
해당 과정을 서술하면 다음과 같다.
1. 먼저 JS 코드가 걸려있을 element를 선택한다. '자주 묻는 질문'에서 아래 화살표 아이콘뿐만 아니라 해당 박스를 선택해도 답변이 노출되는 것을 확인했기 때문에 header로 정의된 element를 선택하였다.
2. Style을 볼 수 있는 창 옆을 보면 Event Listener 탭을 확인할 수 있다. 해당 탭을 들어가 보니 Click이라는 이벤트가 있었고, '자주 묻는 질문'을 클릭했을 때 창이 생성되고 사라지는 것을 보아 해당 이벤트가 맞다고 추측할 수 있었다.
3. Click 이벤트를 열어 링크로 연결된 JS 문서를 열어 보았다.
4. 알아볼 수 없는 화면이 나오는데 하단 부분에 있는 {} 아이콘 (전송하기 쉽도록 단순화된 JS 코드를 원래대로 보여주는 기능)을 눌러 코드를 확인해볼 수 있었다.
코드를 직접 확인해보았지만 나의 개발 이해도로는 해석이 불가능했고, 디버깅 기능을 사용해보려 했지만 정상적으로 작동하지 않아 해당 JS 코드가 '자주 묻는 질문'의 인터렉티브를 만드는지는 검증하지 못했다. 아쉽지만 다음 기회에 개발 공부를 더해보고 해당 기능을 검증에 도전해볼 생각이다.
Comment
그나마 단순한 웹 페이지이었기에 과제를 완료할 수 있었다. 만약 네이버 메인과 같은 포털 사이트였다면 과제를 끝마치지 못했을 것이란 생각이 든다. 과제를 하면서 초기 서비스의 웹 페이지는 HTML 문서 안 내용이 체계 없이 뒤죽박죽인 점을 확인할 수 있었다. 개발자 친구에게 조언을 구하니 '모로 가도 서울로만 가면 된다'고 실제로 많은 곳에서 제멋대로인 코드로 기능을 구현한다고 한다. (또 어떻게 구현은 된다고...;;) 친구에 따르면 개발 체계가 확실한 기업일수록 정리된 코드가 작성된다고 하며 이러한 과정을 리팩토링이라고 부른다고 한다.
만약 내가 PM이 되어서 개발자와 소통한다고 하였을 때 코드를 따로 읽을 일은 없겠지만 그래도 기본적인 코드를 읽을 수 있다면 분명 개발자와의 소통이 훨씬 효율적일 것이다. 생각해보라. 만약 내가 HTML의 footer 개념도 모른다면 개발자는 앞이 깜깜할 것이다. 그나마 과제를 통해 내가 배워야 할 수준이 어느 정도이고 소통을 위해서 어떻게 학습해야 하는지 가닥을 잡을 수 있었기에 다행이다.
'[PMB] 에세이' 카테고리의 다른 글
| [PMB 8기] IT알못이 정리해본 API 개념과 예시 (0) | 2021.11.12 |
|---|---|
| [PMB 8기] 앱을 만들기 전 반드시 알아야할 Mobile App 유형 (0) | 2021.11.11 |
| [PMB 8기] Kaggle Data로 알아본 Fitness Tracker 시장 인사이트 (0) | 2021.11.10 |
| [PMB 8기] '린 분석'의 관점에서 본 'Peaches' (0) | 2021.11.08 |
| [PMB 8기] 왜 프레시코드는 GA와 Amplitude를 같이 사용할까? (2) | 2021.11.04 |
