티스토리 뷰

데일리 과제

[W7D1] 버킷플레이스 프론트엔드 뜯어보기

PMB10 김무종 2022. 3. 4. 16:01

PM이 왜 개발 지식까지 알아야 돼?

 

시장에 한 프로덕트를 출시하기 위해서는 디자이너, 개발자 PM 등 여러사람들이 협력해서 만든다. 기획자가 아무리 고객의 니즈를 정확히 파악하고 제품을 기획하더라도 실제 구현하기 위해서는 디자이너와 개발자를 이해시킬 수 없다면 원하는 제품을 정확하게 만들어 낼 수 없을 것이다. 때문에 좋은 프로덕트를 만들고 구현시키기 위해서는 개발자의 언어를 기획자는 반드시 이해해야만 한다. PM이 개발 지식을 배우는 이유는 자바, 파이썬과 같이 개발 언어를 배우기 위한 것 보다 원할한 커뮤니케이션을 위해 배운다. 기술 또는 개발 환경을 이해하는 것은 무언가를 빠르게 개발할 수 있고 기술의 한계를 이해하고 이에 맞는 대체 방법 또는 상황에 맞는 솔루션을 찾을 수 있도록 가능하게 한다. 때문에 PM은 나중에 기술 제한으로 뒤집어 엎을 일이 없도록, 그리고 기획자가 의도한 제품이 잘 만들어 질 수 있도록 PM은 전반적인 기술 지식을 터득해야한다.

 

 

HTML, CSS, JavaScript

 

 

웹사이트는 크게 HTML, CSS, 자바스크립트 3가지 구성 요소로 구성되어 있다. HTML(Hyper Text Markup Language)은 웹의 구조를 담당하는 언어이다. 우리 몸의 구성을 크게 뼈(골격), 살, 뇌로 구분한다면 HTML은 뼈, 골격 부분에 해당한다. CSS(Cascading Style Sheet)는 레이아웃과 스타일을 정의할 때 자주 쓰이며 이름에서도 내포하고 있듯이 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. 웹페이지를 꾸미기 위해 작성하는 코드라고 이해하면 쉽다. 자바스크립트(JavaScript)는 웹 브라우저 내에서 주로 사용되고 웹의 동작을 구현시켜주는 언어라고 이해하면 된다. 사람으로 비유하자면 뇌와 같은 존재이다. 페이지내에서 기능과 상호작용을 명령하는 것이 자바스크립트의 기능이다.

 

버킷플레이스 Landing Page

 

 

출처 : 버킷플레이스

 

버킷플레이스의 프론트엔드

 

버킷플레이스 URL을 클릭하면 로딩 화면 이후 지구본 모양이 나타난다. 위 페이지에서 [F12]를 누르면, 위와 같은 개발자 코드를 볼 수 있다.

 

 

버킷플레이스의 HTML 요소

버킷플레이스의 HTML 구조는 다음과 같이 구성되어 있다. HTML 문서의 기본 구조는 <head>와 <body>로 나뉜다. <head>에서는 문서의 형태, 타이틀 정보, 스타일 정보, JS에 대한 정보가 들어가 있다. <body>에서는 정보 전달을 위한 데이터가 들어가 있으며 화면에 직접 출력되는 부분이 나와 있다.

 

 

HTML 구조

 

 

 

버킷플레이스의 <body> 구성요소

<body>의 구성요소를 살펴보기 위하여 [F12] -> [Ctrl+shift+c] 를 입력하면 화면의 구성요소에 대한 코드를 쉽게 찾을 수 있다.

 

 

<div class= "navigation-container">

버킷플레이스의 네비게이터

 

네비게이터

 

 

<div class= "index-page_container">

버킷플레이스 인덱스 페이지

 

인덱스 페이지

 

 

<div class= "marquee index-page__marquee__images">

버킷플레이스의 유저 사례 

 

유저 사례

 

버킷플레이스의 CSS

버킷플레이스의 CSS이다. CSS는 HTML의 구조 위에 스타일을 입혀 꾸며주는 것이다. CSS 요소를 살펴보려면 <style>을 검색해서 확인할 수 있다. CSS는 각 요소에 대한 컬러, 폰트, 사이즈 패딩 등을 지정한다.

 

 

 

버킷플레이스의 Java Script

 

마지막으로 버킷플레이스의 자바 스크립트를 확인해 보자. 자바 스크립트는 웹페이지의 상호작용을 담당하는 스택으로 사용자의 동작에 따라 웹페이지를 동적으로 변환하는 역할을 한다.

 

자바 스크립트의 요소를 보기 위해서는 해당 요소의 '이벤트 수신기'를 확인하여 각 요소에 일어나는 이벤트와 JS를 확인할 수 있다.

 

&amp;amp;nbsp;Java Script가 적용된 랜딩페이지
이벤트 수신기

버킷플레이스 화면 시작시 화면이 블러처리가 제거되면서 나타나는 것을 볼 수 있다. 이런 동적인 요소들을 Java Script를 통해 만들어진다.

시작이 어렵다.

 

[F12]를 눌러서 프로그래밍 언어를 처음 봤을 때, 왠지 멀미가 나서 처다도 보기 싫었다. 그러나 막상 HTML 구조를 뜯어보고 이것 저것 만지다보니 아주 조금 마음이 열렸다. 용기를 내도 될 것 같다. 개발 언어와 친해지기에는 아직 멀었지만 그래도 호기심이라도 갖게 된 것으로 만족한다!! 다행히 동기분들의 과제를 읽고 어떻게 접근해야 할지에 대한 방향을 잡을 수 있었다. 이렇게 어려운 과제도 척척 해내는 PMB 10기 사람들은 대한민국 상위 1%의 천재들이 아닐까 싶다! 조심스럽게 버스를 타본다.

 

<이미지 및 자료 출처>

 

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

 

Web 5. html, css, javascript의 관계와 정의

개요 html, css, javascript 에 대한 이해 목차 HTML CSS JS 글의 목적 html, css, javascript에 대해 배우고 실제 여러 프로젝트에 적용해보며 느꼈던 것들을 정리한다.

zunoxi.github.io

 

 

'데일리 과제' 카테고리의 다른 글

[W7D3] 기상청 사람들의 Open API  (3) 2022.03.08
[W7D2] 우리가 사용하는 앱들은 어떤 개발 방식으로 만들어졌을까?  (2) 2022.03.07
[W6D4] 취업시장 동향의 데이터 시각화를 통한 가설 검증  (0) 2022.03.02
[W6D3] '오늘의집'으로 알아보는 린(Lean)분석  (0) 2022.03.01
데이터분석 툴 GA와 SQL | 삼쩜삼의 핵심지표 추적  (0) 2022.02.25
댓글