화이트 레이블링

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-32x