brunch

매거진 말문을 트이게 만드는 IT 지식

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jin Jun 09. 2022

2. 개발자라고 다 같지 않다 : 프론트엔드/백엔드

말문을 트이게 만드는 IT 지식

“저는 프론트 개발자고, 이분은 백엔드 담당입니다.”
“이 부분은 프론트 담당자에게 말씀드려야 해요.”
“요즘은 파이썬으로 작업 많이 하죠”

일하다 보면 ‘프론트 엔드’, ‘백엔드’ 라는 말 한 번씩은 들어보셨죠? 매번 모호하게 대략 알고 있지 않으셨나요? 이번 기회에 확실하게 이해하고 가봅시다.

이번 글은 총 8개 중 2번째 글입니다. 원활한 이해를 위해 차례로 읽어보시는 것을 추천드려요. 글 하단에 모든 시리즈를 확인하실 수 있습니다.

Step 1. 프론트엔드와 백엔드

‘프론트엔드’, ‘백엔드’ 대체 무엇인가?

1. 프론트엔드(Front-end)

프론트엔드(Front-end)는 단어에서 예측할 수 있듯이 사용자의 앞에 보이는 화면, 즉 인터페이스를 만드는 작업이라고 볼 수 있습니다. 프론트에서 사용자가 선택한 요청사항에 따라 데이터나 서비스를 백엔드(Back-end)에 요청하거나 또는 요청해서 얻은 데이터를 사용자에게 보여주게 돼요. 보이는 인터페이스에 대한 개발인 만큼 사용자 인터페이스(UI)와 사용자 경험(UX)과 밀접한 관련이 있습니다.

2. 백엔드(Back-end)

백엔드(Back-end) 또한 단어에서 그 의미가 보이지 않나요? 백엔드 개발은 사용자의 뒤에서, 즉 보이지 않는 영역인 서버와 데이터베이스에 대해 작업을 하게 됩니다. 백엔드 개발을 통해서 프론트에서 요청한 데이터나 서비스를 잘 찾아가게끔 정리해주는 것이죠.

이 두 가지 개념을 클라이언트/서버 컴퓨팅 모델과 비교한다면, 프론트엔드는 클라이언트로, 백엔드는 서버로 이해할 수도 있어요.

※ [네이버 지식백과] Front-End — 프런트 엔드, 전위(前位) 처리 (지형 공간정보체계 용어사전, 2016. 1. 3., 이강원, 손호웅)

Step 2. 프론트 엔드 개발에서 어떤 언어를 사용하고 있나요?

프론트 엔드 개발 시, HTML과 CSS, Javascript 이 3가지 언어를 대표적으로 사용하고 있어요. 이 3가지 언어에 대한 개념 및 역할에 대해 함께 살펴볼게요.

1. 문서를 적는 언어, HTML (Hyper Text Markup Language)

HTML은 작성된 문서를 운영체제와 상관없이 브라우저만 있다면 다른 OS, 기기에서도 동일한 화면을 보기 위해 만들어졌습니다. HTML은 프로그램 언어라기보다 단순히 문서를 적은 언어에 가까운데요, 각 문서에 링크를 걸어 이곳저곳을 이동하며 정보를 얻기 위해(하이퍼링크의 개념) 개발되었습니다. HTML은 보고 계신 모든 웹사이트에서 바로 확인할 수 있어요. 지금 보고 계신 화면의 마우스 우클릭 후 [검사]를 선택하시면 아래와 같은 HTML 문서를 볼 수 있습니다.

2. 문서에 디자인을 입히는, CSS (Cascading Style Sheet)

이렇게 HTML로 브라우저만 있으면 어디서든 볼 수 있는 문서를 만들었다면, 다른 사이트와 구분하기 위해 디자인을 입혀줘야죠? HTML 문서에 색이나 컬러 등 디자인을 입혀주는 것을 CSS 코드가 합니다. 물론 HTML에서도 요소 하나하나에 디자인을 입힐 수 있지만, CSS 코드를 사용하게 되면 같은 요소는 일관된 디자인 스타일로 묶어서 관리할 수 있어요.

여기서 잠깐, 퍼블리싱? 마크업?

: 업계에서 일하다 보면, 퍼블리셔/퍼블리싱이라는 단어를 종종 들을 수 있는데요, HTML과 CSS를 합쳐서 ‘퍼블리싱’ 작업이라고 표현하고 이를 작업하는 사람을 ‘퍼블리셔’라고 보통 부릅니다. 또한 HTML의 Markup에서 ‘마크업’ 작업, ‘마크업’ 개발자라고도 불러요.

3. 브라우저가 움직일 수 있도록 해 주는, JavaScript (js)

자바스크립트는 웹 페이지의 동적인 화면을 구현하기 위해 사용되는 언어입니다. 동적인 화면이라고 하면 단순히 움직이는 애니메이션 요소만 떠올리는 경우가 많은데요, 그 외에도 사용자 입력한 값에 따라 출력된 데이터(응답)를 자동으로 HTML로 변환해주고, CSS도 추가하여 필요한 부분에 노출해주는 역할도 해요.

3–1. js가 사용되는 예시

구글에 검색창

이렇게 구글 검색창에 J를 입력하는 순간, 실시간 검색어 목록을 조회하는 API 요청을 서버로 보내고 받은 응답을 열어 HTML로 바꿔주고 필요하다면 CSS도 추가하여 해당하는 부분에 끼워 넣어줘요.

여기서 잠깐, 백엔드까지 사용 가능한 Javascript
: JavaScript의 경우 프론트엔드 뿐만 아니라 백엔드까지 사용 가능한 언어라고 해요.

Step 3. 백엔드 개발에서는 어떤 언어를 사용하고 있나요?

백엔드 개발 시에는 주로 PHP, Node.js, Javascript, C++, Java, Python 등이 대표적으로 사용되고 있어요. 그 중에서도 Java와 Python에 대해서 조금 더 알아보도록 해요.

1. 반복 작업을 줄여주는 Java, Python

앞서 1번째 글에서 배운 네이티브 앱에 대해서 기억하시나요?

※ 기억이 안 난다면 다시 보러 가기→ 1. 운영체제(OS)와 웹, 네이티브, 하이브리드

네이티브 앱에서는 각 OS에 해당하는 언어로 작업이 됩니다. 이 때문에 업데이트나 수정하기 위해서는 각각 해당하는 파일을 열어 반복적으로 수정 작업을 해줘야 해요.

이러한 문제를 해결하기 위해 등장한 언어가 Java와 Python입니다. Java에서 각 운영체제 위에 JVM (Java Virtual Machine)이라는 소프트웨어를 올려 자바 언어로 프로그램이 돌아갈 수 있게 합니다. 이렇게 하면 운영체제 별로 다르게 만들 필요 없이 자바로 만든 프로그램을 작동시키고 한번 수정하면 모두 적용될 수 있게 됩니다.