들어가며
이번 과제는 관심 있는 프로덕트의 웹 랜딩 페이지를 찾고, HTML 요소와 CSS 요소, JavaScript 요소를 정리 분석하는 것이다.
즉, 웹 페이지의 프론트엔드를 분석하는 것이다.
IT(Information Technology: 정보기술)서비스는 기본적으로 정보를 어떻게 다루느냐를 바탕으로 서비스를 구성한다. IT서비스는 기본적으로 클라이언트(서비스를 사용하는 사용자, 사용자의 기기)와 서버(서비스를 제공하는 컴퓨터)로 이루어진다. 사용자가 웹이나 앱으로 클라이언트에 접속하여 여러 기능을 조작하면서 서버에 정보를 주고받는 요청을 보내면, 서버 컴퓨터에서는 필요한 정보를 데이터베이스에 가져오고 저장하면서 원하는 기능과 결과물을 다시 클라이언트에 보내준다. 이때 클라이언트 부분을 프론트엔드(Front-end), 서버 부분을 백엔드(Back-end)라고 한다.
프론트엔드는 클라이언트 부분이므로, 사용자가 보는 화면의 모든 영역이라고 할 수 있다.
웹 프론트엔드는 3가지 언어로 구성되어 있는데 HTML과 CSS, javaScript이다.
HTML은 뼈대, CSS는 피부, javaScript는 몸의 근육과 신경으로 쉽게 비유를 들 수 있다.
각각의 개념은 아래에서 대략적인 목차에 맞게 설명하려고 한다.
나는 현재 블로깅을 하고 있는 티스토리의 랜딩 페이지를 분석하려고 한다.
- HTML이란 무엇인지, 티스토리의 HTML
- CSS란 무엇인지, 티스토리의 대략적인 CSS
- 자바스크립트란 무엇인지
- 티스토리의 화면을 보며 HTML, CSS, 자바스크립트 탐색
의 목차대로 진행해보려고 한다.
HTML이란? - 화면의 구성 요소들이 어떻게 배치되어 있는지
HTML이란 화면의 기본 구조로, 뼈대에 비유할 수 있다.
개발자도구를 열어 확인했을 때 화면이 어떤 구조로 구성되어 있는지를 HTML에서 확인할 수 있다.
먼저, 맥에서 티스토리에 접속해 fn+f12를 눌러 개발자모드를 킨 후 head 부분을 삭제해서 CSS부분을 뺀 HTML의 모습만을 살펴보았다.
CSS를 제거하면 이렇게 뼈대만 있는 기본 html의 모습을 볼 수 있다.
개발자모드의 HTML 코드를 보면,
HTML은 head와 body로 구성되어있다.
html lang="ko"를 보면 랜딩페이지의 언어는 한국어로 설정되어 있음을 알 수 있다.
1) HTML의 <HEAD>
<HEAD>는 HTML 문서에 관한 기본 정보를 포함하고 있는 부분으로, 주로 문서의 제목, 제작자, 문서정보 등이 포함될 수 있다.
<TITLE> - 문서 상단의 제목 설정
<META> - 문서 정보 설정 (이 파일이 어떤 정보를 나타내고 있는지를 나타내는 태그)
<script> - javascript 언어 등을 사용한 다양한 프로그램이 위치하는 공간
<Style> - 문서의 장식
<HTML>, <HEAD>, <TITLE> 등의 태그를 적어주더라도 실제 화면상에는 아무런 내용이 출력되지 않는다.
- <meta>는 문서의 정보를 설정한 것이다.
- <meta charset="uft-8"> 태그는 html의 인코딩(웹브라우저, 컴퓨터의 HTML 파일을 웹브라우저에서 표시될 수 있도록 변환하는 처리 작업. 파일의 정보 형태가 어떤 언어로 되어있는지에 대한 지정이 필요한데 이것을 문자 코드셋이라고 한다) 을 알려주는 태그로, 쉽게 말해 브라우저에게 text를 어떻게 그려달라는지 말해주는 것이다. 이 태그가 없으면 한글, 특수문자들이 깨져서 나올 수 있다.
- <meta property> 태그는 웹페이지가 소셜 미디어 또는 오픈그래프를 활용한 사이트로 공유될 때 사용되어지는 정보이다.
예를 들면 페이스북에 링크를 붙여놓기, 카카오톡 링크 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우가 오픈그래프가 활용된 경우다.
- <title>은 문서 상단의 제목 설정인데, 현재 TISTORY로 설정되어 있음을 알 수 있다.
2) HTML의 <BODY>
<BODY> ... </BODY>
HTML 문서의 본문에 해당하는 곳으로 실제 화면에 나타나는 내용을 기술하는 부분이다. 즉, 사용자가 웹브라우저 상에 표현하고자 하는 내용들을 다양한 태그를 사용하여 구성하는 부분으로, 웹문서의 대부분을 차지한다.
body는 div id="kakaoIndex" 와 div id="kakoWrap" class-"tistory_tyrpe1"이라고 되어있다.
CSS란? - 각 구성요소들이 어떠한 모양을 하고 있는지
CSS는 뼈대에 살을 더해주는 요소이다. 어떤 스타일로 요소들이 꾸며졌는지를 CSS를 통해 확인할 수 있다.
- body의 (버튼, 인풋, 셀렉트, td-테이블데이터, text area, th-테이블 타이틀) CSS를 살펴보면 아래와 같다.
- font-size는 폰트 굵기를 나타내는 CSS다. 13px로 설정되어 있다.
- line-height는 행간을 나타내는 CSS다. px로 표현하거나 배수로 소수점으로 표현 가능한데, 현재 1.5로 소수점으로 표시되어있다.
이때 배수의 의미는 현재 폰트 크기의 몇배로 행간을 나타내겠다는 의미다.
- font-family는 폰트의 종류를 나타내는 CSS다. 제일 앞에 있는 폰트인 'Sans DemiLight'가 최우선적으로 적용이 되고, 만약에 이 폰트를 로드하는 데 있어서 문제가 생겼다면 이다음에 선언된 폰트가 적용된다.
- webkit-font-smoothing은 antialiased라고 되어있는데
webkit-font-smoothing은 CSS의 스타일 속성 중 하나로, 이 속성을 적용하면 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현되는 장점이 있다. 즉 폰트를 더 부드럽게 사용하기 위해서 사용하는 스타일 속성이다.
여기서 antialiased는 anti + aliased를 뜻한다. 해석하면 aliased를 제거한다는 뜻으로 계단처럼 렌더링 되는 부분을 부드럽게 표현하는 효과를 말한다.
- margin은 개발자도구로 확인 시 주황색으로 표시되는데, 오브젝트의 외부 여백이다. 현재 0으로 설정되어 있다.
- padding은 초록색으로 표시되는데, 오브젝트의 내부 여백이다. 현재 0으로 설정되어 있다.
스타일시트를 보면 display는 block으로 표시되어 있다.
display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적인 block 엘리먼트로 <div>이나 <p> , <h1> 태그 등을 들 수 있다.
JavaScript란? - 각 구성요소들이 가지고 있는 특정한 동작이 무엇인지
JavaScript는 컴퓨터 언어로, html이 뼈대이고 CSS가 살이라면 JavaScript는 몸의 근육과 신경이라고 할 수 있다.
웹페이지에 상호작용을 추가하고 복잡한 기능 및 기능을 처리하는 것이다.
티스토리 랜딩페이지 살펴보기
티스토리의 화면에서 HTML, CSS, javaScript을 탐색해볼 것이다.
티스토리의 상단 네비게이션바에는 왼쪽부터 순서대로 로고, 피드, 스토리, 스킨, 포럼이 있다.
span class를 사용해 로고, 피드, 스토리, 스킨, 포럼의 class를 그룹화하였다.
티스토리 로고 버튼은 메인 페이지이다.
피드, 스토리, 스킨, 포럼의 각각의 class를 선택하면 해당 페이지로 이동한다.
대표적으로 '피드'를 보면 color, font, padding이 어떻게 설정되어있는지 CSS를 확인할 수 있다.
메인 페이지를 스크롤하다 보면 여러 가지 화면이 뜨는데 이 부분을 kakao wrap으로 설정한 듯하다.
해당 부분은 통틀어 scene_content라고 묶은 것 같다.
먼저 파란색으로 표시된 배너 영역은 scene_content 중 inner_scene이다.
inner_scene에서 tit_scene(제목)은 '당신의 이야기가 값진 수익이 됩니다.'라고 적혀있다.
tit_scene의 CSS 정보로 color와 font를 확인할 수 있다.
inner_scene에서 tit-scene의 아래에는 desc_scene(설명)으로 '심사부터 광고 설정, 수익 확인까지 티스토리에서 바로 할 수 있어요.'가 있다. tit-scene과 마찬가지로 CSS로 color, font를 확인할 수 있고, 초록색 영역인 padding을 확인할 수 있다.
desc_scene은 <p>라고 하는 문단(Paragraph)의 역할을 한다.
inner scene 하단에는 버튼이 있고, 버튼 이름은 자세히 보기이며, 링크 이동의 역할을 하고 있다.
color, font, Background, padding값을 확인할 수 있다.
background는 화이트로 inner scene의 색상과 대비되어 버튼이 눈에 띄도록 설정했다.
inner_scene을 내리면 위 화면이 나타나는데, 그 영역을 mArticle이라고 한 것 같다.
'이 놀라운 사이트들이 모두 다 티스토리라는 사실'은 wrap_tit(제목)이다.
'티스토리는 그저 공간일 뿐이에요. 그 공간에 무슨 일이 일어날지는 아무도 상상할 수 없죠.'는 desc_section으로 표시되어 있다.
이 desc_section은 위에서 언급한 것과 같이 <p>로 문단으로 구성되어있다.
mArticle의 제목과 설명 아래에는 slide-case가 있다.
그중 한 영역을 보면 wrap_thumb로 구성되어있다.
mArticle의 wrap_tit(제목)인 '이 놀라운 사이트들이 모두 다 티스토리'와 맞게 사이트들을 소개하는 화면이다.
이미지 크기는 528x396인데, 옆으로 나열되어있는 페이지의 이미지 크기는 다 다르다.
앞에서 말했듯 slide_case인데 전체 화면의 이미지 크기와 color, font, margin을 확인할 수 있다.
mArticle 하단에는 이렇게 relative_list(관련 목록)이 있다. color, font, padding 값을 확인할 수 있다.
relative_list에는 에버랜드, 교육부, 파라다이스, IBK기업은행 등 각각의 버튼이 있다.
이 버튼의 이름은 wrap_logo로 되어있고, 기본적으로 150x50의 크기이며 색상은 #333333(black)이다.
각 버튼을 누르면 해당 페이지로 이동한다.
그다음 content_section은 스킨 고르기이다.
위에서 언급한 mArticle과 마찬가지로,
'마음에 드는 스킨 고르기부터 시작하세요'는 tit_section이고 '티스토리는 얼굴이 없어요. 당신이 얼굴을 직접 제작할 수 있도록 다양한 스킨을 제공할 뿐이에요.'는 desc_secton이다.
화면에 있는 표정 이모티콘들은 icon_tistory icon_expesstion이다.
밑에는 스킨들을 보여주고 있는데 section_content.section_skin으로 되어있고 color, font, background를 확인할 수 있다.
화면에는 잘려 보이지 않지만, 스킨 이미지 아래에 스킨 보기 버튼이 있다.
스킨보기 버튼을 누르면 화면 상단 내비게이션 바에 있는 '스킨'에서 이동화는 화면과 같은 화면으로 이동한다.
이 부분은 매거진 형식으로 되어있는데, 맨 처음 스크롤을 내리기 전과 같이 mArticle로 되어있다.
각각의 이미지들을 배치하였고, magazine-rolling up이라고 해서 매거진 부분은 이미지가 위에서 아래로 올라오는 효과가 나타난다. 시각적으로 보기에 부드럽게 느껴지도록 하는 효과를 주는 것 같다.
이 부분은 info_guide(이용 가이드)이다.
주황색으로 표시된 영역과 초록색으로 표시된 영역으로 margin과 padding을 확인할 수 있다.
오브젝트에 있는 긴 글은 각각 a href로 두 줄씩 영역이 나누어져 있었다.
페이지 하단에 있는 푸터이다.
푸터의 왼쪽 하단에는 검색창이 있다. 검색창의 크기는 181x40이다. 검색창의 color와 font, margin, padding값을 확인할 수 있다.
푸터의 오른쪽에는 question 영역이 있다.
question영역 상단에는 '메뉴가 궁금할 땐', '사용하다 궁금할 땐', '정책이 궁금할 땐', '도움이 필요할 땐'의 tit_question이 있다.
각각의 tit_question아래에는 '스킨', '포럼', '스토리'와 같이 list_question이 있다.
각각의 list_question 버튼을 누르면 해당 페이지로 이동한다.
티스토리의 메인 페이지에서 javaScript를 파악하는데 대부분 link로 이동하는 거라서, 푸터 왼쪽 하단에 있는 검색창으로 javaScript 상호작용을 살펴보고자 했다.
검색창에서 '코드스테이츠'를 검색해보았다.
검색을 하면 이렇게 Daum의 블로그들이 검색되는 것을 확인할 수 있었다. 이 또한 페이지 이동인 걸까..
페이지를 전체적으로 살펴보았는데, javaScript가 대부분 페이지 이동하는 기능이라 조금 다른 기능은 없을지 찾아보려고 한다.
초록색 글씨로 되어 있는 부분을 보면 'IE9 이하에서 영상 슬라이드 제거 위한 조건부 스크립트 적용'이라고 친절히 적혀있다.
javaScript(기능)를 더 확인할 수 있을까 싶어 Sources에서 js를 선택해 살펴보았다.
js - ext - swiper.min.js로 이동했을 때 나오는 js이다.
swiper.min.js는 쉽게 말하면 배너의 스와이프 이동 기능이라고 할 수 있는 것 같다.
웹에서 스와이프 UI는 자주 사용된다. 직접 구현할 수도 있지만 이미 구현된 플러그인, 라이브러리를 주로 사용한다. swiper.js은 현재 작업하는 프로젝트에서 사용하는 플러그인이다.
초록색으로 적혀 있는 부분도 보면, 가장 모던한 터치 슬라이더라는 설명인 것 같다.
먼저 swiper 연결을 할 때에는 css와 js를 연결을 해주어야 한다고 한다.
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
잘 모르지만, 위의 코드를 사용해 js를 연결하는 것 같다.
마치며
개발자 도구를 처음 켜봐서 그런지 많이 헤맸다.
기본 태그부터 개념을 학습하는데만도 시간이 부족했다.
사실 아직도 어려운 부분이 있긴 하다.
그래서 그런지, 과제도 정신이 없는 것 같아 민망하기도하다(..)
모든걸 다 분석할 순 없었지만 이번 과제를 통해 개발 기초 지식을 알고 개발자, 디자이너와 상호작용을 할 수 있는 토대가 되었길 바란다.
'PMB_15기 > Daily' 카테고리의 다른 글
| [코드스테이츠 PMB 15기_W7D3] 카카오 로그인의 오픈 API 살펴보기 (0) | 2022.11.30 |
|---|---|
| [코드스테이츠 PMB 15기_W7D2] 눈으로 보며 듣는 음성 기록, 클로바노트 (0) | 2022.11.29 |
| [코드스테이츠 PMB 15기_W6D3,4] 지역별 전기차 충전소 데이터 분석하기 (0) | 2022.11.23 |
| [코드스테이츠 PMB 15기_W6D2] 금융의 모든 것, 토스 린 분석 (0) | 2022.11.22 |
| [코드스테이츠 PMB 15기_W6D1] 비대면 진료 앱, 닥터나우 (0) | 2022.11.21 |
