본문 바로가기
IT Note/IT Basics

[IT샐러드] 스타트업 업무 용어 정리 2탄 - 개발 프로세스 편

랴망 2021. 11. 30. 23:59

Photo by Louise Viallesoubranne on Unsplash

당신이 이제 막 비개발자로서 개발 조직에 입문했다면, 이제 기술 용어의 홍수 속에 살게 될 것이다.

특히 주변 팀원들이 숨쉬듯 사용하고 있는 기본적인 개발 실무 용어들을 이해하는 데 애를 먹는 경우가 많을 것이다. 
모두가 당연히 알고 있다고 가정해서 그런 지 물어보기도 애매하고, 비개발자 입장에서 이러한 용어를 일목요연하게 설명한 글도 자료도 찾기 어렵기 때문이다. 

오늘은 나와 같은 사람들을 위해, 실무 개발 프로세스 각 단계별로 하는 일을 정리해보았다. 
나와 같은 처지의 비개발자 분들이, 각 개발 조직의 역할과 주요 용어를 파악하여 업무에 빠르게 적응하는 데 도움이 되었으면 좋겠다.

(피드백과 오류 지적도 환영..😭)

실무 개발 싸이클

기획 > 디자인 > 퍼블리싱(마크업) > 프론트엔드(FE) 개발> 백엔드(BE) 개발 > QA > 릴리즈 > 운영/유지보수(SM)
                            [1-1.프론트엔드/클라이언트 파트]   [1-2. 백엔드/서버 파트]


실제로는 기업마다 업무의 순서, 구성, 용어가 다르기도 하지만, 우리 회사의 기준으로 작성해보았다.

사용자가 볼 수 있는 웹사이트나 앱을 개발하는 파트가 1-1. 프론트엔드/클라이언트 파트, 사용자가 볼 수는 없지만 웹사이트나 앱의 뒷단에서 사용자의 요청을 처리하는 파트가 1-2. 백엔드/서버파트라고 볼 수 있다.

이후 QA에서 디바이스/OS별 테스트/검수를 마치고 서비스를 릴리즈한 뒤 지속적인 유지보수를 하게 된다.

이제 조금 더 자세히 각 파트에서 어떤 일을 하는 지 살펴보도록 하겠다. 

 

프론트 엔드/클라이언트 사이드 파트


✔️하는 일: 비즈니스 로직을 짜고 사용자와 상호작용할 수 있는 인터페이스(UI) 개발

✔️관심사: 더 나은 사용자 경험(UX)을 제공하자!

✔️업무 영역:

1) 퍼블리싱(마크업): 사용자에게 노출되는 화면(View)의 디자인 영역을 작업
 ㄴ 담당자: 마크업 개발자 = 웹퍼블리셔 = UI개발자
 ㄴ 사용 언어: 마크업 언어 -> HTML (웹페이지의 기본 레이아웃 제작), CSS (레이아웃에 디자인 입힘)

💡마크업 언어란?
문서나 데이터의 구조를 나타내는 언어로, 컴퓨터를 구동시키는 SW를 만들기 위한 언어인 "프로그래밍 언어"와는 차이가 있다. HTML, XML 등이 마크업 언어에 해당된다. 최근, 문법이 더 쉽고 간결하여 텍스트 기반의 블로그나 위키 문서 등을 편리하게 작성할 수 있는 "가벼운 마크업 언어 (Lightweight Markup Language)"가 많이 쓰이고 있으며, 마크다운(Markdown), JSON이 이에 해당된다. 


2) 프론트엔드 개발: 마크업 개발자가 만든 디자인 완료된 레이아웃을 기반으로, 백엔드 개발자가 만든 API를 통해 서버와 통신하여 실제로 웹/앱에서 데이터가 입출력되는 비즈니스 로직 구현  
 ㄴ 담당자: 프론트엔드 개발자 = 클라이언트 개발자 
 ㄴ 사용 언어: JavaScript 

 

백엔드/서버 사이드 파트 

✔️하는 일: 사용자와 직접적으로 상호작용하지는 않지만, 프론트엔드에서 사용자가 취하는 행동들을 받고 처리하는 서버, 데이터베이스 단의 개발 

✔️관심사: 시스템을 안정적이고 효율적으로 만들자! (= 성능 🆙)

✔️업무 영역: 

1) API 개발: 프론트엔드와 연동할 수 있는 API 작성 및 API 서버 개발
 ㄴ 프론트엔드가 백엔드에 어떤 정보를 어떻게 요청해야하며, 어떻게 반환되는 지에 대한 인터페이스 규격으로 REST API, GraphQL API를 활용한다. 
 ㄴ 이 때, 프레임워크를 이용하면 보다 간편하게 API를 만들고 데이터베이스와 데이터를 주고 받을 수 있다. 
 ㄴ 각 프레임워크 별로 사용하는 개발 언어는 다양하다. 
    : Spring(Java 언어), django(Phython 언어), Laravel (PHP 언어) 등
 ㄴ 이렇게 만들어진 API를 서버에 올려 서비스하게 되고, 이 때 그 유명한 AWS EC2 위에 주로 구축한다. 
 ㄴ API를 프론트엔드나 다른 백엔드 팀이 잘 활용할 수 있도록, 문서화도 매우 중요하다. 
    : 문서화 도구로는 Swagger, Gitbook 등을 이용한다.

2) DB 구축/설계: 어떤 데이터를 어디에 저장할 것인지 설계하고 관리 

 

웹 서비스의 구조에 따른 프론트/백엔드 개발 

웹서비스의 구조에서 프론트 엔드와 백엔드의 영역을 나누어 보면 이해가 더 잘될 것이다.

출처: https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html

일반적인 웹서비스는 위 그림과 같이, 클라이언트(웹 브라우저/모바일 앱)-웹서버-WAS서버-DB서버의 구조를 띈다. 

✔️클라이언트 ~ 웹서버 개발 -> 프론트 엔드의 영역
✔️WAS서버 ~ DB서버 개발 -> 백엔드의 영역 


1) 웹 서버: 사용자가 웹브라우저에서 요청한 웹사이트를 (=HTTP 요청) 사용자에게 제공하는 역할
 ㄴ 누구에게나 항상 동일하게 보여지는 정적인 컨텐츠 제공 (HTML, CSS, JavaScript, image 등)
 ㄴ ex. 내가 만들어 놓은 포트폴리오 사이트 
 ㄴ 받은 요청이 동적인 사이트에 대한 요청이라면, 아래의 WAS에게 해당 요청을 넘김.

2) WAS(Web Application Server): 웹서버와 어플리케이션 사이에서 동적인 컨텐츠를 생성하는 미들웨어  
 ㄴ 웹서버를 통해 요청을 전달받은 후, 데이터베이스에서 정보를 가져오거나 데이터베이스에 정보를 저장하는 등의 동작을 수행하고, 이에 대한 결과값을 다시 웹서버에게 전달해줌.
 ㄴ 웹서버가 단독으로 처리할 수 없는 DB 조회나 비즈니스 로직 처리가 필요한 동적인 컨텐츠 제공 (JSP, PHP, ASP)
 ㄴ ex. 로그인 기능 등 웹사이트 화면이 접속한 회원 정보에 맞게 비즈니스 로직이 적용되어서 보여짐. 

3) DB(Database) 서버: WAS의 요청을 처리하기 위해 필요한 데이터를 담고 있음 
 ㄴ MySQL, Oracle ,SQL Sever 등이 있음.

내용이 길어져, 이만 줄이고 다음 편을 기약하며 마무리하겠다. :)
다음에 조금 더 자세히 다루고픈 용어는 다음과 같다.

DNS, TCP/IP, SDK/라이브러리/프레임워크, 게이트웨이, 쿠키, 세션, 캐시, 토큰
SSO(IdP, LDAP, SAML, Oauth, OIDC)
DevOps, CI/CD
형상관리 (SVN, CVS, Git) 등등...

참고링크

반응형
저작자표시 비영리 변경금지

'IT Note > IT Basics' 카테고리의 다른 글

서비스 기획 산출물 톺아보기📚  (0) 2022.07.25
[IT샐러드] 문과생을 위한 HTTP통신, 쿠키, 세션, 토큰, 인증, 인가 이해하기  (0) 2022.01.24
[IT샐러드] 스타트업 업무 용어 정리 1탄 - 업무 문화 편  (0) 2021.08.28
[IT샐러드] 비전공자를 위한 API 이해하기  (0) 2021.03.31
[IT샐러드] 장고(Django)?스프링(Spring)? '프레임워크'가 뭔가요?  (4) 2020.01.13

'IT Note/IT Basics' Related Articles

티스토리툴바