PM이 알아야 하는 개발지식
IT 제품 개발은 고객, 기획, 디자인, 개발, IT기술, 5개의 요소가 커뮤니케이션을 통해 탄생한다. PM의 업무는 고객과 기획 사이에 위치하고, 개발자의 업무는 개발과 IT기술 사이에 위치한다. 둘의 소통거리는 먼 편이나 고객의 문제를 해결하는 제품을 탄생시키려면 긴밀한 대화가 필요하다. PM이 개발자의 언어를 이해할 수 있다면 개발의 속도를 높일 수 있고 기술의 한계를 이해하여 상황에 맞는 솔루션을 제시 할 수 있다.
IT기반 서비스는 유저>클라이언트>서버>데이터베이스의 흐름으로 구성되어 있다. 클라이언트는 서비스를 사용하는 사용자 또는 사용자의 기기이고 서버는 서비스를 제공하는 컴퓨터이다. IT서비스는 클라이언트와 서버가 인터넷으로 연결되어 상호작용하게 돕는다. 프론트엔드 개발자는 IT기반 서비스 흐름에서 유저와 클라이언트를 담당한다.
웹기반 서비스를 기준으로 웹사이트는 프로그래밍 언어인 HTML, CSS, Javascript로 구성된다.
* HTML은 웹 페이지의 구조를 담당한다. 콘텐츠의 레이아웃을 제어하는 역할을 한다.
* CSS는 웹사이트의 스타일을 적용한다. 화면이 어떻게 보일지를 구성하는 역할이다.
* Javascript는 웹 페이지에 상호작용을 더한다. 자바스크립트를 통해 웹사이트를 인터랙티브하게 만들고 사용자의 참여율을 유도한다.
어글리어스
못생겨도 맛있다
친환경 못난이 채소박스
조금씩 다양하게, 불필요한 낭비 없이
어글리어스는 지속가능한 식탁을 미션으로 삼아 '외적인 기준'에 미달하여 버려지는 농산물을 구독박스 형태로 판매하는 플랫폼이다. 채소의 본질적인 문제때문이 아니라 모양, 크기, 중량 등이 판매에 용이하지 않다는 이유로 처분되거나 폐기되는 농산물을 농가로부터 직접 받아 비용을 줄이고, 소비자에게 저렴한 가격과 높은 품질을 제공한다. 어글리어스는 궁극적으로 거칠고 못나더라도 건강한 생산방식을 고수하는 농법을 지지하여 농부는 건강한 땅을 위해 노력하고 소비자는 건강한 식풍을 지속 가능하게 공급받을 수 있도록 함을 목표로 한다.
어글리어스 랜딩페이지의 프론트엔드를 분석해보자
프론트엔드 탐색하기
HTML요소
크롬 브라우저에서 F12를 누르면 웹페이지의 코드를 볼 수 있는 창이 뜬다. 어글리어스 랜딩페이지의 코드창을 보니 어글리어스의 페이지는 <head>와 <body>로 구성되어 있음을 알 수 있었다.
HTML 전혀 몰라서 코드 한 줄 한 줄 커서로 쓸어보니 어글리어스 페이지가 반응했다. 복잡해보이지만 또 단순해보이기도 하는 코드가 웹페이지를 구현해 내는 것이 신기했다. 마치 연극 무대의 백스테이지를 엿본 듯한 느낌!
CSS요소
웹페이지의 스타일을 결정하는 CSS요소는 많이 찾아볼 수 있었다. 위 사진에서는 웹페이지 상단에 위치하는 어글리어스 로고 이미지가 width="100", height="32"의 크기로 위치하고 있음을 알 수 있었다.
이 코드에서는 "이용방법"이라는 글씨가 gray-500의 색상으로 설정되어 있다.
이 코드는 어글리어스 웹 페이지에서 가장 중요한 버튼인 CTA 버튼의 CSS요소를 담고있다. 시작하기 버튼은 <button> 형식이고 중요한 글씨이니 폰트는 볼드체로 설정했다. 버튼 박스의 스타일은 border-radius: 5px로 주어서 모서리가 둥근 사각형으로 만들었다.
Javascript요소
어글리어스 랜딩페이지에는 사용자의 행동에 반응하는 자바스크립트 요소가 없어서 문의하기를 누르면 나오는 팝업창에서 자바스크립트 요소가 적용된 사례를 찾아보았다. 문의 항목들이 메세지 형태로 쭉 나열되어 있고 커서를 올리면 메세지의 색상이 주황색으로 바뀌는 것을 확인할 수 있다.
코드를 보니 ActionButton 명령어가 작성되어 있었고 자바스크립트가 적용된 사례이다. 자바스크립트는 사용자와 인터랙션 하는 요소를 구성할 때 사용된다고 하였는데, 사용자가 문의를 하기 전 자신의 사례가 어떤 문의 유형에 속하는지를 한 번 더 생각해서 고를 수 있게 하는 장치를 구성한 것으로 추측한다.
'코드스테이츠 PMB 12기' 카테고리의 다른 글
| [코드스테이츠 PMB 12기] W7D3 카카오지도의 오픈 API알아보기 (0) | 2022.06.29 |
|---|---|
| [코드스테이츠 PMB 12기] W7D2 어글리어스는 앱서비스를 런칭할까? (0) | 2022.06.24 |
| [코드스테이츠 PMB 12기] 6주차 회고. 왜째서 코딩중인건디? (0) | 2022.06.22 |
| [코드스테이츠 PMB 12기] W6D4 만약 내가 CGV PM이라면, 영화 데이터를 어떻게 사용할까? (0) | 2022.06.21 |
| [코드스테이츠 PMB 12기] W6D3 린 분석 관점에서 바라 본 아이디어스 (0) | 2022.06.19 |
