[Bootstrap] 부트스트랩3 그리고 프론트엔드(front-end)와 백엔드(back-end)

■부트스트랩을 소개하며

 한밭대학교 무선통신 소프트웨어 연구실(Wireless Communication Software Laboratory, WISOFT)에 들어와서 첫 세미나로 아두이노 세미나를 진행했고, 다음 세미나로 개발 생산성이 뛰어난 node.js를 통해 웹 프로그래밍의 전반적인 흐름을 맛보던 중, 브라우저 주소 입력창에 http://localhost:3000을 입력하고 나서 크롬 브라우저 화면에 찍힌 Hello, World! 를 보고, 현재까지 웹에 대해서, 특히 서버사이드 기술에 대해 관심을 가지고 묵묵히 공부를 하고 있다. 한동안(꽤나 긴 시간이 될 것으로 예상한다.) 이 쪽에 푹 빠져 있을 것 같다.

 한창 백엔드 개발자가 될 준비를 하고 있는 나에게, 그리고 학부 2, 3학년 동안 참여했던 기술경진대회, 각종 공모전에서 개발한 시스템을 실제로 보여주고 시연해야 할 상황에서 UI 구현에 가장 도움을 많이 주었던 기술이 부트스트랩이다. 앞으로도 많은 도움을 받을 것 같다:)

 부트스트랩을 본격적으로 소개하기 전에, 웹의 프론트엔드와 백엔드라는 용어를 개념적으로 쉽게 이해 할 수 있도록 설명을 추가한다. (필자도 처음 개발 세계에 입문 했을 때, 가장 크다고 느꼇던 벽이 '용어에 대한 이해' 였다. 이는 시간이 점점 흐를 수록 점점 허물어 지는 벽으로, 단시간 내에 해결될 수 있는 문제는 아니라고 개인적으로 생각한다. 한마디로 '시간'이 약이다. 물론, 그냥 흘려보내는 시간은 당연히 제외 된다.) 

■Front-End vs Back-End

 프론트엔드와 백엔드의 개념을 음식점에 비유해서 이해를 돕고자 한다. 우리가 흔히 '프론트엔드'라고 칭하는 용어는 음식점에서 카운터가 포함된 홀에 비유할 수 있다. 고객(클라이언트)은 웹 페이지를 통해서 서버에 어떤 데이터를 요청하거나, 전달 할 수 있다. 마찬가지로 음식점을 방문한 고객들도 음식점의 카운터(프론트엔드)를 통해서 주방으로 주문(데이터)을 전달하거나, 요청 할 수 있다.

 음식점의 홀로 부터 주문이 전달되면, 주방에서는 전달받은 주문을 바탕으로 음식을 만들어서 홀로 내보낸다. 이는, 웹 페이지를 통해서 어떤 요청이 왔을 때 해당 요청에 대한 데이터를 전달하거나, 웹 페이지를 통해 전달된 데이터를 서버의 데이터베이스에 저장하는, 즉 요청에 대한 응답과 데이터 처리 등을 담당하는 백엔드와 개념적으로 상당히 유사하다.

 요즘 SNS 또는 인스타그램 에서 인기 있는 카페, 음식점 들을 보면 세심하게 구성한 인테리어와 적절히 배치한 소품들의 위치 등 분위기로 대중의 감성을 자극하고 있다. 이와 마찬가지로, 웹에서는 페이지의 레이아웃과 구성요소들의 배치를 통해 사용자에게 제공하는 사용자 인터페이스(User Interface, UI), 그리고 기능을 통한 특별한 사용자 경험(User Experience, UX)을 제공함으로써 웹에 접근하는 사용자들의 감성을 효과적으로 자극 할 수 있고, 이는 웹기반의 전체적인 시스템에서, 또한 음식점의 구성에 있어서 거대한 영향력을 행사한다.

 단지, '웹 페이지의 구성요소를 배치하고 그것들이 동작하게 하는 것' 만으로는, 프론트엔드를 개발한다고 할 수 없다. '프론트엔드를 개발한다. 프론트엔드 개발자이다.' 라고 하기 위해서는 아래와 같은 전반적인 부분에 대한 고려가 필요하다.

 

 외국에서는 예전부터 프론트엔드 개발 이라는 표현을 사용했지만, 우리나라에서는 얼마 전까지 '웹 퍼블리셔'라는 표현을 사용했고, 지금도 사용되고 있다. '퍼블리셔'라는 표현은 대표적으로 우리나라의 인쇄, 출판 업계에서 통용되는 직업군을 표현하는 단어이다. 이 단어 앞에 '웹'을 붙이면서 웹 페이지를 만드는 사람들을 지칭하는 표현으로 쓰인다.

  '웹 퍼블리셔'의 역할은 웹 표준과 웹 접근성을 준수하여 페이지구성을 위한 HTML의 구조화, CSS를 활용한 스타일링 등 페이지 자체를 만드는 역할을 했지만, 최근들어 브라우저와 디바이스들이 확장되고 UI & UX에 대한 고려와 함께 발생하는 각종 이슈에 대한 대응, javascript를 활용한 동적인 기능구현까지 점점 더 프론트엔드의 요구사항이 많아지면서 이를 담당하는 개발자를 프론트엔드 개발자라고 하며, 이들이 하는 업무를 프론트엔드 개발이라고 한다.

P.S.

부트스트랩 메인 페이지에 가보면 '부트스트랩은 반응형이며 모바일 우선인 Front-End 개발을 위한 가장 인기 있는 HTML, CSS, JAVASCRIPT 프레임 워크 입니다.' 라고 정의 되어 있습니다. 이 문장만 보더라도 프론트엔드, 프레임워크, 반응형 등의 용어들이 다수 포함되어 있습니다. 더 깊은 이해를 위해서는 용어의 이해가 바탕이 되어 있어야 한다고 생각합니다. 따라서, 앞으로의 포스팅에서도 계속해서 용어에 관한 설명을 덧붙일 예정입니다. 글이 다소 길어지더라도 양해 부탁드립니다:)