내보내기 가이드
Bobcorn 내보내기 워크플로의 완전한 안내 — 아이콘 선택부터 프로덕션 준비 완료 폰트 파일 생성까지.
내보내기 대화상자 열기
왼쪽 사이드바 메뉴의 내보내기 버튼을 클릭합니다. 내보내기 대화상자가 모달로 열리며, 출력 디렉터리 설정, 포함할 아이콘 그룹 선택, 출력 형식 및 동반 파일 선택을 구성할 수 있습니다. 모든 설정은 세션 간에 기억되므로, 내보내기 설정을 한 번 구성하면 이후 내보내기는 클릭 한 번으로 완료됩니다.
출력 디렉터리 선택
첫 번째 단계는 내보낸 파일을 저장할 위치를 선택하는 것입니다. 기본적으로 Bobcorn은 바탕화면을 사용합니다. 경로 옆의 폴더 버튼을 클릭하여 다른 위치를 탐색할 수 있습니다.
fonts/ 또는 assets/ 디렉터리로 직접 내보내면 내보낼 때마다 파일을 수동으로 복사하는 번거로움을 피할 수 있습니다. 아이콘 세트를 반복 작업하는 개발 중에 특히 유용합니다.
아이콘 그룹 선택
내보내기에 포함할 아이콘 그룹을 선택할 수 있습니다. 기본적으로 모든 그룹이 선택되어 있습니다. 폰트에 포함하지 않을 그룹의 체크를 해제하세요 — 예를 들어, 작업 중인 아이콘이 포함된 "drafts" 그룹을 제외할 수 있습니다.
각 그룹에는 이름 옆에 아이콘 수가 표시됩니다. 그룹을 켜고 끌 때마다 목록 하단의 총 아이콘 수가 실시간으로 업데이트되므로, 내보낸 폰트에 포함될 글리프 수를 항상 정확히 파악할 수 있습니다.
폰트 형식
Bobcorn은 다섯 가지 폰트 형식을 생성할 수 있습니다. 프로젝트의 브라우저 지원 요건에 맞는 형식을 선택하세요.
| 형식 | 기본값 | 활성화 조건 | 자세히 보기 |
|---|---|---|---|
| .woff2 | 항상 활성 | 항상 — 필수 웹 형식 | WOFF2 → |
| .woff | 선택 사항 | IE 11 지원이 필요한 경우 | WOFF → |
| .ttf | 선택 사항 | 데스크톱 앱, OS 폰트 설치 | TTF → |
| .svg | 선택 사항 | 디버깅, 레거시 iOS | SVG Font → |
| .eot | 선택 사항 | IE 6-8 레거시 전용 | EOT → |
WOFF2는 항상 포함됩니다. 이는 필수적인 웹 폰트 형식이며, 웹 폰트 내보내기에서 WOFF2 없이 진행하는 시나리오는 존재하지 않습니다. 나머지 형식은 모두 구체적인 요구 사항에 따라 선택적으로 추가합니다.
동반 파일
폰트 파일 자체 외에도 Bobcorn은 통합과 협업을 더 쉽게 만드는 여러 동반 파일을 생성할 수 있습니다.
CSS（icons.css）
@font-face 선언과 세트의 모든 아이콘에 대한 .icon-* CSS 클래스를 포함합니다. 이 파일을 프로젝트에 추가하면 간단한 클래스 이름으로 아이콘을 사용할 준비가 됩니다. 생성된 CSS 작동 방식에 대한 자세한 내용은 CSS @font-face 가이드를 참조하세요.
JS（icons-symbol.js）
스크립트가 로드될 때 모든 아이콘을 인라인 SVG 심볼로 등록하는 SVG 심볼 스프라이트입니다. 멀티컬러 아이콘이나 SVG 특정 기능이 필요할 때 폰트 아이콘과 함께 사용합니다. 사용 패턴은 SVG Symbol 가이드를 참조하세요.
HTML（demo.html）
내보낸 모든 아이콘을 이름, CSS 클래스 이름, Unicode 코드 포인트와 함께 표시하는 인터랙티브 미리보기 페이지입니다. 브라우저에서 열어 전체 아이콘 세트를 탐색할 수 있습니다. 아이콘 라이브러리를 검토하는 디자이너와 통합 중에 클래스 이름을 조회하는 개발자 모두에게 유용합니다.
ICP（project.icp）
Bobcorn의 프로젝트 파일입니다. 팀원과 아이콘 프로젝트를 공유하거나 백업으로 보관하기 위해 내보냅니다. Bobcorn에서 ICP 파일을 열면 내보낼 당시의 전체 프로젝트 상태 — 모든 아이콘, 그룹, 메타데이터, 설정 — 가 그대로 복원됩니다.
ZIP 패키징
ZIP 옵션을 활성화하면 내보낸 모든 파일을 단일 .zip 아카이브로 묶습니다. 팀원과 아이콘 폰트를 공유하거나, CDN에 업로드하거나, 디자인 핸드오프 문서에 첨부할 때 유용합니다. ZIP은 일반 내보내기와 동일한 디렉터리 구조를 포함하며 중첩이나 재구성은 없습니다.
권장 구성
일반적인 프로젝트 유형을 위한 세 가지 실용적인 프리셋을 소개합니다.
모던 웹 프로젝트
- WOFF2（항상 활성）+ CSS + HTML 데모
- 최소 용량으로 97%+ 브라우저 지원
완전 호환성 프로젝트
- WOFF2 + WOFF + CSS + HTML 데모
- IE 11+ 및 모든 모던 브라우저 지원
디자인 시스템 / 컴포넌트 라이브러리
- WOFF2 + TTF + CSS + JS 심볼 + HTML 데모 + ICP
- CSS 사용을 위한 폰트, 데스크톱 도구를 위한 TTF, 멀티컬러 변형을 위한 JS 심볼, 프로젝트 백업을 위한 ICP
출력 파일 구조
모든 옵션을 활성화하면 Bobcorn은 다음과 같은 파일 구조를 생성합니다.
내보내기 출력output/
├── MyIcons.woff2 # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css # @font-face + icon classes
├── MyIcons-symbol.js # SVG symbol sprite
├── demo.html # Interactive preview
└── MyIcons.icp # Project backup폰트 패밀리 이름（예: "MyIcons"）은 Bobcorn의 프로젝트 이름에서 가져옵니다. 생성된 모든 파일은 일관성을 위해 이 이름을 접두사로 사용합니다.
내보내기 후 작업
Bobcorn이 파일을 생성하면 다음 단계에 따라 아이콘 폰트를 프로젝트에 통합합니다.
- 폰트 파일 + CSS를 복사하여 프로젝트의 assets 또는 fonts 디렉터리에 배치합니다
- HTML에서 CSS를 링크합니다:
<link rel="stylesheet" href="MyIcons.css"> - 마크업 어디서나 아이콘을 사용합니다:
<i class="icon icon-home"></i> - 초기 렌더링 속도를 높이기 위해 WOFF2 파일을 선택적으로 프리로드합니다
다음은 완전한 통합 예시입니다.
완전한 통합 예시<head>
<link rel="preload" href="MyIcons.woff2" as="font"
type="font/woff2" crossorigin>
<link rel="stylesheet" href="MyIcons.css">
</head>
<body>
<button><i class="icon icon-save"></i> Save</button>
</body>rel="preload" 힌트는 브라우저가 CSS의 @font-face 규칙을 만나기 전에 폰트 파일 다운로드를 시작하도록 지시합니다. 이를 통해 CSS 파싱과 폰트 다운로드 사이의 지연이 제거되어 아이콘이 표시된 상태로 첫 번째 페인트가 빨라집니다. 폰트가 동일 출처인 경우에도 crossorigin 속성은 폰트 프리로드에 필요합니다.
demo.html을 브라우저에서 열면 내보낸 모든 아이콘을 탐색할 수 있습니다. 아이콘을 클릭하면 CSS 클래스 이름이 복사됩니다 — 개발 중 특정 아이콘의 정확한 클래스를 조회할 때 편리합니다.