-
[코드스테이츠 PMB14] 퍼블리 웹의 랜딩페이지 구석구석 파헤쳐보기(html, css, javascript)Product Management Boot camp 2022. 10. 6. 23:10
일단 퍼블리는 원래 알고있던 서비스였는데, 최근 멤버십을 결제하면서 이용해보니 정말 좋은 서비스더군요... 정말 생계활동을 위해선 필요한 녀석입니다. 오늘은 퍼블리 웹 랜딩페이지를 html, css, 자바스크립트 총 세가지 요소가 어떻게 구조되어있는지 살펴보려합니다. 제목은 비범하게 퍼블리 웹 랜딩페이지를 구석구석 들여다볼 것처럼 적어놨지만, 어디서 어떻게 시작해야할지 막막하기만 합니다. 하지만 해보면서 배우는 개발 기초 지식에 의미가 있다고 생각합니다...?
먼저 퍼블리를 웹으로 접속했을 때 첫 랜딩페이지입니다. 해당 페이지를 html, css, 자바스크립트 순으로 살펴보려고 합니다.
퍼블리의 HTML 구조 - (CSS를 포함한 이미지로 설명)
HTML 구조는 찐 그림을 그리기 전 대충 여기에 이거 그릴거고 저기엔 저거 그릴거라는 러프 스케치와 같다고 생각합니다. 그래서 보통 css 를 벗겨내 html 구조를 살펴보면 허벌 페이지가 됩니다. 보통 <head> 와 <body> 로 크게 나뉘는데요. <head>에서는 브라우저에서는 보이지 않는 정보(검색엔진 키워드, 웹페이지 설명문 등)를 포함합니다. <head> 에 포함된 내용이 보이는 것은 파비콘과 웹페이지 접속 시 탭에 보여질 타이틀 정도입니다.
예를들면 아래 이미지처럼 인터넷 브라우저 탭(창)에 어떻게 뜰 것인지 설계할 수 있습니다.
<meta property="og:title" content="PUBLY - 당신 곁의 랜선 사수">
<body> 바디 부분을 살펴보겠습니다. 퍼블리의 첫 랜딩페이지에서는 아래와 같이 구성되어있습니다. 클라이언트가 실제 유저에게 보여주는 영역이라고 할 수 있습니다.
1. 헤더+네비게이터
검색창에서 검색어를 입력하고 검색결과를 보여주는 것은 javascript 즉, 서버에서 담당하는 일인데요. javascript 관련 내용은 아래에서 서술할 예정입니다. 끝까지 봐주세요~ 앙큼!😘
2. 컨테이너(섹션)
크게 1) 롤링배너 영역, 2) 큰 배너 영역, 3) 인피니트 스크롤 영역 으로 나뉩니다.
굳이 인피니트 스크롤 영역을 예를들어 따지자면 부모 태그(큰 섹션) > 자식 태그(인피니트 스크롤 영역) > 손자 태그(개별 콘텐츠 영역)로 볼 수 있을 것 같습니다.
3. 푸터
퍼블리의 CSS로 스타일 보기
우리가 보는 웹페이지의 모든 구성은 CSS 가 적용된 것을 봅니다. 구색을 갖춘 모습이지요. 헤더와 컨테이너(섹션)를 중심적으로 살펴보겠습니다.
1. 헤더+네비게이터
퍼블리 로고 / 페밀리 사이트(커리어리 등)으로 이동할 수 있는 드롭다운 / 네비게이션 바 퍼블리의 헤더는 크게 세가지 영억으로 나뉩니다.
1) <h1> : 퍼블리 로고
2) <div class="nav mr-6 dropdwon"> : 패밀리 사이트(커리어리 등)으로 이동할 수 있는 드롭다운
3) <div class="navbar-nav flex-row flex-grow-1"> : 네비게이션 바
먼저 로고 영역은 어떤 스타일을 적용했는지 보겠습니다.
1) <h1> : 퍼블리 로고와 <div class="nav mr-6 dropdwon"> : 패밀리 사이트(커리어리 등)으로 이동할 수 있는 드롭다운
퍼블리 로고는 svg 확장자로 세로가 28px 로 고정되도록 설정이 되어있습니다. 로고 이미지가 중간에 위치할 수 있도록 얼라인도 설정되어 있습니다. class="d-block" 는 무슨 의미인지 잘 모르겠네요..
더불어 패밀리 사이트로 이동할 수 있는 드롭다운 아이콘도 마찬가지로 svg 확장자로 24x24px 크기로 배치됩니다. 패딩이나 보더에 값을 따로 주지 않았네요.
2) <div class="navbar-nav flex-row flex-grow-1"> : 네비게이션 바
네비게이션 바는 총 7개의 division 이 생성됩니다. 마지막에 nav dropdown 은 또 왜있는지 모르겠습니다. 오류인가? 마지막 오류로 생각되는 이것을 제외하면 실제로 작동하는 영역은 총 6개입니다.
아래 이미지로 검색창 영역을 조금 더 자세히 살펴보겠습니다.
박스의 Round 값(0.25rem) 과 박스 컬러(#eee) 입니다. 돋보기 아이콘의 경우도 svg 확장자 이미지로 배치되어있습니다. 검색창에 타이핑을 하기 전 '퍼블리에서 검색하세요' 의 폰트 컬러는 #dbdbdb에서 #333으로 변하게끔 설정이 되어있습니다. (이미지 미첨부)
2. 컨테이너(섹션)
컨테이너 영역은 큰<div>에서 <div class="bg-gray-600"> (롤링배너 영역) 과 <div class="fixed-container-large"> (큰 배너+인피니트 스크롤 컴포넌트 영역)로 나뉘어집니다. 모두 다 다루기 어려우니,,, 인피니트 스크롤 영역만 살펴보겠습니다.
인피니트 스크롤 컴포넌트 영역 - 어느정도 무한 스크롤을 제공합니다. 
먼저 큰 div.row 로 나누어 콘텐츠 배열에 대한 스타일을 설정합니다. 콘텐츠별 상세 스타일은 아래 이미지에서 다루겠습니다. row-gap 은 48px이네요.... vertical-gap 은 없는 걸까요? (아 너무 어렵다...)
각 콘텐츠 별 설정 스타일입니다. 보이는 정보에 의하면 div class="overflow-hidden" 은 설정한 영역에서 넘치는 이미지 영역은 잘려서 보여지지 않도록 설정하는 겁니다. 클리핑 마스크 같은 효과네요. div class="d-flex py-1"에서는 패딩값, 폰트 사이즈, 북마크 아이콘 등 스타일 설정값을 확인할 수 있습니다.
자바스크립트로 어떤 동작으로 이어지나요?
각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해보려합니다. 참고로 스크립트를 볼 수 없도록 되어있지만 대충 유추해보고자 합니다.
1. 검색창 기능 구현
검색창 javascript 구현은 아래 영상을 참고하면 좋을 것 같습니다. ㅎㅎ
2. 로그인 상태에 따라 최상단 배너 생성 유무
로그인 전 
로그인 후 3. 시간대 별로 다른 콘텐츠 배너 게시
2022년 10월 6일 17시 경 
2022년 10월 6일 23시 경 등등... JS 부분도 말하자면 끝도 없을 것 같아서 여기까지만 언급하겠습니다... ㅎ(외계어 해석한다고 지친거 아님. 아무튼 아님)
나가며...
정말 제가 할 줄 아는 거라곤 html 중에서도 CTA 버튼 활성화를 위해 웹 매핑 정도 건드려본 경험이 다였습니다만... 오늘 코드스테이츠 과제를 통해 인생에서 새로운 경험을 해본 것 같습니다. 지금도 많이 부족하고 틀린 영역도 많겠지만 '이게 무엇일까' 이리저리 만져보면서 검색도 해보고 정말 햄스터 오줌만큼이라도 공부해본 기분이라 약간 뿌듯하기도 합니다!!!! (잘했다는 말 아님) 이번 주 계속 살펴보며 많이 학습해야겠습니다.
그리고 저의 W2 페어였던 분의 과제를 읽었는데 전체적으로 이해하는데 정말 정말 도움 많이 받았습니다. 저의 W2 페어분께 영광을... 🌝
'Product Management Boot camp' 카테고리의 다른 글
[코드스테이츠 PMB14] '카카오로 로그인하기' 절대 못 잃어(feat. 오픈 API 기능과 구조 이해하기) (3) 2022.10.11 [코드스테이츠 PMB14] 네이티브 앱? 웹 앱? 앱의 형태와 장단점 비교 (0) 2022.10.07 [코드스테이츠 PMB14] '불법복제물' 사용 경험을 데이터 시각화하여 가설 세우기 (1) 2022.10.04 [코드스테이츠 PMB14] 꼬마마법사 레미말고 리딩메이트 레미(REMY)! 린분석을 통한 프로덕트는 사업 단계 알아보기 (0) 2022.09.30 [코드스테이츠 PMB14] 무신사에서는 구글 애널리틱스에 어떤 지표가 중요할까? (0) 2022.09.29