Web Design Framework

design.docx

웹 디자인 프레임워크

 

부트스트랩으로 대표되는 디자인 프레임워크는 웹 디자인에 대한 부담을 크게 줄여주면서, 웬만한 디자이너들의 커스텀된 디자인들보다 깔끔하고 보기좋은 웹 디자인을 완성시켜줍니다.

 

단순히 link방식으로 소스를 추가시켜준 후, 디자인을 적용할 태그에만 살짝 class를 입혀주면 모든 디자인은 완성됩니다. 대표적인 웹디자인 프레임워크인 부트스트랩 파일을 실제로 다운로드 받아서 직접 서버에 올려서 쓰거나, CDN(Contents Delivery Network) 을 이용해 바로 다음과 같은 link 태그 형식으로 사용할수 있습니다.

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

 

본인의 서버에 올리고 싶다면, 로컬 주소를 이용하면 됩니다. CDN방식의 장점은, 보통 사용자들이 웹서핑을 하면서 bootstrap같은 인기가 많은 파일은 캐쉬에 저장하게 마련입니다. 다만, 원격지의 서버가 느리거나 멀리 떨어져있으면 오히려 로컬서버에 올리는만 못합니다. 따라서 CDN을 사용할때는 파일을 제공하는 곳이 안정적인 속도로 서비스를 제공하는지 꼭 확인해야 합니다. google도 많은 파일을 제공하지만, 때에따라 굉장히 느릴때도 있기 때문에 몇가지 체크를 해본 다음에 이용하는 것이 현명합니다.

 

디자인을 입히는 방법은 굉장히 쉽습니다.

 

<button type="button" class="btn btn-success">Success</button>

 

다른 것은 다 필요없고, 그냥 클래스명만 제대로 주시면 버튼이 이쁘게 바뀝니다.

 

 

이러한 고마운 웹 디자인을 해주는데 들이는 비용은 0원입니다. 대부분의 라이선스가 모두 공개되어있고, 소스마저 오픈되어있기 때문에 커스터마이징 하기도 쉽습니다. 게다가 이러한 프레임워크가 한두개가 아닙니다. 각각 나름의 개성이 있기 때문에 삘이 통하는걸 골라잡으시면 됩니다.

부트스트랩 UI ( http://getbootstrap.com/ )

 

부트스트랩은 우리나라에서나 전세계적으로나 제일 인기도 많고 깔끔하나 식상(?)한 그래픽을 제공해줍니다. 관련 자료도 많은데다가, 홈페이지도 번역까지 되어있습니다.

 

 

 

 

 

 

Foundation ( http://foundation.zurb.com/ )

 

다른뜻을 가지는 단어가 있어서 구글검색에서 잘 검색이 되지않지만, 부트스트랩이 너무 식상해져버려서 다른 프레임워크에 대한 관심이 커지는 상태인데, 파운데이션은 이러한 관심을 커버하기에 충분한 UI와 기능들, 모바일에 대한 지원또한 풍부합니다.

 

 

 

 

 

Semantic UI

시맨틱 UI는 다른 정말 화사하고 색감이 좋은 디자인 셋을 제공합니다. 비록 우리나라에서는 부트스트랩보다 인지도가 떨어지지만, 그 기능은 절대 뒤쳐지지 않습니다. 몇가지 자바스크립트를 이용한 기능들의 모바일 지원이 조금 부족하기는 하지만, 다양한 디자인 셋을 제공해주기 때문에 추천하는 웹 디자인 프레임워크입니다.

 

 

 

그 밖에 여러 디자인 관련 라이브러리 및 프레임워크

 

-       Ink ( http://ink.sapo.pt/ )

상당히 많은 디자인과 편리한 문법을 제공해주고 완성도 또한 높습니다.

 

-       Kickoff ( http://tmwagency.github.io/kickoff/ )

약간의 투박하지만 오렌지색깔의 기본적인 UI들을 제공해줍니다.

 

-       Gumby Framework ( http://gumbyframework.com/ )

서양스타일의 버튼과 여러 디자인들을 써볼수 있습니다.

 

-       Base ( http://matthewhartman.github.io/base/ )

간단한 형식의 반응형 프레임워크입니다.

 

-       Pure.css ( http://purecss.io/ )

한번쯤 참고할만한 조그마한 CSS 모듈입니다.