로고 시안 3개를 32px로 줄여 봤다 — 하나만 살아남았다

오늘 배울 것 그림은 실제로 가장 작게 쓰이는 크기로 줄여 놓고 골라야 합니다.

결과부터 — 32px로 줄이니 하나만 남았어요

제 개인 사이트에 쓸 로고를 새로 만들었어요. 그림은 제가 그리지 않았습니다. 이미지 생성 AI에게 조건을 말로 적어 주고 시안 3장(A·B·C)을 받았어요.

고르는 방법이 이 글의 전부예요. 세 장을 한 장에 모으고, 줄마다 네 칸을 세웠습니다.

1. 첫 칸은 512px — 큰 그림이에요.

2. 둘째 칸은 64px — 가운데 크기예요.

3. 셋째 칸은 32px — 브라우저 탭 아이콘 파일에 들어가는 크기 중 하나입니다.

4. 넷째 칸은 같은 32px인데 바탕만 어둡게 했어요.

채택은 A였어요. 사유는 한 줄입니다. "32px에서도 H와 별이 또렷하다." A는 남색 바탕에 크림색 H, 오른쪽 위에 금색 별 하나예요.

큰 그림만 보고는 B와 C를 거를 수 없었어요. 둘의 탈락 사유에는 조건이 붙어 있었습니다. 하나는 작게 줄였을 때, 다른 하나는 어두운 바탕에 올렸을 때 나타났어요.

무엇이 걸렀나 — B와 C가 떨어진 이유

B는 크림색 둥근 사각형에 남색 H였어요. H 가운데 가로줄 한가운데에 금색 별 하나가 박혀 있었습니다. 큰 그림에서는 그냥 별 하나로 보여요.

작게 줄이니 그 별이 틈처럼 보였어요. 가로줄이 끊어진 것처럼 읽혔습니다. 그래서 H가 "‖"로 보였어요. 세로 막대 두 개요. 글자가 아니라 기호가 된 거예요.

C는 남색 원 안에 크림색 H, 작은 금색 별 두 개였어요. 문제는 원 안이 아니라 원 바깥이었습니다. 지시문에서 원 바깥 배경을 크림색으로 꽉 채우라고 했거든요.

어두운 바탕에 올리자 그 크림색이 사각형으로 남았어요. 동그란 로고가 네모 딱지처럼 보였습니다. 제 사이트 머리글은 짙은 남색이라 바로 걸리는 문제였어요.

두 사유를 다시 읽어 보세요. "작게 줄이면"과 "어두운 바탕에서"예요. 큰 그림 한 장만으로는 드러나지 않는 사유였어요.

직접 해 보려면 — 다섯 단계

그림을 못 그려도 됩니다. 이번 로고도 말로 쓴 공통 조건표(지시문) 한 장에서 시작했어요. 그림은 이미지 생성 AI가 그렸습니다.

1. 조건을 셀 수 있게 적어요. 저는 이렇게 적었습니다. 색은 세 개만. 글자는 대문자 H 하나만. 평면으로, 그림자·광택·입체 없이. 가늘고 작은 장식은 금지. 마지막 한 줄이 가장 중요해요. "32×32 아이콘 크기로 줄여도 알아볼 수 있어야 한다." 이 문장이 지시문에 들어가 있으면 성공이에요.

2. 공통 지시문 하나를 만들고 마지막 한 줄만 바꿔 시안 3개를 받아요. 조건이 같아야 비교가 공평합니다. 지시문 파일 세 개가 마지막 줄만 다르면 성공이에요.

3. 세 장을 한 장에 모아 512px·64px·32px로 줄여 세워요. 32px 칸을 보고 "이건 H다"라고 바로 말할 수 있으면 성공입니다.

4. 어두운 바탕 칸을 한 칸 더 만들어요. 로고가 실제로 올라갈 바탕 색으로요. 네모 딱지가 보이면 그 시안은 탈락이에요.

5. 떨어뜨린 시안과 예전 로고 파일을 버리지 않아요. 떨어뜨린 파일이 그대로 남아 있으면 성공이에요.

그림 한 장을 받는 명령은 이렇게 생겼어요. 제가 쓰는 도구라 따라 칠 필요는 없고, 모양만 보세요.

# 지시문 파일 하나 → 그림 한 장. 크기는 512×512로 맞춘다
node graph/tools/gen-image.mjs --prompt-file logo-a-prompt.txt --out logo-a.png --size 512x512 --raw

고른 다음 — 한 장이 네 자리에 들어가요

고른 뒤에 알았어요. 로고 한 장이 들어가는 자리가 네 군데입니다.

1. 화면 맨 위 머리글 — 28px로 띄워요.

2. 바닥글과 모바일 메뉴 — 같은 그림, 같은 28px입니다.

3. 브라우저 탭 아이콘(파비콘) — 한 파일에 16·32·48px을 담고, 512px과 180px짜리를 따로 뒀어요.

4. 검색엔진에 알려 주는 발행자 그림 — 512×512px로 적습니다.

네 자리에 들어가는 크기를 다시 보세요. 머리글·바닥글·모바일 메뉴는 28px이고, 탭 아이콘 파일에는 16px짜리까지 들어갑니다. 큰 그림만 보고 골랐다면, 화면에서 실제로 마주치는 이 작은 크기는 확인하지 않고 고른 셈이에요.

마음이 바뀌면 되돌릴 수 있어요. 떨어뜨린 시안이나 예전 로고 파일을 복사해 덮으면 끝입니다. 예전 로고는 또렷하기는 했는데 사이트의 밤하늘 느낌이 없어서 바꿨습니다.

고를 때의 크기가 쓸 때의 크기와 다르면, 고른 것이 틀립니다. 그림은 가장 작게 쓰이는 자리에, 가장 어두운 바탕에 올려 놓고 고르세요.