매장 상품 홍보용으로 사용할 수 있는 블로그 스킨을 소개합니다
소상공인의 매장 홍보용으로 꾸밀 수 있는 것은 사이트와 블로그를 찾을 수 있습니다. 사이트는 여러 가지 종류가 있습니다. 회사 소개하는 메인화면에서 서브 페이지로 이동하는 간단한 구성으로 만들 수 있는데, 이 역시 어느 정도 비용이 들어야 합니다. 그래서 블로그를 회사 사이트로 이용하는 업체도 상당히 많습니다. 특히 네이버 블로그는 사이트로 사용하기에는 엉성하지만, 많은 회사에서 사용하고 있어 익숙해져 있습니다. 블로그를 회사 사이트로 이용하는 것은 사이트와 달리 유지보수가 간편합니다. 드래그 드롭 등의 효과가 들어있는 사이트보다는 딱딱하고 일률적인 틀에 얽매여 있어 고유의 특징은 없지만, 블로그는 소비자들과 직접 대화를 할 수 있는 창으로도 활용할 수 있습니다. 개인 회사가 아니라도 어느 정도의 규모가 있는 회사에서도 블로그를 사이트로 운영하는 이유는 여기에 있을 겁니다.
네이버 블로그의 대화 목록형 타입이 아닌 홈쇼핑 상품 섬네일의 바둑판식으로 보여주는 스타일의 블로그를 찾는다면 네이버 블로그에서는 볼 수 없습니다. 네이버 블로그의 확장력은 욕심이 나지만, 네이버 자체 상품 판매를 위해 제공하지 않겠죠. 홈쇼핑처럼 상품 진열하기 위한 매장을 위한 블로그라면 구글 블로그에서 찾으면 되겠습니다. 티스토리에서도 있겠지만, 티스토리는 원하지 않는 광고가 들어가기에 고려하지 않는 것이 좋습니다. 그렇다면 남아있는 블로그는 구글 블로그입니다. 여기까지 구상했던 내용으로 찾았던 구글 블로그 스킨입니다. Nurify-Free-Version-1.0
구글 블로그의 고질적인 문제가 있습니다. 구글 블로그는 메인 화면에서 20개의 글을 보기 위해 설정을 했더라도 뒷장은 5개의 글만 보입니다. 쇼핑몰처럼 상품이 섬네일만 나열되어 있는 스킨이라도 두 번째 장에서는 5개의 상품만 올라옵니다. 첫째 장에서는 60개의 상품을 보다가 두 번째 페이지에서는 5개 상품만 볼 수 있다면 방문자는 헹한 느낌을 받게 될 겁니다. 이럴 때는 게시판 아래 숫자로 되어 있는 페이징보다는 더 보기 버튼을 눌러서 시스템에서 요구하는 상품이 계속 올라오는 것이 좋습니다. 더 보기 버튼을 누를 때마다 5개의 상품이 올라오더라도 방문자 입장에서는 어색하다는 느낌은 받지 않을 겁니다. 지금, 이 스킨이 이런 타입입니다. 연결된 스킨 미리보기에서는 유료 버전으로 무료 버전을 사용할 때는 카테고리 별로 상품이 구분되지 않고 한꺼번에 등록 순서대로 올라오는데, 이편이 오히려 더 좋은 것 같기도 합니다.
매장 소개용으로 만든다면 이 스킨으로 결정했고 다른 스킨은 찾아보지 않아도 될 것 같아서 여기서 결정하고 공을 들였습니다. 이 스킨에서 시간을 들인 것은 배경 색상을 변경하는 방법이었는데요, 초보자에게는 어렵게 만들어져있습니다.
<Variable name="background.color" description="Body Background" type="color" default="#c8fbe6" value="#c8fbe6"/> <!-- 전체 배경 색상 -->
<Variable name="text.color" description="Text Color" type="color" default="#333333" value="#333333"/> <!-- 게시판 글자 색상 -->
<Variable name="widget.bg" description="Widget Background" type="color" default="#f1fcfa" value="#f1fcfa"/> <!-- 게시판배경 색상 -->
<Variable name="widget.title.bg" description="Title Background" type="color" default="#fbdf94" value="#fbdf94"/> <!- 카테고리 메뉴 바 색상 -->
<Variable name="footer.bg" description="Footer Background" type="color" default="#FF9500" value="#FF9500"/> <!-- 하단 위젯 배경 색상 -->
<Variable name="footerbar.bg" description="Footer Bar Background" type="color" default="#ff9900" value="#ff9900"/> <!-- 하단 바 색상 -->
여기까지는 위의 코드를 찾아 원하는 색상으로 수정하고 확인하면 어떤 곳을 바꾸는지 알 수 있습니다. 이 스킨의 특징은 기본 색상을 전체적으로 사용하고 있습니다. 이를테면 링크는 기본 색상이 사용됩니다. 일반적인 스킨에서는 섹션별로 색상을 정하는데, 이 스킨에서는 메인 칼라를 정해놓고 그 색상을 가져오는 변수를 사용합니다. 그래서 기본 색상을 선정하기 위해서는 바탕색도 생각해서 어울리는 색상을 찾아야 합니다.
그리고 가장 어려웠던 것이 상단 바 색상을 변경하는 것인데요, 여기에는 특정 색 하나만 사용하는 것이 아닌 두 가지 색을 섞어서 나타냅니다. 그것도 동적으로 픽셀 하나하나가 살아있듯이 움직이는데 오랫동안 보고 있으면 눈이 아플 것 같아요. 이런 것도 같이 설명하겠습니다.
<Variable name="topbar.bg1" description="Top Bar Background 1" type="color" default="#fe9900" value="#fe9900"/>
<Variable name="topbar.bg2" description="Top Bar Background 2" type="color" default="#ffffff" value="#ffffff"/>
--topbar-bg:linear-gradient(160deg, $(topbar.bg1), $(topbar.bg2));
상단 바 색상은 방문자의 눈에 가장 먼저 인상을 남기는 곳으로 자신의 사이트를 나타내는 색상을 정해야 합니다. 상단 바 색상이 적용되는 것은 아래 --topbar-bg: 에 적용되는 색상입니다. 여기에는 topbar.bg1, topbar.bg2 의 색상을 섞어서 만들어 냅니다. 그 명령어가 linear-gradient(160deg) 입니다.
60deg는 각도 단위로, 여기서는 그라데이션의 방향을 나타냅니다. 선형 그라데이션의 각도는 색상이 변하는 방향을 결정합니다. 각도 값은 0deg에서 시작하여 시계 방향으로 증가합니다. 0deg는 오른쪽을 나타내며, 90deg는 아래 방향, 180deg는 왼쪽, 270deg는 위 방향을 나타냅니다. 따라서 60deg는 오른쪽에서 왼쪽으로 60도 기울어진 선형 그라데이션을 나타냅니다. 그라데이션의 시작과 끝 색상 사이에 색상이 부드럽게 변화하게 됩니다.
바탕색도 linear-gradient 효과가 들어갔으나 색상은 연하게 바꾸고 나니 그다지 느끼지 못합니다. 상단 top-bar도 적용한 색상으로는 불편하지 않네요. 그리고 상단 바 색상을 바꾸는 데는 여러 곳에서 발견되고 있습니다. 위의 코드만 바꿔서는 안 되길래 아래 코드도 색상을 바꾸었습니다. 이렇게 해서 원하는 색상으로 바꾸었는데, 실제로 화면에서는 상단 바 색상이 진하게 보입니다. 이것은 이 스킨의 색상을 넣는 방식에서 차이가 있습니다. 바 색상의 백그라운드 색상을 먼저 깔고 그다음에 원하는 색상을 넣는 것 같아요. 두 가지 색상을 섞어서 동적 표현을 하기 위한 그 바탕색을 따로 넣어주는 것 같은데 거기까지는 찾을 수가 없었습니다.
아래 코드도 색상을 변경했습니다. 하나씩 색상을 변경하면서 적용이 되는 코드만 수정하면 되겠습니다.
<Variable name="header.bg" description="Header Background" type="color" default="#fe9900" value="#fe9900"/> <!-- 상단 바 색상 변경 -->
그리고 또 하나 상단 바 색상을 변경하기 위한 변수가--topbar-bg: 가 사용되고 있는데요, 스킨에는 --topbar-bg: 색상을 요구하는 코드가 하나 더 들어있습니다. CSS에서는 마지막 해당 코드의 색상이 적용된다고 하는데, 이 스킨에서는 그렇지 않았습니다. 어떤 용도로 사용하는지 몰라서 색상만 바꾸고 그대로 두었습니다.
--topbar-bg:#ff9900; /* 상단 바 색상 */
이 스킨에서 색상을 수정할 때 주의할 점이 있습니다.
<Variable name="main.color" description="Theme Color" type="color" default="#fdc632" value="#fdc632"/>
이 코드가 메인 칼라로 지정한 코드입니다. 메인 컬러는 #fdc632로 지정했습니다. 그리고 메인 컬러를 사용하기 위한 코드는 아래처럼 사용합니다.
<Variable name="footer.hover.color" description="Footer Hover Color" type="color" default="$(main.color)" value="#fdc632"/>
Footer Hover Color는 메인 칼라를 사용하겠다는 것인데요, 여기서 색상 수정은 메인 컬러가 들어 있는 코드에서 색상만 바꾸면 되는 것이 아닌 default="$(main.color)" value="#fdc632" 여기서는 각 코드를 찾아서 value="#fdc632" 속의 코드도 몽땅 바꾸어야 합니다. 바꾸는 방법은 구글 블로그 html 편집에서는 일괄 수정을 할 수 없습니다. html 에디터 편집기를 이용해서 한꺼번에 변경하고 다시 구글 블로그 html 편집으로 몽땅 복사해서 넣는 방법을 사용하면 그다지 번거롭지는 않을 겁니다.
그리고 한 가지 더 추가할려고 했던 것이 있는데요, 이 스킨은 매장 홍보용으로 사용하기에 상당히 탐이 나는 스킨입니다. 그래서 이 스킨을 사용하기 위해 조금 더 이쁘게 꾸밀려고 했습니다. 구글 블로그에서 고질적인 문제는 두번 째 장에서 목록이 5개만 나오는 것이라고 했고, 그것을 해결하기 위한 방법은 페이징을 사용하지 말고 더보기 버튼이 있는 스킨을 찾으면 그나마 괜찮을 것이라고 했습니다.
구글 블로그에서 해결할 수 없는 또 한가지는 카테고리를 임의적으로 정렬할 수 없다는 겁니다. 카테고리 순서는 빈도와 순서로만 정렬이 됩니다. 사용자가 원하는 순서로 카테고리 메뉴를 배치하기 위해서는 다른 방법은 없고 순서에 맞는 메뉴 이름으로 만들어야 합니다. 사용자가 원하는 메뉴 이름이 아닌 카테고리 자동 순서에 맞는 이름으로 만들어야 하죠. 반면 상단 메뉴는 사옹자가 임의로 넣을 수 있고, 순서도 마음대로 정할 수 있습니다.
이 문제를 해결하는 방법은 또 있습니다.
블로그에서 생성되어 있는 카테고리를 사용하지 말고 가젯을 html/javascript로 생성하고 만들면 됩니다. 이렇게 만들 수 있죠.
아이콘 폰트를 이용해서 해당 메뉴에 어울리는 아이콘을 넣고 메뉴를 나타냅니다. 그런데 보는 것처럼 색상이 원하는 색상이 아닙니다. 게시판 글자색은 #333 으로 지정했는데, 지금 보이는 색상은 메인 컬러로 지정한 링크가 걸렸을 때 나타나는 색상입니다. 왜 이렇게 엉뚱한 색상이 나오는지 아무리 수정해도 해결할 수 없었는데요,
소스에는 아래처럼 링크가 걸린 텍스트는 메인 컬러가 적용되게끔 되어 있습니다.
a{
color:var(--main-color)
}
이렇게 표시가 되어있는데요, 그런데 이곳을 함부로 바꿀 수는 없습니다. 다른 곳에서 기본으로 사용하기에 일부분을 위해 전체 색상을 바꿀 수는 없습니다. 이곳을 어떻게 만들어려고 하다 많은 시간을 투자했는데요, 결국에는 해결하지 못했습니다.
.more-link {
color: #ff0000 !important; /* 강제로 빨간색 지정 */
padding: 5px 5px;
text-decoration: none;
transition: color 0.3s ease;
font-size: 14px;
}
!important; 이 코드가 more-link 클래스에서는 사용자 원하는 색상을 강제로 넣을 때 사용하는데, 적용되지 않았습니다. 또 하나, 게시판 글자 색상은 #333 색상이 적용되어 있습니다.
<Variable name="text.color" description="Text Color" type="color" default="#333333" value="#333333"/> 이 코드입니다.
여기서 사용한 "text.color"를 클래스로 사용하면 가능할까요.
.more-link {
color: $(text.color); /* 게시판 글자색을 가져오기 */
padding: 5px 5px;
display: inline-block;
text-decoration: none;
transition: color 0.3s ease;
font-size: 14px;
}
이렇게 해봐도 역시 글자 색은 바뀌지 않네요. 메뉴 앞에 아이콘이 보이지 않는 것은 아마 아이콘 폰트가 적용되지 않는 것일 수 있습니다. 같은 방법으로 적용했고 나머지는 잘 나오니 이 아이콘 문제는 다른 것으로 대체하면 해결될 겁니다. 문제는 글자 색인데요, 결국은 해결하지 못하고 포기했습니다.
포스팅이 길어 두 개로 나눌까하다 하나의 스킨 설정으로 쭉 이었습니다. 이 스킨을 찾을 정도라면 구글 블로그 세팅은 할 수 있는 능력이 있겠지만, 혹시 처음이라면 이전 포스팅을 참고하세요.
블로그에 예쁜 아이콘 폰트 적용하는 방법(fontawesome)