보통 개발자는 CSS 또는, Image 를 만들거나, 수정하거나 할 일이 거의 없습니다.
특히 디자이너가 없을 경우 Web 개발 시 디자인을 수정하거나 추가할 경우 난감할 경우들이 있죠.
그래서 보통 jQuery UI 으로 많이 사용한다. jQuery UI도 좋지만 좀더 폭 넓게 다양한 UI 적 요소가 필요할 경우가 있습니다.
그래서 저같은 경우에는 UI Framework 를 주로 사용합니다.
UI Framework 같은경우 가장 큰 장점은 전체적인 UI 부분을 대부분 제공한다고 보면됩니다.
아이콘부터 시작해서 전체적인 화면의 틀을 제공합니다..
그래서 화면이 디자이너가 만든 것처럼 괜찮습니다.
저의 경우에는 이번 프로젝트에 예전에 써먹어봐야지 하던 Bootstrap을 사용했습니다.
Bootstrap 의 경우 대략적으로 샘플만 몇개봐도 디자인이 이쁩니다.
특히 개발자 입장에서 Bootstrap 사용하기가 참 편한게 Grid 라는 시스템이 너무 좋습니다.
Grid System 을 간략히 설명하자면 총 12개의 칸으로 나누어 class 로 칸을 나누어 쓰는 시스템입니다.
이게 편한 이유가 사용자 등록 화면이라던지 조회 화면의 입력 부분들을 나누기가 정말 편합니다.
Boostrap 에는 이러한 기능들 말고도 다양한 기능들이 많이 있습니다.
http://getbootstrap.com/ 직접 들어가서 한번 예제만 간단히 보면 쉽게 이해하실수 있습니다.
Bootstrap을 완벽히 잘 알지는 못하지만 이러한 Bootstrap을 가지고 만든 UI Framework 가 바로 AdminLTE 입니다.
Bootstrap + DataTables + DatePicker 등등 여러가지 플러그인을 조합해서 하나의 커다란 툴을 만들었습니다.
특히 이번에 소개하는 AdminLTE의 경우 이름처럼 관리자 화면에 맞게 그래프라던지 화면 구조가 참 잘되어 있습니다.
직접 들어가서 확인해 보시죠. https://almsaeedstudio.com/preview
처음에는 모르는 상태에서 이 툴을 사용하려고 하면 복잡하게 느껴질 것입니다.
하지만 조금만 건들여보고 테스트해보고 익혀둔다면 디자이너가 없는 프로젝트나 개인 프로젝트에서 충분히 좋은 UI Framework 가 될 것입니다.
로그인 화면부터 메뉴구성, 화면 구성 등 대부분이 다 구현되있어 정말 바로 개발해도 됩니다.
그리고 가장 중요한 오픈 소스이니 걱정하지 말고 쓰면 됩니다!!
'Develop > UI' 카테고리의 다른 글
[HTML] table 에 크로스 라인 넣기 (0) | 2015.12.16 |
---|---|
[Bootstrap] CSS - Button (버튼 디자인 하기) (0) | 2015.11.30 |
[Bootstrap] CSS - Tables (테이블 디자인 하기) (0) | 2015.11.30 |
[Bootstrap] CSS - Grid System (화면 나누기) (0) | 2015.11.30 |
Bootstrap 소개 (0) | 2015.11.27 |