저장 / 내보내기
문서
벡터 · 고급 내보내기
기본 공책 1/1 100% 펜모드 선택
속성
객체를 선택하면
속성이 표시됩니다
공책 이름
1/1
페이지 준비 중...
📚 목차
💾 내보내기
0:00
저장됨
v3.0

⌨️ 단축키 도움말

도구 선택
V
선택 도구
P
펜 도구
E
지우개
S
도형 도구
T
텍스트 도구
I
이미지 도구
편집
CtrlZ
실행취소
CtrlY
다시실행
CtrlC
복사
CtrlV
붙여넣기
CtrlD
복제
CtrlA
전체 선택
Delete
선택 삭제
보기
Tab
도구 모음 접기/펼치기
R
눈금자 토글
D
다크모드 토글
?
단축키 도움말
CtrlF
텍스트 검색
CtrlP
인쇄
페이지 이동
← / PageUp
이전 페이지
→ / PageDown
다음 페이지
줌
Ctrl+
확대
Ctrl-
축소
Ctrl0
100% 리셋
칼라 팔레트 클릭으로 색상 적용
🎨 색상 믹서
A
＋
B
직접 선택 후 클릭하면 적용
})(); { name:"Mint Tide", ko:"차분한 집중", colors:[ {hex:"#eef4f0",nm:"배경"},{hex:"#d6e4dc",nm:"표면"},{hex:"#5d8a78",nm:"프라이머리"},{hex:"#1f2a25",nm:"잉크"} ]}, { name:"Warm Earth", ko:"보고서·안내문", colors:[ {hex:"#f4f0e8",nm:"배경"},{hex:"#e3dcc8",nm:"표면"},{hex:"#9c8a63",nm:"프라이머리"},{hex:"#2e2a22",nm:"잉크"} ]}, { name:"Mauve Fog", ko:"감성·상담", colors:[ {hex:"#f1edee",nm:"배경"},{hex:"#cdc1cb",nm:"표면"},{hex:"#6b5a6e",nm:"프라이머리"},{hex:"#231e25",nm:"잉크"} ]}, { name:"Paper Stone", ko:"장문 읽기", colors:[ {hex:"#f6f4ee",nm:"배경"},{hex:"#e2ded3",nm:"표면"},{hex:"#525049",nm:"프라이머리"},{hex:"#1d1c19",nm:"잉크"} ]}, { name:"Harbor Blue", ko:"데이터·대시보드", colors:[ {hex:"#eef0f2",nm:"배경"},{hex:"#c8d2d8",nm:"표면"},{hex:"#3f5a6b",nm:"프라이머리"},{hex:"#15212a",nm:"잉크"} ]}, { name:"Clay Rose", ko:"리테일·라이프스타일", colors:[ {hex:"#f4ece6",nm:"배경"},{hex:"#e2c8be",nm:"표면"},{hex:"#a26553",nm:"프라이머리"},{hex:"#2c1d18",nm:"잉크"} ]}, { name:"Olive Press", ko:"리포트·출력", colors:[ {hex:"#f0eee2",nm:"배경"},{hex:"#cfceaf",nm:"표면"},{hex:"#6b6f3d",nm:"프라이머리"},{hex:"#22241a",nm:"잉크"} ]}, { name:"Forest Dark", ko:"야간·집중 모드", colors:[ {hex:"#1c241f",nm:"배경"},{hex:"#2c3a32",nm:"표면"},{hex:"#8fb5a0",nm:"프라이머리"},{hex:"#e6efe8",nm:"잉크"} ]}, { name:"Midnight Indigo", ko:"프리미엄·영상", colors:[ {hex:"#1d1f2a",nm:"배경"},{hex:"#2e3144",nm:"표면"},{hex:"#9aa6d6",nm:"프라이머리"},{hex:"#e6e8f1",nm:"잉크"} ]}, { name:"Snow Steel", ko:"시스템 UI", colors:[ {hex:"#f5f6f7",nm:"배경"},{hex:"#dfe2e5",nm:"표면"},{hex:"#3a3f44",nm:"프라이머리"},{hex:"#15171a",nm:"잉크"} ]}, ]; const panel = document.getElementById('palettePanel'); const body = document.getElementById('palBody'); const btn = document.getElementById('bPalette'); const closeBtn = document.getElementById('palClose'); const palPick = document.getElementById('palPick'); // 팔레트 목록 렌더 function renderPalette(){ body.innerHTML = PALETTES.map((p,pi)=>`
${p.name} ${p.ko}
${p.colors.map(c=>`
`).join('')}
`).join(''); body.querySelectorAll('.pal-swatch').forEach(sw=>{ sw.addEventListener('click', ()=>applyColor(sw.dataset.hex)); }); } function applyColor(hex){ // S는 그림판 전역 상태 객체 if(typeof S !== 'undefined'){ S.color = hex; const sw = document.getElementById('csSwatch'); if(sw) sw.style.background = hex; } // picked 표시 body.querySelectorAll('.pal-swatch').forEach(s=>s.classList.toggle('picked', s.dataset.hex===hex)); // color picker 동기화 palPick.value = hex; } // 직접 color picker palPick.addEventListener('input', e=>applyColor(e.target.value)); function togglePalette(){ const open = panel.classList.toggle('open'); btn.classList.toggle('on', open); if(open) renderPalette(); } btn.addEventListener('click', togglePalette); closeBtn.addEventListener('click', ()=>{ panel.classList.remove('open'); btn.classList.remove('on'); }); // 드래그 let dx=0,dy=0,dragging=false; const hd = document.getElementById('palHd'); hd.addEventListener('mousedown', e=>{ if(e.target===document.getElementById('palClose')) return; dragging=true; const r=panel.getBoundingClientRect(); dx=e.clientX-r.left; dy=e.clientY-r.top; e.preventDefault(); })();