개인 블로그에 로고가 왜 필요할까? 처음 블로그를 만들 당시는 필요 없을 것이라 생각했다. 하지만 로고는 Favicon과 무관하지 않았기에 어쩔 수 없이 만들어야 하는 것이었다. 큰 사이즈의 로고를 만들면 그 것을 리사이징하여 Favicon에 사용할 수 있기 때문이다. 이 포스트에서는 Animated SVG 로고를 만들고 블로그 첫 화면에 적용하는 과정을 설명한다.
Favicon에 사용할 로고가 필요한 이유
모바일 기기 세상이 도래하면서 Favicon이 쓰임이 과거와는 많이 달라졌다. 데스크탑의 IE가 주류였던 시절에는 웹브라우저 상단의 탭에 아이콘을 표시하기 위해서 16x16의 작은 크기의 favicon.ico만 제공하면 됐다. 하지만 현재는 데스크탑 뿐만 아니라 모바일 기기에서도 바탕화면에 웹사이트의 바로가기를 생성하는 기능을 제공하고 있으며 디스플레이의 해상도가 높아지면서 16x16으로는 더이상 괜찮은 퀄리티의 아이콘을 제공할 수 없게 되었다.
이에 따라 Favicon도 전보다 크게 만들어야 하며 다양한 환경을 지원하기 위해서 다양한 크기의 아이콘을 제공해야 한다.
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
아이콘을 제공하지 않으면 브라우저가 제공하는 기본 아이콘이 바로가기용으로 사용된다. 그것 보다는 내 블로그에 아이덴티티를 부여할 수 있는 괜찮은 로고를 만드는 편이 좋을 것이다. 결론적으로 512x512 크기의 로고 이미지를 만들면 다양한 사이즈의 Favicon을 생성할 수 있고 덤으로 그 이미지를 블로그의 첫 화면용으로 사용할 수 있다. (Favicon에 대한 더 자세한 내용은 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? 에서 볼 수 있다.)
SVG 로고 제작
디자이너가 아닌 개발자도 멋진 로고를 만들고 싶다. 물론 그럴만한 능력을 가진 사람도 많겠지만 우리는 굳이 바닥부터 만들 필요가 없는 세상에 살고 있다. 구글에서 free images혹은 free icons로 검색하면 다양한 무료 이미지를 제공하는 사이트를 찾을 수 있다. 이 사이트들은 상업적으로 이용해도 상관 없는 높은 퀄러티의 이미지들을 많이 보유하고 있다. 무료이지만 출처를 꼭 밝혀야 한다거나 링크를 삽입해야하는 조건이 있을 수는 있다.
어떤 모양으로 만들지 결정하기
개발자 블로그의 로고는 어떤 것이 좋을지 몇 초간 고민했다. 그 후 내린 결론은 아무도 신경쓰지 않을 거라는 것이다. 컴퓨터, 키보드, 마우스 등 어떤 것이든 괜찮다. 그러나 모양 자체를 직접 디자인해낼 능력이 안된다고 생각하면 구글의 도움을 받는 것이 좋다.
나의 경우 오랜 기간 리눅스 환경에서 개발한 경험을 떠올리며 bash icon으로 검색을 해서 나온 이미지를 로고로 사용하려고 했다.
디자인이 너무 훌륭해서 구글 이미지 검색을 통해서 확인해보니 Bash의 공식 로고라는 사실을 알게 됐다. 확인 절차 없이 사용했으면 마치 Bash와 관련 있는 주제의 블로그처럼 여겨질뻔 했다. 구글 이미지 검색은 이미지의 내용을 기반으로 검색하므로 같거나 비슷한 이미지를 검색할 때 유용하게 사용된다.
이후 free icon으로 검색해서 나온 사이트 중 icon8에서 마음에 드는 아이콘을 찾을 수 있었다. 유료 고객은 큰 사이즈의 PNG나 백터 그래픽인 SVG까지 다운로드 할 수 있다. 나의 경우는 선 끝 모양과 두께 등이 마음에 들지 않아서 구매를 하지는 않았고, 이 모양을 흉내내서 512x512 크기 베이스의 SVG를 만들기로 했다. (따라 만들기가 범죄 행위라면 구매하겠습니다.)
Path 또는 Shape Layer로 로고 작업
SVG는 Scalable Vector Graphics의 약자로 XML 기반의 그래픽 엘리멘트이다. 백터 방식이기에 확대와 축소를 거듭해도 깨지지 않는다는 장점이 있다. (다만 안보일 뿐...) 처음부터 백터 이미지를 만들 생각은 아니었지만 스타일의 변경을 통해 다양한 효과를 줄 수있다는 장점이 있어서 백터로 만들기로 결정 했다. 포토샵에서 백터 이미지를 만들기 위해서는 Path와 Shape Layer로 만들어야 한다. 포토샵은 사진 편집 뿐만 아니라 우리가 아는 모든 이미지 작업을 할 수 있는 툴이니 익혀 두면 좋다.
포토샵에서 외곽선 그리고 위 아래의 점선이 들어갈 두께를 고려하여 가이드 라인을 먼저 잡는다. 가이드는 라인은 모든 마우스 작업을 라인에 Snap할 수 있어서 매우 편리하다. 아이콘 외곽선을 두껍게 하면 조금 더 정돈된 느낌을 주므로 두께를 많이 주었다.
이후 모서리가 둥근 직사각형 도구를 이용해서 모든 면들을 그렸는데 복잡한 모양이 아니기에 손쉽게 만들 수 있었다. 중요한 점은 선 두께를 0으로한 면으로면 구성했다는 점이며, 당연하게도 비트맵 도구로 그리면 안된다는 것이다. 패스 또는 모양 레이어로 만들어야 한다.
SVG로 Export하기
지금까지의 작업을 PNG로 저장해도 상관없다. 하지만 다음과 같은 장점을 가지므로 SVG로 저장하기로 한다.
- 비트맵에 비해서 데이터의 크기가 작다.
512x512를 베이스로 만들었지만 필요할 경우 더 크게 해도 깨지지 않는다.- CSS를 이용해서 색상, 크기 변경 및 애니메이션 적용까지 다양한 효과를 줄 수 있다.
작업한 것을 "Layer > 우클릭 > Exprt As..." 메뉴를 통해 SVG로 내보내기하면 다음과 같은 만만치 않은 XML코드를 얻을 수 있다. 이 코드를 그대로 React Component로 옮기기만 하면 된다.
<svg
id="새로_만든_것"
data-name="새로 만든 것"
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
.cls-1,
.cls-2 {
stroke: #000;
stroke-width: 0px;
}
</style>
</defs>
<path
id="모서리가_둥근_직사각형_3"
data-name="모서리가 둥근 직사각형 3"
class="cls-1"
d="M82,0H430a82,82,0,0,1,82,82V430a82,82,0,0,1-82,82H82A82,82,0,0,1,0,430V82A82,82,0,0,1,82,0Zm3,25H427a60,60,0,0,1,60,60V427a60,60,0,0,1-60,60H85a60,60,0,0,1-60-60V85A60,60,0,0,1,85,25Z"
/>
<!-- 중략-->
<path
id="모서리가_둥근_직사각형_9_복사_2"
data-name="모서리가 둥근 직사각형 9 복사 2"
class="cls-1"
d="M135.289,216.121l83.051,57.115a10.03,10.03,0,0,0,13.909-2.524,9.91,9.91,0,0,0-2.538-13.833L146.66,199.764a10.03,10.03,0,0,0-13.909,2.524A9.91,9.91,0,0,0,135.289,216.121Z"
/>
</svg>React Component 만들기
React에서 SVG 이미지를 가져오는 방법 몇가지가 있다. gatsby-plugin-react-svg 와 같은 플러그인을 사용할 수 있고, Material-UI를 사용한다면 기본 제공되는 SvgIcon를 사용할 수 있다. 최근 고민 끝에 이 블로그에 Material-UI를 적용 했는데 이처럼 내가 필요로하는 기능(레이아웃, SVG, AppBar, Drawer, Icon, List 등)을 적어도 10개 이상 제공하기에 MUI 문서를 통해서 충분한 검토를 마친 후 결정했다.
Logo Component 코딩
import { SvgIcon, SvgIconProps } from "@material-ui/core"
import React from "react"
import "./style.scss"
const Logo = (props: SvgIconProps) => {
return (
<SvgIcon
{...props}
viewBox="0 0 512 512" className={`${props.className ?? ""} logo-svg`} >
{/* 중략 */}
<rect
data-name="모서리가 둥근 직사각형 9"
className="cls-2 logo-cursor" x="262"
y="314"
width="121"
height="20"
rx="10"
ry="10"
/>
{/* 중략 */}
</SvgIcon>
)
}
export default Logo위 코드에서 주목해야 하는 점이 몇가지 있다.
ViewBox설정: ViewBox은 단어 그대로 View(시야)의 크기이이며 컨테이너의 사이즈가 아니다. View를 작게 잡으면 전체 SVG 엘리멘트의 일부만 보일 것이다. 따라서 포토샵에서 내보내기한 크기와 동일하게 설정한다.logo-svgclass 추가: 위와 같은 방법으로 부모 Component로 부터 받은 클래스 명과 이 Component를 위한 클래스 명을 동시에 적용한다. 재사용 가능한 Component이기 때문에 외부에서width와height등의 스타일을 설정할 수 있어야 한다.id제거: 재사용 가능한 Component이기에 각 엘리먼트에 부여된id를 모두 삭제한다.logo-cursorclass 추가: 코드의rect엘리멘트는 로고에서 커서에 해당하는 부분이다. 애니메이션을 주기 위해서 className을 추가적으로 부여한다.<defs><style></style></defs>없애기: 적어도 MUI에서는defs태그를 지원하기 않기 때문에 제거한다. 대신 이 부분을 별도의 style.scss를 만들어 그 곳에 추가한다.
스타일 설정
로고를 어떻게 만들었나에 따라 다양한 CSS가 SVG 적용되어 있을 수 있다. 이 스타일은 위에서 언급했듯 <defs><style></style></defs>에 있다. 그 것을 그대로 옮기자.
.logo-svg {
color: black;
.cls-1 {
fill-rule: evenodd;
}
.cls-1,
.cls-2 {
stroke: #000;
stroke-width: 0px;
}
}위에서도 언급했듯이 이렇게 CSS를 이용해서 색상 크기 등을 변경할 수 있다는 점이 큰 장점이라 할 수 있다.
애니메이션 적용
우리는 재미를 위해 무엇인가를 만든다. 로고를 만드는 작업에서도 재미라는 요소를 빼놓을 수는 없다. SVG는 CSS를 이용하여 Keyframe Animation을 적용할 수 있다. 이것 하나만으로도 이미지를 백터로 만들만한 충분한 가치가 있다.
커서를 깜빡이는 Keyframes 애니메이션
로고는 프롬프트와 커서를 가지고 있다. 그 중 커서를 주기적으로 깜빡이게 만들 것이다. 이 것을 위해 CSS가 제공하는 keyframes 기능을 사용할 것이다.
@keyframes fadeInOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.logo-svg {
.logo-cursor {
animation: fadeInOut 2s infinite ease-in-out;
}
}CSS 애니메이션 기능은 날로 발전해가고 있고 그 것을 이용한 대단한 테크닉도 쉽게 찾아 볼 수 있지만 여기서는 필요 없다. 따라서 CSS도 위와 같이 단순하다. 애니메이션의 주기를 2s로 봤을 때, 타임라인에서 0%, 50%, 100%가 되는 지점에서 투명도를 설정해 주면 된다. 그리고 infinite 옵션을 추가하여 무한횟수 만큼 깜빡이게 한다.
Hover 애니메이션
커서를 깜빡이는 애니메이션만으로도 충분히 만족스럽지만 마우스에도 반응 하도록 해본다. 이 것은 쓸데는 기능이지만 순수하게 재미를 위한 것이다. 주의할 점은 hover에 너무 과장된 효과를 넣으면 사용이 불편해 진다는 점이다. 반면 클릭을 하는 사람은 거의 없을 것이기에 active에는 무엇을 넣어도 상관이 없을 것 같다. 앞으로 애니메이션 효과를 시험해 보고 싶을 때는 active에 이것 저것 추가해볼 예정이다.
.index-page-logo {
cursor: pointer;
width: 100px;
height: 100px;
transition: all 0.2s ease-in-out; &:hover {
width: 110px;
height: 110px;
transform: rotate(5deg); }
&:active {
transform: rotate(-5deg); width: 160px;
height: 160px;
}
}위 예제는 keyframes 애니메이션을 사용하지 않고 transition 애니메이션을 사용한다. transition은 keyframes와 사용 방법과 목적 자체가 다르다. 주요 차이점은 다음과 같다.
transition은 엘리멘트의 모습에 CSS로 변화를 주었을 때, 모든 변화에 대해서 웹 브라우저가 그 중간 과정을 애니메이션으로 채워준다.keyframes는 시간의 변화에 따라 특정 엘리멘트의 변하는 모든 모습을 개발자가 직접 CSS로 정의 한다. 각 key frame사이의 변화는 transition과 동일한 방식으로 채워준다.
완성
끝.