Web Front-End Developer Novice study 1회차 - Web Front-End 라는 직군에 대해서
Technique안녕하세요, Lovefield입니다.
이번에 디자이너 커뮤니티에서 개발 스터디 요청이 들어왔는데요. 하게 되면 2년 만에 스터디를 하는 것이기도 했고 참여하고자 하는 분들이 꽤 많으셨습니다. 개인적으로 다시 초심자분들을 가르쳐줄 수 있는 감을 잡아보자 생각되어 진행하게 되었습니다.
1. 개발자 그리고 프론트 엔드
여러분은 “개발자”라고 하면 무엇이 가장 먼저 생각나나요? 저는 개인적으로 발명가와 연구자를 섞은 것 같다고 생각합니다. 개발자는 기존에 있던 무형물의 무언가를 개선하거나 기존에는 없던 새로운 무형물을 만들어 내기도 하거든요. 개발자의 종류는 다양하지만 저희가 배우게 될 프론트 엔드 기준으로 주변에서 볼 수 있는 분야로 축소하자면 다음과 같습니다.
- 모바일
- 아이폰
- 안드로이드
- 웹
- 프론트 엔드
- 백 엔드
- 데브옵스
- 서버
- DBA
- 보안
모바일 개발자는 여러분들이 흔히 사용하는 어플리케이션 개발자입니다. 여러분들이 잘 알고 있는 안드로이드 개발자와 아이폰 개발자로 나누어집니다. 근래에는 두 진영을 한 번에 개발 할 수 있게 해주는 언어도 등장했습니다.
웹 개발자로는 프론트 엔드 개발자가 있습니다. 백 엔드를 웹 개발자로 넣지 않은 이유는 웹에만 한정되어 있지 않는 개발자라서 그렇습니다. 여기서 백 엔드는 주로 어플리케이션 개발자와 프론트 엔드 개발자가 하는 요청을 받아 처리해주는 역할을 합니다.
다음으로 데브옵스 개발자입니다. 이 분야는 개발에 필요한 부분들을 담당하는 개발자인데요. 예전의 뜻과 조금 변질돼 있긴 합니다. 서버 개발자는 앞서 프론트 엔드 개발자와 백 엔드 개발자가 개발해놓은 서비스가 유저들에게 전달될 수 있도록 인터넷에 배포되는 환경들을 관리합니다. 우리가 서비스를 이용하다가 “서버 터졌다!”라고 하면서 운영상태를 이야기할 때 서버 개발자분들은 눈물을 머금으며 해결하고 계실 거에요. DBA 개발자는 Database Administration의 약자로 DB에 들어갈 데이터의 구조를 설계하는 사람입니다.
보안 개발자는 가장 어려운 직군입니다. 법령을 알고 있어야 하는 것도 있지만 거의 모든 개발 언어를 기본 정도는 알고 있어야 하기 때문이죠. 보안과 관련된 많은 것들을 알아야 하다 보니 정말 힘든 직군입니다.
자, 프론트 엔드 개발자는 무슨 일을 하는 개발자일까요?디자이너가 작업한 디자인을 받아서 화면을 구축하고, 유저가 행동할 수 있게 인터랙션을 구성하고, 화면 구성에 필요한 정보를 백엔드에게 요청해서 받는 일들을 합니다. 이 외에도 많은 업무가 있지만 대표적인 업무만 적어보았습니다.
2. 프론트 엔드의 태생 (간단한 웹의 역사)
최초의 웹이라고 부를만한 것은 1960~1970년대 동서 냉전 시대, 미국에서 연구한 군사 목적의 통신망이었습니다. 군사 연구소에서 연구하던 네트워크를 미국 내 상위권 대학 연구소에 위탁하기 시작하면서 전 세계가 연결되기 시작했습니다.
하지만 아직 인터넷이라는 개념이 있지는 않았는데요. 팀 버너스 리라는 분이 1989년에 WWW(world wide web)를 제안하게 되면서 현재의 인터넷이라는 개념이 자리 잡게 됩니다. 1990년 팀 버너스 리가 최초의 웹 사이트(http://info.cern.ch/hypertext/WWW/TheProject.html)를 선보이며 웹의 세상이 열리게 됩니다.
한국은 어떨까요? 여러분들이 많이 사용하는 NAVER의 창립일은 1997년입니다. 다만 한국에 인터넷이 많이 보급된 시기는 2000년대입니다. NAVER도 2000년대 이후 대호황의 시기를 가지게 되었죠. 이렇듯 한국의 인터넷 역사는 20년 남짓입니다.
인터넷이 보급되고 발전하고 있는 2000년대에 HTML을 만지는 사람을 코더라고 불렀습니다. 디자이너와 개발자, 즉 현재의 백엔드가 서로 HTML은 자기 영역이 아니라고 이야기했었거든요. 결국 HTML을 다룰 사람이 필요해서 알바를 뽑게 되었고 그것이 코더의 시초가 되었습니다. 코더는 디자이너가 준 디자인을 기반으로 HTML, CSS를 작성하고 그것을 기반으로 백엔드가 웹사이트를 구축할 수 있게 작업을 했습니다.
그러던 중 신현석이라는 개발자분이 퍼블리셔라는 직업명을 사용하기 시작했습니다. 출판이라는 단어와 당시 외국기업들이 퍼블리싱이라는 용어를 사용한 것을 참고삼아 명함에 퍼블리셔라는 업무 역할을 적는 모험을 했다고 합니다. 아직 많이 사용되고 있는 단어지만 개인적으로는 2010년 후반까지 많이 사용된 걸로 기억합니다.
비슷한 시기에 스크립터라는 직군이 있었습니다. 웹에 플래시가 많이 사용되던 시기인데요. 저와 비슷한 시대의 분들이라면 쥬니어 네이버가 엄청난 인기였다는 걸 아시리라 믿습니다. 쥬니어 네이버에서 즐기던 많은 게임이 전부 플래시로 이루어진 것들입니다. 그러나 2014년경 애플이 플래시 지원을 안 하겠다고 선언하기 시작하면서 플래시는 몰락의 길을 걷게 됩니다. 결국 어도비에서도 플래시 개발을 중단 선언하면서 플래시는 역사 속으로 사라지게 됩니다.
2010년 후반 웹 프론트 엔드 라는 명칭이 사용되기 시작합니다. 외국에서 들어온 직군 명인 것으로 추정되는데요. 위에서 설명한 퍼블리셔와 스크립터가 웹 프론트 엔드 개발자로 흘러들어오기 시작합니다. 개인적으로는 사실 웹 프론트 엔드 라는 명칭이 좀 더 정확한 표현이라고 생각합니다. 클라이언트 사이드 개발자를 칭하는 명칭이며 웹의 클라이언트 사이드를 담당하는 개발자이기에 웹 프론트 엔드 개발자가 맞는 표현이라고 생각합니다.
아직 논란 중인 부분이 있는데요. 퍼블리셔와 프론트 엔드입니다. 일각에서는 퍼블리셔와 프론트 엔드를 구분해 이야기하고 있습니다. 개인적으로는 논쟁의 가치조차 없다고 생각합니다. 퍼블리셔와 프론트 엔드 둘 다 웹의 클라이언트 사이드를 담당하는 개발자이기 때문이죠. 구분할 필요가 전혀 없으며 프론트 엔드로 불리는 게 올바르다고 생각합니다. 일부 기업에서 퍼블리셔라고 지칭하고 연봉을 낮게 치기 위해서 악용하는 느낌이 들기도 합니다.
3. 언어
프론트 엔드가 사용하는 언어로는 HTML, CSS, Javascript가 있습니다. 각 언어를 인체에 비유하자면 HTML은 뼈, CSS는 살, Javascript는 관절 혹은 근육에 해당합니다. 이 세 가지 중 한가지라도 빠진다면 우리가 알고 있는 웹 사이트를 만들기는 힘들어집니다.
3-1. HTML
HTML은 팀 버너스 리에 의해서 1993년에 탄생했습니다. HTML은 무엇일까요? Hyper Text Markup Language의 약어입니다. 자 그럼 Hyper Text Markup Language가 뭘까요? 개인적으로 이 부분을 가장 잘 알고 있어야 한다고 생각합니다. 생각보다 많은 사람들이 HTML의 역할을 잘못 이해하고 있는 것 같거든요. Hyper Text Markup Language, 즉 하이퍼 텍스트로 이루어진 데이터 구조화 언어라는 뜻입니다. 즉 여러분들이 웹사이트에서 보고 있는 화면들은 수많은 데이터를 하이퍼 텍스트를 이용해 구조화해놓은 것들입니다.
HTML의 기본 구조
HTML은 문서입니다. 그렇기에 최상단에 어떤 문서인지를 표시하는 선언문인 <!DOCTYPE html>이 필요합니다. 현재 문서가 HTML5 문서임을 알리는 선언문입니다. <html> 부분은 실제로 HTML이 작성되는 영역을 표시합니다. <html> 안에는 <head>와 <body>가 있습니다. <head>는 주로 컴퓨터에 이 문서가 가진 정보들을 전달하는 데 사용됩니다. 유저들은 <title>을 제외한 정보를 볼 수가 없습니다. <body>는 실질적으로 유저들이 볼 수 있는 것들로 구성이됩니다. 여러분들이 웹사이트를 이용할때 보이는 화면은 전부 <body>에 작성된 것들입니다.
Element의 구조
HTML은 Element라고 하는 요소들로 구성되어있습니다. 흔히 태그라고 일컫습니다. 태그는 일반적인 태그와 단일 태그로 두 가지가 존재합니다. 태그는 여는 태그와 닫는 태그로 이루어져 있으며, 여는 태그와 닫는 태그 사이에 컨텐츠가 존재합니다. 여는 태그에는 여러 가지 속성과 값을 넣을 수 있게 되어있습니다.단일 태그는 일반적인 태그의 구조에서 컨텐츠 부분과 닫는 태그가 없는 요소입니다.
2020년 HTML 태그 사용 순위 (https://www.advancedwebranking.com/seo/html-study/)
HTML이 지원하는 태그의 개수는 상당히 많습니다. 하지만 실질적으로 작업을 하면서 사용되는 태그는 어느 정도 한정되어있습니다. 위의 이미지에서도 알 수 있듯이 20여 개의 태그가 가장 많이 사용되고 있습니다. 태그를 이 글에서 일일이 설명하기는 힘듭니다. 개인적으로는 MDN(https://developer.mozilla.org/en-US/docs/Web/HTML/Element)에서 주기적으로 태그를 살펴보는 것을 추천하는 편입니다. 한글이 아닌 이유는 업데이트가 느리기 때문입니다. MDN은 자원봉사자들이 한국어 번역을 해주고 계시지만, 영어에 비해서 업데이트가 느릴 수밖에 없습니다. 앞으로도 여러분이 공부하는 데 있어서 영어는 필수 불가결이 될 겁니다.
3-2. CSS
CSS는 1994년에 하쿰바움 리에 의해서 탄생했으며, Cascading Style Sheet의 약자입니다. 연속적으로 작성된 스타일 시트라는 말입니다. 그래서 CSS 특성 중 하나로 똑같은 스타일을 선언해도 나중에 선언된 선언문이 우선권을 가지게 되죠.
CSS 구조
CSS의 문법입니다. CSS는 HTML에 스타일을 입히는 용도로 사용되는 만큼 HTML 태그를 선택해야 합니다. Selector라는 부분이 선택자이며 이 영역에서 어떤 HTML 태그에 스타일을 입힐지 선택해야 합니다. 선택 이후에는 중괄호 사이에 Declaration, 즉 속성을 한가지씩 선언해주셔야 합니다. 속성은 세미콜론을 기준으로 나뉘며 Property와 Value가 한 쌍입니다. CSS에는 수많은 선택자, Property, Value가 존재하기에 많은 학습이 필요합니다. 저는 항상 CSS-Tricks(https://css-tricks.com/almanac/)를 추천합니다. MDN에도 CSS 관련 사항이 있지만 CSS-Tricks가 좀 더 설명이 잘 되어있고 샘플을 잘 제공한다는 느낌을 받고 있거든요.
3-3. Javascript
Javascript는 1995년에 브랜든 아이크에 의해서 탄생했습니다. 위에서 알려드린 HTML과 CSS와는 다르게 Javascript는 프로그래밍 언어입니다. 프로그래밍 언어란 컴퓨터에 명령을 주기 위해서 작성하는 형식 언어입니다. 컴퓨터는 0과 1로만 이루어져 있기 때문에 이를 번역해주는 번역기가 필요한 셈인데요. 사람에게는 7이라는 숫자로 보이지만 실제로 컴퓨터에는 0111이라는 값을 가지게 됩니다. 이렇게 컴퓨터가 이해할 수 있는 언어로 컴퓨터에 명령을 전달하는 언어를 프로그래밍 언어라고 하며, 사람이 이해하기 쉬울수록 고급 언어라고 합니다.
Javascript는 프로그래밍 언어인 만큼 위의 HTML과 CSS같이 문법이 단순하지 않습니다. 많은 기능과 문법을 가지고 있는 언어다 보니 모든 것을 제가 알려드릴 수가 없습니다. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics MDN에서 제공하는 Javascript 입문에 대한 글입니다. 해당 글에서 Javascript가 제공하는 여러 기능과 문법에 대해서 많이 익히는 것을 추천해 드립니다.
