---
title: 파비콘을 바꾸려다 블로그 브랜딩까지 해본 이야기
description: AI로 만든 로고 이미지를 실제 블로그에서 쓰기 좋게 파비콘, 헤더 마스코트, 캐릭터 에셋으로 나눠 정리한 기록.
series: brand
seriesOrder: 1
publishedAt: 2026-07-03
updatedAt: 2026-07-08
tags: [salt-dev, brand, logo, mascot]
period: 2026.07
techStack: [Branding, AI Image, Favicon]
draft: false
internal: false
---

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

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

<img src="/images/brand/salt-dev-logo-lockup.webp" alt="salt-dev 로고 락업" width="627" height="674" loading="eager" fetchpriority="high" decoding="async" />

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

## 로고 방향

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

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

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

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

<img src="/images/brand/salt-dev-app-icons.webp" alt="salt-dev 앱 아이콘 세트" width="627" height="674" loading="lazy" decoding="async" />

<img src="/images/brand/salt-dev-character-variations.webp" alt="salt-dev 캐릭터 변형" width="627" height="372" loading="lazy" decoding="async" />

<img src="/images/brand/salt-dev-brand-scene.webp" alt="salt-dev 브랜딩 장면" width="627" height="372" loading="lazy" decoding="async" />

## 색과 톤

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

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

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

## 에셋으로 나누기

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

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

<img src="/images/brand/salt-dev-logo-lockup.webp" alt="salt-dev 로고 락업" width="627" height="674" loading="lazy" decoding="async" />

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

<img src="/images/brand/salt-dev-app-icons.webp" alt="salt-dev 앱 아이콘" width="627" height="674" loading="lazy" decoding="async" />

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

<img src="/images/brand/salt-dev-character-variations.webp" alt="salt-dev 캐릭터 변형" width="627" height="372" loading="lazy" decoding="async" />

## 앞으로의 캐릭터 활용

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

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

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

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