IT 분야 취업을 준비하고 있음에도 불구하고, 많은 분이 프론트엔드와 백엔드 개발에 대한 개념이나 사용 언어에 대해 잘 모르는 경우가 상당히 많습니다. 기업에서 새로운 웹서비스나 모바일 애플리케이션을 준비하는 과정에서 서비스 기획자, UI/UX 디자이너, 웹 디자이너, 프론트엔드, 벡엔드 혹은 풀스택(Full-Stack), 서버 엔지니어 등의 인원을 필요로 하게 됩니다. 기업이 IT 개발자를 채용할 때에는 그 차이에 대한 이해를 한 후에 채용을 진행하듯이, 구직하는 입장에서도 마찬가지로 지원할 직무에 대한 이해를 바탕으로 구직을 진행해야 할 것입니다.

프론트엔드(Front-End) 개념

사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 사용자들은 아주 깔끔한 레이아웃을 가진 인터페이스를 보게 됩니다. 이렇게 사용자가 마주 보는 인터페이스를 테크놀로지 분야에서 ‘프론트엔드’라고 부릅니다. 프론트엔드는 사용하기 쉽고 완전한 기능을 갖춘 인터페이스를 갖추었을 때만 사용자들의 참여를 끌어내기 때문에 아주 중요한 요소가 됩니다. 서비스의 경쟁력을 유지하기 위해서는, 매끄럽게 동작하는 강력한 프론트엔드를 구축하는 것이 매우 중요합니다.

프론트엔드(Front-End) 개발

프론트엔드 개발은 주로 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는 데 초점을 맞추고 있습니다. 슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소가 프론트엔드 개발을 이루는 부분입니다. 시선을 사로잡는 프론트엔드를 만드는 데는 HTML, CSS, 자바스크립트(Javascript)가 중요한 역할을 합니다. 최종적인 사용자 인터페이스를 디자인하기 전에는 목업(Mockup), 와이어 프레임(Wire-frame), 클릭할 수 있는 프로토타입(Prototype)을 만들어야 합니다. 이런 도구들은 애플리케이션의 사용자 경험 안에 있는 이슈들을 확인할 수 있게 도와줍니다. 그리고 만약 그런 이슈들을 알게 된다면 문제를 해결할 수 있다는 것이고, 결국에는 영향력 있는 프론트엔드를 개발하는 것이 수월해지게 됩니다. 모바일 또는 웹 애플리케이션을 위한 완벽한 프론트엔드를 만들기 위해서는, 여러분의 구체적인 요구사항·목표·기회 등을 이해하고 그에 따른 프론트엔드를 만들어 낼 수 있는 개발업체와 협업하는 것이 매우 중요합니다.

프론트엔드(Front-End) 주사용 언어

프론트엔드에 개발에서 사용하는 언어는 여러 가지가 있는데 대표적으로 HTML, CSS, JavaScript를 들 수 있습니다. 웹 페이지를 구현하는 데 빼놓을 수 없는 언어이기 때문인데요. 간략히 소개하자면 웹 페이지의 내용과 기본 구조는 HTML, 디자인 담당은 CSS, 동작 담당은 JavaScript라고 할 수 있습니다. 각각의 특성에 관해 살펴보겠습니다.

[HTML] HTML(Hyper Text Markup Language)은 이름 그대로 하이퍼텍스트와 마크업 언어로 구성되어 있습니다. 하이퍼텍스트는 웹 페이지들 사이의 연결(하이퍼링크)를 나타냅니다. 반면에 마크업 언어는 데이터를 기술하는 언어입니다. 한 마디로 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이라고 할 수 있는데요. 그리하여 웹 페이지에 문단, 동영상, 제목, 표 등을 정의하고 그 구조와 의미를 정의하는 데 사용됩니다.

[CSS] CSS는 종속 스타일 시트(Cascading Style Sheets)의 약자입니다. 스타일 시트라는 단어에서 알 수 있듯이 CSS는 마크업 언어로 작성된 것이 실제로 화면에 어떻게 보이는지 그 스타일(표현)을 정해 주는 언어입니다. 즉 HTML 콘텐츠를 크기, 색상, 위치 변경 등으로 예쁘게 꾸미는, 디자인 담당이라고 할 수 있는데요. CSS의 사용으로 구조(내용)와 표현(스타일)이 함께 움직이는 것이 아니라 서로 분리될 수 있습니다. CSS는 개발자가 웹페이지에 다양한 스타일을 적용할 수 있게 해줌으로써 애플리케이션 페이지를 표시하는 프로세스를 보다 단순하게 만들어 줍니다. CSS는 또한 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있어 일일이 디자인을 적용해야 할 수고로움을 덜어줍니다.

[JavaScript] HTML과 CSS가 결합되어 웹페이지 상에서 올려진다고 하여 끝이 아니라, 그것이 실행되어야 의미가 있는데요. 스크립트 언어인 자바스크립트는 HTML과 CSS를 통해 만들어진 웹 페이지가 동작하도록 만들어 줍니다. 사용자들을 위해 상호작용하는 애플리케이션은 자바스크립트를 통해 구현 가능하게 된 것이라고 볼 수 있죠. 자바스크립트는 어마어마할 정도로 인기가 많은 언어로써, 객체 기반 언어이기에 객체 지향형 프로그래밍과 함수형 프로그래밍 모두를 표현할 수 있습니다. 게다가 동적이며 소스 코드를 직접 해석하여 바로 실행할 수 있는 인터프리터 언어이기 때문에 타입을 명시할 필요가 없다는 특성이 있습니다. 그렇기에 웹사이트의 기능성을 향상하는데 사용되며, 웹 기반의 소프트웨어 또는 게임들을 실행할 수 있게 해 주는 역할을 합니다.

백엔드(Back-End) 개념

용어 자체에서 알 수 있듯이, 백엔드는 웹사이트나 웹 애플리케이션 또는 모바일 솔루션의 프로세스와 관련된 서버 측(Server-side)과 데이터베이스를 관리해 주는 테크놀로지입니다. 프론트엔드가 눈에 직접 보이는 영역이었다면, 백엔드는 눈에 보이지 않는 서버에서 작용하는 기술을 다룹니다.

백엔드(Back-End) 개발

백엔드는 소프트웨어 개발 프로세스에서 서버 측 개발 분야입니다. 백엔드에서는 데이터를 저장하고 관리하며, 웹사이트의 클라이언트 측(Client-side)에서 모든 것이 매끄럽게 작동할 수 있게 해줍니다. 백엔드는 사용자들이 직접 보거나 상호작용할 수는 없지만, 소프트웨어 개발의 일부분인 것은 맞습니다. 백엔드에서는 프론트엔드에 있는 사용자들이 취하는 행동들을 처리합니다. 즉, 사용자들은 백엔드에 간접적으로 액세스하는 것이죠. 백엔드 개발에는 사용자 인터페이스가 없는 시스템 컴포넌트 작업, API 작성, 라이브러리 생성, 데이터베이스 통합 등 다양한 활동들이 포함되어 있습니다.

백엔드(Back-End) 주사용 언어

백엔드는 프론트엔드에 비해 프로그래밍 언어 선택의 폭이 넓습니다. 어떠한 언어라도 개발이 가능한 편이기 때문에 언어에 크게 좌우되는 편은 아닙니다. 그렇기 때문에 백엔드에서는 해당 언어가 가진 특성과 작업물 및 작업 방향과의 일치성 등을 고려하여 선택하는 것이 좋습니다.

[PHP] PHP(Hypertext Preprocessor)는 개발을 위해서 고안된 서버 측 스크립트 언어이자 수많은 웹 시스템의 기반이 되는 언어입니다. 우리나라에서도 다수의 인터넷 쇼핑몰, 커뮤니티 등이 PHP거나 PHP 기반으로 제작되어 있습니다. 브라우저가 서버에 웹 페이지를 요청하면 서버는 그 웹 페이지를 보내는데 이때 필요한 게 PHP입니다. 수신한 HTML 문서를 해석하여 화면에 띄울 때 필요한 게 JavaScript였다면, PHP는 브라우저에서 요청한 웹 페이지 즉 서버에 있는 데이터가 사용자와 상호작용하는 웹 어플리케이션으로 진화하여 브라우저로 넘어가도록 처리하는 데 필요합니다. PHP로 작성된 코드를 HTML 코드 안에 추가하면 웹 서버는 해당 코드를 해석하여 자동으로 HTML 문서를 생성하기에 동적으로 빠르게 HTML 문서를 만들 수 있습니다. 이처럼 PHP는 HTML을 프로그래밍적으로 생성해 주고, 데이터베이스와 상호작용 하면서 데이터를 저장하고, 표현하는 서버와 브라우저 간의 다리 역할을 한다고 볼 수도 있습니다.

[Node.js] 노드는 크로스 플랫폼의 오픈소스 런타임(run time) 환경으로써, 브라우저의 외부에서 자바스크립트 코드를 실행할 수 있게 해 줍니다. 노드가 개발됨으로써 자바스크립트가 웹 브라우저를 벗어나 모바일이나 웹 애플리케이션용 API와 같은 백엔드 서비스 개발에도 사용되는 범용 프로그래밍 언어가 될 수 있었는데요. 노드는 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 별도의 소프트웨어 없이 동작하는 것이 가능합니다. 확장성이 뛰어나고 반응속도가 빠르며 많은 양의 요청도 처리 가능하기에 웹서버의 동작을 더욱 효과적으로 통제할 수 있습니다. 하지만 언어가 아니라 소프트웨어 플랫폼이어서 그 자체로는 아무것도 하지 못하고 서버를 직접 구현해야 한다는 특징이 있습니다.

[JavaScript] 앞서 프론트엔드 때 소개해 드렸던 자바스크립트는, 백엔드와 프론트엔드 모두에서 사용할 수 있습니다. 웹은 물론 모바일 하이브리드 앱, 서버 사이드(Node.js), 데스크톱, 머신러닝(TensorFlow.js) 등 다양하게 활용되며 크로스 플랫폼*에서 중요한 역할을 하는 세계에서 가장 인기 있는 언어입니다.
*크로스 플랫폼: 둘 이상의 다양한 플랫폼에서 실행 가능한 소프트웨어(ex. 애플리케이션의 안드로이드 버전, 아이폰 버전 동시 출시)

[C++] C++은 C언어의 문법과 기능을 모두 사용할 수 있는 C언어 기반 프로그래밍 언어입니다. C언어에 여러 가지 기능을 추가한 버전에 가깝습니다. 객체지향과 일반화 프로그래밍을 사실상 거의 주된 패턴으로 사용하기 때문에 객체지향 프로그래밍 언어라고 알려져 있기도 하지만 사실은 객체지향은 물론 절차지향도 가능한 멀티 패러다임 언어입니다. 요즘에도 경쟁력을 갖추기 위해서 가장 널리 사용되는 프로그래밍 언어입니다. 또한, 백엔드 언어로도 많은 인기를 얻고 있습니다.

[Java] 가장 인기 있는 프로그래밍 언어 중 하나이자 객체지향 프로그래밍 언어인 자바의 가장 큰 특징은 플랫폼 종속성이 낮다는 것입니다. 운영체제에 Java Virtual Machine(JVM)을 설치하면 Java 기반 프로그램은 어떤 환경에서도 완벽하게 똑같이 동작합니다. 가상머신이 각각의 운영체제에 맞춰서 돌아갈 수 있도록 제작되었기 때문입니다. 앞서 살핀 자바스크립트는 HTML과 CSS가 존재한다는 가정하에 실행되었는데요, Java는 특정 플랫폼에 의존하지 않는 독립성을 갖추고 있습니다. 생산성과 안정성, 기기 호환성이 높고 소스코드 가독성이 좋아 개발자 커뮤니티에서 널리 사용되고 있습니다.

[Python] 개발자들이 시스템을 효율적으로 통합하고, 빠르게 작업할 수 있게 해 주는 최고의 프로그래밍 언어인 파이썬은 딥러닝, 데이터 사이언스, 인공지능 분야에서 많이 사용됩니다. 그럴 수 있는 것은 파이썬의 문법은 배우기 매우 쉬울 뿐만 아니라 응용력이 좋기 때문입니다. 파이썬은 언어 자체가 64bit를 넘어가고 허수를 기본 지원하고 소수점과 유리수를 정밀하게 다룰 수 있는 등 과학과 공학 분야에서 필요한 여러 기능을 기본적으로 제공합니다. 게다가 접근성이 좋고 문법이 통일되어 있어서 어떤 결과물(프로그램)에 대한 피드백이 활발하게 이루어지고 이는 궁극적으로 생산성 향상으로 이어집니다. 현업에서도 사용하기 쉽고 입문하기도 쉬워 교육과 실무 현장 모두에서 인기 있는 언어입니다.

최근 5년 사이 개발자로 취업을 준비하는 사람들이 기존에 비해 큰 폭으로 늘어났습니다. 전공자라면 보다 수월하게 준비할 수 있겠지만, 전혀 다른 분야를 공부하거나 전혀 상관없는 업계에 몸을 담고 있었다면 용어부터 매우 낯설게 느껴질 수 있는데요. 오늘은 가장 기본이 되는 개념인 프론트엔드 및 백엔드와 각각의 개발 환경에서 필요한 프로그래밍 언어에 대해 살펴보았습니다. 개발자를 꿈꾸는 분들께 조금이라도 도움이 되었기를 바랍니다.

필자 ㅣ 강태인

필자 약력 
- 現 커리어캔버스 대표
- 現 인천대학교 취업경력개발원 수석 컨설턴트
- 現 공기업/공공기관 전문 면접위원
- 現 한국관광공사 ICT인력채용 자문 파트너
- 前 대우증권 IB사업부
- 前 종로학력평가연구소 인재개발팀
- 前 서울시립대학교, 서울여자대학교 진로취업지원관
- 저서 <전공 진로 Road Map(2019, 디자인창)>

[IT 취업 가이드] 시리즈는 3주마다 월요일에 찾아옵니다.
본 콘텐츠의 저작권은 필자와 잡코리아 공동에게 있으며, 무단전재 및 재배포를 금지합니다.
외부 필자의 원고는 잡코리아 편집 방향과 다를 수 있습니다.

잡코리아 조현정 에디터 joehj1111@

시리즈 이어보기
> [IT 취업 가이드] 2021년 글로벌 IT 트렌드
> [IT 취업 가이드] IT 기획 업무 및 기업 규모별 차이점