개발자 도구로 살펴본 혁신의 숲은?
프론트엔드 탐색해 보기 [코드스테이츠 PMB 16기]
PM은 왜 개발 지식을 알아야 할까?
구성원들과 함께 걷기 위해서 개발 지식은 꼭 필요하다.
우리는 절대 혼자서 일할 수 없으며, 다양한 이해 관계자들과 끊임없이 소통을 하며
함께 행동하며 나아가야 한다.
사진 출처 = Unsplash특히 PM은 모든 이해관계자의 중간 역할로, 빈번하게 혹은 극단적이라면 매번
구성원들은 PM의 적절한 판단과 답변을 기다리고 있을 것이다. (상상만 해도 벌써 너무 부담스럽다.)
그런 상황에서 PM이 프로덕트 개발 상황이나 서비스의 전반적인 상황에 대해서 이해를 못 하고
구성원들과 소통에 난항을 겪는다면, 조직 혹은 팀은 길을 잃게 되는 것이다.
동료들의 뜨거운 관심에 비해, 아무것도 모르는 PM디자인은 어느 정도 실체가 존재하여 눈으로 보며
이야기 가능한 부분이 있기 때문에 소통이 가능한 부분이 충분히 존재하지만,
개발의 영역은 어느 정도의 지식이 기반하지 않으면 소통 자체가 불가하다.
PM이나 기획자에게 요구되는 것은 커뮤니케이션을 위한 지식 정도이지, 구현을 요구하는 것이 아니다.
실제로 사이드 프로젝트를 진행하면서 민망할 정도로 개발에 대한 지식이 없어서 어려움이 존재했으나,
친절하고 열정 있는 개발자분들의 설명 덕분에 부족한 부분을 많이 채우고 또 나아갈 수 있었다.
하지만 어떻게 매번 그렇게 일들이 진행될 수 있을까.?
나를 위해서도, 팀원들을 위해서도 결국 커뮤니케이션을 위한 개발 지식은 무조건적으로 필요하다.
팀원들의 에너지와 시간은 매우 유한하고, 중요한 자원이다.
PM의 미션은 그것들을 잘 지켜면서, 최대로 활용하여 유의미한 서비스를 만들어 내는 것이다.
커뮤니케이션을 위한 나의 개발 지식 증진 Part 1.
웹 프론트 엔드 / HTML , CSS , Javascript 간단하게 살펴보기
HTML
HTML (Hypertext Markup Language)의 역할은 구조, 뼈대를 만드는 것이다.
콘텐츠들의 레이아웃들을 제어하고, 웹 페이지 디자인을 위한 구조를 제공한다.
모든 웹 페이지의 기둥이자 블록이라고 생각하면 된다.
CSS
CSS (Cascading Style Sheets)의 역할은 위의 구조, 뼈대에 옷을 입혀주는 것이다.
웹 페이지 요소에 스타일을 적용할 수 있고,
웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 변화를 적용시킬 수도 있다.
쉽게 말하자면, 웹 페이지의 모양과 느낌을 담당하고 있다고 생각하면 된다.
JavaScript
JavaScript의 역할은 상호 작용을 적용, 표현시켜 주는 것이다.
보다 정적인 웹 페이지에서 상호 작용을 통해서 역동적으로 표현할 수 있으며
복잡한 기능과 처리를 할 수 있으며 기능을 향상하는 각종 프로그래밍까지 적용할 수 있다.
이미지로 간단히 표현하는 HTML, CSS, Javascript / 사진 출처 = Pinterest Vectormine혁신의 숲 서비스 웹 메인 페이지, 개발자 도구로 살펴보기
어떤 서비스의 웹 프론트엔드를 분석해 볼까 고민하던 도중에,
평소에 나에게 빛과 소금 같은 존재가 되어주는 서비스, 혁신의 숲이 떠올랐고
당장 분석해 보기로 하였다.
스타트업 성장분석 플랫폼
혁신의 숲 웹 메인(Index) 페이지 구조
웹의 메인페이지(index)의 구조는 크게,
<header>, <body>, <footer> 세 분류의 HTML 시멘틱으로 분류할 수 있다.
<header>
<header> 시멘틱은 말 그대로, 웹 페이지의 머리 부분을 담당한다.
주로 로고와 메뉴바, 검색창등이 포함되어 있는 상단의 영역이 <head> 시멘틱이라고 생각하면 된다.
실제로 혁신의 숲도 로그인, 회원가입, 홈 이동 로고, 검색, 메뉴 바 등이 포함된 영역을
<header> 태그를 이용하여 코드를 설계했음을 확인할 수 있었다.
혁신의 숲 Index.html , <head> 시멘틱의 영역과 코드<header> 시멘틱의 CSS 살펴보기
<header> 시멘틱을 감싸고 있는 CSS은 무엇이 있을지 간단히 한 번 살펴보도록 하자.
<header> CSS 구조를 살펴보면 반응형으로 구성되어 있다는 것을 알 수 있고, (min-width, max-width)
폰트 종류와 크기, 컬러 등 다양한 디자인 정보들을 확인할 수 있다.
<header> 시멘틱의 Javascript 살펴보기
특별한 Javascript 코드는 <body> 태그 안에 <header> 부분에서 보이지 않았다,
아무래도 상단 Html, <head> 태그에 각종 Javascript 코드들을 집합해 놓은 것 같다.
<Body>
<Body> 시멘틱은 말 그대로, 웹 페이지의 몸통 부분을 담당한다.
<header> 시멘틱 바로 아래 영역부터, <footer> 시멘틱의 위에 영역까지가 모두
<body> 시멘틱의 영역이라고 보면 되는데,
주로 웹 페이지의 메인 배너 페이지 영역 상품 노출 영역 등이 대표적인 <body> 시멘틱의
영역이라고 생각하면 쉽다.
혁신의 숲의 <body> 영역은 <body> 시멘틱 안에 <main>이라는 태그 안에 모두 정리되어 있는 것을
확인할 수 있었다.
<body> 시멘틱의 CSS 살펴보기
<body> 시멘틱을 감싸고 있는 CSS은 무엇이 있을지 간단히 한 번 살펴보도록 하자.
<body> 시멘틱 영역 역시, 다양한 부분에서 반응형 (min-width, max-width)이 적용되고 있었고
각각 다른 크기의 폰트와 아이콘을 사용하면서도, 일관성 있는 디자인을 잘 표현하도록
CSS가 프로그래밍되어있다는 것을 발견했다.
<body> 시멘틱의 Javascript 살펴보기
<header> 시멘틱과 비슷하게, Javascript가 <head> 태그에 대부분 담겨있고, 연동되고 있기 때문에
확인하기 어려운 부분이 존재하였으나 메인 배너의 스크린 롤링은 보다 직관적으로 연동되어 있는
코드를 찾을 수 있을 거라 생각했고, 찾아본 결과 연동된 js 코드를 찾을 수 있었다.
보다 복잡한 class의 이름을 가지고 있는 사진 속 코드 부분이,
직접적으로 외부 class와 연결하며 Javascript 코드와 연결시키고 있는 것으로 보인다.
외부 라이브러리 Javascript를 끌어다 쓰거나, 직접 짠 Javascript 코드를 연동시킨 것 같다.
<Footer>
<Footer> 시멘틱은 말 그대로, 웹 페이지의 발(하단) 부분을 담당한다.
주로 기업 정보, 기업 소개 등과 같은 다양한 정보들을 담고 있는 영역이다.
혁신의 숲 역시, <footer> 시멘틱 태그 안에 다양한 정보들을 담고 있다.
<footer> 시멘틱의 CSS 살펴보기
<footer> 시멘틱을 감싸고 있는 CSS은 무엇이 있을지 간단히 한 번 살펴보도록 하자.
<footer> 시멘틱 영역도 반응형 제작이 되었지만, 단순한 구조이기 때문에
따로 break point가 설정되어 있지는 않았고(min-width, max-width)이 적용되고 있었고
여전히 일관성 있는 디자인을 잘 표현하도록 CSS가 프로그래밍되어있다는 것을 발견했다.
<footer> 시멘틱의 Javascript 살펴보기
Footer도 header 시멘틱과 동일하게 Javascript 코드들을 <head> 태그에 연동해 놓은 것 같다.
사실 Footer는 별 다른 상호작용이나 효과가 필요 없기 때문에 특별한 경우가 아닌 이상
Footer 시멘틱에는 Javascript 코드가 존재하지 않는 경우도 다수 존재한다.
마무리하며
오랜만에, 개발자 도구를 통해서 웹 구조를 통해서 살펴본 것 같다.
물론 이해하지 못하는 구조도 너무나도 많지만,
대부분의 좋은 웹 서비스는 서로 탄탄하고 유기적으로 잘 구조화가 되어있기 때문에
파악하기에 크게 난항을 겪지 않아도 된다.
좋은 개발자는 모든 사람들이 쉽게 알아볼 수 있는 구조와 코드를 짠다는 이야기를 들었다.
이를 PM에 대입해 본다면,
좋은 PM은 모든 사람들과 잘 소통할 수 있도록 이해와 설득을 능숙히 해낸다라는
이야기가 되는 것 같다.
이해와 설득, 판단과 답변 등 너무나도 어려운 결정을 PM은 매번 능숙히 해내야 한다.
그 과정들을 잘 해내고 싶은 나의 욕심을 채우기 위해서는 앞으로도 정말 꾸준히 공부해야겠다고 느꼈다.
