PM으로서 잡플래닛 랜딩페이지
프론트엔드 탐색하기
html, css, javascript _코드스테이츠 PMB 10기
PM에게 개발 지식이 필요한 이유
보통 IT기업의 프로덕트 팀은 1명의 PM, 1인 이상의 디자이너, 다수의 개발자가 함께 일을 한다. 드라마 스타트업으로 따지면 수지가 PM, 남주혁이 개발자인데 만약 수지가 개발자의 언어를 잘 모르고 관련 지식이 없다면 원하는 것을 제대로 요청하기 어려울 것이다. PM은 고객이 필요한 것을 기획하여 실제로 작동 되도록 구현하기 위해 개발 지식을 바탕으로 개발자와 원활한 커뮤니케이션이 필요하다. 또한 시간과 자본이 넉넉한 기업은 많지 않다. 개발 지식이 없다면 문제 발생 시 대처하는 것이 어렵기 때문에 PM은 지식을 갖춰 리스크를 관리해야 한다.
IT기반 서비스의 구조와 동작
출처 = https://xyzcoding.com/course/the-internet/how-the-internet-works/front-end-vs-back-end/Information Technology(정보 기술)의 약자, IT서비스는 서비스 사용자인 클라이언트와 서비스를 제공하는 컴퓨터인 서버로 구성되어 있다. 클라이언트에서 입출력 되는 정보와 서버의 정보가 인터넷(http)을 통해 연결 되면서 특정한 기능의 서비스가 구현된다.
사용자는 웹/모바일 기기를 통해 클라이언트에 접속하여 여러기능을 조작하면서 서버에 정보를 요청하는데 클라이언트와 관련 된 이 부분을 프론트엔드라고 부른다. 그러면 서버 컴퓨터는 필요한 정보를 데이터 베이스에서 가져오고 저장하면서 원하는 결과물을 클라이언트에게 보내주는데 서버와 관련 된 이 부분을 백엔드라고 한다.
오늘은 PM이 꼭 알아야 할 개발 지식 중 프론트엔드를 알아보고자 한다.
웹기반 프론트엔드의 3가지 언어
1. HTML(Hypertext Markup Language) : 구조 만들기 = 뼈대
콘텐츠의 레이아웃을 제어
웹 페이지 디자인을 위한 구조 제공
모든 웹 페이지의 기본 빌딩 블록
2. CSS(Cascading Style Sheets) : 웹사이트 스타일 지정 = 피부, 옷
웹 페이지 요소에 스타일을 적용
웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 함.
주로 웹 페이지의 "모양과 느낌"을 처리
3. JavaScript : 상호 작용 역할 = 근육과 신경계
웹 페이지에 상호 작용 추가
복잡한 기능 및 기능 처리
기능을 향상시키는 프로그래밍 코드
잡플래닛 랜딩페이지로 프론트엔드 탐색하기
잡플래닛(Jobplanet)은 채용정보, 기업리뷰, 연봉, 면접 후기, 이직·취업 정보까지 제공하는 직장인 취준생 필수 플랫폼이다. 매월 300만명이 이용하는 검증된 취업정보사이트 잡플래닛에는 40만개가 넘는 기업의 연봉, 면접후기, 기업리뷰를 한 눈에 볼 수 있다. 웹페이지보다 모바일 어플을 더 많이 사용하지만 웹페이지에서도 모바일과 동일하게 중앙 상단의 검색창에서 기업명을 검색하여 기업후기나 채용정보를 확인할 수 있다.
참고로 잡플래닛에서 기업후기를 검색해서 별점이 3.0이상이면 괜찮은 곳이라는 말이 있다. 개인적으로 별점 3.2인 회사에 다녀봤는데 다닐때는 몰랐지만 나와서 다른곳을 경험해보니 그곳이 천국임을 깨달았다. 만약 당신이 가고 싶은 회사를 검색했는데 3.0이 넘는다면 그 회사 꽤나 괜찮으니 안심하시길.
각설하고, 잡플래닛의 프론트엔드 3가지 요소를 뜯어보자.
1. HTML (웹 화면의 구조)
HTML은 웹화면을 만들기 위해 사용하는 기본적인 웹 언어이다. 우리가 접하는 모든 웹 화면은 위 이미지와 같은 구조로 짜여져있다. <html>안에 <head>와 <body>가 있으며, <body>안에는 <header>, <content>, <footer>로 구성된다. 단, <content>는 개발자의 성향에 따라 다르게 명명 되기도 한다. 각 요소는 <html></html>처럼 하나의 세트로 완성된다. 요소의 시작과 끝의 의미로 열어주고 닫아준다라고도 표현하는데, 만약 닫지 않으면 그 코드는 제대로 작동하지 않아서 꼭 한 세트로 함께 해야한다.
실제 잡플래닛의 웹 화면에서 F12키를 눌러서 개발자 모드로 실제 코드를 보고 해당 페이지를 분석해보자.
<html>, <head></head>, <body></body>, </html> 요소가 순서대로 나란히 있는 것을 알 수 있다.
여기서 <body> 토글을 열어서 세부 요소를 확인하면 아래와 같다.
<div>요소는 블록 형태로 쌓아서 공간을 분할하는 역할을 하기 때문에 요소들은 보통 <div>로 묶여 있다. "class" 또는 "id" 뒤에 해당 <div>가 어떤 것인지를 표기하기 때문에 <body> 안에서 <header>, <content>, <footer>를 찾을 수 있다. 뒤에 붙는 Wrap은 감싸고 있다는 의미로 그 앞의 단어를 찾으면 된다.
그럼 이 코드들은 웹에서 어떻게 보여질까? 잡플래닛의 랜딩페이지를 요소별로 분리하여 보기쉽게 정리해보았다.
<html> : 웹페이지 전부
<head> : 주소줄과 인터넷 창 상단 영역
<body> : 기업의 로고부터 시작되는 웹사이트 전체 영역
<header> : 상단 메뉴 및 검색창
<content> : 본문
<footer> : 이용약관, 개인정보 처리, SNS 등 기업 정보 고지
각 요소는 블록모양으로 화면을 차례대로 구성하고 있다.
2. CSS( 웹사이트의 스타일)
CSS는 HTML로 구성한 요소를 보기 좋게 만드는 역할을 한다. HTML로 뼈대를 만들었다면 피부와 옷을 더해서 좋아보이게 만드는 것과 같다. CSS는 요소의 크기, 배치, 색깔, 폰트, 거리감 등을 조절하여 웹사이트를 정리정돈해준다. 개발자 모드의 Style에서 조절할 수 있다.
잡플래닛 웹사이트에서 CSS가 어떻게 적용되는지 살펴보자.
(사진은 클릭하여 자세히 볼 수 있습니다)
좌측화면은 아무것도 건드리지 않은 기본 화면이다. 글꼴과 요소들의 정렬이 깔끔한 것을 알 수 있다. 임의로 붉은 선을 그어서 정렬을 확인해보니 틀어지지 않고 상단 검색창과 본문 영역이 나란히 배열되어 있다.
반면 우측화면은 개발자모드에서 Style 요소들을 모두 지우고, 글씨의 색깔을 다른색으로 바꾼 화면이다. 좌측화면과 비교했을 때 배열이 깨지고 지정한 글꼴이 적용되지 않으며 제목 글씨 색깔이 빨간색으로 바뀐 것을 확인할 수 있다.
CSS는 HTML코드와 분리해서 정보코드와 디자인코드를 다르게 짤 수 있다. 덕분에 문서 전체의 일관성을 유지할 수 있고 CSS에서 한번에 스타일을 적용할 수 있기 때문에 세세하게 스타일을 지정할 필요가 없다.
3. JavaScript (상호 작용)
HTML과 CSS만 있으면 웹사이트는 굉장히 심심할 것이다. HTML과 CSS는 골격과 디자인일뿐 스스로 움직일 수가 없기 때문이다. 다채로운 기능을 웹상에서 구현하려면 이들을 상호작용하여 움직일 수 있게 하는 역할인 JavaScript가 필요하다. 잡플래닛의 사례를 통해 더 자세히 알아보자.
위 화면에서 JavaScript요소는 이렇게 예측해볼 수 있다.
1. 검색어창에 "기업, 채용공고를 검색해보세요" 글씨가 노출되다가 검색어를 입력하면 사라지는 효과
2. 검색어창을 클릭했을때 하단에 최근검색어, 내 관심기업 등의 정보제공 창을 노출
3. 검색어를 입력했을때 관련해서 클릭할 수 있는 다른 요소의 노출
구조를 짜는 역할인 HTML과 꾸며주는 역할인 CSS로는 명령하기 어려운 것들은 모두 JavaScript가 해결한다고 볼 수 있다. 또한 웹사이트에서 동적인 요소를 갖고 있으면 거의 JavaScript로 작동한다고 생각할 수 있다. 움직이는 부분이기 때문에 한눈에 알아보기 쉬운 그 예시도 잡플래닛에서 알아보자.
메인화면에서 검색창 옆에 기업랭킹이 롤링 되는 것을 볼 수 있는데, 이처럼 동적인 요소는 JavaScript의 적용으로 유연하게 움직일 수 있다. 랭킹이 롤링되는 부분으로 짐작되는 JavaScript 코드를 탐색하여 어떻게 움직이고 있는 것인지 자세히 탐색해보자.
잡플래닛 개발자에게 너무 감사하고 싶을만큼, 코드가 깔끔하게 짜여있어 금방 찾을 수 있었다. <div> 에 class로 "searchbar" 라고 표기해 주신덕에 검색창 개발 코드 영역임을 발견했다. 해당 <div>아래에 바로 <script> 요소가 2개 자리한 것으로 보아 분명히 검색어 창에 관한 JavaScript 일것이라고 예상했다.
와! 정말 너무 친절한 개발자님 아니신가. 한글로 동작을 모두 표기해두셨다. 웹사이트에서 JavaScript가 하는 역할이 너무 많아서 정확히 어떤 동작을 어떻게 수행하고 있는지 코드로 찾는 것이 어렵다고 들었는데 잡플래닛의 친절한 개발자님 덕분에 검색어창 옆의 기업랭킹이 어떻게 작동하는지 볼 수 있었다.
JavaScript 코드에는 대부분 "function"이 등장하는데 어떤 동작을 하라고 명령하는 언어이다. 지식이 부족하여 모든 코드를 다 해석할 수는 없지만 랭킹 버튼을 클릭하면 모달 토글이 어떤 작동을 하도록, 검색창 옆이 롤링(스와이퍼)되도록, 랭킹 영역에 마우스를 가져다 대면 멈추도록 JavaScript를 활용하여 장치해두었음을 발견했다.
내가 PM이라면 이 정도로 짜여진 코드를 보고 어디에 어떤 기능이 있구나 정도를 알 수 있을 것 같아서 잡플래닛의 랜딩페이지 사례를 좋은 예시라고 생각했다. 개발을 한다면 잡플래닛 개발자님처럼~!!
수년 전에 웹디자인 과정을 수강한 적이 있다. 웹페이지를 포토샵으로 디자인하고, 한땀한땀 html과 css코드를 짰었다. 요즘은 세상이 많이 좋아져서 한땀한땀 개발하진 않는다고 하더라. 아무튼 그 시절 <div> </div>를 죄다 직접 입력해가며 코드를 짰던게, 이제서야 조금 도움이 되려나보다. 오랜만에 접한 개발자모드는 익숙하게 다가왔다. 물론 PM으로서 개발자와 자유자재로 소통하고 세밀한 업무요청을 하려면 훨씬 더 많은 지식이 필요하다는 것은 알고 있다. 실무자가 되어서도 관련 공부를 지속해야겠다고 다짐해본다.
문제를 기막히게 해결하는 유익한 기획자.
코드스테이츠 PM 부트캠프로 획기적인 프로덕트 매니저가 되어 가다.
기막힌 생각과 획기적인 방법론자, PM이야기 #15. 끝.
