프트웨어 전문지 마이크로소프트웨어의 최신호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(Front-End)를 주제로 담았습니다. 자바스크립트, 타입스크립트, 리액트, 뷰, 앵귤러, 일렉트론, 아이오닉 등 마소 393호의 주요 기사들을 IT조선 독자에게도 소개합니다. [편집자주]

우리가 사용하는 인터넷은 전 세계적으로 서로 연결된 컴퓨터를 통해 정보를 공유할 수 있는 공간 월드와이드웹(World Wide Web, WWW)을 탄생시켰다. 월드와이드웹을 간단히 줄여서 웹(Web)이라 부른다. 인터넷상에서 웹은 HTTP(HyperText Transfer Protocol)라는 프로토콜을 이용해 정보를 주고받을 수 있으며, 주로 HTML(HyperText Markup Language) 문서를 주고받는 데 사용한다. 웹을 사용하기 위해서 우리가 사용하는 PC, 모바일(Mobile), 태블릿(Tablet) 등의 디바이스에는 웹 브라우저(Web Browser)가 기본으로 탑재돼 있다.

웹 브라우저는 HTML 문서와 그림, 멀티미디어 파일 등 웹 기반 인터넷 콘텐츠를 검색하고 열람할 수 있는 프로그램을 말한다. 웹이 동작하기 위한 영역으로 크게 백엔드(Back-End)와 프론트엔드(Front-End)가 있다. ‘프론트엔드’는 사용자로부터 다양한 형태의 입력을 받아 ‘백엔드’가 사용할 수 있는 규격을 따라 처리할 책임을 진다. ‘프론트엔드’를 ‘백엔드’로 연결하는 것은 인터페이스의 일종이며 앞에서 말한 HTTP를 사용한다. 웹 프론트엔드는 웹에서 동작하는 UI(User Interface) 부분을 말하며, 사용자가 눈으로 보고 인식할 수 있는 영역이다.

프론트엔드 워드클라우드. / 마이크로소프트웨어 393호 발췌
프론트엔드 워드클라우드. / 마이크로소프트웨어 393호 발췌
초창기 웹 프론트엔드 개발은 UI를 개발하는 영역이었다. 그런데 지금의 프론트엔드는 상황이 많이 달라졌다. 초창기 프론트엔드는 이미지나 와이어 프레임 등을 이용해 웹 페이지를 그리거나 만들거나, 콘텐츠를 정의하기 위해 HTML과 CSS를 작성하는 것이었다. 하지만 최근 프론트엔드는 UX를 고려해 디자인과 엔지니어링의 정의부터 웹 표준, 웹 콘텐츠 접근성, 다양한 디바이스 고려, 보안 측면 대응까지 다양한 요구를 만족해야 하는 수준까지 왔다.

웹 프론트엔드를 최신 트렌드에 맞게 개발하기 위해 전문 개발자 필요하다. 특히 국내는 웹 퍼블리셔와 웹 개발(프론트엔드와 백엔드 동시)로 나뉘거나, 웹 디자이너와 웹 개발자 및 백엔드 개발자로 나뉘어 개발한다. 그래서 프론트엔드를 전문적으로 다루는 개발자가 부족하다.

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

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

강희석, 유희권 필자의 웹 프론트엔드에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.