이미지가 폴더 아이콘이 되기까지

모든 스킨은 이미지 한 장이에요. 내가 추가한 이미지, AI 모델이 그린 이미지, 커뮤니티 팩에 든 이미지 중 하나죠. FolderSkin은 이 이미지를 두 가지 방법 중 하나로 폴더 아이콘으로 만드는데, 그 자체로는 멋진 이미지도 폴더에 올리면 어색해질 수 있어요. 이 페이지에서는 FolderSkin이 어떻게 판단하는지, 폴더가 이미지를 어떻게 바꾸는지, 팩으로 공유하기 전에 이미지를 어떻게 확인하는지 설명해요(PACKS.md).

에이전트에게 작업을 맡기고 싶다면, .claude/skills/folderskin-skins/SKILL.md가 Claude Code에게 팩 만드는 과정을 안내해요.

아트워크와 완성된 폴더

FolderSkin은 이미지를 둘러싼 부분을 살펴봐요.

완성된 폴더는 실제 투명한 배경이나 단색 마젠타 #FF00FF 위에 있어요. 마젠타는 잘라 내고, 이미지는 폴더에 맞게 여백을 다듬은 다음, 그린 그대로 아이콘이 돼요. 아이콘에 맞게 크기를 조절해 가운데에 놓을 뿐, 잘라 내지는 않아요. PROMPTS.md의 프롬프트로 이미지 모델이 그리는 게 바로 이거예요.
그 밖의 모든 것은 아트워크예요. 사진, 그림, 패턴 같은 것들이죠. FolderSkin은 이걸 자체 폴더 템플릿에 씌우기 때문에, 다른 모든 스킨과 똑같은 탭, 종이, 윤곽선을 갖게 돼요.

마젠타는 단색 #FF00FF이거나 그에 아주 가까워야 해요. 그래서 마젠타 종이 위에서 찍은 제품 사진이나 선명한 분홍빛 노을은 그냥 이미지로 남아요. 정확한 규칙은 ARCHITECTURE.md에 있어요. 이 페이지의 나머지는 아트워크에 관한 내용이에요.

안전 영역

컴포지터는 같은 이미지를 1024 × 1024 아이콘 캔버스의 두 직사각형에 커버 핏으로 맞춰 넣어요(상수는 crates/folderskin-core/src/geometry.rs에 있어요).

뒷면 패널: 탭이 있는 부분으로, y 36.5부터 973.5까지예요. 1024 × 958 이미지의 비율과 아주 비슷해서 여기에는 높이 전체가 보이고, 좌우는 각각 약 18px(1.8%)씩 잘려요.
앞면 패널: 종이를 덮는 부분으로, y 160.5부터 973.5까지이고 모서리 반지름은 55px이에요. 이미지보다 가로로 넓기 때문에 이미지를 패널 폭에 맞춰 조절하고, 높이의 가운데 약 87%만 남아요. 위에서 약 6%, 아래에서도 비슷하게 잘려요.

1024 × 958 이미지를 가로 띠로 나눠 보면 이래요(비율이 같다면 크기가 달라도 똑같이 조절돼요). 두 패널이 같은 이미지의 겹치는 부분을 보여 주기 때문에 띠도 서로 겹쳐요. 뒷면 패널은 높이 전체를, 앞면 패널은 가운데를 보여 줘요.

행(958행 중)	높이에서 차지하는 비율	보이는 곳
0~62	위쪽 6.5%	탭 안
62~127	그다음 6.7%	앞면 패널 위쪽의 뒷면 패널 띠, 종이 시트 옆
60~898	가운데 약 87%	앞면 패널, 사람들이 실제로 보는 부분
898~958	아래쪽 6.3%	잘려 나감

여기서 두 가지 규칙이 나와요.

위쪽 12%에는 중요한 것을 두지 마세요. 이 행들은 탭과 앞면 패널 위의 가는 띠예요. 얼굴, 지평선, 로고가 거기 있으면 종이 시트 때문에 두 조각으로 나뉘어요.
주제는 가운데에 두세요. 앞면 패널은 위아래에서 약 60px씩 잘라 내고, 1024px 기준으로 모서리를 55px만큼 둥글게 깎기 때문에, 맨 구석의 세부 묘사는 작은 아이콘 크기에서 어차피 사라져요.

평면적인 그림이나 추상화는 따로 신경 쓰지 않아도 이 모든 걸 견뎌요. 뚜렷한 주제가 하나 있는 사진이라면 그 주제를 가운데 띠에 둬야 해요. FolderSkin은 아트워크를 항상 가운데에 맞추기 때문에, 주제가 위나 아래로 치우쳐 있다면 추가하거나 팩에 넣기 전에 직접 이미지를 잘라 주세요.

folderskin-tools guide로 이 띠를 그려 볼 수 있어요.

cargo run -p folderskin-tools -- guide --out /tmp/guide.png

탭, 종이 띠, 앞면 패널, 앞면 패널이 잘라 내는 행을 표시한 1024 × 958 템플릿을 만들어요. 이미지 편집기에서 내 이미지 위에 레이어로 얹어 쓰세요.

이미지 확인하기

render는 앱과 같은 코드로 어떤 이미지든 앱이 만드는 폴더로 그려 주고, 두 가지 중 어느 쪽인지 알려 줘요.

cargo run -p folderskin-tools -- render ~/Pictures/koi.webp --out /tmp/koi.png --size 512
# wrote /tmp/koi.png (512×512): artwork on FolderSkin's folder

이미지를 공유하기 전에 결과를 보세요. --focus x,y로 아트워크를 자르는 위치를 옮길 수 있어서, 다르게 자르면 이미지가 얼마나 남는지 빠르게 확인할 수 있어요. 다만 앱 자체는 항상 가운데를 기준으로 자르니, 원하는 구도는 이미지에 미리 반영해 두세요. render --solid RRGGBB는 템플릿을 단색으로 그려서 템플릿 자체를 볼 수 있게 해 줘요.

팩에 넣을 이미지

팩의 이미지는 무손실로 공유되기 때문에 팩은 만든 그대로 보여요. 제한은 PACKS.md에 있어요. 한 변은 최대 1024px(세 운영체제가 그리는 가장 큰 아이콘 크기), 최소 256px이고, 한 장에 최대 1.5MB, 팩 전체는 최대 64MB예요. 앱과 packs make가 모든 이미지를 알아서 줄이고 무손실 WebP로 인코딩해요.

이미지	형식	이유
완성된 폴더	투명도를 유지한 무손실 WebP	가장자리까지 모든 픽셀이 그린 그대로이고, 크기는 PNG의 약 3분의 2
아트워크: 사진, 그림, 그라데이션, 입자감 있는 그림	무손실 WebP	블록 노이즈도 링잉도 없음. 정밀한 1024px 이미지가 약 800KB
둘 중 무엇이든, 1024px에서 1.5MB에 들어가지 않을 만큼 정밀한 이미지	896px, 그다음 768px의 무손실 WebP	흐리게 만들지 않고 크기를 줄이며, 앱이 어떤 이미지인지 알려 줌

직접 인코딩한다면 PNG도 괜찮고, cwebp -lossless -z 9도 괜찮아요. JPEG과 손실 WebP는 새 팩에 쓸 수 없어요. 커뮤니티 서비스도, packs check --require-lossless도 거절해요. 아트워크는 템플릿이 폴더 모양을 정하기 때문에 유지할 투명도가 없어요. 아트워크는 1024 × 958일 때 잘려 나가는 부분이 가장 적지만, 어떤 크기든 쓸 수 있어요.

팩 안의 완성된 폴더는 한 가지 모양으로 맞추기 때문에, 나란히 놓으면 같은 크기로 보여요. packs make와 커뮤니티의 가져오기 과정은 각 폴더 모양의 중앙값에 맞춰 다시 그리고, 거기서 너무 벗어난 폴더는 사람이 판단하도록 남겨 둬요(PACKS.md).

라이선스

직접 만들었거나 공유해도 되는 이미지만, 팩에서 쓸 수 있는 라이선스 중 하나로 공유하세요(PACKS.md). 스톡 사진, 배경 화면, 다른 사람 작품의 스크린샷, 이용 약관을 읽지 않은 모델 결과물 같은 그 밖의 이미지는 내 컴퓨터에만 두세요. 앱에 끌어다 놓으면 거기서 쓸 수 있고, 내 컴퓨터 밖으로 나가지 않아요.