개요

아무래도 블로그 템플릿에 있던 로고는 개성이 없으니까, 블로그 용으로 뭔가 하나 만들어보긴 해야겠다는 생각이 들었습니다. 그래서 Stable diffusion을 이용해서 로고를 만들어보고, 각종 크기로 리사이징하는 방법을 알아보겠습니다.

이미지 생성

널리 퍼진 NovelAI 유출 모델을 이용했습니다. 대충 배 모양으로 만들어줘! 해서 만든 여러 개의 이미지 중에서 마음에 드는 것을 하나 골라보았습니다. 크기는 일단 512x512의 사각형 모양 이미지로 만들어보았습니다.

(여기에 생성 데모가 들어가면 참 좋겠지만, GPU 가속이 필요하기 때문에 부득이 생략합니다)

원형 이미지로 만들기

생성된 이미지는 512x512 사이즈의 사각형 모양 이미지입니다. imagemagick에서 제공하는 몇몇 스크립트를 이용해서 후처리를 조금 해 주고, 원형으로 크롭해 보겠습니다.

스크립트는 다음 블로그에서 찾을 수 있었습니다.

이로써 512x512 크기에, 원형으로 크롭된 이미지가 만들어졌습니다.

각종 크기로 리사이징하기

로고 이미지를 Favicon, OpenGraph, TwitterCard 등에 사용하기 위해서는 여러 크기의 이미지가 필요합니다. 다음에 로고가 싫증나서 새로 만들어야 하는 경우에도 빠르게 반복 적용할 수 있도록 하기 위해 Makefile을 만들어서 자동화하면 좋을 것 같네요.

all: android-chrome-192x192.png apple-touch-icon.png favicon-16x16.png favicon-32x32.png favicon.ico mstile-150x150.png assets/logo.webp

android-chrome-192x192.png: android-chrome-512x512.png
	convert $< -resize 192x192 $@

apple-touch-icon.png: android-chrome-512x512.png
	convert $< -resize 180x180 $@

favicon-16x16.png: android-chrome-512x512.png
	convert $< -resize 16x16 $@

favicon-32x32.png: android-chrome-512x512.png
	convert $< -resize 32x32 $@

favicon.ico: android-chrome-512x512.png
	convert $< -resize 48x48 $@

mstile-150x150.png: android-chrome-512x512.png
	convert $< -resize 150x150 $@

assets/logo.webp: android-chrome-512x512.png
	convert $< -resize 64x64 $@

고급진 기능따윈 없는 간단한 Makefile이지만, 필요한 이미지를 만들어주는데는 충분합니다.

결론

Stable diffusion이 여기저기 그림 그리는 데 쓰이는데, 이걸로 홈페이지 로고도 만들수는 있습니다. 근데 퀄리티는 영 별로네요.