화이트 레이블링
Embed를 사용하려면 embed 라이선스가 필요합니다. n8n 화이트 레이블링은 프론트엔드 스타일링과 에셋을 브랜드 아이덴티티에 맞게 커스터마이징하는 것을 의미합니다. 개발 머신에 다음이 설치되어 있어야 합니다: n8n의 저장소를 포크하고 새 저장소를 클론합니다.
Embed를 사용하려면 embed 라이선스가 필요합니다. Embed 사용 시기, 비용 및 라이선스 절차에 대한 자세한 내용은 n8n 웹사이트의 Embed를 참조하세요.
n8n 화이트 레이블링은 프론트엔드 스타일링과 에셋을 브랜드 아이덴티티에 맞게 커스터마이징하는 것을 의미합니다. 이 프로세스는 n8n의 소스 코드 github.com/n8n-io/n8n에서 두 개의 패키지를 변경하는 것을 포함합니다:
- packages/frontend/@n8n/design-system: CSS 스타일과 Vue.js 컴포넌트가 포함된 n8n의 storybook 디자인 시스템
- packages/frontend/editor-ui: Vite.js로 빌드된 n8n의 Vue.js 프론트엔드
사전 요구사항#
개발 머신에 다음이 설치되어 있어야 합니다:
- git
- Node.js 및 npm. 최소 버전은 Node 18.17.0입니다. Linux, Mac, WSL에서 nvm(Node Version Manager)을 사용하여 두 가지를 설치하는 방법은 여기에서 확인할 수 있습니다. Windows 사용자는 Microsoft의 Windows에 NodeJS 설치 가이드를 참고하세요.
n8n의 저장소를 포크하고 새 저장소를 클론합니다.
git clone https://github.com/<your-organization>/n8n.git n8n
cd n8n
모든 종속성을 설치하고, 빌드 후 n8n을 시작합니다.
npm install
npm run build
npm run start
변경 사항이 있을 때마다 n8n을 다시 빌드하고 재시작해야 합니다. 개발 중에는 npm run dev를 사용하면 코드 변경 시 n8n이 자동으로 다시 빌드되고 재시작됩니다.
테마 색상#
테마 색상을 커스터마이징하려면 packages/frontend/@n8n/design-system을 열고 다음으로 시작합니다:
- packages/frontend/@n8n/design-system/src/css/_tokens.scss
- packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss
_tokens.scss의 상단에서 HSL 색상으로 된 --color-primary 변수를 찾을 수 있습니다:
@mixin theme {
--color-primary-h: 6.9;
--color-primary-s: 100%;
--color-primary-l: 67.6%;
다음 예시에서 기본 색상이 #0099ff로 변경됩니다. HSL로 변환하려면 색상 변환 도구를 사용할 수 있습니다.
@mixin theme {
--color-primary-h: 204;
--color-primary-s: 100%;
--color-primary-l: 50%;
테마 로고#
에디터의 로고 에셋을 변경하려면 packages/frontend/editor-ui/public을 참조하고 다음을 교체합니다:
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- n8n-logo.svg
- n8n-logo-collapsed.svg
- n8n-logo-expanded.svg
이러한 로고 에셋을 교체합니다. n8n은 다음을 포함한 Vue.js 컴포넌트에서 이를 사용합니다:
- MainSidebar.vue: 메인 사이드바의 상단/왼쪽 로고.
- Logo.vue: 다른 컴포넌트에서 재사용.
다음 예시에서 n8n-logo-collapsed.svg와 n8n-logo-expanded.svg를 교체하여 메인 사이드바의 로고 에셋을 업데이트합니다.
로고 에셋에 다른 크기나 배치가 필요한 경우 MainSidebar.vue 하단의 SCSS 스타일을 커스터마이징할 수 있습니다.
.logoItem {
display: flex;
justify-content: space-between;
height: $header-height;
line-height: $header-height;
margin: 0 !important;
border-radius: 0 !important;
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-background-xlight);
cursor: default;
&:hover, &:global(.is-active):hover {
background-color: initial !important;
}
* { vertical-align: middle; }
.icon {
height: 18px;
position: relative;
left: 6px;
}
}
텍스트 현지화#
n8n 또는 n8n.io와 같은 모든 텍스트를 브랜드 아이덴티티로 변경하려면 n8n의 영어 국제화 파일을 커스터마이징할 수 있습니다: packages/frontend/@n8n/i18n/src/locales/en.json.
n8n은 대부분의 UI 텍스트를 번역하기 위해 Vue.js용 Vue I18n 국제화 플러그인을 사용합니다. en.json 내의 텍스트를 검색하고 교체하려면 연결된 로케일 메시지를 사용할 수 있습니다.
다음 예시에서 n8n의 AboutModal.vue에 화이트 레이블을 적용하기 위해 _brand.name 번역 키를 추가합니다.
{
"_brand.name": "My Brand",
//replace n8n with link to _brand.name
"about.aboutN8n": "About @:_brand.name",
"about.n8nVersion": "@:_brand.name Version",
}
윈도우 제목#
n8n의 윈도우 제목을 브랜드 이름으로 변경하려면 다음을 편집합니다:
- packages/frontend/editor-ui/index.html
- packages/frontend/editor-ui/src/composables/useDocumentTitle.ts
다음 예시에서 index.html과 useDocumentTitle.ts에서 n8n 및 n8n.io의 모든 항목을 My Brand로 교체합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Replace html title attribute -->
<title>My Brand - Workflow Automation</title>
</head>
import { useSettingsStore } from '@/stores/settings.store';
// replace n8n
const DEFAULT_TITLE = 'My Brand';
const DEFAULT_TAGLINE = 'Workflow Automation';
