부트스트랩이나 리액트에서 많이 쓰는 Material UI 같은 UI Framework 들은 많이 알려져 있지만, 상대적으로 Skeleton CSS는 많이 알려지진 않은 것 같다. 아마도 'skeleton'이라는 단어 자체가 한글 뜻 그대로 '뼈대'라는 의미로 프로그래밍에서 너무 많이 쓰이는 단어이기 때문일 것이다. skeleton CSS라는 용어도 사실은 범용적으로 CSS코드의 뼈대 또는 프레임 역할을 하는 파트라는 의미로 흔히 쓰인다.
Skeleton CSS
오늘 소개하려고 하는 Skeleton CSS는 고유명사다. (이하 '스켈레톤'이라 지칭)
Skeleton CSS: http://getskeleton.com/
의존도가 복잡한 더 큰 UI 프레임워크들과 달리, 스켈레톤은 HTML 표준 엘리먼트들을 그대로 꾸미며, custom class 사용을 최소화하고, Grid 개념만을 추가로 도입한다. 말 그대로 뼈대로써의 UI에만 집중하는 라이브러리이다.
When?
스켈레톤은 테스트용 프로젝트를 위해 빠르게(하지만 보기 나쁘지 않게) UI를 만들거나, 추후 UI 자체 개발을 위해 UI 프레임워크 의존성을 최소화 해야할 때 유용하다. 스켈레톤을 걷어내기 위해서는 단지 CDN 링크 한줄만을 제거해주면 된다. (+ Grid 및 소수의 css class들)
How?
스켈레톤을 이용하기 위해서는 아래와 같이 세가지 방법이 있다.
1. CDN Link
아래 CDN Link를 HTML 문서의 Header에 추가한다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">2. .css file
스켈레톤에서 제공하는 압축파일을 다운로드하여 스켈레톤의 css파일을 본인의 프로젝트에 가져다 사용한다. (스켈레톤 공식 다운로드 링크: Download the zip)
3. NPM install (useful in ReactJS)
리액트에서 사용할때는 아래 명령어로 패키지를 설치하면 import하여 사용할 수 있다.
npm i -S react-skeleton-css코드에서 import
import 'react-skeleton-css/styles/skeleton.2.0.4.css'
// normalize is also available
import 'react-skeleton-css/styles/normalize.3.0.2.css'Outro
미니멀한 디자인(UI든 UX든 미니멀이 좋다)을 선호하는 나에겐 사용법에서도(UX), 심미성에서도(UI) 스켈레톤은 더 없이 좋은 라이브러리이다. 앞으로도 이와 같이 미니멀리즘을 추구하는 개발 패러다임이 더욱 더 발전했으면(또는 내가 많이 발견했으면) 하는 바램이다.
Skeleton GitHub: https://github.com/dhg/Skeleton
