웹 개발의 시작, 프론트엔드란 무엇인가

웹 개발의 시작, 프론트엔드란 무엇인가: 최유진 / 2020-11-22 02:06:45

프론트엔드란 사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 사용자들은 아주 깔끔한 레이아웃을 가진 인터페이스를 마주하게 되는데 이를 테크롤로지 분야에서 지칭하는 말입니다. 이를 풀어서 설명하자면 웹 사이트에 사용자가 접속하였을 때 보이는 영역을 담당하는 직무로써 출력되는 화면에서 상호작용하는 모든 요소들을 모두 맡고 있습니다.

이는 웹 디자이너와 비슷해 보일 수 있으나 단순히 보이는 화면의 디자인적인 요소와 더불어 사이트 내에서 특정 기능을 호출하여 실행시키는 부분도 프론트엔드 개발자의 역할 중 하나입니다. 프론트엔드는 사용하기 쉽고 완전한 기능을 갖춘 인터페이스를 갖추었을 때에만 사용자들의 참여를 이끌어내기 때문에 아주 중요한 요소입니다.

서비스의 경쟁력을 유지하기 위해서는 매끄럽게 동작하는 강력한 프론트엔드를 구축하는 것이 매우 중요하게 여겨집니다. 프론트엔드 개발자로서의 업무를 진행하기 위해선 프로그래밍 언어에 대한 지식이 뒷받침되어야 합니다. 특히, HTML과 CSS, JavaScript 등의 지식이 기본적으로 요구되며 개발하는 사이트 유형에 따라서 필요한 프로그래밍 지식들은 더욱 늘어나게 됩니다. 기본적으로 요구되는 프로그래밍 언어들에 대해 알아보도록 합시다.

먼저, HTML는 사전적으로 ‘Hypertext Markup Language’의 약자이며 사용하는 사람에게 비 순차적으로 검색이 가능할 수 있게 제공이 되는 텍스트라는 의미를 가집니다. 이를 풀어서 설명하게 되면 우리 사용자들이 웹 사이트에 접속했을 때 화면에 보이는 사이트의 기본적인 틀을 구성해주는 역할을 한다고 보면 됩니다.

두 번째로, CSS는 ‘Cascading Style Sheets’의 약자이며 기존 HTML이 웹 문서를 다양하게 설계하면서 자주 변경하는데 많은 불편함이 뒤따라 이 문제를 보완하기 위해 만들어진 프로그래밍 언어이며 이를 스타일 시트라고도 합니다. 이 언어를 통해 개발자들은 풍부한 디자인으로 웹을 설계할 수 있으며, 글의 크기, 글꼴, 색깔, 그리고 글 뿐 아니라 사진 모양과 배경화면, 색상, 크기 등을 꾸며주는 역할을 합니다.

마지막으로, JavaScript는 JS라는 약자로도 불리며 크로스 플랫폼 및 객체지향 스크립트 프로그래밍 언어로 웹 사이트의 동적인 요소를 담당하고 있습니다. 최근에는 AngularJS, ReactJS, View, Bootstrap 등을 사용하는 빈도수가 높게 나타난다고 합니다. 특히, 이 프로그래밍 언어는 많은 장단점들을 가지고 있습니다. 컴파일 과정이 없기 때문에 다른 언어들과 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와줍니다. 뿐만 아니라 구조와 원리가 단순하여 개발에 익숙치 않은 초보 개발자들도 쉽게 배울 수 있습니다. 이러한 장점들 때문에 자바스크립트는 개발자들이 가장 관심을 많이 가지는 언어로 꼽히기도 합니다.

AngularJS는 오픈소스 자바스크립트 프레임워크로써 주로 싱글 페이지 웹 애플리케이션(SPA)을 만드는 데 사용됩니다. 이는 계속해서 발전하고 있으며, 개발자가 웹 애플리케이션을 더욱 잘 만들 수 있게 해주는 프론트엔드 개발 기술들 중 하나입니다. 이는 정적(static) HTML을 동적(dynamic) HTML로 변환하는 기능이 있고 오픈소스 기술이기 때문에 누구나 자유롭게 사용할 수도 있고, 변경할 수도 있게 됩니다.

ReactJS는 프론트엔드 개발에서 사용할 수 있는 유연하고 효과전인 선언형의 자바스크립트 라이브러리입니다. 사용자 인터페이스를 뛰어나게 만드는 데 도움이 됩니다. 리액트는 컴포넌트 기반의 오픈소스 라이브러리이며, 애플리케이션의 반응형 view layer입니다. 이 기술은 페이스북이 개발하였고 유지관리를 해오고 있습니다.

Bootstrap은 반응형 웹 애플리케이션 및 웹 사이트를 개발하기 위해 사용되는 오픈소스 무료 도구입니다. 가장 인기있는 JavaScript, CSS, HTML 프레임워크이며 모바일 우선의 반응형 웹 사이트 구축에 도움을 줍니다.