플랫 디자인 프레임 워크
플랫 UI 프레임워크는 주로 포토샵 파일인 PSD 형태나 HTML 형태로 소스를 제공합니다.
HTML파일과 CSS파일을 제공하는 프레임워크라면 포토샵에서 PSD 파일을 편집하지 않고도 제공하는 여러 요소(아이콘, 이미지 등)을 이용해 플랫한 사이트를 제작할 수 있습니다.
검색 엔진에서 'flat ui kit'으로 검색하면 유/무료 키트들이 많이 검색됩니다. 플랫 UI 키트는 이름부터 결과물까지 크게 다르지 않고 공개된 키트도 많습니다. 그중에서 많이 사용하는 몇가지만 소개합니다.
Flat UI (무료) http://designmodo.github.io/Flat-UI/ |
밝은 색상으로 구성되어 있고 버튼과 아이콘, 색상 스위치, 메뉴 항목 등 수백 개의 다양한 요소들이 포함되어 있습니다. 부트스크랩 3을 기반으로 하고 있으며 PSD와 HTML 파일로 제공합니다. 사용자가 커스터마이징할 수 있는 완벽한 PSD 파일을 제공하는 유로 Flat UI pro도 있습니다. |
Flat UI Kit (무료) http://www.webdesignerdepot.com/2013/05/flat-ui-kit-free-down-load/ |
차트나 미디어 플레이어, 작업 휠, 카운터 등 복잡한 항목들을 플랫하게 표시하려고 할 때 사용하면 좋은 도구들을 많이 포함하고 있습니다. |
Featherweight UI (무료) http://sarahjustine.com/2013/03/17/featherweight-ui-a-free-vector-based-and-retina-ready-ui-kit-with-bonus-mini-tutorial/ |
메뉴와 사진 스크롤, 지도, 심플 아이콘, 스크롤 위젯 등 멋진 요소들로 이루어진 간단한 키트입니다. 백터 방식이며 레티나에서도 사용 할 수 있습니다. |
1. 프레임워크 파일 다운로드
대부분의 무료 프레임워크들이 PSD 파일을 제공하는 데 비해 Flat UI는 무료 버전에서도 즉시 사용할 수 있는 CSS 파일과 이미지를 제공합니다. http://designmodo.github.io/Flat-UI/ 로 접속하면 Flat UI에 포함된 요소들을 한눈에 확인할 수 있고 필요한 파일을 다운로드 할 수 있습니다.
2. 다운로드 한 파일의 압축을 풀면 Flat-UI-master라는 폴더가 생깁니다. 코딩만으로 플랫 디자인을 만들고자 할 때 필요한 파일들은 도무 dist 폴더 안에 있습니다. dist 폴더에 있는 파일을 모두 복사한 후 사이트 제작에 필요한 폴더로 복사합니다.
3. 템플릿 문서 수정하기
Flat UI 폴더 중 dist 폴더에 있는 index.html 문서는 Flat UI를 사용하기 위한 템플릿 문서입니다. 템플릿 문서란 기본틀 문서라고 생각하면 되는데 웹 템플릿 문서에는 웹 페이지 제작에 필요한 기본 요소들이 모두 들어 있습니다. 편집기 프로그램에서 index.html 문서를 열어보면 그 안에 Flat UI 프레임워크를 제대로 사용하기 위해 필요한 CSS 파일과 js 파일이 모두 연결되어 있는 것을 볼 수 있습니다.
먼저 소스 중 두 번째 줄에 있는 <html lang="en">을 <html>로 수정합니다. 그리고 문서의 인코딩을 utf-8 로 수정하세요. 이렇게 변경하지 않으면 한글이 깨져서 보이게 됩니다.
4. 지금 사용하려는 폴더와 파일은 dist 폴더에 있던 것을 복사해 왔기 때문에 index.html 문서 안의 경로를 수정해야 합니다.
5. Flat UI 스타일 적용하기
'Skills > Web' 카테고리의 다른 글
| 반응형 웹사이트 만들기 (부트스크랩 프레임 워크 1 - 미디어 쿼리와 그리드 시스템) (0) | 2016.01.26 |
|---|---|
| 반응형 웹사이트 만들기 (부트스크랩 프레임 워크 0) (0) | 2016.01.25 |
| 반응형 웹사이트 만들기 (플랫 디자인&카드 UI - 0) (0) | 2016.01.19 |
| 반응형 웹사이트 만들기 (기본 구성 요소 3 - 가변 이미지와 가변 동영상) (0) | 2016.01.19 |
| 반응형 웹사이트 만들기 (기본 구성 요소 2 - 미디어 쿼리) (0) | 2016.01.17 |
