정보정리 : UI디자인과 프레임워크 / 라이브러리
UI 디자이너가 알아야할 기초상식, 프레임워크 기반 개발환경, 라이브러리
빠르고 안정적인 결과를 위한 선택, 프레임워크
프레임워크. 뭔가 구조물을 말하는 것 같은데, 디자인과는 상관이 없어보이는 단어다. 그러나 내용을 알고보면 디자인에서부터 시작해서, 기획, 개발까지 연결되는 단어다. 이 글에서는 기본적인 내용만 다루겠지만 더 파고들자면 개념적 이해를 넘어서서, 실제 사용사례나, 응용가능한 범위까지 알아두어야할 중요한 내용이다.
개발과정을 건축으로 예를 들자면, 개발자들이 하나하나, 벽돌을 쌓고, 골조를 쌓아서 만드는게 기본적인 개발 방식이다. 뛰어난 개발자가 작업을 할수록, 멋지고 디테일한 기능을 만들어낼 수 있다. 그러나 하나하나 손수 코딩을 하는 방식이 될수록, 개발기간이 오래걸리고, 유지보수가 힘들어지는 단점이 있다.
그래서 이걸 좀 더 빠르고, 효율적으로 하기 위한 방식이 미리 만들어진 컨테이너 박스나, 모듈 구조를 이용해 건축을 하는 방식이다. 하나하나 디자인하고, 마음대로 기능을 집어넣기는 어렵지만, 이미 만들어져있는 구조물들을 배열하기만 해도 그럴듯한 결과물을 만들 수 있다. 이렇게 '기존에 만들어진 구조물들을 기반으로 원하는 건축물을 만드는 방식'이 프레임워크를 사용한 개발방식이다.
프레임워크의 장점
일단 프레임워크라는건 개발이나 기획 단계의 과정 매우 단순화시킨다. 쉽게 말하면 하나하나 손으로 그리고, 실제 건축 전문가들을 불러서 일일히 만들어야하는게 일반적인 과정인데. 컨테이너 박스 하나를 가져와서 쌓아올리니 순식간에 3층짜리 건물이 만들어지더라 - 같은 상황을 생각하면 이해가 쉽다. 실제로 프레임워크를 사용하면 개발을 위해 드는 시간이 급격하게 줄어든다. 이건 디자인 관련되어서는 더욱더 그렇다. 심지어는 디자인 작업을 하지 않고, 적당한 와이어프레임과 기획서만으로도 왠만한 결과물을 만들어낼 수 있다. 정말 시간을 단축하기 위해서라면 - 디자인적 퀄리티를 포기하고, 프레임워크에서 지원하는 기본 UI 컴포넌트만으로 디자인을 해야하는 경우도 있다.
프레임워크의 단점
프레임워크를 사용하면 - 단순히 기간과 비용이절감되니 좋은거 아닌가? 하고 단순하게 생각할 수 있다. 그러나 원하는 내용을 직접 다루고싶어하는 개발자나 디자이너 입장에서는 이야기가 조금 다르다. 프레임워크를 사용하는 경우 디자인 패턴도 제한되고, 그리드 시스템도 이미 정해져있는 경우가 많다. 만들어진 틀 안에서 디자인을 해야하니, 결과물을 자유롭게 만들 수 없고. 개발자와의 면밀한 협의가 필요해진다. 사전 조사나 기능에 대한 연구가 필요한건 개발자도 마찬가지다. 프레임워크에서 지원하는 형식이나 개별 문법등을 배우지 않고서는 프레임워크를 통해 개발을 진행하는게 불가능하다.
그렇다면 왜 디자이너 / 기획자가 프레임워크를 알아둬야할까?
디자이너나 기획자가 프레임워크를 이해해야하는 이유는 다음과 같다.
- 실제 개발 환경에서는 프레임워크를 사용하여 개발을 진행하는 경우가 많다.
- 계속해서 업데이트되는 프레임워크의 기능들을 이해하려면 기본적인 내용은 알고있어야한다 (...)
- 프레임워크가 지원하는 범위와 한계를 프로젝트 구조나 기획에 반영할 수 있다.
- 개발 과정에서 일어날 시행착오, 개발상의 문제점들을 미리 방지할 수 있다.
- 디자인 작업시, 구현이 불가능하거나, 외부 플러그인 등이 필요한 부분을 미리 파악할 수 있다.
Vue.js 프레임워크로 개발된 사이트 사례
https://scrumpy.io/?ref=madewithvuejs.com
가벼운 페이지를 만들 때엔 사용하기 참 좋다.
프레임워크와 라이브러리의 구분?
웹개발에 있어, 프레임워크와 라이브러리를 구분하는건 생각보다 쉽지 않은 일이다. 쉬운 이해를 위해 두가지를 굳이 나눠보자면, 프레임워크는 상대적으로 큰 규모에, 기능과 디자인 레이아웃 부분의 영역까지 포함을 하고있고, 라이브러리는 좀 더 작은 규모에 기능에만 중점을 두고 있다고 생각하면 된다.
하나의 프레임워크에는 여러가지 라이브러리들이 포함되어있고, 디자인 레이아웃에 대한 제한까지 담고있는 경우가 많다. 라이브러리는 이와는 반대로 규모가 작고, 개발을 위한 여러 기능들을 포함하고있는 '사전정의목록' 같은 거라고 생각하면 이해가 쉽다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
