콘텐츠로 이동
📣 인포그랩에서 OpenAI 기술 기반으로 자체 개발한 자동화 번역 프로그램을 통해 n8n 공식 문서의 한글판을 국내 최초로 제공합니다.

n8n 공식 기술 문서 한글판 by 인포그랩

화이트 라벨링#

기능 사용 가능 여부

Embed 기능을 사용하려면 Embed 라이선스가 필요합니다. Embed 사용 시점, 비용 및 라이선스 프로세스에 대한 자세한 내용은 n8n 웹사이트의 Embed 페이지를 참고하세요.

n8n의 화이트 라벨링은 프론트엔드 스타일링과 자산을 사용자 브랜드 아이덴티티에 맞게 커스터마이징하는 것을 의미합니다. 이 과정은 n8n의 소스 코드에서 두 가지 패키지를 변경하는 것을 포함합니다 github.com/n8n-io/n8n:

필수 조건#

개발 머신에 다음이 설치되어 있어야 합니다:

  • git
  • Node.js 및 npm. 최소 요구 버전: Node 18.17.0.
  • Linux, Mac, WSL에서 nvm(Node Version Manager)을 사용하여 설치하는 방법은 여기를 참고하세요.
  • Windows 사용자는 Microsoft의 Windows에서 NodeJS 설치 가이드를 참고하세요.

n8n의 저장소를 포크하고 새 저장소를 클론합니다.

1
2
git clone https://github.com/<your-organization>/n8n.git n8n
cd n8n

모든 종속성을 설치하고 n8n을 빌드하고 시작합니다.

1
2
3
npm install
npm run build
npm run start

변경사항을 만들 때마다 n8n을 다시 빌드하고 재시작해야 합니다. 개발 중에는 npm run dev를 사용하여 코드 변경 사항이 있을 때마다 자동으로 재빌드하고 재시작할 수 있습니다.

테마 색상#

테마 색상을 커스터마이즈하려면 packages/design-system를 열고 다음으로 시작합니다:

_tokens.scss의 맨 위에서는 HSL 색상으로 --color-primary 변수를 찾을 수 있습니다:

1
2
3
4
@mixin theme {
	--color-primary-h: 6.9;
	--color-primary-s: 100%;
	--color-primary-l: 67.6%;

아래 예제에서는 기본 색상이 #0099ff로 변경됩니다. HSL로 변환하려면 색상 변환 도구를 사용할 수 있습니다.

1
2
3
4
@mixin theme {
	--color-primary-h: 204;
	--color-primary-s: 100%;
	--color-primary-l: 50%;

예제 테마 색상 커스터마이징

테마 로고#

편집기의 로고 자산을 변경하려면 packages/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 컴포넌트에서 이를 사용합니다. 여기에는 다음이 포함됩니다:

아래 예제에서는 n8n-logo-collapsed.svg와 n8n-logo-expanded.svg를 교체하여 메인 사이드바의 로고 자산을 업데이트합니다.

예제 로고 메인 사이드바

로고 자산의 크기나 배치가 다를 경우 MainSidebar.vue의 맨 아래에서 SCSS 스타일을 커스터마이즈할 수 있습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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/editor-ui/src/plugins/i18n/locales/en.json.

n8n은 UI 텍스트의 대부분을 번역하기 위해 Vue I18n 국제화 플러그인을 사용합니다. en.json 내에서 텍스트 발생을 검색하고 교체하려면 Linked locale messages를 사용할 수 있습니다.

다음 예제에서는 _brand.name 번역 키를 추가하여 n8n의 AboutModal.vue를 화이트 라벨로 설정합니다.

1
2
3
4
5
6
{
	"_brand.name": "내 브랜드",
	//replace n8n with link to _brand.name
	"about.aboutN8n": "@:_brand.name 소개",
	"about.n8nVersion": "@:_brand.name 버전",
}

예시 소개 모달 현지화

창 제목#

n8n의 창 제목을 브랜드 이름으로 변경하려면 다음을 편집합니다:

다음 예제는 index.html 및 titleChange.ts에서 n8n 및 n8n.io의 모든 발생을 내 브랜드로 교체합니다.

1
2
3
4
5
6
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- HTML 제목 속성 교체 -->
	<title>내 브랜드 - 워크플로 자동화</title>
</head>

1
2
3
4
5
6
7
8
9
$titleSet(workflow: string, status: WorkflowTitleStatus) {
	// n8n 접두사 교체
	window.document.title = `내 브랜드 - ${icon} ${workflow}`;
},

$titleReset() {
	// n8n 접두사 교체
	document.title = `내 브랜드 - 워크플로 자동화`;
},

예시 창 제목 현지화

인포레터에서 최신 DevOps 트렌드를 격주로 만나보세요!