비전공자도 이해할 수 있는 프론트엔드, 백엔드의 모든 것 - 입문편(프론트엔드와 벡엔드의 뜻, 언어 등)

안녕하세요, 스파르타 코딩클럽입니다.

웹 개발은 크게 프론트엔드와 백엔드 개발로 나눌 수 있습니다. 지금까지 단순히 프론트엔드는 웹 서비스의 사용자가 볼 수 있는 부분, 백엔드는 사용자가 볼 수 없는 서비스의 뒷부분이라고만 이해하고 계셨나요? 그렇다면 이번 글 시리즈를 끝까지 읽으시는 것을 추천드립니다.

두 가지 개발 유형의 뜻부터 사용하는 언어, 프레임워크, 각 개발 분야별로 적합한 개발자 성향 등을 알아보는 시간을 가질 텐데요. 비전공자부터 예비 개발자, 혹은 주니어 개발자들 모두에게 유용한 글이 될 겁니다.

→ 2탄. '프론트엔드와 백엔드의 프레임워크, 개발 분야별 성향' 시리즈 글 읽으러 가기

잠깐, 스파르타 코딩클럽은 왕초보 비개발자를 위한 온라인 코딩 교육 플랫폼입니다. 현재 8만 명 이상의 수강생들이 강의를 수강했고, 75%의 높은 완주율을 보이고 있습니다. 달달 외우는 지루한 코딩 공부가 아닌, 내 것을 끝까지 만들어 보며 손으로 직접 익히는 재미있는 코딩 공부를 하고 싶으시다면 한 번 알아보세요!

→ 스파르타 코딩클럽 수업 탐색하기

목차
1. 프론트엔드(Front-End)와 백엔드(Back-End)의 뜻
2. 사용하는 언어
　- 프론트엔드 개발에서 사용하는 언어
　- 백엔드 개발에서 사용하는 언어

프론트엔드(Front-End)와 백엔드(Back-End)의 뜻

프론트엔드(Front-End)

웹 애플리케이션(우리가 흔히 말하는 ‘웹 사이트’와 거의 동일한 개념이라고 보시면 됩니다)은 크게 프론트엔드와 백엔드로 나뉩니다. 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 말하는데요.

프론트엔드는 사람들이 웹 애플리케이션을 쉽게 사용할 수 있도록 기술적으로 구현되어 있어야 합니다. 그래야 사람들이 많이 사용할 것이고, 많이 사용하는 서비스가 곧 시장에서 경쟁력 있는 서비스가 되기 때문입니다. 따라서 프론트엔드 개발자는 웹 애플리케이션의 사용자 인터페이스와 사용자 경험(User Experience, UX) 최적화에 초점을 맞추어 서비스를 개발해야 합니다.

백엔드(Back-End)

백엔드는 웹 애플리케이션의 사용자가 보지 못하는 영역인 서버나 데이터베이스를 관리하는 기술입니다. 프론트엔드는 사용자가 웹 서비스를 편하게 이용할 수 있도록 사용자 인터페이스를 다룬다면, 백엔드는 실질적으로 사용자들이 원하는 정보를 제공할 수 있도록 데이터를 관리하거나 서버를 운영하는 일을 합니다.

다시 말해, 백엔드는 프론트엔드에 있는 사용자들이 하고자 하는 행동을 처리하는 것입니다. 따라서 백엔드 개발자는 시스템 컴포넌트 작업, API작성, 라이브러리 생성, 데이터베이스 통합 등 다양한 개발 활동을 하게 됩니다.

사용하는 언어

개발할 때 사용하는 프로그래밍 언어는 정말 다양합니다. 그리고 프론트엔드와 백엔드, 개발 분야에 따라 각기 다른 언어들이 사용되기도 하는데요.(→ ‘프로그래밍 언어 선택 비결’ 글 읽으러 가기) 각 분야별로 어떤 언어들이 대표적으로 사용될까요?

프론트엔드 개발에서 사용하는 언어

1. HTML(Hyper Text Markup Language)

HTML은 프론트엔드 개발에 있어 빠져서는 안 되는 언어입니다. 코딩을 전혀 모르시는 분들도 HTML은 한 번쯤 들어보셨을 텐데요. HTML은 말 그대로 해석하시면 언어에 대한 이해가 빠릅니다. 함께 해석해 볼까요?

HTML은 하이퍼 텍스트와 마크업 랭귀지, 두 개로 나눌 수 있습니다. 하이퍼 텍스트는 ‘텍스트를 뛰어넘는다’라는 뜻인데요. 우리는 보통 텍스트를 순차적으로 읽고, 이해해서 정보를 습득합니다. 이리 갔다, 저리 갔다 하며 글을 읽지는 않죠. 하지만 하이퍼 텍스트는 원하는 정보만 빠르게 습득하기 위해 순차적인 정보 습득 과정을 뛰어넘습니다. 예를 들면, 이 글을 읽고 계신 여러분 중에 프레임워크가 궁금하신 분들이 있다면 여기를 클릭해 보세요. 휴, 잘 갔다 오셨나요? 이런 게 바로 하이퍼 텍스트입니다.

마크업 랭귀지에서 마크업은 특정 표시를 통해 문장을 구분 짓는 것을 말합니다. 여기서 랭귀지는 컴퓨터에게 명령을 내리기 위해 사용하는 언어를 말하고요. 즉 마크업 랭귀지는 특정 표시를 통해 컴퓨터에게 명령을 내리는 것이라고 볼 수 있겠습니다. 다시 말해, 웹 애플리케이션을 개발할 때 웹 페이지의 구조를 정의하는 데에 사용되는 언어가 바로 마크업 랭귀지입니다.

2. CSS(Cascading Style Sheets)

CSS는 HTML이라는 웹 애플리케이션의 뼈대 위에 예쁘게 화장하고, 장식하는 역할을 합니다. 즉 마크업 언어가 실제로 사용자에게 보여지는 방법을 기술하는 것이 CSS라고 할 수 있겠습니다. CSS는 말 그대로 종속형 시트인데요. HTML에 종속되어 HTML을 꾸미는 역할을 하는 것이죠.

사실 HTML 태그만으로도 웹 애플리케이션을 꾸밀 수 있습니다. 하지만 일일이 태그를 입력해 줘야 하기 때문에 시간이 오래 걸리고 수정이 불편하다는 단점이 있습니다. 이에 반해 CSS를 사용하면 한 가지 태그로 다수의 내용을 한꺼번에 수정할 수 있습니다. 따라서 HTML로만 웹 페이지를 만들 때보다 시간을 단축할 수 있고, 수정도 용이해 편리합니다.

CSS는 마치 어렸을 때 했던 옷 입히기 게임과 유사하다고 보시면 이해가 빠르실 거예요.

3. JavaScript

자바스크립트는 객체(Object) 기반의 스크립트 언어입니다. 스크립트 언어란, 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킵니다. 자바스크립트 외에도 제이쿼리(jQuery), PHP, 파이썬(Python), 루비(Ruby) 등이 스크립트 언어에 해당합니다.(이외에도 더 많은 스크립트 언어가 존재합니다.)

객체 지향 언어가 무엇인지도 짧게 설명해 드리겠습니다. 객체 지향 언어를 사용해 프로그래밍을 하게 되면, 다수의 ‘객체’를 생성해 그 객체들이 서로 상호작용하며 프로그램을 구축하게 됩니다. 예를 들면, 우리의 몸을 구성하는 팔, 손, 목, 가슴, 배, 허리, 엉덩이, 허벅지, 무릎, 종아리, 발 등의 객체를 생성합니다. 그렇게 되면 우리는 ‘몸을 움직여 피아노를 쳐라’라고 하기보다는 ‘손목은 가만히 있고 팔만 자연스럽게 움직여서 피아노를 쳐라’라는 세부적인 명령을 통해 피아노를 올바른 자세로 칠 수 있게 되는 것입니다. 이렇게 객체 지향 언어를 사용해 프로그래밍을 하면 프로그램을 구동하는 시간을 단축시킬 수 있고, 에러가 나더라도 그 부분만 수정하면 되기 때문에 보다 효율적이라는 장점이 있습니다.

프론트엔드에서 HTML로 웹의 뼈대, 즉 내용을 작성하고, CSS로는 웹을 꾸몄다면, 자바스크립트로는 웹 애플리케이션의 동작을 구현할 수 있습니다. 사용자가 웹 애플리케이션을 사용할 때 보게 되는 화면은 HTML, CSS, 자바스크립트 삼박자가 어우러져 움직이는 것이라고 할 수 있습니다.

백엔드 개발에서 사용하는 언어

지금까지 프론트엔드에서 사용하는 대표적인 언어 세 가지를 알아보았는데요. 이번에는 백엔드에서 사용하는 언어들을 알아보도록 해요.

1. Java

자바는 가장 인기 있는 프로그래밍 언어 중 하나로, 대표적인 객체 지향 프로그래밍(Object Oriented Programming, OOP) 언어입니다. 자바는 웹 애플리케이션 개발에 가장 많이 사용되지만, 웹 개발 이외에도 서버, 모바일, 임베디드 등 다양한 분야에서 사용되고 있습니다. 자바는 특수한 가상 머신(Java Virtual Machine, JVM)이 필요합니다. 이 말인즉슨 JVM을 설치할 수만 있다면 어느 환경에서든지 자바로 개발된 프로그램을 실행할 수 있다는 뜻이 됩니다. 이러한 이유로 자바는 다양한 분야에서 이용하고 있습니다.

자바는 사용할 수 있는 라이브러리의 양 또한 많은데요. 이미 잘 짜여 있는 검증된 오픈 소스 라이브러리를 사용하면 애플리케이션을 다시 컴파일, 즉 컴퓨터가 이해할 수 있는 이진수 언어로 변환할 필요가 없습니다. 따라서 자바로 짜여진 프로그램은 유지 보수가 용이하다는 장점이 있습니다.

2. PHP

PHP는 하이퍼텍스트 전처리기(Hypertext Preprocessor)의 약자로, 웹 개발 중에서 서버 측에서 주로 사용하는 프로그래밍 언어입니다. PHP는 쉽게 설치할 수 있고, 배우는 데 허들도 낮은 편이라 많은 사랑을 받고 있는 언어입니다. 이러한 PHP의 장점은 단점으로 이어지기도 합니다. PHP는 높은 자유도를 가지고 있기 때문에 코드가 난잡해진다는 단점이 있습니다.

(출처 : Stack Overflow Developer Survey 2021)

예전에는 PHP를 사용해 만든 웹 서비스가 많았지만, 이제는 점점 줄어드는 추세입니다. 프로그래밍 언어 순위를 보아도 PHP를 선호하는 정도는 급격히 감소하고 있는 것을 확인하실 수 있습니다.

3. Ruby

루비는 일본 개발자 유키히로 마츠모토(Yukihiro Mastumoto)가 개발한 스크립트 언어로, 이 역시 객체 지향 프로그래밍 언어 중 하나입니다. 인간에게 친화적인 언어를 개발하고자 했던 개발자의 의도대로 루비는 명령어를 작성하기에 편한 언어로 알려져 있습니다.

인간 중심적 언어로서 루비는 파이썬과 자주 비교되고는 하는데요. 전세계적으로 보면 파이썬의 인기가 월등히 높고, 사람들의 선호도 역시 파이썬이 훨씬 더 높은 편입니다.

4. Python

파이썬은 개발자들이 시스템을 효율적으로 통합하고, 빠르게 작업할 수 있게 해주는 최고의 프로그래밍 언어입니다. 비교적 자연어와 유사하기 때문에 개발을 처음 접하시는 분들도 파이썬을 이용한다면 쉽게 프로그래밍을 하실 수 있습니다.

또한, 파이썬은 인공지능 분야에도 사용되는 언어입니다. 인공지능 영역이 빠르게 발전하면서 파이썬의 점유율은 함께 빠르게 성장하고 있습니다. 실제로 글로벌 기업들을 포함해 많은 기업들이 파이썬으로 웹 개발을 하고 있기 때문에 웹 개발자로 성장하고 싶으시다면 파이썬을 익히시는 것을 꼭 추천드립니다.

이제 프론트엔드와 백엔드의 차이를 명확히 아시겠죠? 또, 개발 분야에 따라 사용되는 다양한 프로그래밍 언어들도 살펴보았는데요.

무궁무진한 코딩의 세계가 궁금하시다면 스파르타 코딩클럽의 '웹개발 종합반'으로 시작해 보세요. 웹개발 종합반 수업은 특히나 비개발자 코딩 왕초보도 쉽게 따라 하실 수 있는 8주 과정입니다. 5주 동안 강의를 들으며 실제로 웹 서비스를 하나 만들어 보고, 나머지 3주는 여러분의 아이디어를 기반으로 여러분만의 웹 서비스를 만드실 수 있습니다. 이론만 공부하는 재미없는 수업이 아니라, 나만의 웹 서비스를 만들어 보는 실습 중심 수업이기 때문에 제대로 개발을 경험하실 수 있습니다.

본인의 아이디어에 SW역량을 더해 여러분만의 세상을 펼치세요. 누구나 큰 일 낼 수 있습니다. 스파르타 코딩클럽과 함께하세요.

→ 스파르타 코딩클럽 바로가기

스파르타코딩클럽

왕초보 8주 완성! 웹/앱/게임 빠르게 배우고 내것을 만드세요!

spartacodingclub.kr