📐 그래픽 도구 모음

📐 그래픽 도구 — CSS·SVG·인쇄용 그래픽

그래픽 카테고리는 코드로 만드는 그래픽(CSS·SVG)과 인쇄용 그래픽(명함·QR·바코드)을 함께 다룹니다. CSS 박스 그림자·border-radius·clip-path·glassmorphism·키프레임 애니메이션 같은 개발자 친화 도구부터, 300DPI 명함·로고 주변 패턴·SVG 도형·차트 메이커까지. 디자이너가 코드를 몰라도 SVG로 내보낼 수 있고, 개발자가 디자이너 없이도 시각 요소를 만들 수 있는 도구들입니다.

📐 추천 워크플로 (브랜드 그래픽 키트)

1. 로고·심볼 — SVG 도형 도구로 기본 도형 조합. 텍스트 로고는 그라데이션 텍스트로 5분 완성.
2. 파비콘 — 파비콘 생성기로 SVG·PNG·ICO 멀티 사이즈 자동 생성. 16×16부터 512×512까지.
3. QR코드·바코드 — QR 생성기(URL·연락처·Wi-Fi 정보), 바코드(EAN·CODE128·UPC 10종).
4. 명함 — 명함 디자인으로 300DPI 인쇄용 PNG. 재단선·안전영역 가이드 포함.
5. 패턴·배경 — SVG 패턴(도트·체크·선)·Wave SVG(섹션 구분선)·블롭 생성기(유기적 형태).
6. UI 요소 — 박스섀도·글래스모피즘·로딩 스피너까지 CSS 코드 자동 생성.
7. 차트·인포그래픽 — 차트 메이커로 막대·선·원 차트 SVG. PPT·블로그용.

💡 그래픽 작업 실전 팁

• SVG는 무한 확대 가능. 로고·아이콘·일러스트는 SVG로 만들면 1080p에서도 4K에서도 깔끔. 파일 크기도 PNG보다 작은 경우 많음.
• 인쇄는 300DPI 기본. 명함·전단지·포스터는 인쇄 표준 300DPI. 화면용 72DPI 이미지를 인쇄하면 흐려져요. 명함 크기 9×5cm는 1063×591px가 300DPI 기준.
• QR코드는 28×28mm 이상. 명함·전단지에 들어가는 QR은 최소 28×28mm. 모바일 카메라가 1m 거리에서 인식 가능한 최소 크기.
• 박스 그림자는 단일 큰 그림자보다 다중 작은 그림자가 자연스럽습니다. 멀티 레이어 섀도(예: 0 1px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05))로 입체감 강화.
• border-radius는 일관성. 사이트 전체에서 4px/8px/12px/16px 같은 정해진 값만 사용. 일관성이 디자인 시스템의 핵심.

📖 그래픽 관련 PXLTool 블로그 글

• 5분 안에 무료 로고 만들기 — 텍스트 그라데이션 + SVG 조합
• 5분 명함 디자인 — 인쇄소 보내기 전 셀프 디자인
• 개발자에게 도움되는 무료 CSS 도구 — 박스섀도·gradient·clip-path

🙋 자주 묻는 질문

🗂 다른 카테고리