직접 디자인: 디자이너

사이드바의 직접 디자인은 스킨을 손수 만드는 캔버스예요. 색 하나만 칠한 것부터 여러 겹을 쌓은 디자인까지 만들 수 있어요. 모두 오프라인에서 동작해요. 디자인한 스킨은 다른 스킨처럼 내 스킨에 저장되고, 저장 후 적용을 누르면 고른 폴더에 바로 입혀져요.

이런 것을 만들 수 있어요

만들고 싶은 것	시작점	그다음
원하는 색 하나로 된 폴더	색상 또는 기본	폴더를 클릭하고 색을 고르세요. 색 선택기에서는 투명도까지 포함해 어떤 색이든 고를 수 있어요
라벨이 붙은 폴더: '레시피', '메모 2026'	라벨	글자를 입력하고 글꼴, 굵기, 색을 고르세요. 작은 크기에서는 짧은 단어가 가장 잘 읽혀요
안에 든 것을 그림 하나로 보여 주는 폴더	이모지	이모지를 더블클릭해서 바꾸거나, 선택기에서 검색하세요('강아지', '비행기', '영수증')
탭에 붙이는 라벨	탭 라벨	배치의 탭 버튼을 누르면 어떤 레이어든 탭 위에 놓을 수 있어요
앞뒤 색이 다른 폴더	투톤	색이 나뉘는 경계는 종이 시트 뒤에 가려져요
속이 비치는 폴더	유리 또는 색유리	배경의 불투명도를 낮추거나, 배경을 지워서 투명한 폴더로 만드세요. 종이와 테두리만 남아요
무늬가 있는 폴더	스트라이프, 깅엄 체크, 물방울	패턴으로 스트라이프부터 색종이 조각, 필름 그레인까지 10가지를 추가할 수 있어요
캡션이 있는 사진	사진	먼저 이미지를 고르라고 해요. 나중에 끌어다 놓거나 붙여 넣어서 더 추가할 수 있어요
스티커, 배지처럼 폴더 모양이 아닌 것	스티커	자유형 아이콘을 고르면 디자인이 아이콘 전체가 돼요
이미 있는 스킨에 나만의 손길 더하기	스킨의 ⋯ 메뉴 → 디자이너에서 리믹스	스킨이 이미지 레이어가 되고, 그 위에 쌓아 갈 수 있어요
전에 디자인한 것 고치기	그 스킨의 ⋯ 메뉴 → 디자인 편집	변경 사항 저장은 그 자리에서 업데이트하고, 새로 저장은 둘 다 남겨요

사용 방법

시작하기: 처음 열 때와 새로 만들기를 누를 때 시작점이 나와요. 모든 시작점은 평범한 디자인이라서 고정된 부분이 없어요. 저장하지 않은 변경 사항이 있을 때 다른 시작점을 고르면 먼저 물어봐요.

추가하기: 폴더 위의 막대에서 텍스트, 이모지, 도형(둥근 사각형부터 말풍선까지 13가지), 이미지(파일, 내 스킨, 또는 폴더에 끌어다 놓거나 붙여 넣은 이미지), 패턴, 색상(배경을 선택하고, 배경이 없으면 추가해요)을 추가할 수 있어요.

배치하기: 레이어를 클릭하면 선택돼요. 선택한 레이어에는 색이 살짝 입혀지고, 모서리와 변에는 조절점이, 위쪽에는 회전용 둥근 조절점이 나타나요.

• 드래그해서 옮겨요. 폴더 가운데, 탭, 폴더 가장자리, 다른 레이어에 맞춰 달라붙어요. ⌘(Ctrl)를 누른 채 옮기면 자유롭게 놓을 수 있어요.
• 모서리나 변을 드래그하면 크기가 바뀌어요. 이미지는 모서리에서 드래그하면 비율을 유지하고, 변에서 드래그하면 잘려요. 텍스트와 이모지는 항상 비율을 유지해요.
• ⇧를 누른 채 회전하면 15°씩 돌아가고, 크기를 바꾸면 도형의 비율이 유지돼요. ⌥를 누르고 있으면 가운데를 기준으로 크기가 바뀌어요.
• 글자를 더블클릭하면 편집하고, 이모지를 더블클릭하면 다른 이모지로 바꿀 수 있어요.
• 폴더 자체를 클릭하면 배경이 선택돼요.

레이어: 오른쪽 위 목록에 쌓인 순서가 맨 위부터 나와요. 행을 드래그하면 순서가 바뀌고, 이름을 더블클릭하면 이름을 바꿀 수 있어요. 눈, 자물쇠, 휴지통 아이콘으로 레이어를 숨기거나, 제자리에 고정하거나, 지울 수 있어요. 제목 끝의 모두 삭제를 누르면 디자인이 비워져요. 그때 나오는 알림에서 되돌릴 수 있고, ⌘Z로도 되돌릴 수 있어요. 제목의 버튼은 행의 버튼처럼 마우스를 올리면 나타나요.

레이어와 설정은 각각 제목을 눌러 열고 닫을 수 있고, 둘 사이의 막대를 드래그하면 레이어 영역을 넓히거나 좁힐 수 있어요(더블클릭하면 원래대로 돌아가고, 포커스가 있을 때는 화살표 키로도 움직여요). 마지막 상태는 이 컴퓨터에 기억돼요.

설정: 레이어 목록 밑에는 선택한 레이어의 설정이 모두 그 레이어 이름을 제목으로 해서 나오고, 제목에는 순서 바꾸기, 복제, 삭제 버튼이 있어요.

• 텍스트: 글꼴, 굵기, 정렬, 기울임, 대문자, 크기, 자간, 줄 높이, 곡선(아치 또는 스마일).
• 색상: 단색, 선형 그라데이션, 원형 그라데이션. 투명도를 포함해 최대 4가지 색을 쓸 수 있고, 미리 만들어 둔 그라데이션도 있어요.
• 도형: 모서리 둥글기, 꼭짓점이나 변의 수, 별의 깊이나 고리 구멍의 크기.
• 이미지: 밝기, 대비, 채도, 색조, 흐림, 흑백, 세피아, 반전, 둥근 모서리.
• 모든 레이어: 불투명도와 16가지 혼합 모드 중 하나.
• 배치한 레이어에는 그림자(네온 느낌을 내려면 글로우로 바꾸기)와 스티커 테두리도 있어요. 스티커 테두리는 다이컷 스티커처럼 윤곽을 따라 생기는 테두리예요.

아무것도 선택하지 않았을 때는 설정에서 폴더에 배치와 자유형 아이콘 중 하나를 골라요.

확인하기: 캔버스 아래의 폴더 뼈대 스위치로 디자인을 폴더에 입힌 모습(탭, 종이 시트, 테두리 포함)과, 폴더 테두리만 겹쳐 그린 평면 모습을 오가며 볼 수 있어요. 평면 모습에서는 폴더에 가려지는 부분이 보여요. 자유형 아이콘에서는 크기를 가늠할 수 있게 뒤에 흐릿한 폴더를 보여 줘요. 그 옆의 동그라미 네 개로 디자인 뒤의 배경을 창, 밝은 데스크톱, 어두운 데스크톱, 화려한 배경 화면으로 바꿔 볼 수 있어요. 비치는 디자인이라면 이게 중요해요. 오른쪽에는 실제 크기(64, 32, 16포인트)의 아이콘이 있어서 Finder나 파일 탐색기에서 어떻게 보일지 알 수 있어요.

저장하기: 오른쪽 위의 이름이 스킨 이름이 돼요. 비워 두면 디자인의 첫 단어들이 이름이 돼요. 내 스킨에 저장은 라이브러리에 보관하고, 저장 후 적용은 고른 폴더에도 입혀요. 저장한 뒤에도 계속 열려 있어서 더 고칠 수 있어요. 변경 사항 저장은 같은 스킨을 그 자리에서 업데이트하고, 새로 저장은 스킨을 하나 더 추가해요. 저장하지 않은 디자인은 앱의 다른 곳을 보는 동안에도 유지되고, 저장하거나 다른 디자인으로 바꿀 때까지 이 컴퓨터에 남아 있어요.

적용할 폴더 아래의 안에 있는 폴더 N개 포함은 폴더 패널의 하위 폴더 포함 스위치와 같아요. 어느 쪽에서 켜도 둘 다 켜져요. 켜 둔 상태에서 저장 후 적용을 누르면 그 폴더와 안에 있는 모든 폴더에 디자인을 입히고, 10개가 넘으면 먼저 물어봐요. 버튼에 진행 상황이 나오고 옆에는 중지가 있으며, 끝나면 알림으로 결과를 알려 줘요. 중지한 경우에는 계속하기가, 일부 폴더를 바꾸지 못한 경우에는 자세히 보기가 나오고, 누르면 폴더 패널의 요약이 열려요.

키
⌘Z / ⇧⌘Z	실행 취소, 다시 실행
Delete	선택한 레이어 삭제
⌘D	복제
⌘C 다음 ⌘V	복사한 뒤 사본 붙여 넣기. 클립보드에 이미지가 있을 때 ⌘V를 누르면 그 이미지를 추가해요
화살표, ⇧ 화살표	1 또는 10씩 이동
⌘] / ⌘[	앞으로 가져오기, 뒤로 보내기(⌥를 함께 누르면 맨 앞으로, 맨 뒤로)
Esc	선택 해제
레이어 목록에서	↑ ↓ 선택, ⌥↑ ⌥↓ 순서 바꾸기, F2 이름 바꾸기

작동 원리

아이콘 공간에 그리는 디자인

디자인은 한 변이 1024단위인 정사각형 캔버스로, 폴더 템플릿을 잴 때 쓰는 것과 같은 캔버스예요(crates/folderskin-core/src/geometry.rs). 어떤 지점에 놓은 것은 폴더에서도 그 지점에 있어요. 파일에서 추가한 아트워크(SKINS.md)와 달리 커버 핏도 자르기도 없어요. 문서는 src/composer/doc.ts에 정의된 단순한 데이터이고, 바꿀 때마다 새 문서가 만들어져요. 실행 취소는 이 문서들을 거슬러 올라가는 방식이에요(src/composer/history.ts).

렌더링 경로는 여전히 하나

웹뷰는 사용자가 직접 만든 그림, 즉 텍스트, 이모지, 도형, 이미지, 패턴만 그려요(src/composer/render.ts). 그 주변의 폴더는 Rust 템플릿이 그려요. composer_template은 템플릿을 마스터 크기인 2048px로 한 번 렌더링하면서, 디자인이 사이에 끼워질 레이어들로 나눠요(compositor::template_layers).

top      the front panel's rim light and the shade along its bottom
design   masked by front: the front panel's coverage
middle   the back panel's rim light, the paper sheet and its highlight
design   masked by back: the back panel's coverage, tab included

스테이지는 매 프레임 이 네 개를 쌓아요(src/composer/composite.ts). 드래그하는 동안에도 충분히 가벼운 작업이에요. 저장되는 아이콘은 compositor::render_master_placed가 그려요. 같은 템플릿을 같은 헬퍼로 그리고, 두 패널을 각자 제자리에 놓인 디자인으로 채워요. the_layers_stacked_around_a_design_are_the_saved_icon 테스트가 둘의 차이를 채널당 3단계 이내로 유지하기 때문에, 캔버스에는 실제로 저장될 아이콘이 그대로 보여요. 다섯 번째 레이어인 outline은 폴더에서 보이는 테두리예요. 평면 보기에서는 여기에 색을 입혀 보여 주지만, 아이콘에는 절대 들어가지 않아요.

저장

저장할 때는 디자인을 2048px로 한 번 더 그려 PNG로 인코딩하고, 작은 JSON 헤더 뒤에 원시 바이트로 붙여 composer_save로 보내요([u32 LE header length][header][PNG], src/composer/body.ts). 나머지는 Rust 쪽의 src-tauri/src/composer.rs가 처리해요.

• 폴더에 배치: 디자인으로 폴더를 렌더링해요.
• 자유형 아이콘: 디자인을 그대로 아이콘으로 써요. 완전히 투명한 디자인은 거절해요.
• 저장 형식: 완성된 폴더(kind: "folder", source: "composer")로 저장하기 때문에, 적용, 썸네일, 공유가 다른 완성된 폴더와 똑같이 동작해요.
• 문서: 이미지 옆에 <stem>.design.json으로 보관해요. 디자인 편집은 이 파일로 디자인을 다시 열어요.
• ID: 디자인의 PNG, 문서, 모양으로 계산한 SHA-256이에요. 같은 디자인을 두 번 저장해도 스킨은 하나예요.
• 변경 사항 저장: 인덱스를 한 번만 써서 옛 스킨을 바꾸고, 라이브러리에서의 위치도 유지해요. 즐겨찾기는 새 ID로 옮겨 가요.

리믹스는 composer_skin_image로 스킨의 원본 이미지를 읽어요.

• 아트워크는 폴더 전체를 덮는 이미지가 돼요.
• 완성된 폴더는 이미지를 맞춰 넣은 자유형 아이콘이 돼요. 앱이 적용할 때와 똑같은 모습이에요.

명령

명령	입력	출력
composer_template	–	{size, back, front, middle, top, outline, parts}: PNG 데이터 URL로 된 레이어들과, 폴더 각 부분의 위치(캔버스 단위)
composer_save	헤더 {name, tags, shape, design, replaces}가 붙은 원시 본문	{skin, replaced}: 저장된 스킨과, 그 스킨이 대신한 디자인의 ID
composer_preview	헤더 {shape, sizes}가 붙은 원시 본문	크기별 아이콘(16부터 512까지, 최대 6개)을 데이터 URL로
composer_image	path	{url, width, height, name, alpha}: 이미지 파일. 최대 2048px이고, 투명도가 있으면 PNG, 없으면 JPEG
composer_skin_image	skinId	위와 같음. 저장된 스킨의 원본 이미지
composer_design	skinId	디자인 문서. 여기서 만든 스킨이 아니면 null

디자인 문서

{ "version": 1, "shape": "folder", "layers": [ { "kind": "fill", "paint": { "type": "solid", "color": "#3a86ff" }, "opacity": 1, "blend": "normal", "id": "…" } ] }

레이어는 처음부터 끝까지 순서대로 그려요.

• 캔버스 전체를 덮는 레이어: fill(색이나 그라데이션)과 pattern.
• 배치하는 레이어: text, emoji, shape, image. 각각 캔버스 단위의 중심 x, y, 도 단위의 rotation, 뒤집기, 선택 사항인 shadow와 스티커 edge를 가져요.
• 모든 레이어: opacity, blend, 그리고 선택 사항인 name, hidden, locked.

색은 #rrggbb로, 비치는 색은 #rrggbbaa로 나타내요. 이미지는 데이터 URL로 문서 안에 보관해요. 디스크에서 읽은 문서는 먼저 parseDoc을 거쳐요.

• 알 수 없는 레이어는 버리고, 레이어가 64개를 넘으면 64개로 잘라요.
• 숫자는 합리적인 범위 안으로 맞추고, 색은 표준 형식으로 바꿔요.
• PNG, JPEG, WebP, GIF 데이터 URL이 아닌 이미지는 버려요.
• 더 새로운 버전에서 만든 문서는 잘못 읽는 대신 거절해요.

알아 둘 제한

• 이모지는 시스템의 이모지 글꼴로 그려요. macOS에서는 이 글꼴이 비트맵이라 약 160px까지만 선명해요. 그래서 아주 큰 이모지는 Finder의 가장 큰 아이콘 크기에서 살짝 흐릿하지만, Finder가 평소에 보여 주는 크기에서는 모두 선명해요.
• 글꼴은 스타일로 제공되고, 각 스타일은 macOS, Windows, Linux에 기본으로 들어 있는 글꼴을 가장 알맞은 것부터 나열한 목록이에요(src/composer/fonts.ts). FolderSkin에 들어 있는 글꼴은 Manrope 하나뿐이에요. 설치된 다른 글꼴을 고르면 설치된 글꼴 패밀리를 이름으로 지정할 수 있어요. 디자인은 픽셀로 저장되기 때문에, 글꼴은 디자인을 만드는 컴퓨터에만 있으면 돼요.
• 이미지 보정은 픽셀에 직접 적용해요(src/composer/imagefx.ts). macOS 12의 웹뷰에는 캔버스 필터가 없기 때문이에요. 흐림 효과는 박스 블러를 세 번 적용한 것으로, 가우시안 블러에 가까워요.
• 임시 저장본은 웹뷰의 저장 공간에 보관하는데, 큰 이미지를 여러 장 쓴 디자인은 이 공간을 넘칠 수 있어요. 그래도 그런 임시 저장본은 앱을 종료할 때까지는 남아 있어요.

브라우저 미리 보기

일반 브라우저에서 pnpm dev를 실행해도 디자이너가 나와요. 폴더 레이어는 docs/images/composer/에 있는 PNG로, cargo run -p folderskin-tools -- composer-layers --out docs/images/composer로 만들어요. folderskin-tools의 테스트가 이 파일들이 컴포지터가 그리는 픽셀과 같은지 확인하기 때문에, 오래된 상태로 남을 일이 없어요.

테스트

folderskin-core의 compositor	쌓은 레이어가 저장된 아이콘과 같은지, 디자인이 그린 위치에 놓이는지, 비치는 디자인에서는 종이와 테두리만 남는지, 윤곽선이 보이는 테두리를 따라가는지
src-tauri의 store	디자인 문서가 디자인 옆에 저장되고, 다시 시작해도 남아 있고, 디자인을 지우면 함께 사라지고, 비정상 종료로 짝을 잃으면 정리되는지. 디자인에 덮어 저장해도 위치가 유지되고, 디자인이 아닌 스킨에 덮어 저장하는 건 거절하는지
src-tauri의 composer	본문 형식, 이미지 검사, 미리 보기, 저장, 이름 짓기, 손상된 문서, 이미지 인코딩. 그리고 Tauri 자체 IPC(모의 런타임)로 원시 바이트를 보낸 디자인을 미리 보고 저장할 수 있는지
프런트엔드(vitest)	문서의 변경과 다시 읽기, 실행 취소, 이동·크기 조절·회전·맞춤, 텍스트 레이아웃과 곡선, 도형, 색, 이미지 보정, 템플릿, 본문 형식