2. 웹 어플리케이션 프레임워크란?
동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스 개발 보조용으로 만들어지는
애플리케이션 프레임워크의 일종이다.
웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이는 것이 주 목적으로
통상 DB 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 기능을 포함하고 있다.
출처: https://ko.wikipedia.org/wiki/웹_애플리케이션_프레임워크
3. 동 인
특정 플랫폼에 종속화
다양한 단말의 출현
기술중립성 (오픈 프리 라이센스)
One Source Multi Use
HTML5 등장
웹은 통합 기술안내서가 無
HTML5 개발은 너무 막연함
개발자들의 지지를 얻고 있는
공개SW 기술들을 적극 활용
웹 표준 기반으로
통합 개발 가이드를 제시
레이어별 모듈화 방식 적용,
새로운 신규 모듈 교체 가능
세미나, 코드랩, 컨퍼런스 등
적극적 활용 교육 추진
안녕하세요
웹프레임워크의 소개로 발표를 진행할 한국인터넷진흥원 유주열입니다.
저는 웹프레임워크의 국내외 사례와 동향등에 대해 발표를 진행할 예정이구요.
위플래닛의 정진태님께서는 웹프레임워크 정보공유사이트인 webframeworks.kr에 대해 소개를 진행해주실 예정입니다.
안녕하세요.
웹프레임워크를 활용하는 개발자들을 위한 온오프라인 오픈 커뮤니티인 Webframeworks.kr의 운영을 맡고 있는
위플래닛 정진태입니다.
혹시 이 사이트 보신적들 있으신가요?
아직 많이 홍보가 되진 못하것 같은데 열심히 활동하도록하겠습니다.
안그래도 정말 다양했던 웹들이, 사람들 손에 스마트폰이 쥐어지고 많은 사랑을 받으면서, O2O와 함께 종류가 더욱 다양해진것 같습니다.
말그대로 기존에 생각지도 못했던 서비스들이 웹으로 개발되고 있습니다.
요즘 우리는 웹을 통해 세계의 재미있는 다양한 영상을 보구요.
웹과앱으로 지도에서 위치를 확인하며 집을 찾습니다.
프로그래머를 채용하기 위해, 코딩 인터뷰를 웹으로 보기도 하죠.
그뿐만아니라, 웹으로 전세계에 흟어져있는 사람들과 온라인으로 미팅을 진행하기도 하죠.
당연히 웹으로 게임도 합니다.
그리고 오늘 컨퍼런스에 오기위해 세미나 참여신청을 하고 결제도 했지요.
그냥 간단하게 추려만봤는데도 참 다양한것 같습니다.
그런데 이런 웹서비스들이 개발될때, 항상 웹의 순수기술로만 개발되어지진 않을것입니다.
보다 생산성을 가지고 개발하기 위해서 웹프레임워크과 도구들을 이용하며 만들어져 나가고 있겠죠
다양한 개발요소들이 이용됩니다.
이화면은 제가 Stackshare.io라는 사이트에서 웹과 여러 프레임워크들과 툴을 한번 긁어왔습니다.
물론 한 화면에 담을 수 없기에, 조금 더 익숙한 요소들을 여러 종류로 모아봤습니다.
오늘 자리에 참석해주신 분들은 몇개정도 알고 계실지 궁금하네요.
간단히 설문을 해보도록하겠습니다.
5개이상알고 계신분들?
10개이상알고 계신분들?
이 많은 개발요소들 웹어플리케이션 개발에 쓰이는 것들이긴 할텐데 과연 어떤용도로 사용되는 것들일까요?
네 물론 웹어플리케이션을 개발하는데 사용되고 있을 것입니다.
그런데 웹어플리케이션을 개발한다는 것은 어떤것들을 하는 것일까요?
요즘 웹프론트 기술이 굉장히 발달하면서, 이 개발에 대한 흐름도 계속 바껴가는 것 같습니다.
사실 10년전에 웹에서 뭔가 만들때 <table>태그로 레이아웃을 잡아서 개발하고는 했는데, 요즘에 그랬다가는 난감해지겠죠.
지금 이화면은, 물론 이것은 개발사마다 다르긴 하겠지만, 제가 했던 방법, 들었던 방법으로 웹 어플리케이션의 개발 프로세스를 정리를 해보았습니다.
저희 회사같은경우는 프론트보다는 언제나 모델링 등을 위해서 백엔드 개발언어와 프레임워크를 먼저 정합니다. 아
마 대부분에 중소팀에서 그렇게 진행을 하고 있지 않나 싶습니다. 않나 싶습니다.
그뒤로도 계속 선택의 연속이죠.
더 나은 UI를 구성하기위해 Bootstrap과 같은 CSS 프레임워크를 선택하고, 더 편하게 사용하기 위해 Sass나 less 같은 프리프로세서등을 선택하게 되죠.
기술이 빠르게 발전하고 있는 웹프론트에서 규모가 어느정도 있는 웹이라면 JS프레임워크의 선택은 이제 필수가 아닐까 싶은데요. 자바스크립트 프레임워크와
라이브러리를등을 선택하게 되죠.
여러 선택들이 끝나고 나면 웹어플리케이션 프로젝트의 구조들을 하나씩 잡고, 패키지들을 설치해가며, 코딩을 진행하고, 테스트를하고, 버그잡고 코딩하고를 진행하게되겠죠.
이 타이밍에 배포, 빌드, 테스트등 더 편하게 하기 위해 테스크 자동화툴을 선택해서 사용하게 되겠죠.
제가 웹 개발이 공백이 좀 길게 있긴했지만, 뭔가 예전에 jquery, html, css만 고민하던 때와 많이 달라진것 같습니다.
앞에 수많은 업무들을
실제 프레임워크 라이브러리 툴과 한번 매핑해보았습니다.
백엔드쪽에 프레임워크는 다들 많이 익숙하시지 않을가 싶습니다.
파이썬에서 대표 웹프레임워크로 활약하고 있는 Django. 물론 플라스크도 유명하죠
생산성높은 개발의 대명사가 되어가는 Rails
가장 많이 사용해보신 프레임워크가 아닐까요? 스프링
php에서 요즘 가장 핫한 라라벨 프레임워크도 있구요.
최고 대세죠. nodejs의 Meteor와 Express가 백엔드프레임워크에 있습니다.
물론 여기있는게 다는 아니고, 더욱 많은 백엔드 프레임워크가 존재합니다.
그 옆으로는 CSS프레임워크가 있습니다.
모스트 파풀러 CSS프레임워크인 부트스트랩이 있구요.
중간에는 모스트 어드밴스드 CSS프레임워크를 지향하는 파운데이션이 있습니다.
구글의 polymer도 보이구요.
프리프로세서인 less 와 sass도 있습니다.
가장 관심이 많이 가는 분야인 JS프레임워크를 보자면,
많이들 익숙하실것 같습니다.
구글의 AngularJS. 아마 웹에 관심있는 분들이라면 책한권은 사보시지 않았을까 싶습니다.
미니멀리즘의 철학을 갖고 있는 백본이 있구요.
그아래로는 프론트엔드의 유지보수를 향상시키는 엔터프라이즈급 프레임워크라고 할 수 있는 엠버가 있구요.
요즘 정말 많은 사랑을 받고 있는 유저인터페이스를 만들기위해, View에 집중하고 있는 React 가 있습니다.
그 쪽으로는 패키지 매니저인 npm, 웹을 위한 패키지매니저인 바워, 그리고 스캐폴딩을 위한 여맨이 보이네요.
전 개인적으로 여맨을 굉장히 좋아하는데요, 개발을 진행하면서, 폴더구조를 어떻게 짤가에대해서 고민이 많으신분이라면 강력추천해드리고 싶습니다.
git이나 subversion을 통해서 소스관리를 진행하시구요. 테스트 생상선을 높히기 위해 jasmin, mocha, karma등을 사용하시기도 하실 겁니다.
개발에서 테스트, 배포코드 난독화, 배포 등 이런저런 작업들, 즉 태스크를 좀더 편하게 작업하기 위해 그런트나 걸프를 쓰기도 하죠.
참 좋은 프레임워크와 툴이 많네요.
하지만 도입하기란
참 머뭇거려지는 일인것 같습니다.
보통 도입이전에 이런 딜레마에 빠지지 않을가 싶습니다.
이게 우리 실제 유저들에게 문제가 없을지.
내가 사용할 수 있을지.
내 옆에 개발자가 열심히 배워서, 우리팀이 잘 사용할 수 있을지? 러닝커브가 참 ...
그리고 우리가 만드는게 간단한 웹페이지라면, 닭잡는데 소잡는 칼을 쓰고있는건 아닌지.
혹은 닭을 잡다보면 소를 잡게 되진 않을지.
그리고 이 프레임워크의 철학이 나랑 맞는건지..? 고민을 하게 될 것같습니다.
이 프레임워크의 철학이라는건 예를들자면, 백본의 미니멀리즘을 예로 들 수 있을 것 같습니다.
이미 잘 셋팅되어진 프론트 프레임워크를 사용하고 싶으신 분이라면, 미니멀리즘의 백본보다는 엠버를 사용하시는게 맞기 떄문이죠.
도입 전 딜레마를 위해서 몇가지 방법을 공유해볼까 합니다.
우선 스택쉐어닷 아이오입니다.
가령 제가 airbnb유사 사이트를 만들고 싶다고 했을때,
스택쉐어닷 아이오에서 airbnb를 검색해봄으로써,
airbnb가 사용한 개발스택정보를 얻을 수 가있습니다.
백엔드로는 ruby on rails를 사용하고 디비는 mysql을 사용했네요.
프론트에서는 요즘 핫한 react 라이브러리를 사용하고, sass를 전처리기로 사용했다고 나오네요.
혹시 react가 먼지 헷갈린다면, 클릭을해보시면 react에 대한 정보를 보여주게 됩니다.
피쳐 정보, 지금 사용하는 회사들, 유사 도구들 등을 말이죠.
이 다음 방법은 이미
많이들 하고 계실거라고 생각됩니다.
개발커뮤니티에 물어보고
슬라이드쉐어등에서 여러 자료들을 찾는거죠.
마지막으로 추천해드릴 방법은 ToDo MVC를 이용하는 것입니다.
특히 웹프론트쪽 프레임워크를 선택하실때 이용하시면 좋은 방법이신데요.
Todomvc.com은 MV아스타리크 프레임워크를 선택할 수 있게 도와줍니다.
한번 살펴볼까요
ToDo MVC는 동일한 UI를 여러 웹프레임워크를 이용하여 구현해 놓았습니다.
지금 화면은 백본을 예로 보여주고 있는데요. 단순 백본으로 했을때의 코드뿐만아니라
백본과 엔요를 함께 사용했을떄, 백본과 타입스크립트를 함께 사용했을떄의 소스도 제공을 하고 있습니다.
물론 github에서 제공하고 있습니다.
백문이 불여일런 직접 클론하셔서 코드도 살펴보시면서,
자기 입맛에 맞는 프레임워크를 찾는데 아주 좋은 방법이라고 생각됩니다.
하지만 그래도 어렵죠.
프레임워크의 신규도입이란...
그래서 웹프레임웍스가 시작되었습니다.
웹프레임워크는 온라인과 오프라인 커뮤니티로 온오프라인 전반에 걸쳐서 활동하고 있습니다.
온라인에서는 webframeworks.kr라는 사이트를 통해서
get started 시작학습정보.
tutorials 응용학습정보.
quick start 보일러플레이트형태의 샘플코드를 제공하고 있습니다.
오프라인에서는 여러 개발자 커뮤니티와 함께 세미나를 진행하고,
원데이 코드랩을 진행하며 개발자들이 웹프레임워크를 배우고, 지식을 공유할 수 있는 장을 만들어가고 있습니다.
Get Started 에 대해 좀 더 자세히 말씀드리면
웹프레임워크나 도구를 사용하기앞에서
프레임워크의 철학 및 배경,
설치방법,
기본사용설명,
응용사용설명,
예제코드,
참조사이트등의 정보를 담고 있어서,
한번 읽고나신후에,
Tutorials이나
Quick start를 이용하실 수 있는
기본학습을 진행하고 있습니다.
튜토리얼은
웹프레임워크전문가들이 웹프레임워크 별로
여러 응용방법을 공유하고 있구요.
퀵스타트는 백문이 불여일런, 실제로 개발자들이 빠르게 시작해볼수있도록
보일러플레이트 형태의 샘플코드를 제공하고 있습니다.
오프라인에서는 앞에서 말씀드린봐아 같이
GDG Seould, Meteor Korea, ModernPHP, Facebook developer Group, 언디파인드등의 개발커뮤니티와 함께
세미나를 공동 주최하며, 웹어플리케이션에 대한 여러 사례를 공유하고 있습니다.
원데이 코드랩은
세미나와는 다르게 약 7~8시간을 잡고 하루동안 진행되며,
이론부터 실습까지 웹프레임워크로 실무를하고 계시는 전문개발자를 강사로 초빙하여, 교육을 진행하고 있습니다.
그리고 실제로 실습할때 코드를 여러방면으로 수정해보실수 있도록 돕고있습니다.
webframeworks.kr은 여러 활동을 깃헙위에서 진행하고 있으며,
사이트 자체도 github page로 운영을 하고 있습니다.
아마도 웹개발자들에게 익숙한 가장 웹개발자 커뮤니티 다운 모습이 아닐까 싶습니다.
여러분들도 자신의 경험을 webframeworks.kr를 통해서 여러 웹개발자들과 함꼐 나눠보시면 좋을 것 같습니다.
