각종 웹브라우저가 지속적으로 업그레이드되면서 CSS3 규칙의 채용이 더욱 늘어나는 추세입니다. 그러면서 스타일시트만으로 멋진 웹페이지를 만들 수 있죠. 이전에는 포토샵이나 파이어워크로 만든 이미지로 버튼, 메뉴바, 아이콘 등에 사용했습니다.
이러한 이미지를 사용하면 반응형 모바일 디자인에서는 레이아웃을 벗어나게 됩니다. 그래서 포토샵으로 만든 UI 그래픽 디자인도 사라질 전망입니다. 스타일시트만으로 얼마든지 위와같은 모양을 만들 수 있기 때문이죠.
부트스트랩 관련 프로젝트 중에는 위와같은 psd 파일을 만들어놓은 것이 있습니다( http://gui.repixdesign.com/#bootstrap ). CSS 만으로 얼마든지 만들 수 있는데 왜 이런 것을 만들었을까요. 포토샵으로 레이아웃 디자인을 먼저 만들 경우 필요하기 때문입니다. 물론 이런 시안을 먼저 만들 필요가 없는 경우에는 사용할 필요가 없죠.
이러한 추세에서도 웹페이지를 만들 때 포토샵 이미지가 필요한 곳이 딱 한군데 있습니다. 배경이미지죠. 배경(background-image 속성)은 보통 단색으로 처리하기도 하지만 보다 아름답게 표현하기 위해서 패턴을 사용하기도 합니다. 이런 패턴은 스타일시트로 만들 수가 없기 때문입니다.
위 링크는 배경 이미지 패턴을 선택해서 내려받을 수 있는 사이트입니다.
리스트 형태로 보거나 썸네일 형태로 더 많은 샘플을 볼 수 있습니다. 리스트 형태에서 패턴에 마우스를 올리고 Preview 버튼을 클릭하면 웹사이트의 배경이미지에 적용돼서 미리보기를 할 수 있습니다. 현재 341개의 엄청난 양의 패턴이미지가 있고 그 품질도 아주 좋습니다. 주로 그레이 색상이고 밝은 색과 어두운 색이 전부입니다. 배경 패턴 이미지로 컬러는 잘 사용하지 않기 때문이죠. 원하는 패턴을 찾았으면 좌측의 다운로드 버튼을 클릭해서 큰사이즈와 작은 사이즈 두개의 패턴이 있는 압축 파일을 내려받을 수 있습니다.
방문해서 보면 하나 정도는 내 블로그에 사용해보고 싶어질 겁니다.
