[웹개발] 1. 웹개발 시작하기

웹개발이란, 인터넷이나 인트라넷을 위한 웹사이트를 개발하는 일을 가리킨다.

웹 개발은 가장 단순한 단일 정적 문서의 플레인 텍스트에서부터 가장 복잡한 웹 기반 인터넷 애플리케이션, 전자 비즈니스, 소셜 네트워크 서비스에 이르기까지 개발 범위가 다양하다.

 

웹개발을 이해하는 것은 크게 어렵지 않다.

위의 사진들은 유명 포털사이트들의 홈페이지이다.

웹개발 자체의 의미는 사전적 의미와 같이 텍스트로만 이루어진 페이지부터 복잡한 웹 애플리케이션까지 다양한 범위를 아우르고 있으나, 내가 설명하는 웹개발은 개발자로서 웹 페이지를 제작하고 운영하는 등의 내용까지만 포함한다.

 

그러므로 웹이 무엇이고 ipv4, ipv6, tcp가 무엇이고 웹 어셈블리가 무엇인지,  내부적으로 어떠한 방식으로 작동하는지에 대한 구구절절하고 지루한 내용은 모두 스킵한다.

 

웹개발은 크게 2가지로 나눌 수 있다: 프론트엔드(Frontend), 백엔드(Backend)

이에 따라, 웹 개발자도 크게 2가지로 나뉜다: 프론트엔드 개발자, 백엔드 개발자

예를 들어 서비스를 만든다고 했을 때, 웹개발 자체는 프론트엔드 개발팀과 백엔드 개발팀이 함께 소통하며 작업한다.

 

 

프론트엔드 개발(Frontend Development)

프론트엔드 개발자들은 요소와 에셋(asset)들을 배치하고 디자인하며 정적/동적으로 페이지를 사용할 수 있도록 만드는 작업을 한다. 

유튜브 홈페이지의 일부분. 파란 부분이 asset들이라고 볼 수 있다.

이 작업은 페이지를 이용하는 사용자들에게 보여지는 모든 것들을 디자인하고 배치하는 것을 의미한다.

요소나 에셋들은 이미지(img) 또는 그래픽(svg), 텍스트(text), 영상(media), 영역(div) 등의 것들을 나타낸다.

 

아주 간단하고도 전통적인 방식의 개발 방식으로 설명하면, 프론트엔드 개발은 HTML, CSS, Javascript 이 3가지 언어로 구성된다.

 

HTML은 요소들을 배치하고 구조를 형성하기 위한 언어이다.

실제 코드는 아래 사진과 같이 생겼다.

CSS는 배치된 요소들을 디자인하고 색을 입히고 꾸미기 위한 언어이다.

실제 코드는 아래 사진과 같이 생겼다.

Javascript는 정적이고 단조로운 HTML 문서의 한계를 극복하기 위해 웹 브라우저(Chrome, Firefox 등) 자체의 내장 컴파일 기능을 이용하여 페이지를 동적으로 변형하고 이벤트를 발생시키는 스크립트 언어이다.

실제 코드는 아래 사진과 같이 생겼다.

 

일반적으로 이 3가지 언어는 함께 쓰이며 모두 사용될 때에 최강의 효력을 발휘한다.

각각이 어떤 느낌인지는 다음 밈을 보면 어느정도 이해될 것이라고 생각한다.

 

웹 페이지를 작성 또는 개발하는 순서는 크게 다음과 같다.

1. HTML 코드로 페이지의 틀을 만든다.

2. CSS 코드로 그 페이지의 틀을 꾸미고 재배치한다.

3. Javascript 코드로 페이지를 동적으로 만든다.

 

여기에서 한가지 의문이 들 수 있다: 도대체 아까부터 동적, 동적하는데 그게 뭐지?

이를 이해하지 않고 넘어가면 자바스크립트의 존재 의미가 퇴색된다.

 

HTML과 CSS만을 이용하여 페이지를 만들 수 있다.

다만, 그 페이지는 이벤트(사용자가 무언가 클릭하거나 상호작용하는 것 등) 등에 반응하지 못하는 정적 페이지라고 한다.

 

이러한 단조로운 페이지는 보기에는 예쁘지만 사용자와 상호작용하는 것이 없는 사진과 같이, 멈춘 것 같은 페이지라고 해서 정적(static) 페이지라는 말을 사용한다.

 

이를 보완하기 위해 자바스크립트라는 언어를 사용하여 페이지의 각 요소들과 사용자가 상호작용하고 기능을 구현할 수 있게끔 할 수 있는 것이다.

 

자바스크립트까지 사용하면 비로소 이 정적 페이지는 동적 페이지가 된다.

 

 

 

백엔드 개발(Backend Development)

백엔드 개발자들은 프론트엔드 페이지와 소통하고 내부적으로 데이터를 저장 및 관리, 분산, 처리하는 작업을 한다.

백엔드 개발은 프론트엔드와 다르게 사용자와 직접 맞닿는 부분이 매우 적거나 없다.

 

백엔드는 구조가 단순한 것부터 매우 복잡한 것까지 다양하며, 설계 또한 어려우므로 일반적으로 인프라 팀과 소통하여 구조를 구축한다.

 

데이터베이스, 프레임워크, 분산 처리 서버 등을 적절히 배치하여 서버 간의 효율적인 소통 방식을 설계하고 구현하는 작업들이므로 여러 요구조건들을 필요로 한다.

 

프론트엔드와 다르게 구조가 어떠냐에 따라 개발 순서도 천차만별로 달라지므로 이 이상 자세히 서술하지는 않겠다.

 

다만 간단한 서비스를 구성함에 있어 필요한 최소한의 백엔드도 이후 포스팅에서 다룰 생각이다.

 

보통 프레임워크 구성으로는 Node.js나 Spring, .NET, Laravel 등을 사용하고,

데이터베이스는 MySQL, MariaDB, MongoDB, LevelDB, Redis 등 다양하게 목적에 따라 사용한다.

분산처리나 데이터 관리 등은 ELK stack이나 Kafka, S3, Hadoop 등을 사용하는 것이 요즘 추세이다.