사소하지만 없으면 허전한 것, 파비콘
파비콘은 브라우저 탭에 뜨는 아주 작은 아이콘입니다. 없어도 사이트가 안 돌아가는 건 아니지만, 없으면 이상하게 사이트가 덜 완성된 느낌을 줍니다. 문제는 저에게 디자인 툴을 다뤄본 경험이 전혀 없다는 것이었습니다. 포토샵은커녕 간단한 그림 도구도 어색한 수준이었습니다.
AI 이미지 생성으로 방향을 잡았습니다
디자인을 배우는 대신, 이미지 생성 AI에게 원하는 이미지를 설명해서 만들어달라고 하는 방법을 택했습니다. 다만 파비콘은 일반 이미지와 조건이 좀 다릅니다. 실제로 쓰일 때는 16~32픽셀 정도로 아주 작게 표시되기 때문에, 복잡한 그림은 오히려 안 좋습니다. 그래서 프롬프트를 쓸 때 몇 가지 원칙을 세웠습니다.
- 텍스트나 글자는 절대 넣지 않는다 (작은 크기에서는 어차피 안 보이고, 깨져 보이기만 함)
- 색상은 최대 두 가지 정도로 단순하게
- 그림자나 그라데이션 같은 화려한 효과는 빼고, 평평한 도형 위주로
- 정사각형 비율로, 중앙에 여백을 넉넉하게 두고
브랜드와 어울리는 상징을 골랐습니다
사이트 이름과 성격에 맞춰서, AI와 상호작용을 상징하는 노드(점과 선으로 연결된 모양)와 기록을 상징하는 짧은 선을 조합한 아이콘을 만들어달라고 요청했습니다. 몇 번 프롬프트를 조금씩 수정하면서 결과물을 받아봤는데, 확실히 텍스트를 빼고 도형만 남기니 작은 크기에서도 알아보기 쉬운 결과가 나왔습니다.
512픽셀로 크게 받아서 변환했습니다
받은 이미지를 파비콘 크기 그대로 요청하지 않고, 일부러 큼직하게(512×512) 받았습니다. 작은 크기로 바로 생성하면 디테일이 뭉개지기 쉬운데, 크게 받은 다음 나중에 변환하면 훨씬 선명하게 나옵니다. 이렇게 받은 이미지를 파비콘 변환 사이트에 올려서 실제 브라우저에서 쓰이는 여러 크기(16, 32, 48픽셀 등)의 파일로 한 번에 만들었습니다.
5분이라는 표현이 과장이 아니었습니다
정말로 디자인 지식 없이도 프롬프트 몇 줄과 변환 사이트 하나로 파비콘을 완성했습니다. 다시 만들고 싶으면 프롬프트의 색상 코드나 상징 설명만 바꿔서 재생성하면 되니, 나중에 브랜드 색을 바꾸더라도 쉽게 다시 만들 수 있다는 것도 장점이었습니다. 작은 디테일이지만, 이런 부분에서 시간을 쓰지 않아도 된다는 게 생각보다 큰 여유를 만들어줬습니다.
파비콘 프롬프트 작성 시 기억할 원칙
- 절대 텍스트/글자를 넣지 말 것 (작은 크기에서 다 깨져 보입니다)
- 색상은 1~2개로 단순하게, 그림자·그라데이션 같은 화려한 효과는 빼기
- 정사각형, 중앙 정렬, 여백 넉넉하게
- 큰 사이즈(512×512 이상)로 받은 다음 변환 사이트에서 실제 파비콘 크기로 변환하기
디자인 도구를 몰라도, 원하는 걸 말로 정확히 설명할 수만 있으면 충분히 쓸 만한 결과물을 만들 수 있다는 걸 이번에 확인했습니다.
참고로 알아둘 점
로고나 썸네일처럼 글자가 꼭 들어가야 하는 이미지라면 이야기가 다릅니다. 이미지 생성 AI는 아직 글자, 특히 한글을 정확하게 그려내는 데 약한 편이라 오타나 깨진 글자가 섞여 나오는 경우가 흔합니다. 그래서 저는 글자가 필요한 이미지는 AI에게 배경만 맡기고, 실제 글자는 무료 디자인 툴에서 폰트로 따로 얹는 방식을 씁니다. 이렇게 하면 오타 걱정 없이 원하는 문구를 정확하게 넣을 수 있습니다. 워드프레스를 처음 개설하면서 겪었던 다른 시행착오는 “워드프레스 완전 초보가 AI 가이드만 보고 사이트를 개설한 후기”에 남겼습니다.