웹 애플리케이션 개발 프레임워크, 5분 안에 정복하기

여러분은 웹 애플리케이션이라고 하면 무엇이 떠오르시나요? 자주 들어본 말이긴 하지만, 개발 관련 분야의 종사자가 아니라면 명확하게 정의하거나 설명하기 어려우실 겁니다. 우리가 흔히 쓰는 워드 프로세서, 동영상 및 사진 편집 도구, 쇼핑 카트, 온라인 양식, 지메일(Gmail)이나 야후(Yahoo)와 같은 이메일 프로그램, 스프레드시트 등을 웹 애플리케이션이라고 생각하면 이해하기 쉽습니다. 개발자들은 웹 애플리케이션을 활용해서 사용자들이 웹브라우저로 접속할 수 있는 프로그램을 만드는데요.

이때 사용되는 웹 애플리케이션 프레임워크는 개발자들에게 웹 개발의 공통적인 프로세스들의 상당한 부분을 자동화하고 표준화하면서도, 앱 템플릿을 위한 라이브러리와 프레임워크를 제공함으로써 개발자들의 시간과 노력을 아껴줄 수 있습니다. 이번 글에서 위시켓은 웹 애플리케이션 프레임워크가 무엇인지, 그리고 그것이 어떻게 웹 애플리케이션 개발을 도와줄 수 있는지에 대해서 자세하게 설명해 드리겠습니다.

​

웹 애플리케이션의 프레임워크 구조 살펴보기.

대부분의 웹 애플리케이션 프레임워크는 세 개의 공통적인 논리적 구성요소를 기반으로 하고 있는데, 그것은 바로 모델(model), 뷰(view), 컨트롤러(controller)라는 것입니다. 이러한 요소들은 다양한 웹 애플리케이션 프레임워크를 유연하고 모듈화할 수 있게 해줍니다. 이러한 유연성 덕분에 다른 업체에서 설계한 서드파티(third party) 애플리케이션도 연동될 수 있죠.

​이 유형의 구조가 크게 인기 있는 이유는, 클라이언트와 상호작용하는 기본적인 인터페이스와 코드를 분리함으로써 개발자들에게 도움을 주기 때문입니다. 이는 애플리케이션의 개발에서 효율성을 강화하는 데 도움이 됩니다. 이러한 프레임워크들은 웹 개발 전반에 걸쳐서 수행되어야 하는 수많은 표준화된 활동들을 자동화해주는데, 그럼으로써 개발자들의 시간을 아껴줄 수 있습니다.

​

​

MVC 구조는 어떻게 작동하는 걸까?

MVC(Model-View-controller) 구조는 매우 인기 있고, 효율적으로 코드를 체계화할 수 있는 방식입니다. 이 구조의 핵심은 각각의 코드들이 필수적인 용도가 있다는 사실을 보여준다는 것인데요. MVC 구조에서 뷰 부분은 웹 애플리케이션에서 사용자와 상호작용하는 모든 기능들로 구성됩니다. 코드에서의 뷰는 제이슨(JSON)과 HTML을 사용하는 해당 모델의 다양한 데이터를 보여주는 부분입니다. 이처럼 코드는 사용자가 애플리케이션을 보고 상호작용하는 방법을 규정하면서 미학적으로도 매력적이게 만들어줍니다.

모델은 코딩의 로직(logic)과 데이터가 위치하는 부분입니다. 애플리케이션을 구성하는 모든 규칙과 데이터는 모델에 의해서 관리됩니다. 모델과 뷰의 코드는 모두 컨트롤러 컴포넌트를 통해서 커뮤니케이션을 하는데요. 컨트롤러는 사용자의 모든 입력을 받으며, 입력값에 의해 해야 할 일을 결정합니다. 일단 결정이 이루어지면, 입력값이 모델 쪽에 전달됩니다. 입력값은 데이터를 요청하는 것에서부터 마우스를 움직이는 것에 이르기까지 모든 것들이 포함될 수 있습니다.

​여러분이 동네의 한 카페에서 커피를 주문한다고 생각해 보겠습니다. 여러분은 메뉴판을 보면서 주문할 커피를 고를 텐데, 이러한 메뉴판이 MVC의 “뷰” 컴포넌트라고 할 수 있습니다. 그러고 나면 바리스타가 여러분의 주문을 받아 적을 텐데, 이것이 “컨트롤러”입니다. 일단 주문을 적고 나면 바리스타는 주문 내용을 동료에게 전달할 텐데, 이것이 바로 “모델”입니다. 동료 직원은 자신이 받은 정보를 근거로 음료를 만들게 되는데, 그 정보는 “데이터”입니다. 요약해 보겠습니다.

​

메뉴판을 보면서 주문하는 것 = 뷰(View)
바리스타가 주문 내역을 받아 적는 것 = 컨트롤러(Controller)
다른 바리스타가 음료를 만드는 것 = 모델(Model)
여러분이 주문한 커피를 만드는 방법 = 데이터(Data)

​

​

웹 애플리케이션 프레임워크를 선택하는 방법은?

여러분이 앱을 개발하면서 사용할 수 있는 웹 애플리케이션 프레임워크는 아주 많이 있지만, 오늘 위시켓은 대표적으는 루비 온 레일즈(Ruby on Rails), 장고(Django), 앵귤로(Angular)에 대해 알려드리겠습니다.

​​

루비 온 레일즈(Ruby on Rails)

루비 온 레일즈는 강력한 웹 애플리케이션 프레임워크로, 오픈소스이고, 완전히 무료로 사용할 수 있습니다. 이 프레임워크는 루비(Ruby)라는 언어로 만들어졌는데, 루비는 생산성과 단순성에 초점을 맞춘 수준 높고 역동적인 프로그래밍 언어입니다. 루비 온 레일즈 프레임워크는 다른 일반적인 자바(Java) 프레임워크에 비해서, 개발자들이 시간도 절약하면서 보다 효율적인 방식으로 작업할 수 있도록 돕습니다.

​

▷ '루비 온 레일즈'를 사용한 웹 애플리케이션 프레임워크

그루폰(GroupOn) – 가입자들에게 상품, 서비스, 활동, 여행 등을 제공하는 수많은 다양한 업체들을 연결해 주는 이커머스(eCommerce) 마켓
어번딕셔너리(UrbanDictionary) – 비속어 단어 및 문구들을 찾아볼 수 있는 온라인 사전
에어비앤비(AirBnb) – 개인들이 숙소 또는 다양한 여행 경험을 제공하거나 예약할 수 있게 해주는 온라인 마켓
쇼피파이(Shopify) – 기업들에게 자체적인 온라인 스토어를 개설할 수 있는 소프트웨어를 제공해주는 이커머스 플랫폼
깃허브(Github) – 깃(Git, 분산형 버전관리 시스템)을 위한 리퍼지토리(repository) 호스팅 서비스

​

장고(Django)

장고는 명성이 자자한 프레임워크로써, 오픈소스이며 프로그래밍 언어로 파이썬(Python)을 사용했습니다. 파이썬이라는 언어는 개발을 도와주는 프레임워크가 없다면 굉장히 복잡하고 이해하기도 어렵습니다. 장고 웹 애플리케이션 프레임워크는 빠르고, 보안이 아주 뛰어나며, 다양한 용도로 사용할 수 있습니다. 이 프레임워크는 사이트 맵, 콘텐츠 관리, 사용자 인증 등을 자동으로 처리해주는 등 다양한 기능을 갖춘 것으로 유명합니다. 이 프레임워크 안에는 상당히 많은 보안 기능이 포함되어 있기 때문에, 클릭재킹(clickjacking)이나 SQL 주입공격(SQL injection)과 같은 일반적인 보안 상의 오류를 방지할 수 있게 도와주죠.

​

▷ '장고'를 사용한 웹 애플리케이션 프레임워크

디스커스(Disqus) – 온라인 커뮤니티 및 웹사이트에서 사용되는 블로그 댓글 호스팅 서비스
핀터레스트(Pinterest) – 레시피에서부터 인테리어 디자인 아이디어에 이르기까지 온갖 종류의 정보를 보관하고 검색할 수 있게 해주는 유명한 소셜 미디어 애플리케이션
인스타그램(Instagram) – 사진 및 동영상 공유에 주로 초점을 맞춘 소셜 네트워킹 서비스
쿼라(Quora) – 가입한 회원들 사이에서 정보를 모으고 공유하는 데 초점을 맞춘 질의 응답 사이트

​

​

앵귤러(Angular)

원래는 앵귤러JS(AngularJS)라는 이름으로 알려져 있었던 앵귤러는 구글이 만든 환상적인 프레임워크입니다. 앵귤러는 개발자들이 관리하기 쉬운 대형 애플리케이션을 만드는 데 사용할 수 있는데요. 가장 주목할 만한 특징들 중 하나는, 크로스플랫폼 애플리케이션을 만드는데 사용할 목적으로 만들어졌다는 겁니다. 즉, 이 프레임워크로 만든 애플리케이션을 쓰는 사용자들은 자신의 스마트폰이든 데스크톱이든 어떠한 기기에서도 동일한 경험을 할 수 있다는 것입니다. 앵귤러가 제공하는 코딩 템플릿들은 자바스크립트(JavaScript)를 효율적으로 사용하기 위해 완벽하게 최적화 되어 있습니다.

​

▷ '앵귤러'를 사용한 웹 애플리케이션 프레임워크

넷플릭스(Netflix) – 사용자들이 다양한 기기에서 영화와 텔레비전 프로그램을 볼 수 있는 아주 유명한 스트리밍 서비스
포브스(Forbes) 웹사이트 – 투자, 비즈니스, 기업가 정신, 테크놀로지에 초점을 맞춘 전 세계적인 미디어 기업인 포브스의 웹사이트
구글 마케팅 플랫폼(Google Marketing Platform) – 웹사이트의 모든 트래픽을 추적하고 보고까지 해주는 웹 분석 서비스
구글 디지털 개러지(Google Digital Garage) – 온라인 마케팅 교육을 무료로 제공하는 구글의 비영리 학습 플랫폼

​

> 이 글은 'What is a Web Application Framework?'를 각색하여 작성되었습니다.