검수요청.png검수요청.png

프런트엔드

위키원
이동: 둘러보기, 검색

프런트엔드(front end)란 컴퓨터와 사용자 사이의 인터페이스(I/F) 부분을 말한다. '앞단', '뷰단'(view端) 또는 '사용자단'이라고 부른다. 웹사이트의 디자인, 메뉴, 폰트, HTML, CSS, 자바스크립트 등이 있다. 반대말은 백엔드(back end)이다.

개요[편집]

프런트엔드는 사용자 인터페이스(UI)를 가지고 동작하며 프로그램 인터페이스와 서비스의 최초 사용자와 관련된 특성을 나타내는 데 사용되는 용어이다. 여기서 “사용자”란 사람 또는 프로그램이 될 수 있다. 프런트엔드 응용프로그램은 사용자들과 직접 상호작용을 하는 프로그램이다. 프런트엔드 응용프로그램은 사용자와 직접 인터페이스할 수 있으며, 요구된 데이터를 얻거나 요구된 서비스를 수행하기 위하여 원격지의 다른 컴퓨터에 위치한 백엔드 프로그램으로 요구를 전달한다. 클라이언트/서버 컴퓨팅 모델과 비교한다면, 프런트엔드는 클라이언트로, 백엔드는 서버로 이해할 수 있다.[1]

등장 배경[편집]

4차 산업혁명으로 인해 사람들의 업무의 패러다임이 급격히 변화되고 있다. 그동안 사람들이 직접 노동력을 들여서 단순 반복 처리하던 일들을 이제는 컴퓨터가 대신 처리한다. 사람이 하는 게 당연시되던 일들을 이젠 컴퓨터가 대신 처리하게 되면서 앞으로 사라질 직군이 많이 셍길 수밖에 없고 또 사라지는 직군만큼 새로운 직군들이 많이 생겨나게 될 것이다. 프런트엔드 개발자도 위와 비슷한 맥락에서 새롭게 주목받고 있는 직군에 속한다.[2]

초창기 웹 프런트엔드 개발은 사용자 인터페이스를 개발하는 영역이었다. 그런데 지금의 프런트엔드는 상황이 많이 달라졌다. 초창기 프런트엔드는 이미지나 와이어 프레임 등을 이용해 웹페이지를 그리거나 만들거나, 콘텐츠를 정의하기 위해 HTML과 CSS를 작성하는 것이었다. 하지만 최근 프런트엔드는 사용자 경험(UX, User Experience)을 고려해 디자인과 엔지니어링의 정의부터 웹 표준, 웹 콘텐츠 접근성, 다양한 디바이스 고려, 보안 측면 대응까지 다양한 요구를 만족해야 하는 수준까지 왔다.[3]

초창기엔 대부분의 웹 개발자들이 웹사이트는 물론이고, 백엔드 웹 애플리케이션까지 개발해야했었다. 프런트엔드에 앵귤러(Angular), 리액트(React), 뷰(Vue)와 같은 최신 프레임워크가 도입되었고, 브라우저에서는 불가능하다고 생각되었던 수많은 기능을 지원하는 최신 브라우저가 등장했으며, 웹지엘(WebGl)과 같은 그래픽 엔진까지 나타나면서 개발자들은 이제 프런트엔드 개발에 좀 더 집중할 수 있게 되었다.[4]

비교[편집]

  • 웹퍼블리셔
간단하게 퍼블리싱을 주로 하는 사람을 뜻한다. 퍼블리싱은 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 재정리하는 것이다. 퍼블리셔는 퍼블리싱을 목표로 웹 디자인 작업과 코딩으로 웹 사이트를 제작하고 편집하는 일을 한다. 사실 퍼블리셔는 우리나라에서만 사용하는 단어로, 프런트엔드 개발자와 구분 짓기 위해 사용된다. 퍼블리셔가 되면 주로 HTMLCSS 중심의 업무를 담당하게 된다.[5]
'웹 표준' 및 '웹 접근성'의 전문가이며, 추가로 클라이언트의 요구에 맞춘 웹사이트를 만들기 위해 기획자와 개발자 간의 커뮤니케이션을 도와줄 수 있는 사람이라고도 말할 수 있다. 웹퍼블리셔에게 필요한 기술적인 스킬은 포토샵, 일러스트 디자인 툴 사용, 웹상에 구현하는 드림위버, HTML5, CSS3와 동적인 구동을 하는 자바스크립트 프레임워크(React, Angular 등)나 제이쿼리 사용이 있다. 더 나아가 사용자 중심의 디자인 구현을 위해 사용자 경험(UX, User Experience)과 사용자 인터페이스 디자인에 대한 지속적인 관심과 학습이 필요하다.[6]
  • 백엔드
클라이언트와는 직접 대면하지 않으나, 프런트엔드 프로그램과 연동하여 기술적인 기능을 하는 프로그램을 말한다. 프런트엔드와는 반대되게 사용자 인터페이스 없이 프로세스 형태로만 존재한다. 백엔드 응용프로그램은 보통 요구되는 자원들에 가깝게 있거나 또는 요구되는 자원들과 교신할 수 있는 능력을 갖추는 등을 통해 프런트엔드 서비스를 간접적으로 지원한다. 프런트엔드와 직접 상호 작용할 수 있지만, 보다 일반적인 것은 중간에 또 다른 프로그램이 개입되어 프런트엔드와 백엔드의 활동을 조정한다.[7]
백엔드에서는 프런트엔드에 보여줄 HTML 문서를 그때그때 생성해서 내려준다. 즉 동적인 처리를 다루는 부분이다. 백엔드는 여러 요청을 한꺼번에 받아서 각각 제대로 처리해야 하는 '동시성 처리 문제'가 있다. 성능 튜닝 작업이 효과적으로 드러나는 분야이기 때문에 아주 사소한 영역까지 빠르게 개발하려는 노력이 깃드는 분야이다. 백엔드는 특성상 프로그래밍 언어의 선택이 자유로운데 대표적으로 자바(Java), 제이에스피(JSP), 스프링(Spring), 마이에스큐엘(MySQL)을 사용한다[8]

특징[편집]

웹 프런트엔드를 개발하기 위해서는 다양한 기술이 필요하다. 그 영역을 외관, 아키텍처, 적합성, 생태계, 언어, 프로토콜, 브라우저, 유아이 컴포넌트, 워크플로우 등으로 구분할 수 있다. 외관은 웹사이트에서 밖으로 보이는 부분으로 애니메이션, 타이포그래피, 시각화로 구분된다. 아키텍처는 프런트엔드 구조 및 설계 규칙 등으로 알고리즘, 디자인 패턴, 함수적 프로그래밍 등을 고려한다.[3]

이중 언어 기술인 이 중 언어 기술인 HTML, CSS, 자바스크립트 세 가지가 가장 기본이 된다. HTML은 웹 페이지의 구조를, CSS는 웹의 스타일을 구성하며, 웹의 동적 기능은 자바스크립트가 담당한다.[3]

  • HTML
Hyper Text와 Markup Language의 약자로서, 인터넷 웹사이트 등 하이퍼텍스트를 편집하기 위한 코딩 언어이다. 최초 제안자는 1980년 유럽 인자 물리학 연구소에서 연구 중이던 물리학자 팀 버너스-리(Tim Berners-Lee)이다. HTML은 문서의 글자색, 글자 모양, 글자 크기, 이미지 배치, 문서 이동 등등 이렇게 문서 작성에 관여되는 부분들을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML은 정보를 불러오는 과정과 자신이 입력한 명령어에 대한 명령 입력과정에서 오류가 발생하는 경우가 종종 있어서 이를 보완하기 위해 자바스크립트, 에이잭스(AJAX) 같은 여러 가지 스크립트들과 같이 쓰일 수도 있다. 사람들이 편리하고 쉬운 이유로 많이 쓰기 때문에 '웹'으로 시작하는 직업들의 기초 상식이라고 볼 수 있다.[9]
  • CSS
Cascading Style Sheets의 약자로서, 웹 문서의 색상, 폰트, 레이아웃 등을 표현하기 위해 사용하는 스타일 시트 언어이다. CSS는 1994년 하콤 비움 리(Håkon Wium Lie)가 발명했으며 W3C(World Wide Web Consortium)에서 관리하였다. CSS는 웹 페이지의 모양과 느낌을 처리하고 텍스트 색상, 글꼴 스타일, 문단간격, 열크기 및 배치 방법 등 여러 가지를 제어할 수 있다. CSS는 배우기 쉽고 이해하기 쉬우면서도 HTML 문서를 강력하게 제어할 수 있다. 보통 일반적으로 HTML과 XHTML에서 주로 쓰인다. HTML만으로 웹 페이지를 제작할 경우에는 HTML 요소의 세부적인 스타일들을 따로 일일이 지정해 주어야 하는데 이 작업은 매우 많은 시간이 걸려 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘든데 CSS를 사용하면 웹 페이지의 스타일을 편리하게 개발할 수 있다.[10]
  • 자바스크립트
1995년 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 스크립트 프로그래밍 언어이다. 자바스크립트는 표준 HTML 문서 내에 삽입되어 사용되며, 인터랙티브한 웹 페이지를 만들 수 있게 한다. 자바스크립트의 장점은 다른 언어와 달리 컴파일 과정이 존재하지 않기 때문에 빠르게 스크립트 코드 작성과 실행이 가능하며 웹브라우저에서 동작하는 스크립트 언어이기 때문에 운영체제(OS)를 가리지 않고 프로그램의 실행이 가능한 것이다. 자바스크립트의 단점은 객체와 객체 함수가 제한적이어서 기능 또한 제한적이라는 점과 개발할 수 있는 도구가 적고 HTML 소스 코드 안에 포함되어 작성되기 때문에 소스 코드가 외부로 공개되서 보안상 취약점이 발생할 수 있다는 점이다.[11]

프레임워크[편집]

프레임워크란 소프트웨어 애플리케이션(application)이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적 기능들에 해당하는 부분의 설계와 구현을 재사용 가능하도록 협업화된 형태로 제공하는 소프트웨어 환경을 말한다.[12]

과거와 달리 최근에는 자바스크립트 진영에서도 프레임워크를 이용한 개발이 필수로 여겨지고 있다. 2017년까지만 해도 개발자들은 프로젝트에 앵귤러제이에스(Angular)와 리액트(React) 중 어느 것을 사용해야 하는지 여부를 주로 토론했으나, 2018년 이후 Vue.js라는 새로운 프레임워크에 대한 관심이 높아지고 있다.[13]

  • 앵귤러제이에스
강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크이다. 참고로 이렇게 애플리케이션을 만들기 위해 필요한 기능을 모두 갖춘 프레임워크를 '컴플리트 프레임워크(Complete Framework)'라고 한다. 2010년 구글(Google)이 출시하였으며, 타임스크립트를 주력언어로 채택하여 정적 타입을 제공하고 있다. 정적 타입의 도입으로 코드 어시스트, 타임 체크, 리팩토링을 지원하는 강력한 도구 사용이 가능해지며, 객체 지향적 프로그래밍에 적합해진다. 이는 많은 개발자 간의 협업이 필요한 대규모 애플리케이션 개발에 보다 효과적이다.[13]
  • 리액트
사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해주는 프런트엔드 라이브러리이다. 2013년에 페이스북이 출시했으며, 페이스북은 리액트를 자사의 제품(페이스북, 인스타그램왓츠앱)에서 광범위하게 사용한다. 앵귤러제이에스와 달리 개발에 필요한 모듈을 기본으로 제공하지 않고, 서드파티(Third party) 라이브러리에 의존한다. 공식적으로 리액트는 작은 자바스크립트 UI 라이브러리일 뿐, 그 외의 것은 사용자에게 일임 하고 있다. 대신 다른 프레임워크에 비해 방대한 에코시스템이 존재한다. 사용자는 자유롭게 개발에 필요한 모듈을 결정하고 선택할 수 있다. 커다란 에코시스템은 장점으로 보이지만 사용자에게 책임이라는 부담을 지우기도 한다. 이러한 부담에 대해 리액트는 초심자의 빠른 개발환경 구축을 위해서 크리에이트 리엑트 앱(Create React App)이라는 툴을 제공하여 진입 장벽을 낮추고 있다.[13]
  • Vue.js
2014년 구글의 직원인 Evan You가 개발했다. Vue.js는 대기업의 후원을 받지 못했음에도 인기가 높아지고 있다. 대기업 직원이 주도하고 있는 다른 프레임워크들과 달리 Vue.js는 커뮤니티가 주도한다. 문서나 코드의 품질이 떨어질까 우려될 수도 있으나, 다행스럽게도 공식문서가 여러 나라의 언어로 잘 번역되어 있을 뿐만 아니라, 문서의 구성이 예제 위주로 되어 있어 필요한 내용만 빠르게 발췌하여 적용할 수 있다. 이는 진입장벽을 낮춰주는 장점으로, 리액트에 비해 초심자에게 비교적 접근성이 뛰어나다고 볼 수 있다.[13]

각주[편집]

참고자료[편집]

같이 보기[편집]


  검수요청.png검수요청.png 이 프런트엔드 문서는 인터넷에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.