웹 디자인 – 1. 프론트엔드 백엔드 특징

안녕하세요 오늘은 웹 디자인과 관련된 개념들에 대해서 포스팅하려고 합니다. 워드프레스를 운영하다보니 제 블로그 사이트를 꾸미고, 편집하는 것에 대해 자연스럽게 알고 싶어져서 공부를 해보려고 합니다.

웹 언어에는 프론트엔드와 백엔드로 구분할 수 있습니다. 각각의 특징과 이 때 사용되는 언어에 대해서 알아보겠습니다.

목차

프론트엔드 백엔드, API

프론트엔드

웹에서의 프론트엔드는 사용자에게 시각적으로 드러나는 부분을 의미합니다. 프론트엔드 지향 언어는 많지만, 현재 대부분의 웹에서 사용되는 3가지 언어에 대해서 더 자세히 설명하겠습니다.

HTML(Hyper Text Markup Language): 웹의 뼈대를 의미하며, 구조를 설계하는 언어입니다.

예를 들어 우리가 웹 사이트를 디자인할 때, 특정 부분에 검색창을 넣고 싶다면 검색창을 넣을 수 있게 하는 언어가 바로 HTML입니다. HTML를 사용하면 검색창 뿐만 아니라 버튼, 이미지까지도 삽입할 수 있습니다.

CSS: 웹에서 사용자에게 시각적으로 보여지는 언어입니다.

CSS 언어는 HTML를 통해 삽입된 특정한 것들에 대해 색을 입히거나 크기를 조정하고 위치까지도 조정할 수 있도록 합니다.

Javascript: 웹에서 뇌 역할을 하며, 상호작용(interaction)을 위한 언어입니다.

자바스크립트를 통해 조건문과 반복문 등을 이용할 수 있습니다,

백엔드

웹에서의 백엔드는 사용자에게 드러나지 않는 DB공간을 의미합니다. 대표적인 언어로는 스크립트 언어 (PHP, JAVA, Python 등)가 있습니다. 웹 디자인과 관련된 포스팅이기 때문에 이에 대한 설명을 더 추가하진 않겠습니다.

혹시라도 더 자세한 설명을 보고 싶은 분들은 아래의 위키백과 링크를 통해 참고하여 주시기 바랍니다.

API

API는 프론트엔드와 백엔드를 연결하는 통신 수단입니다. 웹과 모바일 프론트엔드의 경우 API는 HTTP 요청/응답에 기반을 둡니다. API는 Backend for Frontend 패턴 (BFF)을 사용하여 설계되며 프론트엔드 측에서의 처리를 용이하게 하기 위해 응답을 처리합니다.

웹 디자인과 관련하여서는 프론트엔드 부분이 중요하므로 다음 포스팅에서는 실습과 함께 살펴보도록 하겠습니다.