W7 Weekly 과제 Part 1
'OP.GG Blog' 랜딩페이지 분석
INDEX
- 랜딩페이지 분석 및 구조 이해
(HTML, CSS, JavaScript 관점에서 각각의 구조와 스타일, 동작을 분석해 정리)
1) section 분류
2) section별 분석 전 모든 section 적용 기능
- LIGHT/DARK 모드
- 위로가기 버튼
3) section별 분석
-Section1. - haader
-Section 2. - 메인페이지 메인포스트
-Section 3,4. - Featured Posts
-Section 5. - 광고배너 / Recent Posts
-Section 6. - SNS 링크
-Section 7. - Featured Video
-Section 8. - Instagram
-Section 9, - footer-area
📌 랜딩페이지 분석 및 구조 이해
- section 분류
OP.GG Blog 웹페이지를 section별로 먼저 나눈뒤, section별 분석을 진행하려고 한다.
PM이 직접 개발을 진행하진 않지만 개발자코드를 보며 어떻게 페이지가 구성되었는지 이해하기 때문에
section 별 어떤 기능들이 있는지 위주로 분석해보려고 한다.
웹 페이지 전체
- section별 분석 전 모든 section 적용 기능
Section 별로 분석하기 전, 모든 section에서 적용되는 버튼이 2가지 있어 이를 먼저 이야기하고 넘어가려고 한다.
📌 LIGHT / DARK 모드 버튼
<id="my_switcher" class="my_switcher"> - LIGHT / DARK 모드 버튼
해당 버튼은 먼저 <ul> 코드를 통해 위/아래 영역을 리스트로 정의하고
<li> 코드로 위의 영역과 아래의 영역에 코드를 심었다.
이후 버튼의 위 쪽 리스트 영역은 <a href="javascript: void(0);" data-theme="light" class="setColor light active">
코드를 통해서 클릭시 코드 내 light모드가 활성화 되도록 했다.
이루 <span> 코드를 통해 해당 영역의 텍스트를 설정했다.
아래 영역(DARK)도 똑같은 구조로 되어있다
📌 위로가기 버튼
<a id="backto-top" class="show"> - 위로가기 버튼
위로가기 버튼의 body쪽 코드는 위의 코드 한 줄이기에 head 쪽 코드를 살펴봤다.
head 부분을 찾아본 결과
<nonscript> <style>#backto-top{display:none;}</style> </nonscript> 코드를 통해
위로 가는 기능과 스타일을 설정한 것 같다.
- section별 분석 (섹션 - div - div 분석)
📌 section 1. - header
header section은
1) <div.class="logo"> - 좌측 OP.GG Blog 이미지
2) <div.class="mainmenu-wrapper d-none d-xl-block"> - 가운데 4개로 구분되어 있는 메인메뉴탭
3) <div.class="header-search text-right d-flex align-items-center justify-content-end"> - 우측 검색탭
이렇게 3가지로 나뉘어 진다.
1) <div.class="logo"> - (좌측 OP.GG Blog 이미지)
- OP.GG Blog 로고 클릭시 메인 페이지 이동
<a href="https://log.op.gg/" title="OP.GG" rel="home">
<a>코드는 링크를 심을 때 사용하는 코드로 배웠다.
즉, 해당 코드는 좌측의 OP.GG Blog를 클릭햇을 때 메인페이지로 이동하는 기능이다. - OP.GG Blog 로고 이미지 불러오기
<img class="dark-logo" src="https://log.op.gg/wp-content/uploads/2022/01/logo.png" alt="OP.GG">
해당 코드는 현재 시각적으로 보이는 OP.GG Blog를 이미지로 불러온 것을 알 수 있다.
다만, 아래 코드에서 투명 OP.GG Blog 이미지를 불러왔는데 왜 투명이미지를 불러왔는지에 대해서는 알 수 없었다.
2) <div.class="mainmenu-wrapper d-none d-xl-block"> - (가운데 4개로 구분되어 있는 메인메뉴탭)
- <nav>를 통한 구분 - 사진 (좌)
먼저 <nav>를 통해서 사용자가 4개로 나누어진 공간을 클릭했을 때 해당 링크로 이동할 수 있도록 했다
그리고 4개의 카테고리 별로 공간을 따로따로 나누어 놨다. - 링크이동 기능 - 사진 (우)
위의 (우) 사진을 확인했을 때 4개의 영역 중 culture를 살펴보면
<a href>를 통해 culture를 클릭했을시, 해당 링크로 이동한다. - <sub 메뉴> 기능 - 사진 (우)
<ul> 부분은 ul이 unordered list의 약자이기 때문에 순서가 없는 리스트를 뜻한다.
<ul>코드를 통해서 sub메뉴가 나타나도록 했으며
<li>코드를 통해서 마우스 커서가 해당 영역에 갔을 때 밑으로 리스트로 나타나도록 했다.
3) <div.class="header-search text-right d-flex align-items-center justify-content-end" - (우측 검색탭)
먼저 우측 검색탭은 2가지 기능으로 나뉘어져 있다.
serch 부분에 검색어를 입력할 수 있는 기능과, 돋보기를 클릭해서 검색어를 출력하는 기능이다.
- serch 기능
<input type="text"> 코드를 통해서 secch..부분에 텍스트를 입력할 수 있도록 했다. - 돋보기 button 기능
<button type="submit"> 코드를 통해서 입력한 텍스트를 제출할 수 있도록 했다.
📌 section 2. - 메인페이지 메인포스트
section2 는
1) <div class="post - thumbnai1" > - 뒤의 배너 사진(OP.GG사진)
2) <div class="post-content"> - 사진 앞에 겹쳐있는 포스트 텍스트
3) <div class="slider-area bg-color-grey slider-activation-with-slick"> - 슬라이드 기능
으로 나눴다.
1) <div class="post - thumbnai1" > - 뒤의 배너 사진(OP.GG사진)
- <a href> 배너 클릭시 이동하는 링크 심기
<a href> 코드를 통해 배너를 클릭했을 때 링크로 들어갈 수 있도록 링크를 심었다. - <img> 이미지 가져오기 및 크기 맞추기
<img>코드를 통해서 링크의 이미지를 가져왔으며, img 원본의 크기와 배너의 크기가 다르기 떄문에 img 크기를 따로 설정하여 배너크기에 맞도록 설정했다.
2) <div class="post-content"> - 사진 앞에 겹쳐있는 포스트 텍스트
사진 앞에 겹쳐있는 div같은 경우는 5가지의 기능으로 나눌 수 있을 것 같다.
- Culture , event 클릭시 링크이동
<div class="post-cat"> 으로 영역을 구분했다.
또한 <span>코드를 통해 Culture와 event 영역을 구분했으며 <span>코드에 <a href>코드를 심어 텍스트 클릭시 해당링크로 이동할 수 있도록 했다. - [오피지지---] 메인 텍스트 클릭시 해당 포스트 링크 이동
<h2> 코드를 통해 해당 텍스트를 tittle로 구분했으며
<h2>코드에 <a href>코드를 심어 코드 내 링크로 이동할 수 있도록 했다. - 프로필 클릭시 작가분이 작성한 글 목록 페이지 이동
<div class="post-meta">를 통해 프로필 영역을 구분했다.
<img>코드를 통해 OP.GG 아이콘 이미지를 가져왔으며
이름과 포스트 날짜를 <div class="content'> 코드를 통해 영역을 나눴고
이름은 <h6 calss="post-author-name">코드로 텍스트 종류를 h6으로 부여한 후
하위에 <a href>코드를 통해 작가분이 작성한 글 목록 페이지로 이동할 수 있도록 했다.
날짜의 경우는 <ul class="post-meta-list" > 코드를 통해 리스트로 구분하였다. - sns 로고 클릭시 해당 sns페이지로 이동
<ul class="social-share-transparent justify-content-end"> 코드를 통해 리스트로 영역을 구분했다.
영역을 구분한 후 <li>코드를 통해 각 sns 아이콘의 영역을 구분했고
이후 <a href>코드에 각 sns링크를 심어 클릭시 이동할 수 있도록 했다. - Read Post 클릭시 해당 포스트로 이동
<div class="read-more-button cerchio"> 코드를 통해 영역을 구분했으며
<style>코드를 보면 css를 활용했다고 생각했다.
또한 Read Post 버튼에 <a href> 코드를 활용해 버튼 클릭시 코드 내 링크로 이동할 수 있도록 했다.
3) <div class="slider-area bg-color-grey slider-activation-with-slick"> 슬라이드 기능
- 슬라이드 작동 영역 구분
3)번의 코드를 통해 슬라이드가 작용하는 영역을 구분했다.
또한 하위 코드들을 통해 슬라이드 어떤 방식으로 넘어가는지 정했다. - 버튼 상호작용
<button class="slide-arrow prev-arrow slick-arrow"> 코드를 통해 버튼 상호작용 시 슬라이드 기능이 작동되도록 했다.
📌 section 3. - Featured posts
section 3.는
1) <div class="section-title text-left"> - Featured Posts 제목
2) <divclass="col-lg-6 col-xl-6 col-md-12 col-12 mt--30"> - 왼쪽 포스트 영역
3) <divclass="col-lg-6 col-xl-6 col-md-12 col-12 mt--30"> - 오른쪽 포스트 영역
으로 구분했다.
1) <div class="section-title text-left"> - Featured Posts 제목
- 텍스트 위치 설정
<div class="section-title text-left"> 코드를 통해 타이틀 텍스트인 Featured Post의 위치가 해당 section의 왼쪽으로 오도록 했다. - 텍스트 h2 설정
<h2 class="title" 코드를 통해 해당 텍스트를 h2로 설정했다.
2) <divclass="col-lg-6 col-xl-6 col-md-12 col-12 mt--30"> - 왼쪽 포스트 영역
3) <divclass="col-lg-6 col-xl-6 col-md-12 col-12 mt--30"> - 오른쪽 포스트 영역
먼저 2)번과 3)번의 로직이 같기에 2)번을 대표로 분석하려고 한다.
위와 같은 경우 텍스트 블력과 이미지 블록을
<div class="content-block content-direction-column post-horizontal thumb-border-rounded axil-control"> 코드를 통해 영역을 구분했다.
- Culture , event 클릭시 링크이동
<div class="post-cat-list"> 코드를 통해 Culture와 event의 영역을 구분하고
각 텍스트의 블록에 <a href> 코드를 텍스트 클릭시 코드 내 링크로 이동할 수 있도록 했다. - [누구에게나----] 텍스트 클릭시 링크 이동
<h4 class="title"> 코드를 통해 텍스트를 h4로 정의했으며
텍스테에 <a href> 코드를 심어 텍스트 클릭시 코드 내 링크로 이동할 수 있도록 했다. - 프로필 클릭시 작가분 프로필로 이동
<div class="post-meta">코드를 통해 플로필 블록의 영역을 구분했으며
하위로 OP.GG 아이콘, 작가님 이름 , 날짜 영역을 구분했다.
이후 아이콘과 이름 영역에 <a href> 코드를 통해 클릭시 코드 내 링크로 이동할 수 있도록 했다. - 이미지 클릭시 링크 이동
<div class="post-thumbnail"> 코드를 통해 이미지 영역을 구분했다
이후 이미지 영역에 <a href> 코드를 통해 클릭시 코드 내 링크로 이동할 수 있도록 했다.
💡 section 3과 section4의 로직이 같아 section4는 생략했다.
📌 section 5. - 광고배너 / Recent Posts
section 5.는 광고배너와 Recent Posts로 나눌 수 있다.
1) <div class="elementor-widget-container"> - 광고배너 영역
2) <div class="elementor-widget-container"> - Recent Post 영역
section 5. 영역은 container을 활용해 영역을 구분했다.
1) <div class="elementor-widget-container"> - 광고배너 영역
- <container> 영역 스타일 설정 [CSS]
section 5. 에서는 특이하게 광고배너 영역에서 이미지를 불러온 후 CSS를 활용해서 이미지의 설정을 조절했다.
<style> 부분의 코드들을 보면 이미지의 설정값을 알 수 있다. - <a href> 링크 클릭시 접속
이후 <a href>를 통해 배너 클릭 시 링크로 접속할 수 있도록 했다.
2) <div class="elementor-widget-container"> - Recent Post 영역
- Recent Post 텍스트 설정
<div class="section-title text-left"> 코드를 통해 텍스트의 위치를 설정했고
이후 <h2> 코드로 텍스트의 크기를 설정했다. - Recent / Story / Culture 버튼 설정
<ul class="axil-tab-button nav nav-tabs mt--20"> 코드를 통해 unordered list로 버튼을 리스트로 정의했다.
이후 <li>를 통해 각각의 버튼의 role을 부여하고
<a> 코드로 엑티브 영역을 설정하고, <href> 코드를 하위에 심어 버튼 상호작용시 페이지가 바뀌는 엑티브를 설정했다. - 게시글 목록 / 우측 이미지
<div class="col-lg-8"> 코드로 게시글 영역과 우측 게시글 탭시 상호작용 되는 이미지 영역을 구분했다.
이후 <single post> 코드를 통해 각각의 게시글과 이미지를 설정했다.
또한 하위 코드들을 통해 텍스트, 작가님 프로필 등 section 3.의 2)번 과정을 거쳤다.
📌 section 6. - SNS 링크
Section 6. 은
1) <div class="axil-social-wrapper bg-color-white radius"> - 영역 내 흰색 박스
2) <ul class="social-with-text"> - sns 리스트를 통한 구분
로 구분했다.
1) <div class="axil-social-wrapper bg-color-white radius"> - 영역 내 흰색 박스
- section 내 흰색 박스 영역 구분
<div class="elementor-widget-container"> 코드를 통해 흰색 박스 영역을 container로 설정했고
이후 <div class="axil-social-wrapper bg-color-white radius"> 코드로 박스의 색상을 흰색으로 설정했다.
2) <ul class="social-with-text"> - sns 리스트를 통한 구분
- 각각의 SNS 리스트 부여
<li> 코드를 통해 각각 해당되는 영역에 SNS를 리스트를 구분했고
<a href> 코드로 해당 영역을 클릭 시 코드 내 sns 링크로 접속할 수 있도록 했다.
이후 하위 코드<i> 를 통해 영역 내 아이콘과 <span>을 통해 텍스트를 설정했다.
📌 section 7. - Featured Video
section 7. 은
1) <div class="row"> - Featured Video 제목 영역
2) <div class="col-xl-6 col-lg-6 col-md-12 col-md-6 col-12"> - 좌측 동영상 영역
3) <div class="col-xl-6 col-lg-6 col-md-12 col-md-6 col-12"> - 우측 작은 4개의 동영상 영역
으로 구분했다.
1) <div class="row"> - Featured Video 제목 영역
- 텍스트 위치 선정
<div class="section-title text-left"> 코드를 통해 타이틀 텍스트의 위치를 설정했다. - 텍스트 크기 설정
<h2> 코드를 통해 Featured Video 텍스트의 크기를 설정했다.
2) <div class="col-xl-6 col-lg-6 col-md-12 col-md-6 col-12"> - 좌측 동영상 영역
- 동영상 영역
먼저 <div class="post-thumbnail"> 코드를 통해 동영상 영역을 설정한 후
<a href> 코드로 동영상 영역 클릭 시 코드 내 링크로 이동하도록 했다.
하위에 <img> 코드를 통해 동영상 영역 이미지의 요소들을 설정했고
가운데 버튼 영역에 <a class="video-popup position-top-center"> 로 설정한 후 <href> 코드로 버튼 영역 클릭 시 코드 내 링크로 이동하도록 했다.
이후 마지막으로 동영상 재생 아이콘을 <sapn class="play-icon"> 코드로 설정했다. - 좌측 아래 텍스트 영역
Culture와 event 영역 :
<div class="post-cat-list"> 코드를 통해 Culture와 event의 영역을 구분하고각 텍스트의 블록에 <a href> 코드로 클릭시 코드 내 링크로 이동할 수 있도록 했다.
게시글 제목 영역 (누구에게나 ---)
<h4> 코드로 게시글 제목 텍스트의 크기를 설정한 후
<a href> 코드로 클릭시 코드 내 링크로 이동할 수 있도록 했다.
프로필과 sns링크 영역
<div class="post-meta-wrapper"> 코드로 영역을 설정한 후
프로필 부분은 <div class="post-meta"> 를 통해 영역 설정
sns 링크 부분은 <ul class="social-share-transparent justify-content-end">코드로 리스트 영역으로 설정했다.
3) <div class="col-xl-6 col-lg-6 col-md-12 col-md-6 col-12"> - 우측 작은 4개의 동영상 영역
- 4개의 영역 설정
우측 동영상 4개 각각의 영역을 먼저 설정했다. 코드를 보며 신기했던 점은 좌측의 동영상 설정의 미니 버전이라는 점이었다.
코드를 살펴보면 <div class="col-lg-6 col-md-6 col-sm-6 col-12"> 인데 좌측 동영상 영역보다 설정값에서 더 작도록 만들었다는 것을 알 수 있었다.
이후에는 1)번과 같은 과정을 거쳤으면 다른 점은 텍스트 크기였는데 좌측은 <h4>였고 우측은 <h5>로 설정했다.
📌 section 8. - Instagram
section 8. 은
1) <div class="section-title"> - Instagram 텍스트 영역
2) <div class="sb_instagram_header sbi_no_avatar" > - 아이콘 / opgginc 영역
3) <div id ="sbi_images"> - 인스타그램 포스트 영역
4) <div id="sbi_load"> - 아래 2개의 버튼 영역
으로 구분했다.
1) <div class="section-title"> - Instagram 텍스트 영역
- 영역 크기 설정
<div class="col-lg-12"> 코드를 통해 타이틀 section의 크기를 설정했다. - 텍스트 크기 설정
<h2>코드를 통해 텍스트 크기를 설정했다.
2) <div class="sb_instagram_header sbi_no_avatar" > - 아이콘 / opgginc 영역
- 영역과 버튼 설정 / 클릭시 인스타그램 이동
먼저 2) 코드 옆에 <style> 코드를 통해 검은색 동그라미 버튼을 삽입했다. - CSS
이후 <a href> 코드를 통해 클릭시 코드 내 링크로 이동할 수 있도록 했다.
마지막으로는 <h3> 코드를 통해 opgginc 텍스트의 크기를 설정했다.
3) <div id ="sbi_images"> - 인스타그램 포스트 영역
먼저 <style> 코드를 통해 각 블록을 구분(?) 한 것으로 보인다 - CSS
- 각각의 영역 설정 및 클릭시 이동
<div class="sbi_item sbi_type_carousel" id = "sbi_17899523851900421" data-date="1621998597">
코드를 통해 각각의 영역을 정의함과 동시에 데이터를 넣었다고 이해했다.
이후 하위 코드 <div class="sbi_photo_wrap"> 로 데이터 위에 이미지가 들어갈 공간을 만들고, <a href> 코드를 통해 이미지 영역 클릭시 코드 내 링크로 이동하도록 했다.
4) <div id="sbi_load"> - 아래 2개의 버튼 영역
- 왼쪽 버튼 - 더 불러오기..
<div class="sbi_load_btn" href="javascript:void(0);"> 코드를 통해
버튼을 설정했지만, <"javascript:void(0);> 코드로 해당 기능을 수행하지 않도록 해서
사실상 더 불러오기...버튼을 클릭할 시 아무일도 없도록 했다.
추가적으로 코드 내 <style> 코드를 통해서 버튼을 디자인했다. - CSS
※ <"javascript:void(0);> = 상호작용을 하더라도 아무일도 일어나지 않도록 해라
- 오른쪽 버튼 - Instagram 팔로우
<span> 코드를 통해 버튼 영역을 설정한 후 <a href> 코드를 통해 클릭시 코드 내 링크로 이동할 수 있도록 했다.
이후 <svg>를 통해 이미지를 심었다.
📌 section 9. - footer-area
section 9. footer-area는
1) <div class = "footer-top"> - 구분선 기준 위쪽 영역 (Follow us / sns링크)
2) <div class = "copyright-area"> - 구분선 기준 아래쪽 영역 (OP.GG Blog / OP.GG DNA / .....)
으로 구분했다.
1) <div class = "footer-top"> - 구분선 기준 위쪽 영역 (Follow us / sns아이콘)
- Follow us 텍스트 영역 / sns 아이콘
<footer-top> 코드 하위에 <div class = "container"> 코드를 통해 컨테이너 형식으로 영역을 설정한 후
<div class="col-lg-12"> 코드로 규격 설정을 했다.
이후 <div class="inner d-flex align-items-center flex-wrap"> 코드를 통해 텍스트 부분과 아이콘 부분을 나눴다.
Follow us 의 텍스트는 <h5> 를 통해
sns아이콘은 <ul>을 통해 리스트로 설정한 후 <li>로 리스트업 했고
<a href> 코드로 아이콘과 클릭시 코드 내 링크로 이동할 수 있도록 했다.
2) <div class = "copyright-area"> - 구분선 기준 아래쪽 영역 (OP.GG Blog / OP.GG DNA / .....)
- OP.GG Blog 로고
구분선 아래쪽 영역 중 OP.GG Blog / OP.GG DNA, Story, Culture, Recruit 부분을
<div class="copyright-left"> 코드로 left 영역으로 설정했다.
이후 OP.GG Blog 는 <div class = "logo"> 로 정의했고
<div href="https://log.op.gg/"> 코드를 통해 클릭시 코드 내 링크로 이동하는 기능을 추가한 뒤
<img>로 로고를 가져왔다. - bottom menu - (OP.GG DNA, Story, Culture, Recruit)
<ul id="menu-footer-bottom-menu"> 코드로 아래 메뉴부분을 설정했고
<li> 코드를 통해 각각의 메뉴를 리스트업, 이후 <a href> 코드로 메뉴 클릭시 코드 내 링크로 이동할 수 있도록 했다. - 우측 하단 텍스트
우측 하단의 텍스트는 <div class="col-xl-3 col-lg-12 col-md-12"> 코드를 통해 규격을 먼저 설정했고
<p b3> (= Paragraph) 코드를 통해 여백 설정과 텍스트 문구를 설정했다.
글을 마치며
분석을 진행하며 처음 개발자 도구를 켜서 봤을 때와 분석을 진행한 후의 차이가 꽤나 큰 것 같다.
과제를 진행하며 코드 하나하나 어떤 기능을 가지고 있는지에 대해서 공부하고
코드의 흐름들을 보면서 읽어가는 과정이 재밋게 다가왔다,
물론 중간에 PM이 이렇게까지 알아야하나? 라는 생각이 들기도 했지만
PM은 계속해서 자기계발을 해야하고, PM직무를 하며 자신의 방향성을 잡고
자신의 강점을 만들기 위해 전문적으로 공부해 2차 전직까지 해야한다는 코드스테이츠 PM님의 말씀을 듣고
더욱 열심히 했던 것 같다.
아직 HTML, CSS, JS에 대해서 완벽하게는 이해하지 못했지만 이론 교육 후 이렇게 분석을 진행해보며
이해도를 어느정도는 올릴 수 있어 만족스럽다,
'PM부트캠프 [코드스테이츠 PMB 18기] > 위클리과제' 카테고리의 다른 글
| W8 과제_Part1 - [붕괴: 스타레일]의 문제점은 무엇일까? (0) | 2023.05.25 |
|---|---|
| W7 과제_Part 2 - [OP.GG] 유형 분석, 확장 아이디어 구상 및 Open API 탐색, 활용 (0) | 2023.05.20 |
| W6 과제_Part2 '루티너리' 데이터 기반 가설 설정 - [코드스테이츠 PMB 18기] (0) | 2023.05.15 |
| W6 과제_Part1 플로우 차트를 그려보자 - [코드스테이츠 PMB 18기] (0) | 2023.05.15 |
| W5 과제_Part2 A/B테스트 설계 - [코드스테이츠 PMB 18기] (0) | 2023.05.08 |
