파비콘을 바꾸려다 블로그 브랜딩까지 해본 이야기

처음에는 블로그 파비콘을 바꾸고 싶다는 작은 생각에서 출발했습니다. 그러다 자연스럽게 이 블로그의 로고와 브랜딩을 어떻게 잡을지도 함께 고민하게 됐습니다.

음식에 소금을 톡톡 뿌리면 맛이 살아나듯, 하나씩 남긴 글들이 제 개발 경험을 조금 더 밀도 있게 만들어주길 바랐습니다. 그래서 이 공간의 이름을 salt-dev로 지었습니다. 이름을 정하고, 그 이름에 맞는 작은 로고와 마스코트를 만들어보며 블로그의 분위기를 조금씩 잡아갔습니다.

GPT에게 딱딱하지 않고, 귀엽고 친숙한 느낌이면 좋겠다고 피드백하며 만든 salt-dev 로고입니다.

로고 방향

salt-dev는 개발 기록을 남기는 공간입니다. 거창한 브랜드라기보다, 문제를 오래 씹어보고 적당한 간을 맞춰 정리하는 개인 작업실에 가깝습니다.

그래서 로고도 강한 기술 기업 느낌보다는 다음 기준을 우선했습니다.

• 작고 기억하기 쉬운 형태: 파비콘이나 앱 아이콘으로 줄여도 알아볼 수 있을 것
• 개발자 블로그다운 단서: 모자 안의 </> 기호처럼 코드와 바로 연결되는 요소를 둘 것
• 가벼운 온도감: 기술적인 글을 다루되, 글을 읽는 첫인상은 조금 부드럽게 만들 것

그래서 작은 크기에서도 얼굴과 모자 형태가 먼저 보이고, 개발자 블로그라는 단서는 </> 기호로 남기는 방향으로 정리했습니다.

색과 톤

메인 컬러는 네이비와 블루 계열로 잡았습니다. 글을 읽는 화면이 너무 튀지 않도록 전체 톤은 차분하게 두고, 포인트 컬러는 볼과 점처럼 작은 요소에만 사용했습니다.

#1F2A44  deep navy
#3B82F6  blue
#A5C8FF  soft blue
#FFD6D6  blush
#D1D5DB  light gray
#FAFAFA  background

팔레트가 생기고 나니, 지금 CSS에 흩어져 있는 hex 값도 semantic token으로 이름을 붙이고 싶어졌는데, 일단 내일의 저에게 미뤄뒀습니다.

에셋으로 나누기

처음에는 로고, 캐릭터, 아이콘이 한 장에 담긴 통짜 이미지로 나왔습니다. 글 안에서 보여주기에는 괜찮았지만, 파비콘이나 헤더에 그대로 쓰기에는 맞지 않았습니다.

그래서 원본 브랜드 보드는 보관하되, 실제 블로그에서 쓰기 좋은 단위로 이미지를 다시 나눴습니다. 헤더에 쓰는 작은 마스코트, 글 안에서 보여줄 로고 락업, 파비콘과 앱 아이콘처럼 쓰임이 서로 달랐기 때문입니다.

가장 자주 쓰는 이미지는 로고 락업과 작은 마스코트입니다. 글에서는 로고 전체를 보여주고, 헤더에서는 작은 마스코트와 텍스트를 조합한 SiteLogo 컴포넌트로 분리했습니다. 이미지 하나를 그대로 줄여 쓰기보다, 쓰임에 맞게 나누는 편이 레이아웃과 접근성을 관리하기 쉬웠습니다.

파비콘과 앱 아이콘은 작게 줄어들수록 디테일이 쉽게 사라집니다. 그래서 얼굴과 모자 형태가 먼저 보이도록 아이콘용 이미지를 따로 만들고, 필요한 크기별 에셋으로 분리했습니다.

앞으로의 캐릭터 활용

가장 먼저 적용한 곳은 파비콘과 헤더입니다. 작은 영역에서도 블로그의 이름과 분위기가 바로 보이도록, 헤더에는 마스코트와 salt-dev 텍스트를 함께 두고 파비콘은 얼굴과 모자 형태가 잘 보이는 버전으로 사용했습니다.

로고를 만들고 보니, 단순한 아이콘보다 작은 캐릭터에 가까운 형태가 됐습니다. 그래서 앞으로는 장식용 이미지에 그치기보다, 블로그 안의 상태나 글의 맥락을 보여주는 작은 캐릭터로 활용할 수 있을 것 같습니다.

• 404나 에러 페이지처럼 길을 잃은 화면
• 검색 결과가 없거나 아직 글이 없는 빈 상태
• 로컬에서만 보이는 draft 글 배지
• 시리즈 대표 이미지나 OG 이미지의 작은 시그니처
• 회고 글이나 배포 기록에 붙일 가벼운 캐릭터 변형

작은 파비콘 하나를 바꾸려던 일이었지만, 덕분에 이 블로그가 어떤 분위기의 공간이면 좋을지 조금 더 선명해졌습니다.