[Web] 웹 개발
정적 사이트 VS 동적 사이트
정적 사이트(static site)는 사용자에게 정보만을 제공하는 웹사이트를 말한다. 웹 사이트 제작자는 사용자에게 정보만을 제공할 뿐, 반대로 사용자가 웹 사이트에서 정보를 읽는 것 말고는 할 수 있는 게 없기에 어떻게 보면 일방적이라고도 볼 수 있다. 반면 동적 사이트(dynamic site)는 로그인 기능, 결제 기능 등 사용자가 사용할 수 있는 기능들도 제공하는 웹 사이트이다. 이로 인해 정적 사이트와 달리, 동적 사이트에서는 사용자도 웹 사이트와 상호작용하여 무언가를 요청할 수 있고, 웹 사이트는 그 요청에 응답하여 그에 따른 결과를 보여줄 수 있는 형식이다. 예를 들어 사용자가 검색 창에서 무언가를 입력하면, 그 후 웹 사이트에서 그에 맞는 검색 결과를 보여주는 것이 있겠다.
요즘의 웹은 대부분 사용자와 상호작용하는 동적 사이트가 대다수이므로 웹 개발을 할 때 이러한 점을 고려하는 것이 좋다.
서버 VS 클라이언트
우리가 웹을 사용하는 과정을 기억해보면 사실 다음의 과정을 거친다. 우선 사용자는 웹 브라우저를 통해 웹 사이트에 들어가 특정 버튼 누르기, 다른 사이트로 향하는 링크 클릭하기 등의 입력 행위를 통해 그에 따른 정보를 요구한다. 예를 들어 ‘사과’라는 키워드를 입력하고 검색 버튼을 누르면 이것은 웹 사이트에 “ 사과와 관련된 검색 결과들을 내게 보여줘”라고 요청하는 것과 같다. 이러한 요청은 해당 웹사이트와 연결된 서버에 전달된다. 여기서 서버(Server)는 인터넷에 연결된 컴퓨터를 말하며, 정보를 제공하는 쪽이다. 해당 요청을 받은 서버는 그 안에 저장된 모든 정보들 중 사용자의 요청 조건(’사과’)에 부합하는 정보들을 찾고 이를 다시 사용자의 웹 브라우저에 전달한다. 서버에 저장된 정보로는 영상, 이미지, 텍스트 글 등이 포함되어 있다. 서버가 요청에 응답하여 전달된 정보들은 사용자 웹브라우저의 웹 사이트 화면에 반영되어 사용자 눈에 보이게 되는 것이다. 참고로, 사용자가 웹사이트에 접근하기 위해 사용하는 컴퓨터, 태블릿, 모바일 장치 등을 클라이언트(Client)라 하고, 좁은 의미에서는 웹 브라우저를 클라이언트라고도 한다. 클라이언트는 서버와 달리 정보를 요청하고 그 정보를 받아보는 입장이다.
프론트엔드 VS 백엔드
웹 개발에는 크게 두 영역으로 나뉘는데, 프론트엔드와 백엔드 분야이다.
프론트엔드(front-end)는 그 영어 단어에 내포되어 있듯, 사용자 앞에 보여주는 웹 화면 부분을 담당한다. 웹 사이트 내에서 특정 정보는 어떻게 배치할 것이고, 버튼은 어디에 배치하고 어떤 디자인을 할 것인지 등을 다룬다. 웹 사이트 디자인, 사용자 동작에 반응하는 기능 개발, PC, 모바일 등 다양한 전자 장치들의 각각의 화면에 맞게끔 웹 사이트를 만드는 일, 웹 브라우저들의 종류와 버전에 대응하여 웹 사이트를 보일 수 있게끔 하는 작업들도 이 분야에서 다룬다. 프론트엔드 개발에는 HTML, CSS, 자바스크립트가 쓰인다.
백엔드(back-end)는 역시 단어 그 자체에 뜻이 들어있듯, 사용자 ‘뒤’에서 사용자 눈에는 보이지 않는 영역을 담당하며, 주로 데이터를 처리하고, 이러한 데이터들을 저장, 처리하기 위해 서버 내에 데이터베이스를 설계, 구축하는 작업이 여기에 포함된다. 백엔드에는 파이썬, 자바, PHP 등의 다양한 프로그래밍 언어가 사용된다.
즉, 프론트엔드는 클라이언트 쪽을, 백엔드는 서버 쪽을 다룬다고 볼 수 있다.
참고로, 프론트엔드와 백엔드 모두를 다루는 것을 풀스택(full stack)이라고 한다.
HTML, CSS, 자바스크립트(JavaScript)
- HTML는 웹 페이지에 보일 정보들을 이미지, 영상, 텍스트 등의 웹 요소들을 사용하여 웹 페이지에 배치하고, 이를 사용자에게 보여주는 역할을 한다.
- CSS는 HTML로 만든 웹 페이지를 꾸며주는 역할을 한다. HTML은 정보를 보여주기만 하는 특징이 강하기에 이를 사용자가 보기에 편리하고 가독성 좋게 배치하거나 꾸미기 위해선 CSS가 필요하다.
- 자바스크립트(JavaScript)는 사용자가 웹사이트에 있는 버튼이나 텍스트 입력창 등의 요소들에 동작을 가하면 그에 대한 반응을 하여 웹사이트에 동적 효과를 줄 수 있는 프로그래밍 언어이다. 규모가 크거나 복잡한 웹 사이트를 제작하기 위해서는 자바스크립트로 처음부터 직접 모든 걸 구현하기 보다는, 다른 사람들이 만들어 놓은 라이브러리나 프레임워크에서 이미 구현된 기능들을 가져와 개발하므로 이와 관련된 여러 라이브러리, 프레임워크들을 알아놓는 것이 좋다.
라이브러리, 프레임워크를 일체 사용하지 않고 순수히 자바스크립트 문법만을 이용하여 개발하는 것을 바닐라 자바스크립트(Vanila JavaScript)라 한다.
라이브러리와 프레임워크는 서로 비슷한 개념이지만 조금 다르다. 라이브러리는 개발자가 원하는 기능만 가져와서 쓸 수 있지만, 프레임워크의 경우, 처음부터 끝까지 해당 프레임워크에서 준수해야할 규칙들을 지켜가면서 코딩해야 한다.
자바스크립트의 라이브러리 및 프레임워크에는 JQuery, D3.js, Bootstrap, React, Angular, Vue.js 등이 있다고 한다.
백엔드에서는 클라이언트와 서버 간에 전송되는 데이터들을 저장, 관리하기 위한 데이터베이스(database)와 관련된 개념들을 알아야 한다. 또한, 백엔드에서 사용되는 여러 프로그래밍 언어들과 그와 관련된 프레임워크들도 존재한다.
백엔드에서의 개발 언어와 해당 언어에서 자주 쓰이는 프레임워크에는 다음이 있다고 한다. | 언어 | 프레임워크 | |—|—| |Node.js|Express| |Java|Spring| |Python|Django| |PHP|CodeIgniter|
이 외에도 백엔드 개발 언어로 루비(Ruby), 루비에서 사용하는 프레임워크인 루비 온 레일즈(Ruby on rails), 언어 고(Go)와 해당 언어 프레임워크인 레벨(Revel) 등도 있다고 한다.
References
[1] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석
This content is licensed under
CC BY-NC 4.0
댓글남기기