오늘은 프론트엔드에 대해서 배웠다 항상 프론트엔드와 백엔이 헷갈려 했지만 이번 기회에 확실히 구별할 수 있을 것 같다.나의 과제로 최근 등장하기 시작한 ‘와이즐리’ 랜딩 페이지를 오늘 배운 프런트엔드의 개념으로 살펴보자.HTML, CSS, 자바스크립트가 어떻게 적용됐는지 살펴볼 예정이지만 개발이 워낙 미약해 단시간에 제대로 파악됐는지 확실치 않다(아마 제대로 파악되지 않았을 가능성이 크다). 하지만 시작은 미미해도 끝은 장대하다.
각설하고, 시작. 1. HTML (Hypertext Markup Language): HTML은 웹 페이지의 구조, 즉 웹을 이루는 가장 기초적인 구성요소를 의미한다. 웹 콘텐츠의 의미와 구조를 정의할 때 사용된다. 간단히 말하면 웹페이지를 이루는 틀이라고 할 수 있다. 「개발자 툴」을 보면,<html>로 시작해 </html>로 끝나, 크게<head>와<body>의 2 파트로부터 이루어진다. 상단의 메뉴바까지가 head, 아래의 콘텐츠가 들어있는 곳이 body라고 보는데,
와이즐리는 매우 단순한 랜딩 페이지를 가지고 있다. “복사 문구”와 제품 사진이 드러나는 매우 심플한 구조. 상단에는 메뉴바가 있고, 가장 하단에는 footer가 있다.
2. CSS(Cascading Style She et): HTML 이 틀이라면 여기에 스타일을 입히는 것을 CSS라고 한다. cascading style sheets의 줄임말로 웹페이지를 보기 쉽게 만들어 주는 역할을 한다. 예를 들어, 사용된 텍스트의 크기와 글꼴을 변경하고, 테두리, 그림자 효과 등을 추가하거나, 페이지 레이아웃을 편집하거나, 애니메이션이나 다른 시각적인 효과를 추가할 수 있다.와이즈리에서는 글꼴의 굵기와 크기가 다르게 배치되며, ‘상품 보기’ 등의 CTA 버튼은 파란색 상자 안에 있다.
와이즐리의 랜딩 페이지는 스크롤을 낮추면서 각각의 복사 문구와 전달하려는 제품의 메시지를 간결하게 담았다. 전체적으로 이미지 하나와 글꼴만으로 구성했고 글꼴의 굵기와 크기 변화에 따라 강조하고 싶은 카피 문구와 서브 카피 문구를 구별해 디자인 측면의 강조점을 뚜렷이 알 수 있다. 텍스트의 크기를 변경하고 텍스트에 색을 입히는 것이 모두 CSS의 역할이다. 보통 HTML과 CSS는 따로 분리해서 생각하기는 어렵다.
3. JavaScript : 웹페이지에 동적인 기능을 추가한다. 파이썬 등의 개발 언어에 속한다. 기능이나 동작을 추가하고자 할 때 사용하고, 현재 위치를 찾아 지도상에 표시하거나, 버튼을 누를 때마다 UI요소를 노출하거나, 숨기거나, 사용자의 데이터를 로컬 시스템에 저장하는 등의 방법을 알 수 있도록 한다(Java 와는 다른 것이다. 헷갈려서는 안 된다」.
그러면 와이즐리의 랜딩페이지에서 자바스크립트가 사용된 부분은 어디일까?
페이지 스크롤을 내려도 오른쪽 아래에 동그란 버튼이 따라오는데 “채팅” 기능을 하는 버튼이다. 위 버튼에 마우스 커서를 올리면 ‘상담 시작’으로 표시되며 클릭하면 상담창이 동일 페이지 내에서 팝업으로 나타난다.
개발언어에 대해서는 잘 모르지만 해당 상담채팅을 열 때 Script 부분이 보였다. script가 javascript를 의미하는 것으로 생각된다.
항상 편리하게 사용하기만 할 뿐 어떤 구조인지는 오늘 처음 알았다. 언젠가 시간과 능력이 있다면 이러한 언어를 직접 배워보는 것도 재미있을 것 같다.