brunch

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)이라는 소프트웨어를 올려 자바 언어로 프로그램이 돌아갈 수 있게 합니다. 이렇게 하면 운영체제 별로 다르게 만들 필요 없이 자바로 만든 프로그램을 작동시키고 한번 수정하면 모두 적용될 수 있게 됩니다.

Java뿐만 아니라 파이썬이러한 방식을 취하고 있어요. 그럼 ' JAVA 파이썬으로 만들면 되는  아닌가?' 하는 생각이 들지 않나요?


모바일 시장의 경우 ios android, 2개의 os 양분화되어있고, 모바일은 pc보다 용량이나 성능에 제한이 있어요. 기존 os위에 또 프로그램을 이중으로 돌린다면 아주 느려지게 돼요. 그래서 상대적으로 모바일에서는 이러한 개념이  발전하게 됩니다.




2번째 글에서는 프론트엔드와 백엔드에 대한 개념과 이에 따른 개발 언어 종류에 대해서 알아봤어요. 이제 각 언어를 어떤 개발자들이 사용하고 있는지 알게 되었네요! 다음 3번째 글에서는 개발자들의 ‘어도비, 피그마’는 무엇인지 알아보도록 할게요.


잘못된 표현이나 추가적으로 덧붙이고 싶은 내용이 있다면 언제든 댓글 달아주세요 :)


글쓴이: Jin (Jieun)


User Experience가 무엇인지 정립하고 있는 2년 차 UX 기획자입니다. 얇고 넓은 호기심을 가지고 있어 궁금한 것이 많고 해보고 싶은 것도 많아요. 아직 어떻게, 어디까지 성장할지 모르는 게 가장 큰 장점입니다 :)


※ 참고 자료

https://book.naver.com/bookdb/book_detail.nhn?bid=16415934

https://yozm.wishket.com/magazine/detail/236/

https://spartacodingclub.kr/community/blog/615192391014d41767f00955


✔︎ 다른 시리즈 보러 가기

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

1. 운영체제(OS)와 웹, 네이티브, 하이브리드 

2. 개발자라고 다 같지 않다 : 프론트엔드, 백엔드 → 현재글

3. 밤샘 개발을 줄여주는 도구들 : 라이브러리, 프레임워크, SDK

4. 한 번 보면 더 볼 일 없는 네트워크 관련 용어들

5. 갑자기 물어보면 말문이 막히는 서버와 클라이언트

6. 서버와 클라이언트, 그 사이의 용어들

7. 화면 크기에 반응하는 웹 UI : 반응형 웹, dp, dpi, em, rem

8. 모두를 위한 서비스 : 웹 접근성, 대체텍스트

9. 콘텐츠의 재탄생 : 파싱, 크롤링

10. 데이터 바꿔치기 : SPA


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari