brunch

매거진 PM 성장 여정

라이킷 18 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 감자윤 Nov 10. 2021

문과생도 쉽게 이해하는
브런치 웹 프론트엔드 탐색

[코드스테이츠 PMB 8기] 7주차 Daily project (1)

고객 접점에 있는 PM, 기획자는 VOC를 다른 구성원에게 잘 전달해야 할 의무가 있다.

여기서 '잘' 전달한다는 것은 구성원들과 커뮤니케이션이 원활하게 이루어지는 것을 뜻한다.

이것이 PM이 개발 지식을 충분히 습득해야 하는 이유이다.

특히 개발자가 부족한 환경 속에서 리소스는 정해져 있기에, 개발자들이 보다 효율적으로 일할 수 있도록 돕는 것도 PM의 역할이다. 개발자들의 말을 오해 없이 이해하고, 원하는 바를 명확하게 전달할 때 업무의 효율성이 증가되는 것은 당연한 이야기일 것이다.

이에 개발에 대해 첫걸음을 떼면서 배운 프론트엔드 3가지 기술 스택을 정리해 보고자 한다.

프론트엔드(Front-end) VS 백엔드(Back-end)의 차이

이미지 출처 : 티스토리, 물리학과 직장인, 백엔드 프론트엔드 차이와 예시

우선 프론트엔드의 개념부터 짚고 넘어가야 할 것 같다.

프론트엔드는 쉽게 말해 UI/UX 개발을 의미한다. 이에 프론트엔드 개발자란 사용자 눈에 보이는 화면을 개발하는 사람을 일컫는다. 화면의 구조를 만들고, 화면 스타일을 지정하며, 기능들이 상호작용 할 수 있도록 만드는 역할을 한다.

반면 개발자 직무에는 백엔드 개발자도 있다. 백엔드 개발자는 눈에 보이지 않는 부분을 개발하는 사람들이다. 즉 웹/앱 서버나 데이터 베이스 부분을 담당하며, 실질적으로 움직이는 기능을 처리하는 역할이다.

프론트엔드와 백엔드 모두를 다룰 줄 아는 개발자들도 존재하는데, 이들을 '풀스택 개발자'라고 부른다.

브런치 웹 화면을 통해 이해하는
프론트엔드의 3가지 기술 스택

프론트엔드를 개발하기 위해서는 3가지의 언어(HTML, CSS, Javascipt)를 이해해야 한다.

이에 브런치 웹 프론트엔드 화면을 보며 이 3가지의 언어의 차이를 이해하고 설명해 보려 한다.

출처 : https://dev.to/

HTML (Hypertext Markup Language)

웹 화면 구조 설정

HTML이란 위 이미지처럼 웹 화면의 뼈대를 만드는 프로그램 언어이다.

화면의 레이아웃, 페이지 구조, 글, 이미지 등 정적인 요소들을 다룬다.

HTML의 기본 골격은 <!DOCTYPE html>, <HTML>, <HEAD>, <TITLE>, <BODY> 로 이루어져 있다.

이미지 출처 : https://dinfree.com/

<!DOCTYPE html>
HTML5 문서를 선언하는 구문. 웹브라우저에게 문서가 HTML5로 작성됨을 알림

<HTML>
HTML 문서의 시작과 끝을 말함

<HEAD>
CSS, JavaScript, 메타태그 등이 위치. 문서의 상단 제목을 표시하는 <TITLE> 태그도 포함됨

<BODY>
문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분을 말함

- 출처 : 2019 짧굵배 (https://dinfree.com/)

위 구조에서 <Body>가 실제 화면에 나타나는 부분이기 때문에

브런치 <Body>에 속하는 웹 메인 화면을 분석해 보면 다음과 같다.