개발자 도구로 간편하게
스티비 해부하기!
[코드스테이츠 PMB 14] Daily
우리가 보는 웹사이트는 어떻게 구현되고 작동할까? 쿠팡이나 11번가와 같은 이커머스 웹사이트에는 몇 백 아니 몇 천가지의 제품이 업로드되어 있고, 각 제품에 상세 페이지부터 리뷰 작성, 찜까지 다양한 기능을 가지고 있다. 이렇게 사용자 눈에 보이는 부분을 프론트엔드라고 하는데, 이를 개발자처럼 코드로 확인할 수 있는 방법은 없을까?
있다! 개발자는 아니지만, 개발자 도구를 이용해서 아주 쉽게 프론트엔드 코드를 확인할 수 있다. (봐도 모르는게 함정이지만,,) 오늘은 개발자 도구를 이용해서 웹사이트를 해부해 보는 시간을 가지고, 코드가 서비스의 기능과 어떻게 연결되는지 확인해보자:)
먼저 웹 프론트엔드의 언어에는 3가지가 있다.
웹 프론트엔드의 3가지 언어
출처: 웹 기초 설명 [한 장으로 표현한 HTML, CSS, JavaScript] 1) HTML(Hypertext Markup Language)
: 어떠한 내용이 어떠한 요소들로 구성되는지 각각의 요소들로 이름을 붙인 문서를 표현한 프론트엔드의 뼈대
2) CSS(Cascading Style Sheets)
: HTML이 어떠한 모습으로 표현될지 각 요소들의 디자인 표시방식을 정의한 일종의 살갗
3) JavaScript
: 웹브라우저상에서 다양한 기능과 알고리즘의 구현과 같은 동작이나 데이터의 처리를 수행하는 프로그램
그렇다면 개발자도구를 통해 웹사이트를 본격적으로 해부해보자!
오늘은 저번 글에서 다루었던 '스티비' 웹사이트를 뜯어보기로 했다. 나는 앱 기반의 서비스에 관심이 많아서, 거의 웹 기반의 프로덕트는 다루지 않았기에, 스티비라는 프로덕트를 깊게 파보기로 결정했다.
*스티비의 간단한 소개는 [잠시만요✋! 스티비 카피 수정하고 가실게요~!]에서 확인할 수 있습니다:)
1) 스티비의 HTML
HTML 영역은 <head>, <Body> , <Footer> 세 가지로 나뉘어져 있다.
<head>: 기능, 가격, 고객사례, 블로그, 도움말, 로드인, 회원가입
<Body>: 스티비 기능, 스티비 선택 이유, 뉴스레터 신청
<Footer>: 스티비 회사 정보, SNS, 채용 웹사이트 등
2) CSS(Cascading Style Sheets)
스티비 웹사이트 HTML을 멋드러지게 디자인하는 역할을 맡은 요소이다. CSS는 개발자 도구를 통해 Style을 통해 알 수 있으며, 웹사이트 내의 글꼴, 글자크기, 색상 등 다양한 디자인 요소를 조정한다.
3) JavaScript
웹사이트 내에서의 다양한 기능, 알고리즘의 동작을 수행하는 프로그램인데, 사실 스티비 웹사이트는 하나의 제품만을 다루고 있기에 해당 웹사이트에서는 Javascript는 열일하지 않았다! 위에 보이는 것처럼, 로그인 이벤트의 동작만을 담당하고 있었다.
아묻따 책소개!
비전공자를 위한 이해할 수 있는 IT지식
저자| 최원영
출간| 2020.07.14
해당 도서는 개발 용어를 한번도 들어보지 못한 비전공자를 위한 IT 필수 교양서라고 할 수 있다. 개발 지식이 하나도 없는 나도 고개를 끄덕거리며 읽을 수 있을만큼 쉽게 IT 지식을 풀어낸 책이었다.
갑작스레 이 책을 추천하는 이유는, 지금 내가 업로드하려는 게시글과 관련된 지식이 책에도 포함되어 있고, 부족한 글솜씨로 인해 이해하지 못했다면,
해당 도서를 강추!하는 마음에 아묻따 책소개를 해 보았다.
#PM부트캠프 #코드스테이츠 #PMB #PM #프로덕트매니저 #공감 #brunch #HTML #서비스기획 #CSS #Javascript #프론트앤드 #일상 #취준 #취준생 #직장인 #기획자 #기획 #로그인 #첫인상 #스티비 #개발 #개발언어 #개발자 #책추천 #IT #IT지식
