작년 1월, 웹디자인 트렌드에 대한 글을 하나, 둘 정리하며 속편으로 함께 발행했던 글이 있는데요. ‘웹사이트 배경을 구성하는 다섯가지 아이디어‘라는 글이었습니다. (자세한 내용은 링크를 통해 확인해주세요.)
- 이미지와 기하학적 패턴의 결합
- 회색톤의 활용
- 밝은 색상의 레이어 활용
- 비대칭의 활용
- 추상적인 내용의 활용
시간이 지난 내용이지만, 여전히 유효한 내용이고 실제 웹사이트 배경을 구성할 때 많이 참고하게 되는 내용이기도 합니다. 웹사이트 배경은 웹서비스를 구성하는 요소들 중 가장 많은 영역을 차지하게 되는데요. 직접 배경을 구성하는 것도 좋지만, 오늘은 앞서 소개드렸던 ‘Low Polygon Art’와 더불어 웹사이트 배경에 필요한 패턴을 쉽게 제작하고, 바로 활용할 수 있도록 도와주는 서비스를 소개드리려고 합니다.
웹사이트 배경으로 활용 가능한 30여개의 패턴을 별도의 작업 없이 바로 확인해볼 수 있는 오늘의 서비스는 ‘SVG Backgrounds‘입니다.
가장 먼저 30여개로 구성된 패턴을 위와 같이 확인해볼 수 있습니다. 각기 다른 패턴으로 적용이 되어 있어 썸네일 형태로 먼저 확인한 후 마음에 드는 패턴을 클릭해 상세값을 조절 할 수 있습니다. 위의 이미지를 보면, 처음 제가 등록한 이미지와 배경이 달라졌다는 것을 확인할 수 있는데요! 우측 하단의 패턴을 클릭하여 적용했기 때문입니다.
선택한 패턴은 컬러, 스케일, 투명도, 각도 등 각 값을 원하는 대로 조절해 실시간으로 확인이 가능합니다. 배경이 또 달라진 모습이죠?
컬러를 바꾸는 것만으로도 이렇게 분위기가 달라집니다. 패턴을 고르는 것도 중요하지만, 서비스에 적용할 컬러나 기타값을 하나씩 적용해보며 최적화된 배경으로 만들 수 있으며 이 과정이 정말 쉽게 이뤄져 있다는 것이 가장 큰 장점이자 매력입니다.
30여개의 패턴 모두 확인해봤는데, 어느 하나 매력적이지 않은 패턴이 없었습니다. 기본으로 적용되어 있는 패턴은 30개지만 앞서 말씀드린 것처럼 얼마든지 커스터마이징이 가능하기 때문에 다양한 조합을 만들어 낼 수 있습니다.
기본 제공되는 패턴과 옵션을 활용해 마음에 드는 조합을 찾았다면 스크립트를 복사해 바로 사용이 가능합니다. 사이트에 쓰일 배경을 쉽게 구성할 수 있으며, 나만의 조합을 바로 적용해볼 수 있는 서비스. 별도의 회원가입이나 로그인 과정 없이도 사용이 가능하니 더 자세한 내용은 ‘이 곳‘을 참고하세요!
한성규님의 ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한번 더 소개합니다.
[fbcomments url=”http://ec2-13-125-22-250.ap-northeast-2.compute.amazonaws.com/2018/06/14/servicereview-websitepattern/” width=”100%” count=”off” num=”5″ countmsg=”wonderful comments!”]
