'제페토 ZEPETO' 랜딩페이지
프론트엔드 탐색하기
분명히 엊그제 '캠핏' 분석하면서 PM 공부 6주차에 들어섰다고 글을 시작했던 것 같은데, 벌써 7주차라니. 진짜 시간이 어떻게 가는 거야?
아무튼 지금 두려움에 벌벌 떨고 있거든요. 드디어 개발 파트에 들어왔는데, 개발의 ㄱ도 모르는 뼛속까지 문과 감자로서 지금 이게 맞나 싶고. 응애. 저는 말하는 감자입니다.
많이 부족할 수도 있습니다! 매거진 이름처럼 PM이 되고 싶은 감자가 성장하기 위해 노력하는 흔적 정도로 생각해 주시면 감사하겠습니다. 절대 그럴 일 없겠지만 혹시 제 글을 보고 정확한 정답을 얻고자 하신다면... 큰일이 날 수도 있으니 조심하십시옹....
아무튼 오늘은 제페토 랜딩페이지의 HTML, CSS, JV를 하나 하나 뜯어 보고자 한다!
HTML: 구조 만들기
콘텐츠의 레이아웃을 제어
웹페이지 디자인을 위한 구조 제공
모든 웹 페이지의 기본 빌딩 블록
CSS: 웹사이트 스타일 지정
웹페이지 요소에 스타일을 적용
웹페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 함
웹페이지의 모양과 느낌
JavaScript: 상호작용 증가
웹페이지에 상호작용 추가
복잡한 기능 및 기능 처리
기능을 향상시키는 프로그래밍 코드
제페토(ZEPETO)가 뭐야?
출처: ZEPETO 스튜디오제페토가 인기를 끈 배경은 '메타버스'에 있다. 메타버스란 가공, 초월이라는 의미의 '메타(Meta)'와 현실 세계를 의미하는 '유니버스(Universe)'의 합성어로 가상 공간에서 모든 활동을 할 수 있게 만드는 시스템이다. 현실의 '나'를 대신하는 아바타를 만들어 가상 공간에서 사회 활동, 경제 활동 등을 영위할 수 있다는 점에서, 코로나19와 맞물려 큰 관심을 받고 있다.
제페토는 네이버의 자회사인 네이버Z코퍼레이션에서 운영하는 서비스이다. 2018년 8월 출시 이후 1년 6개월만에 누적 가입자 수 1억 3천 명을 달성하고, 2021년 3월 기준 165개국 2억 명의 가입자 수를 돌파할 정도로 크게 주목 받고 있다. 제페토가 타 메타버스 플랫폼에 비해 각광 받는 이유는 강력한 아바타 구현 기술력에 있다. 셀카를 활용한 아바타로 현실의 '나'와 닮아 있으면서도 조금 더 예쁜 아바타 제작이 가능하다.
제페토(ZEPETO)의 랜딩페이지
https://zepeto.me제페토(ZEPETO)의 랜딩페이지 HTML 구조 뼈대
https://zepeto.me제페토(ZEPETO)의 랜딩페이지 HTML
제일 먼저 큰 코드를 보면, 제페토의 랜딩페이지 구조는 <head>와 <body>로 나누어져 있는 것을 볼 수 있다.
<head>
문서의 형태, 타이틀, 스타일, JV에 대한 정보
브라우저에서 페이지를 열었을 때 표시되지 않는 부분
<body>
정보 전달을 위한 데이터가 들어가는 부분
사용자에게 보여 주고자 하는 콘텐츠가 있는 부분
<head> 부분에는 수많은 <meta> 데이터들이 존재했지만 브라우저에서 페이지를 열었을 때 표시되지 않기 때문에 시각적으로 확인할 수는 없었다. 그 중에서 유일하게 페이지에서 바로 확인할 수 있는 데이터가 있었는데, 바로 <title> 부분이었다. 브라우저의 탭 부분의 제목을 표시하는 데이터임을 확인할 수 있었다.
<head>의 <title>제페토(ZEPETO)의 랜딩페이지 CSS
<head>에 존재하는 CSS 요소CSS는 웹사이트의 스타일 지정하는 역할을 하고 있고, 디자인 요소라고 볼 수 있다. 랜딩페이지에서 CSS 요소를 제거해 보면 CSS의 역할을 더 잘 알 수 있다.
아래에 CSS를 제거한 랜딩페이지를 보면 색, 폰트, 배치, 배경에 존재하던 애니메이션 등 디자인적인 요소는 모두 사라지고 텍스트만 남게 되는 것을 확인할 수 있다.
참고로 CSS 요소는 <head> 부분에 있기 때문에, <head>를 제거하면 CSS를 제거할 수 있다. 왼쪽 사진에 보라색으로 표시하 부분이 <head>에 존재하는 CSS이다.
Sources 탭에서 왼쪽 Page 공간의 CSS 폴더를 클릭하면 제페토 랜딩 페이지에서 어떠한 폰트가 쓰였는지, 폰트의 크기는 어떻게 되는지, 배경 색의 코드, 배치 등의 디자인 정보를 확인할 수 있다.
추가적으로 CSS 폴더 아래에 존재하는 img 폴더를 확인해 보니 랜딩페이지에 쓰인 이미지 소스들도 확인할 수 있다.
제페토(ZEPETO)의 랜딩페이지 JavaScript(JS)
JavaScript는 페이지 내에서 상호작용을 이끌어내는 기능을 한다.
CTA 버튼에 커서를 올렸을 때 버튼의 디자인이 바뀐다든지, 특정 링크를 클릭하면 어떤 반응이 일어나는지 등에 대한 요소 및 정보가 JavaScript라고 할 수 있다.
JavaScript는 <script>, </script>로 확인할 수 있다.
제페토의 랜딩페이지에서 확인할 수 있는 상호작용은 메뉴 CTA 위로 커서를 대면 색상이 흐려지는 효과, 언어 메뉴를 눌렀을 때 언어를 선택할 수 있는 팝업창이 뜨는 결과 등이 있다. 아래 사진의 노란색 네모로 확인할 수 있다.
Event Listeners를 클릭하면 어떠한 script가 사용되었는지 링크를 보여준다. 해당 링크를 클릭하면 Sources 탭으로 넘어가게 되고, 해당 페이지에서 사용한 script의 내용을 확인할 수 있다.
오른쪽 사진의 보라색 네모 안의 내용을 보면 메뉴를 열거나 버튼을 클릭하는 등, 사용자의 행동에 따라 어떤 반응이 일어나야 하는지에 대한 정보를 확인할 수 있다.
#PM #프로덕트 매니저 #IT #기획 #UX #UI #CX
