프론트엔드 탐색하기
7주차는 PM에게 필요한 개발 지식과 관련하여 학습하는 주차로 오늘은 IT 제품과 Product Management, 프런트엔드 이해하기에 대해 배웠습니다. 그렇다면 PM이 개발 지식을 알아야 하는 이유는 무엇일까용?
그건 바로, 1명의 매니저, 1인 이상의 디자이너와 다수의 개발자로 제품팀이 이루어지는 것이 보통입니다. 고객의 이야기를 듣고 제품을 기획하는 기획자와 개발자의 언어를 사용해 IT 기술을 구현하는 개발자의 소통 거리는 가깝지 않은데요. 기획자가 아무리 고객이 원하는 제품을 기획하더라도 개발자가 알아들을 수 없다면 원하는 대로 제품을 만드는 것은 불가능합니다. 그런 이유로, 좋은 제품을 위해서는 개발자의 언어를 기획자가 반드시 이해해야만 합니다. 특히 개발자와의 대화는 지식 없이 불가능하기 때문에 대화 커뮤니케이션 그리고 리스크 관리를 위해 개발자는 최소한의 개발 지식을 배워야만 하는 것입니다.
따라서 오늘은 학습한 웹 프론트엔드의 3가지 언어 HTML(Hypertext Markup Language), CSS(Cascading Style Sheets), JavaScript에 대해 관심 있는 프로덕트의 웹 랜딩 페이지를 찾고, 이를 다음과 같이 나누어 분석해보고자 합니다.
💡 잠깐, 웹 프론트엔드의 3가지 언어에 대해 간단하게 알아보겠습니다.
- HTML(Hypertext Markup Language) : 웹 페이지의 구조를 담당하고 콘텐츠의 레이아웃을 제어하는 역할을 합니다.
- CSS(Cascading Style Sheets): 웹 페이지의 스타일의 적용하여 화면이 어떻게 보일지 구성하는 역할을 합니다.
- JavaScript : 웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어로 웹 페이지에 상호 작용 추가하는 역할을 합니다.
서핏 어떤 플랫폼인가?
오늘 관심있는 프로덕트는 매일 아침마다 보는 서핏(surfit)으로 과제를 진행하려고 합니다.
서핏(surfit)은 개발·마케팅·기획·스타트업 등 'IT 프로덕트 업계' 전문가들이 다양한 채널에서 생산하는 지식 콘텐츠를 맞춤 제공하는 웹 서비스 플랫폼인데요. 지식 콘텐츠를 아주 편안하게~ 즐길 수 있는 것뿐만 아니라 다양한 직무의 사람들에 대한 정보와 채용 공고까지 제공하고 있답니다.
📖 비전공자를 위한 이해할 수 있는 it 지식(책)을 참고하여 과제를 진행했습니다. 크롬 브라우져 기준 F12 or 메뉴 ‘보기’ → ‘개발자 정보’ → ‘개발자 도구’를 클릭하면 아래와 같은 창이 뜨게 됩니다. 다음 화면에서 본격적으로 서핏의 홈페이지를 보면, 웹을 하나하나 뜯어볼 수 있도록 하겠습니다.
1. 서핏의 HTML 요소
🤔 화면의 구성 요소들이 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다
HTML의 구조는 <head>와 <body>로 이루어져있으며 아래는 기본적인 구조를 보여주는 그림입니다.
각 항목에 대해서 살펴보면,
<!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시합니다. (HTML5 문서 타입은 <! DOCTYPE html>이다.)
<html> : HTML 문서의 루트(root) 요소를 정의하면, 웹 문서의 시작과 끝을 나타내는 태그입니다.
<head> : HTML 문서의 메타데이터(metadata)를 정의하면, 웹 브라우저가 알아야 할 정보를 입력하는 공간입니다.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
- 이러한 메타데이터는 문서 제목 <title>, 내부 head 태그 사이에서 css연동 <style>, 데이터에 대한 데이터 <meta>, 외부 요소 가져오기 <link>, 자바스크립트 <script>, 기본 페이지 설정 <base> 태그 등을 이용하여 표현할 수 있습니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음
과 같은 용도로 사용됩니다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저에 실제로 표시할 내용을 입력하는 공간이며, 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등의 모든 콘텐츠가 포함된 몸통을 나타내는 태그입니다. 우리 눈에 보이는 것들을 body에 있는 요소라고 할 수 있습니다.
<h1>~<h6> : 제목(heading)을 나타냅니다.
<p> : 단락(paragraph)을 나타냅니다.
💡발견한 인사이트
- 설명한 요소는 모두 들어가 있는 것을 확인할 수 있습니다.
- 특히 <head>의 세부 요소를 문서 제목 <title>, 내부 head 태그 사이에서 css연동 <style>, 데이터에 대한 데이터 <meta>, 외부 요소 가져오기 <link>, 자바스크립트 <script>, 기본 페이지 설정 <base> 태그를 서핏의 구성요소로 확인해 볼 수 있었습니다.
- <body>는 우리 눈에 보이는 것들의 요소라고 했는데요. 정말 <body>를 삭제하면 모든 것이 사라집니다. 😲
- 세세하게 모든 요소를 해석할 수는 없었지만 전체적인 HTML의 구조는 <head>와 <body>로 이루어져 있다는 것은 확실하게 알 수 있었습니다.
2. CSS 요소
🤔 각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다
앞서 HTML의 구조 중 <head> 중 내부 head 태그 사이에서 css연동 <style>이라는 것을 설명했는데요. 이처럼 head를 없애면 홈페이지를 꾸며주던 요소들이 모두 지워진 것을 볼 수 있습니다. <head>의 CSS가 없어진 HTML의 본연의 모습, 정보들만 정리된 모습이 나옵니다.
그리고 CSS의 기본 문법으로 CSS는 선택자와 선언부로 구성됩니다. 선택자는 스타일을 지정할 HTML 요소(태그, 아이디 등)를 가리킵니다. 선언부에는 CSS 속성 이름과 값이 포함됩니다. 속성이 여러 개일 경우, 한 줄로 나열해도 상관없지만 여러 줄에 걸쳐 작성하는 것이 좋습니다.
선택자 {속성:값; 속성:값....}
예)
/* h1태그의 색상을 빨간색으로 크기는 15px로 지정합니다.*/
h1 {color:red; font-size:15px;}
실제)
.jgVULd{position:relative;gap:8px;color:hsl(226,100%,62%);margin-top:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}
더 쉽게는 해당 영역을 클릭하면 색깔, 폰트, 크기 등을 알 수 있습니다.
💡발견한 인사이트
- head를 없애니 꾸며주던 요소들이 모두 지워집니다.
- head 내용 중 <style type="text/css"> 포함된 내용 중 코드들을 하나씩 삭제해보니 아래의 그림처럼 하나씩 꾸며주는 요소들이 없어지는 것도 보았습니다.
- <banner> css의 일부분을 살펴보면 화면 레이아웃을 어떻게 디자인하고, 무슨 포트, 배경색은 어떤 색 등을 사용하였는지 등을 알 수 있습니다.
3. JavaScript 요소
🤔 각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.
앞서 분석한 HTML과 CSS는 정적인 언어입니다. 정적이라는 것은 브라우저를 통해서 웹페이지를 화면에 그려주면 이 화면을 변경할 수 있는 방법이 없다는 의미입니다. 반면 Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. 경고창을 띄우고, 탭 인터페이스를 만들고, Drag & Drop 기능의 웹 애플리케이션을 만들 수 있는 거죠. 그럼 서핏의 메인 화면에는 어떤 Javascript가 적용되어 있을까요?
웹 프런트엔드에서 보이는 자바스크립트 요소로 볼 수 있는 동작들을 서핏으로 살펴보면 아래와 같다.
사실 더 많은 동작들이 있습니다!!
저는 관심 있는 콘텐츠를 클릭하면 해당 링크로 넘어가거나 옆으로 슬라이드 하면 이전 페이지로 넘어가는 것들을 살펴보았는데. 이런 동작들이 모두 자바스크립트 요소에 속합니다!
끝으로..
개발자 도구는 종종 보았던 것 같은데 이번에 알게 된 것은 저 빨간 박스를 통해 페이지에 마우스를 올리면 하나하나 해당 내용이 뜨는 것을 알게 되어서 신기하였습니다. 이번 과제는 조금은 포괄적으로 살펴본 것 같은데 앞으로 종종 다양한 홈페이지를 살펴보면서 조금씩 개발자 도구를 볼 수 있는 시각을 늘려야겠어요..
그리고 개발자 도구를 보다가 콘솔 창에서 발견한 링크는 바로 프런트 엔지니어 채용 링크인데요.. 서핏의 센스 무엇인가요,,ㅎㅎㅎ
과제 중 발견한 재미있는 tmi를 이야기하면 이만 과제를 끝내 보도록 하겠습니다.
| 출처
https://opentutorials.org/course/48
JavaScript - 생활코딩
자바스크립트란? HTML과 CSS는 정적인 언어입니다. 정적이라는 것은 이것들이 브라우저를 통해서 웹페이지를 화면에 그려주면 이 화면을 변경할 수 있는 방법이 없다는 의미입니다. (잘 이해가 안
opentutorials.org
'PMB_15기 > DAILY' 카테고리의 다른 글
| [코드스테이츠 PMB 15기_W7D3] API의 개념과 카카오 로컬 주소 검색 Open API 알아보기 (2) | 2022.11.30 |
|---|---|
| [코드스테이츠 PMB 15기_W7D2] 기록이 쌓이면 내가 된다, 네이버 블로그 (0) | 2022.11.29 |
| [코드스테이츠 PMB 15기_W6D3] 넷플릭스 vs 디즈니 플러스, 데이터 시각화 (0) | 2022.11.25 |
| [코드스테이츠 PMB 15기_W6D3] 경쟁 치열해진 OTT, 넷플릭스 vs 디즈니 플러스 (1) | 2022.11.24 |
| [코드스테이츠 PMB 15기_W6D2] 오늘 맡기고 내일 밤 받는 모바일 세탁소, 런드리고 (2) | 2022.11.23 |