커튼이 내려진 어두운 무대가 있습니다. 점점 조명이 밝아지면 공연이 곧 시작될 예정입니다. 커튼 뒤에는 무엇이 있을까요? 또 누가 준비하고 있을까요? 우린 무대라는 경계를 기준으로 멋진 공연을 볼 수 있습니다. 그 경계 너머에서는 조명, 장치, 의상, 분장, 조명, 음악, 특수효과 등이 배우들의 연기와 감독의 상상력이 만나 화려한 무대가 관객에게 쏟아질 준비를 하고 있습니다. 무대는 작품이 펼쳐지는 새로운 세계입니다. 무대 디자이너는 눈에 보이는 이 공간을 창조하는 일을 합니다. 그렇게 공연은 무대 디자이너가 만든 프런트엔드를 통해 펼쳐집니다.

프런트엔드란?

프런트엔드란? 웹사이트에 사용자가 접속했을 때 처음 보이는 영역을 말합니다. 직관적이고, 깔끔한 레이아웃을 가진 매력적인 사이트를 볼 수 있습니다. 이는 웹디자이너와 프런트엔드 개발자가 만든 사이트를 소개하는 작품입니다. 여기서 웹디자이너는 이미지와 색상 등 전체적인 디자인을 관여합니다. 하지만 프런트엔드 개발자는 코딩을 통해 사용자가 원하는 상호작용이 일어날 수 있도록 만들어주는 역할을 합니다. 예를 들면 저장 버튼을 눌렀을 때 제목을 입력하지 않았으면 "제목을 입력해주세요"라는 경고창을 띄워야 합니다. 이런 보이는 화면에서 일어나는 기능들을 개발하는 역할을 바로 프런트엔드 개발자의 역할입니다.

프론트엔드의 개념을 비유할 때 공연 무대는 좋은 대상입니다. 무대는 공연이라는 서비스가 일어나는 공간입니다. 이 공간을 통해 관객들은 배우들이 준비한 공연을 볼 수 있습니다. 무대가 초라하다가 내용이 달라지지는 않겠지만 완성도가 떨어지게 느낄 수 있을 것입니다. 그렇기 때문에 프런트엔드는 그 사이트가 가진 특징을 표현하거나 기술을 예측할 수 있는 역할을 합니다.

화려한 온라인 무대

세상에서 가장 가치 있는 사이트 '구글' 하지만 그들의 홈페이지 'google.com'을 접속하면 보이는 건 검색창이 전부입니다. 아직 공연을 시작하지 않은 커튼 내려진 무대를 보는 것처럼 고요합니다. 구글이란 거대한 서비스를 만날 수 있는 방법은 이 작은 무대입니다. 하지만 엔터 한 번이면 세상에 모든 지식이 저 창을 통해 만날 수 있습니다. 저 검색창 뒤에서는 약 20억 줄의 소스코드가 준비되어 있습니다. 그렇게 프런트엔드는 거대한 사이트가 제공하는 기능을 만날 수 있는 통로입니다.

프런트엔드와 무대를 구성하는 기술

그렇다면 화려한 프런트엔드라는 무대를 꾸미기 위해서는 무엇이 필요할까요? 무엇이 필요한지 재료를 알아봅니다.

첫 번째는 '기초 골조공사를 시작합니다.' 그래야 배우들이 공간을 누비며 노래와 춤을 출 수 있습니다. 프런트엔드에서는 이러한 기초 공사를 'HTML'이라고 합니다. 화면에 기본적은 틀을 구성하는 뼈대 역할을 합니다.

두 번째는 '디자인으로 무대를 장식합니다.' 무대 배경화면을 그리고 소품을 장식하여 무대를 공연에 걸맞게 꾸며야 합니다. 프런트엔드에서는 이러한 디자인을 'CSS'라고 합니다. 크기, 색상, 글꼴, 이미지, 배경등을 바꿀수 있는 역할을 합니다.

세 번째는 '기술을 사용하여 무대를 완성합니다.' 화려한 조명, 그리고 음향 설치 등 무대를 꾸밀 때 필요한 전기와 디지털 기술이 필요로 합니다. 이러한 기술들을 프런트엔드에서는 '자바스크립트'라고 합니다. 멈춰 있는 사이트를 움직이게 만들어주는 기술자 역할을 합니다. 스크립트 언어는 발전하여서 확장된 AngularJS, ReactJS, View, Bootstrap 라는 새로운 기술자들이 나타나고 있습니다.