정보정리 : 자바스크립트 프레임워크 - Vue.js
UI 디자이너가 알아야할 기초상식, 자바스크립트 프레임워크인 Vue.js
이 글은 프레임워크의 개념에 대해 모르는 분이라면 이해하기 힘든 내용입니다. 프레임워크에 대한 내용은 하단 링크를 참조하세요.
https://brunch.co.kr/@clay1987/92
자바스크립트 프레임워크?
자바스크립트 프레임워크라는 말을 이해하려면, 일단 프레임워크라는 말을 알아야한다. 프레임워크는 복잡한 내용을 간단히 미리 규격화 / 모듈화해둔 도구를 말한다. 무언가를 간편화했기 때문에 가지는 장점도 있지만, 동시에 원본이 갖고있는 장점이나, 세부적인 내용을 잃어버리는 등의 부작용이 발생한다. 이는 마치 열권짜리 원본이 있는 책을 1시간짜리 영상으로 만들어 보는 것과 비슷하다. 더 이해하기 쉽고, 축약되어있으며, 빠른 시간 내에 이해할 수 있지만, 원본이 가지는 디테일을 잃어버리기 쉽다.
자바스크립트는 현재 웹 생태계에서 가장 중요한 언어들 중에 하나다. 그런 자바스크립트란 언어를 프레임워크화해서, 사용하기 편리하게 만든 것이 바로 자바스크립트 프레임워크다. 자바스크립트 프레임워크란 HTML, CSS를 포함한 웹 관련 기능들을 포함하고 있으며. 크게 웹 기능 구현을 위한 기능 모음과, 디자인 스타일에 대한 내용을 함께 담고있다. 프레임워크를 사용하게되면, 기존에 자바스크립트에서 사용할 수 없었던 문법이나, 입력방식들을 사용할 수 있게 되고. 타 플러그인을 통해 UI 컴포넌트나 스타일, 추가기능 등을 불러다 쓰는 것도 가능해진다.
자바 스크립트 프레임워크 - 3대장 : Vue / React / Angular
자바스크립트를 손쉽게 쓰려는 사람들이 어찌 세상에 한두명 뿐이었을까? 모든 시장이 그러하듯 여러가지 시도와 서비스들이 등장했고. 그중에서 압도적인 경쟁력을 가지게된 것은 Vue, React, Angular. 총 세가지 브랜드다. 서로 비슷해보이지만 각자의 브랜드가 가지는 장단점이 다르고, 구현할 수 있는 범위나, 기능에 대한 제한범위도 다르다. 이 글에서는 이런 제한범위를 자세히 설명하진 않겠지만, 이런 차이점으로 인해 해당 프레임워크를 배우고, 실제 프로젝트에 사용하는데 까지 걸리는 시간과, 진입장벽의 차이를 만들기도 한다. 이렇게 프레임워크를 만든 회사들은 계속해서 사용자들과 피드백을 주고받으며 - 기존에는 없었던 기능들을 추가하고, 업데이트하면서 - 그야말로 프레임워크의 전국시대를 지나, 세 개의 대표주자가 대두되는 상황에 다다랐다.
자바스크립트 프레임워크에도 여러 종류가 있다 (2017년 기준 가장 많이 쓰인 자바스크립트 프레임워크들)네이버 D2에서도 언급된 위의 순위표는 Java Script Rising Stars라는 - 자바스크립트 관련 통계 페이지에서 발췌된 내용이다. 개발자들의 성지라 불리는 Git hub에서 집계된 프로젝트의 양을 통계로 정리한 것인데. 해당 프로젝트들에 사용된 프레임워크들 중 가장 많은 것이 Vue. 그 다음이 React. 그 다음이 Angular라는 프레임워크였다.
1. Vue.js
https://kr.vuejs.org/v2/guide/index.html
2. React.js
3. Angular.js
각각의 자바스크립트 프레임워크에는 장단점이 존재하기 마련이고. 현재에도 버전별 업데이트가 진행되고있기 때문에 - 무엇이 가장 좋다고는 말하기가 어렵다. 그러나 현재 전 세계에서 가장 많이 쓰이고있는 것은 Vue.js이며, 그 이유는 여러가지가 있겠으나. 개발자들이나 개발 환경의 상황이 각자 다르기 때문에 - '이래서 이게 1등이다'라고 하기는 어렵다.
한 개발자 분이 Angular와 React, Vue 프레임워크를 비교한 글
https://joshua1988.github.io/web-development/translation/why-we-moved-from-angular2-to-vuejs/
디자인을 쉽게 만들도록 도와주는 - CSS / UI 프레임워크
지금까지 자바스크립트라는 언어를 쓰기 편하게 만든게 - 자바스크립트 프레임워크라면. 여기 속하는 것이 Vue, React, Angular였다는 걸 이야기해봤다. 이번에는 여기서 한단계 더 나아가 - CSS와 UI 디자인 관련 내용을 쓰기 쉽게 만드는 - 디자인 특화 프레임워크에 대해 이야기해보자.프레임워크라는 것의 목적이 결국 '좋은 결과를, 더 쉽고, 빠르게' 내기 위한 것임을 기억한다면. CSS / UI 프레임워크의 목적 또한 동일함을 예상할 수 있을 것이다. 실제로 다양한 프레임워크를 사용해보면, 기능적으로는 많은 부분을 빠르게 작업할 수 있으나. 디자인 부분에에서는 여전히 손이 많이 드는 부분이 많았다. 그래서 만들어진 것이 바로 CSS / UI 프레임워크다.
CSS / UI 프레임워크를 사용하면, 미리 만들어진 부품들을 선택해 원하는 화면을 만들수있다CSS / UI 프레임워크는 말 그대로 미리 만들어진 조각 단위의 UI 요소들을 만들어놓고. 쉽게 불러다가 배치시킬 수 있도록 만들어진 HTML + CSS + Java Script가 서로 뭉쳐진 종합요소다. 디자인에 대해 많은 신경을 쓰지 않아도 금방금방 원하는 내용을 만들 수 있다는 것이 장점이며. 실제로 빠른 프로토타입 제작이나, 스타트업 등의 소규모 프로젝트에서는 매우 유용한 기능이다. 웹 환경에 적합하게, HTML, CSS, Java Script를 모두 사용하는 프레임워크가 대부분이며. 당장 찾아보기만 해도 수십가지가 넘는 프레임워크들이 존재한다. 우리가 익히 알고있는 트위터의 부트스트랩이나, 시맨틱 UI 같은 것들이 이런 프레임워크에 속한다.
2018년 기준, 인기있는 CSS / UI 프레임워크
https://www.slant.co/topics/150/~best-css-framework
자바스크립트 프레임워크 전용으로 만들어진 디자인 프레임워크 - Vuetify
지금까지 CSS / UI 프레임워크를 알아봤다면. 이번엔 자바스크립트 프레임워크를 위해 만들어진 디자인 프레임워크를 알아보겠다. 자바스크립트 언어용 프레임워크인 Vue나 React, Angular가 기억나는가? 이번엔 이런 프레임워크를 위해 만들어진. '전용 UI 프레임워크'도 존재한다. 그중 Vue.js에 연관된 UI 프레임워크가 바로 Vuetify라는 녀석이다.
Vuetify 디자인 프레임워크가 어디에 속해있는지를 정리한 도식Vuetify 디자인 프레임워크는 vue.js로 만들수 있는 디자인결과물들을, 다시 한 번 규격화해서 - 쓰기 쉬운 형태로 만들어둔 도구다. 실제로 내용을 파고들어가보면, 단순히 UI 컴포넌트만 갖고있는 것이 아니라, API 함수나 애니메이팅 관련 내용들도 포함하고 있다. 업계에서 가장 많이 쓰이는 Vue.js를 위해 만들어졌으며, Vue.js의 내용이 업데이트 될 때 마다, Vuetify의 내용도 발맞추어 따라가는 형태가 된다. 디자인적 규격을 강제로 정해두었기 때문에 사용은 편리하지만. 역으로 디자인을 자유롭게 만들기엔 한계가 있다. 게다가 사전정의된 반응형 웹의 분할 포인트 (Break point) 라던가, 애니메이션 효과 등은 거의 기본적인 내용만 지원하고있다. 그렇기에이런 부분이 맘에 들지 않는다면 Vue.js 단이나, CSS 선으로 거슬러 올라가 원하는 결과를 내기위한 커스텀 코드를 작성해야한다.
-
각 업종이나 회사마다 사용하고있는 UI 컴포넌트나, 디자인 프레임워크는 서로 다를 것이다. 기본적으로 큰 틀에서 - 프레임워크를 사용하는 곳이 많기 때문에. 각자 회사나 개발환경이 요구하는 내용에 맞추어 미리미리 준비를 해두는 것이 중요하다. 또한 각각의 프레임워크의 지원범위나, 업데이트된 신규기능들은 대부분 프레임워크의 상위단 내용과 연관이 있다. 그러니 무언가에 대해 공부하거나, 알아나갈 때에는 해당 서비스나 브랜드를 포함하고있는 거시적 시장의 변화를 관찰하고, 분석해야한다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
