웹/앱 외주 개발 시 꼭 알아야 하는 IT용어 - 웹

안녕하세요, IT 아웃소싱 플랫폼 위시켓입니다.

위시켓은 자신의 아이디어를 앱이나 웹으로 구현하고 싶어 하시는 클라이언트님(의뢰자)과 IT 전문가 파트너님(기획자/디자이너/개발자)을 매칭해드리는 플랫폼입니다.

프로젝트 의뢰 시, 위시켓 매니저도 중간에서 원활한 커뮤니케이션과 계약 진행을 도와드리기 위해 클라이언트님과 파트너님의 미팅에 함께 참석하고 있는데요.

미팅이 끝난 뒤 클라이언트님들이 이렇게 말씀하실 때가 있습니다.

저어, 매니저님 사실은 미팅 내내 무슨 말인지 하나도 못 알아들었어요.

제가 개발 쪽은 영 모르거든요.. 하하.

그래서 위시켓이 준비했습니다!

앱/웹 외주 시 꼭 알아둬야 할 기본 IT용어 - 웹

클라이언트/서버(프론트엔드/백엔드)가 뭐죠?

모든 웹사이트나 앱은 두 가지 파트로 구성되어 있습니다.

바로 클라이언트와 서버입니다.
(완전한 동의어는 아니지만) 프론트엔드(front-end)와 백엔드(back-end)라고도 합니다.

프론트엔드는 우리가 웹 사이트나 앱에서 볼 수 있는 화면들입니다. 아래 위시켓 랜딩페이지를 볼까요? 위시켓 로고, 이미지, 텍스트, 버튼 등 화면에 보이는 것들이 바로 프론트엔드인 거죠.

이때 여러분이 랜딩페이지에서 [무료로 프로젝트 등록하기]를 클릭해 의뢰하는 프로젝트 내용을 작성하고 [제출하기] 버튼을 누르면 작성한 데이터를 받아 저장하는 작업이 백엔드에서 이루어집니다.

프론트엔드, 백엔드에 대해 조금 더 자세히 알아볼까요?

1. 프론트엔드(HTML, CSS, JavaScript)

웹 프론트엔드는 HTML, CSS, JavaScript(자바스크립트)로 구성됩니다.

HTML

여러분이 보는 웹사이트들의 배치/구성은 HTML을 사용해 만들어집니다. HTML은 수많은 태그(tag)들로 이루어진 마크업 언어(markup language)입니다.

CSS

CSS는 HTML로 뼈대만 만들어둔 배치/구성(레이아웃)을 좀 더 예쁘게 만들기 위해서 사용하는 것이라고 생각하시면 됩니다. CSS를 사용해 색상, 사이즈, 배경, 음영 등을 활용해서 콘텐츠를 다양하게 꾸밀 수 있습니다. CSS 작업 시 가장 많이 활용되는 프레임워크로는 부트스트랩(Bootstrap)이 있습니다.

JavaScript

JavaScript(자바스크립트)는 프론트엔드에서 쓰이는 개발 언어입니다. 자바스크립트는 웹 사이트의 동적인 부분을 담당하고 있는데요.

그 전에 동적인 부분이 뭐지?라고 생각하실 수 있겠네요.
위시켓 사이트 랜딩페이지를 예로 들면, 랜딩페이지 내 숫자들(아래 이미지를 봐주세요)이 실시간으로 카운팅 되는 것을 '동적 요소'라고 할 수 있습니다.

(위 이미지를 클릭하면 랜딩페이지에서 숫자가 쫘르르륵! 바뀌는 모습을 볼 수 있습니다.)

이처럼 다양한 움직임, 애니메이션 효과, 유효성 검증, 비즈니스에 필요한 로직 등을 자바스크립트로 구현할 수 있습니다.

하지만, 자바스크립트의 동적 요소들은 웹사이트에 방문하는 유저들의 PC나 크롬과 같은 브라우저에서 실행되기 때문에 유저의 설정이나 브라우저 환경의 영향을 받습니다. 프로그래밍을 해도 모든 환경에서 동일하게 실행되지 않을 수도 있다는 거죠.

또한 자바스크립트 코드는 누구나 볼 수 있기 때문에, 비즈니스 로직을 프론트엔드에 구현하는 것은 권장하지 않습니다.

자바스크립트도 다양한 라이브러리나 프레임워크가 있는데요. 그중, 제이쿼리(jQuery)와 앵귤러제이에스(AngularJS)가 가장 많이 쓰이고 있습니다.

이제 백엔드로 넘어가겠습니다.

2. 백엔드(서버/서버 개발 언어/DB)

백엔드는 우리가 볼 수 없는 영역으로, 서버에서 실행됩니다.

서버

서버는 백엔드의 프로세스를 처리하고, 프론트엔드에서 넘어온 데이터를 저장하는 공간입니다.

여러분이 구현하고자 하는 웹/앱 서비스를 운영하기 위해서는 이 서버라는 공간이 꼭 필요합니다. 물론, 여러분의 PC를 서버로 만들어 사용할 수도 있지만 여러 가지 한계가 있기 때문에 대부분 '호스팅'을 활용하고 있습니다.

*여기서 호스팅에 대해 더욱 쉽게 알려드릴게요!

서버 개발 언어

백엔드에서는 프론트엔드에서 넘어오는 데이터를 처리하기 위한 프로그래밍이 필요합니다.

이 작업을 위해 서버에서 사용하는 개발 언어들이 있는데요. 대표적인 개발 언어(서버사이드 스크립트 언어)로는 PHP, 파이썬(Python), 노드(Node.js), 루비(Ruby) 등이 있습니다. 앱/웹 서비스의 모든 비즈니스 로직은 서버 쪽 언어를 통해 구현되고 있지요. 백엔드에서 개발된 코드들은 전부 '서버'에 위치하고 있기 때문에 훨씬 안전합니다.

DB

프론트엔드에서 넘어온 '회원가입 정보'(데이터)를 이제는 어딘가에 저장해야겠죠? 데이터를 저장하는 장소를 데이터베이스(DB, DataBase)라고 부릅니다. 데이터베이스를 관리하는 시스템도 있는데요. 데이터베이스 관리 시스템의 대표적인 예로는 마이에스큐엘(MySQl), 몽고디비(MongoDB) 등이 있습니다.

*SQL이 뭐지?
데이터베이스 관리 시스템을 찾아보면 PostgreSQL, MySQL처럼 이름에 'SQL'이라는 단어가 들어가 있는 것을 보실 수 있는데요. 데이터베이스에 데이터를 만들고, 찾고, 수정하고, 지우는 것에 사용되는 언어를 SQL이라고 부릅니다.

지금까지 웹과 관련된 IT 용어들을 알아보았는데요.
내용이 많이 어렵지는 않으셨나요?

이번 글을 통해 클라이언트/서버의 개념과 '웹' 관련 용어로 기초를 다지셨으니,
다음 글에서는 '모바일(앱)' 쪽에서 많이 사용되는 IT 용어들을 소개드리도록 하겠습니다.