개발을 아는 PM이 되고 싶어요. (프론트엔드)
코드스테이츠 PMB 14기
들어가며 시간이 정말 빠릅니다. 매일매일 하는 과제에 치이다보니 벌써 7주차... 이번주차의 주제는 개발을 하는 PM이 되기가 목표입니다. 즉 PM이 알아야할 개발지식을 습득하는 것이 목표라는 뜻이다. 사실 개발이라고 하면 덜컥 겁부터 나는 게 사실이다. 저는 머리부터 발끝까지 개발지식과는 거리가 멀게 살아왔던 사람이라... 과연 이해할 수 있을까하는 걱정이 앞서는 것도 사실입니다.
하지만 PM이 개발 지식을 갖춰야하는 이유는 무엇일까요? 바로 PM의 본질은 커뮤니케이션이기 때문입니다. 개발자와 디자이너 전부와 긴밀하게 소통하며, 자신이 한 기획이 제대로 된 결과로 나오게 하는 것도 PM이 해야하는 일이기 때문입니다.
개발에 대해 아무것도 모른다면 어떻게 소통할까요? 아무래도 모호하고 불명확한 지시를 전달할 수 밖에 없을 거 같습니다. 이러한 부분에서 PM은 개발 지식을 알아야할 의무가 있는 거라고 생각합니다.
첫번째로, 오늘은 프론트엔드에 지식에 대해 배웠습니다. 지금까지 짧은 지식으로는 프론트엔드는 사용자 눈에 보이는 모든 부분을 가르키는 말이라고 생각했는데. 좀 더 정확한 언어와 지식을 오늘 수업으로 인해 깨달았습니다.
프론트엔드, 특히 웹에서는 3가지의 기술로 구성되어 있습니다.
1. HTML
-웹페이지의 뼈대, 즉 레이아웃을 담당
-웹페이지의 기본 빌딩 담당
2. CSS
-웹페이지의 디자인 요소 담당
-글자 크기, 폰트, 이미지 크기 등 세부 요소의 스타일을 담당
3. JAVAscript
-웹페이지의 모든 동작을 담당
-페이지 내에 모든 상호작용 요소 담당
이제 이 세가지 요소가 어떻게 사용되었는지, 이미 설계된 웹페이지를 두고 뜯어보면서 공부를 해보려고 합니다.
티스토리의 랜딩페이지
그래서 오늘 분석해볼 랜딩페이지는 바로 티스토리다.
코드스테이츠 수업을 들으면서 하루에 가장 많이 접속하는 페이지이기도 하다.
매일 들어가보는 이 페이지는 과연 어떻게 설계가 되어있을까? 크롬의 개발자 도구로 진입해서, 이 페이지의 속내를 탈탈 털어보겠다.
HTML
일단 웹페이지의 뼈대라고 볼 수 있는 HTML 구조를 먼저 살펴보기로 했다.
티스토리의 메인 페이지는 <Head> 와 <body> 부분으로 나뉘어져 있었다.
<head>는 우리 몸으로 치면 '뇌'와 같은 부분이다. 사용자의 눈으로는 보여지지 않는 타이틀 부분을 담당한다.
눈에 보이지 않는 정보인 <Meta>부분은 확인할 수 없지만, <Title> 부분은 확인할 수 있다. TISTORY 라고 브라우저의 탭 부분의 제목이 지정되어있다.
CSS
티스토리는 <head> 에 외부에 있는 CSS 파일을 로드시켜놓은 형태입니다.
그렇기때문에 저 링크된 부분을 전부 날리면 CSS가 날라간 적나라한 형태가 보여집니다.
이런식으로 말입니다. 안에 포함된 이미지와 텍스트가... 아무런 스타일 없이 보여집니다.
웹페이지 맨 위에 타이틀 부분에 있는 CSS를 확인해보았습니다.
z-index: 100;
width: 100%;
height: 104px;
타이틀에 지정된 이미지 크기를 확인할 수 있습니다!
그 다음에 body 부분에 지정된 폰트와 폰트 크기를 확인할 수 있습니다.
폰트 사이즈는 13 과 맑은 고딕과 돋움 noto sans 등에 폰트가 사용되어있습니다.
JAVA script
<Script>부분이 자바스크립 부분이다. 티스토리는 J쿼리를 이용하여 웹페이지를 구성해놓았다. 그다음에 각 타이틀에 있는 아이콘을 클릭했을 때 다음페이지로 넘어가게 링크되어있다.
그다음부터 잘 모르겠다 ㅎㅎ ! 아무래도... 대충 J쿼리를 사용해서 구성했다는 것만 알겠다. 이번 과제는 정말 모르겠습니다... 구성요소만 파악하면 되는거니까 되지 않을까요.....?
자바스크립부터 막힌 저의 과제.... 아무튼 잘 모르겠지만 구성만 파악하다는 것만 위안을 가집니다....
#PM부트캠프 #코드스테이츠
