J.Lab의 좌충우돌 파비콘 만들기: 파이썬, 투명함에 도전하다!

안녕하세요, J.Lab입니다. 요즘 새로운 웹 프로젝트를 진행하면서 문득 눈에 들어온 것이 있었으니, 바로 파비콘(Favicon)이었어요. 작고 동그란 아이콘 하나가 웹사이트의 인상을 좌우한다는 걸 새삼 깨달았죠. 내 브랜드 이미지를 확실히 보여줄, 동그랗고 투명한 배경의 파비콘을 만들고 싶다는 욕심이 생겼습니다.

처음엔 간단하게 웹툴로 만들어볼까 했지만, 늘 그렇듯 '이것도 파이썬으로 자동화하면 재밌지 않을까?' 하는 생각에 사로잡혔습니다. 파비콘 만들기 파이썬 스크립트를 직접 짜보기로 결심한 순간부터, 생각보다 깊고도 흥미로운 여정이 시작되었죠. 간단할 줄 알았던 파비콘의 세계는 결코 만만치 않았습니다.

파비콘, 그냥 그림 파일 아니었어? (feat. 삽질 시작)

일단 시작은 무모했습니다. '그냥 내 로고 이미지 갖다 변환하면 되겠지' 하고 PIL(Pillow) 라이브러리를 이용해 무작정 ICO 파일로 바꿔봤습니다. 결과는 처참했습니다. 네모난 배경에 로고가 박힌, 아주 평범한 파비콘이 나왔죠. 제가 원했던 동그란 형태는 온데간데없고, 심지어 파일 탐색기에서 보니 로고 주변에 흉물스러운 흰색 사각형이 따라다니는 겁니다. 이게 바로 투명 배경 처리에 실패했을 때 나타나는 현상이었죠.

분명 로고 원본 파일은 투명 배경이었는데, 왜 ICO 만들기만 하면 이렇게 되는 걸까 고민했습니다. 구글링을 시작하며 'PIL 파비콘', 'ICO 투명 배경' 같은 키워드를 마구잡이로 검색했죠. 이 과정에서 파비콘이 단순한 그림 파일이 아니라, 여러 해상도를 한 파일 안에 담는 특수한 포맷이며, 투명도를 처리하는 방식도 까다롭다는 것을 알게 되었습니다. 예상치 못한 첫 삽질에 J.Lab은 당황했습니다.

투명한 원형 파비콘의 비밀: PIL과 마스크

며칠 밤낮을 붙잡고 씨름한 끝에, 해결의 실마리를 찾았습니다. 바로 PIL/Pillow의 강력한 이미지 처리 기능과 '마스크(Mask)'였습니다. 핵심은 원본 이미지를 바로 자르는 것이 아니라, 먼저 완벽하게 투명한 '빈 캔버스'를 만드는 것이었습니다. `Image.new('RGBA', (size, size), (0, 0, 0, 0))` 코드로 투명한 배경을 가진 새 이미지를 생성하는 것이죠. 여기서 RGBA 채널이 바로 알파(투명도) 값을 의미합니다.

그다음으로는 이 투명 캔버스 위에 원본 이미지를 동그랗게 오려 붙일 '원형 마스크'를 만들었습니다. `ImageDraw` 모듈을 이용해 검은색 원을 그리고, 이 원을 마스크로 활용하여 원본 이미지에서 원형 부분만 추출했습니다. 이렇게 추출된 원형 이미지를 아까 만든 투명 캔버스에 `paste`하는 방식으로 완벽한 '투명 파비콘'을 구현할 수 있었습니다. 드디어 흰 배경의 저주에서 벗어나 깔끔한 동그라미를 얻게 된 순간이었죠!

고품질 파비콘, 다양한 포맷 한 번에! (python favicon 자동화)

투명한 원형 파비콘 만들기에 성공하고 나니, 이제 욕심이 생겼습니다. 단순히 ICO 파일 하나 만드는 것을 넘어, 웹사이트에 필요한 다양한 파비콘을 한 번에 생성하고 싶어진 겁니다. 요즘 웹 환경에서는 16x16, 32x32, 48x48, 64x64 등 다양한 크기의 ICO 멀티사이즈가 필요하며, 모바일 기기를 위한 PNG 파일(apple-touch-icon 등)도 필수적이죠. 심지어 SVG base64 임베딩까지 염두에 두게 되었습니다.

J.Lab의 python favicon 스크립트는 이제 원본 이미지를 받아서 이 모든 과정을 한 번에 처리합니다. 먼저 원하는 크기로 원본 이미지를 리사이징하고, 위에서 설명한 투명 원형 크롭 과정을 거친 뒤, 다양한 해상도의 ICO 파일과 PNG 파일을 각각 생성합니다. PNG 파일은 물론, 특정 상황을 위한 SVG base64 임베딩 코드까지 자동으로 뽑아낼 수 있게 되었습니다. 한 번의 실행으로 모든 준비가 완료되는, 진정한 파비콘 자동화의 경지에 이른 것이죠.

J.Lab's Favicon 생성기, 이렇게 완성했습니다!

최종적으로 완성된 저의 파비콘 생성기는 다음과 같은 과정을 거칩니다. 사용자가 고해상도의 로고 이미지를 입력하면,

• 원본 이미지 로드 및 전처리 (정사각형으로 중앙 크롭)
• 각 파비콘 사이즈(16, 32, 48, 64 등)별로 이미지 리사이징
• 투명한 RGBA 캔버스 생성
• 원형 마스크를 이용해 동그랗게 이미지 크롭 후 캔버스에 붙여넣기
• 다양한 크기의 ICO 파일로 저장
• PNG 포맷으로도 별도 저장 (예: 180x180, 512x512)
• 필요시 SVG base64 인코딩 문자열 생성

이 모든 과정이 파이썬 스크립트 하나로 일사천리 진행됩니다. 특히 투명 배경 처리에 대한 고민과 ICO 멀티사이즈 구현이 가장 큰 난관이었는데, 이를 성공적으로 해결했을 때의 쾌감은 이루 말할 수 없었습니다. 이제 어떤 프로젝트를 시작하든 단 몇 초 만에 고품질 파비콘 세트를 만들어낼 수 있게 되었으니, 그동안의 삽질이 전혀 아깝지 않습니다.

마무리하며: 파이콘 덕분에 얻은 소중한 경험

파이썬으로 동그란 파비콘 만들기, 처음에는 단순히 귀찮은 작업을 자동화하려는 작은 시도였습니다. 하지만 이 과정에서 PIL/Pillow 라이브러리의 깊은 기능들을 배우고, 이미지 포맷과 투명도 처리에 대한 이해를 넓힐 수 있었습니다. 특히 흰 배경으로 보이는 문제를 해결하기 위해 RGBA 채널과 빈 캔버스를 활용하는 아이디어는 정말 값진 경험이었습니다.

저처럼 파비콘 때문에 골머리를 앓으셨던 분들이 계시다면, J.Lab의 경험이 조금이나마 도움이 되었으면 좋겠습니다. 나중에 기회가 된다면 제가 만든 파비콘 생성 스크립트를 좀 더 다듬어서 공유할 예정입니다. 다음 DevJourney에서는 또 어떤 흥미로운 삽질기가 펼쳐질지 기대해주세요!