프론트엔드와 백엔드

UI디자이너로 일하면서 기획자, 개발자와 협업이 많은데 특히 이슈가 생겼을 때 개발자 중 누구과 소통해야할지 헷갈릴 때가 많습니다. 그리고 개발자와 소통할때 다소 낯선 용어들을 쓸때 가끔 혼란스러울 때가 있습니다.

 

개발분야에 대한 이해가 미흡한 디자이너 입장에서 모든 개발자는 말그대로 개발자로 뭉뚱그려집니다.

 

프론트엔드? 백엔드? 무슨말이지?

앱 디자인으로 치자면 BX, UX/UI, Graphic, Interaction 등 여러 포지션의 디자인이 맞물려 하나의 제품이 되듯 당연히 개발도 포지션에 따라 담당하는 업무가 다릅니다.

 

개발은 크게 프론트엔드와 백엔드로 포지션이 나뉩니다. 양쪽 모두 다루는 개발자는 풀스텍이라 부릅니다. 유저가 눈으로 직접 보는 화면을 가공하거나, 눈에 보이지 않는 DB나 서버를 구축 운용하거나. 말그대로 눈앞에 보이는 부분이 Front-End 보이지 않는 뒷부분을 Back-end라 생각하면 됩니다. 디자이너는 보통 화면을 다루는 프론트엔드 개발자와 소통이 잦은편입니다.

 

프론트엔드와 백엔드에 대해 좀 더 자세한 내용은 아래에 정리해보았습니다.

 

프론트엔드 : Front-End (Client Side)

유저가 눈으로 직접 화면을 보며 상호 작용하는 모든 부분이 프론트엔드 개발에 속합니다.

ex) 로그인화면

 

기본적으로 프론트 엔드 개발자는 HTML, CSS 및 JavaScript 세 가지 언어를 사용합니다.

그리고 이 기본 기술을 편하게 잘 다루기 위해, React.js, AngularJS, Vue.js 등 다양한 추가 요소들이 있지만

기본적인 언어만 간략히 알아보겠습니다.

 

HTML 뼈대, 구조를 설계하는 역할

검색창 넣어!

버튼 넣어!

이미지 넣어!

 

CSS 살과 옷을 입히는 역할

크기 키워!

컬러 넣어!

위치 바꿔!

 

javascript 반응해서 움직이게 하는 역할

○○했을 때 ○○해라!

반복적으로 ○○해라!

만약 ○○인 경우 ○○ 해라!

 

백엔드 : Back-End (Sever Side)

화면에 보여줄 정보를 저장, 처리, 가공하는 부분으로 프론트 엔드 언어에 생명을 불어 넣는 논리를 만듭니다. 백엔드는 보이지않지만 유저들이 취하는 행동들을 처리하며 유저들은 백엔드에 간접적으로 액세스하는 것입니다. 백엔드 개발에는 유저 인터페이스가 없는 시스템 컴포넌트 작업, API작성, 라이브러리 생성, 데이터베이스 통합 등 다양한 활동들이 포함되어 있습니다.

ex) ID/PW 확인 로직

 

대다수의 백엔드 개발자는 이미 프런트 엔드 언어를 알고 있으며 그 외에도 Phyton, Ruby, PHP, Java, SQL, Node.js, .Net 등의 언어를 사용합니다. 요즈음의 백엔드 개발 언어 트렌드는 파이썬과 루비로 보여집니다.

 

Python 효율적으로 통합하고, 빠르게 작업할 수 있으며 간결한 문법으로 입문자가 이해하기 쉬운 언어

 

Ruby 인터프리터 방식의 객체 지향 스크립트 언어

 

PHP 동적으로 HTML 데이터를 생성하여 동적 웹페이지를 제공하는 것을 주된 목적으로 하는 서버 측 스크립트 언어

 

Java 객체지향프로그래밍 언어로서 c/c++에 비해 간략하고 쉬우며 네트워크 기능의 구현이 용이한 언어