검수요청.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]

비교[편집]

  • 웹퍼블리셔
간단하게 퍼블리싱을 주로 하는 사람을 뜻한다. 퍼블리싱은 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 재정리하는 것이다. 퍼블리셔는 퍼블리싱을 목표로 웹 디자인 작업과 코딩으로 웹 사이트를 제작하고 편집하는 일을 한다. 사실 퍼블리셔는 우리나라에서만 사용하는 단어로, 프런트엔드 개발자와 구분 짓기 위해 사용된다. 퍼블리셔가 되면 주로 HTML과 CSS 중심의 업무를 담당하게 된다.[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]

각주[편집]

  1. ↑ 프런트엔드 지식백과 - https://terms.naver.com/entry.nhn?docId=3476764&cid=58439&categoryId=58439
  2. ↑ 하다보니, 〈프론트엔드 개발자가 뭔가요?〉, 《네이버 블로그》 , 2019-01-04
  3. ↑ 3.0 3.1 3.2 오세용 기자, 〈(마소 393호) 웹 프론트엔드란?〉, 《아이티조선》, 2018-07-25
  4. ↑ 〈생산성을 빠르게 높여주는, 프런트엔드 개발 툴 10가지〉, 《위시캣》 , 2020-04-08
  5. ↑ 〈프론트엔드 개발자 VS 웹 퍼블리셔, 무엇이 다를까?〉, 《위시캣》 , 2020-02-14
  6. ↑ 프리모아, 〈웹 퍼블리셔 & 프런트엔드 개발자 & 백엔드 개발자의 차이점!〉, 《네이버 블로그》 , 2019-12-03
  7. ↑ 백엔드 지식백과 - https://terms.naver.com/entry.nhn?docId=3473496&cid=58439&categoryId=58439
  8. ↑ BBangsoon, 〈백엔드란? (back-end?)〉, 《티스토리》, 2018-04-25
  9. ↑ HTML 해시넷 - http://wiki.hash.kr/index.php/HTML
  10. ↑ CSS 해시넷 - http://wiki.hash.kr/index.php/CSS
  11. ↑ 자바스크립트 해시넷 - http://wiki.hash.kr/index.php/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#.ED.99.9C.EC.9A.A9
  12. ↑ 프레임워크 지식백과 - https://terms.naver.com/entry.nhn?docId=2837536&cid=40942&categoryId=32837
  13. ↑ 13.0 13.1 13.2 13.3 삼성SDS㈜ 공식 홈페이지 - https://www.samsungsds.com/global/ko/support/insights/frameworks.html

참고자료[편집]

같이 보기[편집]


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

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인
인터넷 PC통신 • 그누텔라 • 네트워크 • 다크넷 • 다크웹 • 딥웹 • 무선인터넷 • 슈퍼피어 • 스타링크 • 아르파넷 • 아이투피(I2P) • 엑스트라넷 • 오버레이 네트워크 • 오투오(O2O) • 오프라인 • 온라인 • 온오프라인 • 유선인터넷 • 인터넷 • 인트라넷 • 초고속 인터넷 • 토어(토르) • 표면웹 • 프리넷 • 피투피(P2P) • 하이브리드 피투피(P2P) • 홈네트워크
인터넷 기술 ARP • DNS • FTP • G-클라우드 • HTTP • HTTPS • IPFS • IPv4 • IPv6 • IRC • IRI • ISBN • LDAP • MOIP • OpenSSL • OSI 7 계층 • RFC • RFID • SFTP • SOAP • SSH • SSL • SSO • TCP • TCP/IP • TLS • UCI • UDP • URI • URL • URN • VoIP • 강화 내부 게이트웨이 라우팅 프로토콜 • 검색 • 검색엔진 • 게이트웨이 • 경계 경로 프로토콜 • 내부 게이트웨이 라우팅 프로토콜 • 다운로드 • 데몬 • 라우팅 정보 프로토콜 • 백엔드 • 사물인터넷 • 서버 • 서버-클라이언트 • 서브넷마스크 • 세션 • 스트리밍 • 식별자 • 아이피(IP) • 업로드 • 에듀테크 • 온프레미스 • 원격 프로시저 호출(RPC) • 유비쿼터스 • 인터넷 기술 • 자율시스템 • 정보기술 • 정보통신 • 채팅 • 챗봇 • 최단경로 우선 프로토콜(OSPF) • 쿠키 • 크롤링 • 클라이언트 • 키워드 • 텔넷 • 토폴로지 • 트래픽 • 패킷 • 포털 • 포트 • 프런트엔드 • 프로토콜 • 프록시 • 해시태그
이메일 IMAP • POP3 • SMTP • 계정메일 • 네이버 메일 • 다음 메일 • 센드메일 • 스팸 • 스팸메일 • 스팸필터링 • 아웃룩 익스프레스 • 야후 메일 • 웹메일 • 이메일 • 지메일 • 카카오 메일 • 한메일 • 핫메일
웹 KWCAG • WCAG • 서핑 • 시맨틱 웹 • 오프라인 웹 • 웹 • 웹 1.0 • 웹 2.0 • 웹 3.0 • 웹개방성 • 웹서비스 • 웹접근성 • 웹접근성 인증마크 • 웹주소 • 웹표준 • 웹호환성 • 피드
웹사이트 BBS • GNB • LNB • UI/UX • 게시판 • 관리자 사이트 • 그래픽 사용자 인터페이스(GUI) • 누리집 • 대시보드 • 드롭다운 메뉴 • 랜딩 템플릿 • 랜딩 페이지 • 리더보드 • 마이홈피 • 메뉴 • 모달창 • 미니홈피 • 방명록 • 배너 • 사용자 경험(UX) • 사용자 인터페이스(UI) • 섹션 • 왼쪽메뉴 • 웹기획 • 웹사이트 • 웹페이지 • 인터페이스 • 쪽지 • 커뮤니티 • 탑메뉴 • 탭메뉴 • 템플릿 • 팝업 • 페이지 • 페이지뷰 • 햄버거 메뉴 • 호버 • 홈페이지 • 화면
웹브라우저 넷스케이프 • 모자이크 • 브라우저 • 브레이브 브라우저 • 블록체인 브라우저 • 사파리 • 삼성인터넷 • 스윙 • 엣지 • 오시리스 • 오페라 • 웨일 • 웹브라우저 • 인터넷 익스플로러(IE) • 크롬 • 파이어폭스 • 판도브라우저
인터넷 서비스 구글 • 구글 미트 • 구글챗 • 구글 행아웃 • 깃허브 • 네아로 • 네이버 • 네이버 웹툰 • 네이버 카페 • 넷플릭스 • 다음 • 라이코스 • 레진코믹스 • 메일루 • 멜론 • 바이두 • 바이트댄스 • 비트토렌트 • 빌리빌리 • 빙 • 소리바다 • 스포티파이 • 아마존 웹서비스(AWS) • 애플 • 야후 • 야후재팬 • 얀덱스 • 에버노트 • 에어비앤비 • 왓챠 • 웹소설 • 웹툰 • 유튜브 • 인스타툰 • 인터넷 서비스 • 인터넷카페 • 잼라이브 • 줌 • 카카오 • 카카오 웹툰 • 카카오페이지 • 탑툰 • 텐센트 • 팟캐스트 • 패스 • 페이오니아 • 페이팔 • 해시넷 • 화상통화 • 화상회의
인터넷쇼핑 11번가 • 그립 • 네이버 쇼핑 • 네이버 쇼핑 라이브 • 라이브방송 • 라이브커머스 • 모바일쇼핑 • 스쉐라이브 • 스타일쉐어 • 아마존 • 알리바바 • 오픈마켓 • 옥션 • 온라인쇼핑 • 위메프 • 이베이 • 인터넷쇼핑 • 인터파크 • 전자상거래 • 지마켓 • 징동닷컴 • 카카오 쇼핑 • 카카오 쇼핑 라이브 • 커머스 • 쿠팡 • 쿠팡 라이브 • 타오바오 • 티몬
소셜 네트워크 SNS(소셜 네트워크 서비스) • 구글 블로거 • 네이버 밴드 • 네이버 블로그 • 디시인사이드 • 링크드인 • 마이크로블로그 • 맞팔 • 브런치스토리 • 블로그 • 소셜 네트워크 • 엑스 (트위터) • 웨이보 • 인스타그램 • 트루스소셜 • 티스토리 • 팔로우 • 페이스북 • 플리커 • 핀터레스트
메신저 골프메신저 • 님버즈 • 대화방 • 두레이 • 디스코드 • 딩톡 • 라인 • 라인웍스 • 마이크로소프트 팀즈 • 메신저 • 버디버디 • 스냅챗 • 스노우 • 스카이프 • 슬랙 • 아이씨큐(ICQ) • 왓츠앱 • 웹메신저 • 위챗 • 잔디 • 직톡 • 카카오워크 • 카카오톡 • 카톡방 • 큐큐(QQ) • 탱고 • 텔레그램 • 틱톡 • 페이스북 메신저 • 플로우
도메인 네임서버 • 다국어도메인 • 도메인 • 레지스트라 • 레지스트리 • 아이피 • 인터넷주소 • 인터넷키워드 • 한글인터넷주소 • 후이즈
호스팅 메일호스팅 • 서버호스팅 • 웹호스팅 • 코로케이션 • 클라우드 • 클라우드 네이티브 • 파킹 • 포워딩 • 호스팅
위키 구스위키 • 나무위키 • 노스모크 • 더위키 • 디시위키 • 리그베다위키(엔하위키) • 리브레위키 • 미디어위키 • 바다위키 • 백괴사전 • 아이티위키 • 알파위키 • 엔하계 위키 • 요다위키 • 우만위키 • 위키 • 위키낱말사전 • 위키독스 • 위키문법 • 위키문서 • 위키문헌 • 위키미디어재단 • 위키백과 • 위키스 • 위키엔진 • 위키원 • 위키원드 • 위키트리 • 위키휴가 • 제이위키 • 제타위키 • 중국위키 • 팬덤(위키아) • 한국어 위키백과 • 한국위키미디어협회 • 항공위키
인터넷 사용자 가입 • 가입자 • 강퇴 • 계정 • 관리자 • 네트워크 관리자 • 네티즌 • 누리꾼 • 대기자 • 데이터베이스 관리자 • 등록자 • 디지털 원패스 • 로그아웃 • 로그인 • 방문자 • 방장 • 블로거 • 블록체인 관리자 • 비회원 • 사용자 • 사이트 관리자 • 서버관리자 • 시삽 • 시스템 관리자 • 아이디(ID) • 운영진 • 웹관리자 • 웹마스터 • 유튜버 • 접속자 • 차단 • 최고관리자 • 탈퇴 • 탈퇴자 • 회원 • 회원제 • 휴면 • 휴면계정
인터넷 단체 IANA • ICANN • W3C • 다르파 • 유럽입자물리연구소(CERN)
위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반
원본 주소 "http://wiki1.kr/index.php?title=프런트엔드&oldid=328234"