본문으로 건너뛰기
All About n8n · 5/5시리즈 보기 →

n8n 새 홈페이지 둘러보기: 로고·서체·색이 바뀐 리브랜딩, 내 자료에 적용하는 법까지

· 약 15분
Datapopcorn CEO / AI automation educator
이 글과 연결된 글 보기
20편 · 71개 연결
100%
유료 문자 API 대신 내 안드로이드폰으로 무료 SMS 게이트웨이 만들기: Aside·무선 ADB·TextBee 실전 연동기베를린 출장 교통 앱 가이드: 한국 번호로 BVG·FREE NOW·Uber·Bolt 가입해 본 8단계 (2026)ChatGPT 데스크톱 앱으로 실시간 통역하는 법챗GPT 새 한국어 음성 '한울·햇살' 설정하고 영어 회화 연습에 쓰는 법 (GPT-Live-1.1)먼저 연락하는 Claude, Claude Duet 정리: 무엇이 다르고 한국에서 대기자 신청은 어떻게 하나클로드 사용량 100%에서 0%로, 무료 초기화 직접 해봤습니다ESP32와 n8n으로 만드는 IoT 자동화 포트폴리오 — 센서 수집부터 장애 대응까지 실전 프로젝트 6선패스트파이브 성수연무장점 후기: 성수역에서 가는 길, 지하 입구, 라운지 시설까지AI로 코딩은 빨라졌는데 배포는 누가 책임지나: 인포그랩 Next Delivery Stack 2026 후기인스타 '댓글 남기면 DM 보내드려요', 유료 툴 없이 직접 만들기링크드인 글 하나에 여러 명 이름 올리기: 협업 게시물(Collaborative Posts) 사용법러다이트(Ludyte) 가입부터 첫 영상까지: 무료 9회로 직접 해본 기록n8n 컨퍼런스에서 받은 Cardputer ADV, 서랍에 넣기 전에 해볼 것들2026 n8n Fest 후기n8n 첫 공식 컨퍼런스 'In The Loop 2026' 앱 뜯어보기: Fliplet 로우코드와 Node Runner 게이미피케이션 설계 분석n8n 새 홈페이지 둘러보기: 로고·서체·색이 바뀐 리브랜딩, 내 자료에 적용하는 법까지n8n 템플릿 라이브러리(n8n.io/workflows) 완전 정복 — 실무에서 가장 많이 쓰는 인기 워크플로우 5가지와 즉시 적용법사업자 있으신 분, 050 안심번호 무료로 받으세요 (네이버 스마트콜 발급 방법)네이버 스마트플레이스 똑똑하게 채우는 법, AI 에이전트로 관리하기까지해외 출장 예약하고 개인 카드를 한 번도 안 꺼냈습니다 — 법인 출장 플랫폼 Perk 사용기

드래그로 이동 · 휠/두 손가락으로 확대 · 방향키로 글 선택 · 0으로 맞춤. 실선: 본문 링크, 점선: 시리즈·주제의 대표 연결.

표시된 글 20편 목록
전체 글 연결 탐색

n8n.io에 들어가면 이제 어두운 배경에 주황색 번개가 있던 첫 화면 대신, 밝은 점 격자 위에서 워크플로우가 노드 하나씩 그려집니다. n8n은 2026년 10월 14일 베를린 In The Loop 컨퍼런스에서 새 로고, 새 서체, 다듬은 핑크를 공개했고 홈페이지도 새 브랜드로 바꿨습니다. 바뀌기 전과 후를 나란히 놓고 섹션별로 둘러보고, 클라우드와 셀프호스팅 화면에는 어디까지 들어왔는지 비교한 뒤, 공식 브랜드 가이드로 내 자료를 새 브랜드에 맞추는 방법까지 순서대로 정리합니다.

이 글은 이런 분께 필요합니다​

  • n8n 강의 자료, 발표 슬라이드, 유튜브 썸네일에 n8n 로고나 화면을 넣어 둔 분
  • 새 홈페이지에서 n8n이 무엇을 강조하는지 짧게 파악하고 싶은 분
  • AI 에이전트에게 디자인을 맡길 때 공식 브랜드 규칙을 지키게 하고 싶은 분

준비물은 브라우저 하나면 충분합니다. Step 8에서 AI 에이전트로 시안을 만들어 보려면 Claude, ChatGPT, Codex, Cursor 중 하나를 쓰고 있으면 됩니다.

이 글의 기준 시점

홈페이지 화면은 2026년 10월 27일(한국 시간)에 직접 캡처했습니다. 바뀌기 전 화면은 인터넷 아카이브(Wayback Machine)에 남은 2026년 10월 11일 스냅숏입니다. n8n은 반복해서 고쳐 나가는 회사라 문구와 예시는 이후 달라질 수 있습니다.

Step 1. 무엇이 바뀌었는지 전후 화면으로 확인하기​

먼저 바뀌기 전 홈페이지입니다. 상단에 In The Loop 티켓 배너가 있고, 어두운 배경에 주황 그라데이션 버튼과 큰 번개 이미지가 있었습니다.

2026년 10월 11일 n8n.io 홈페이지. 어두운 배경, 주황색 Get started for free 버튼, 번개 이미지

바뀌기 전(2026-10-11, Wayback Machine). 헤드라인은 "AI agents and workflows you can see and control"(보고 통제할 수 있는 AI 에이전트와 워크플로우)였습니다.

지금 홈페이지는 이렇습니다.

2026년 10월 27일 n8n.io 홈페이지. 밝은 점 격자 배경에 뉴스 브리핑 워크플로우가 그려진 첫 화면

바뀐 뒤(2026-10-27). 헤드라인은 "Build the agent. Understand its workflow."(에이전트를 만들고, 그 워크플로우를 이해하세요)입니다.

두 화면을 비교하면 차이는 네 가지로 정리됩니다.

항목바뀌기 전바뀐 뒤
로고동그란 노드를 선으로 이은 모양가로선 하나에 십자 모양 연결점 세 개가 얹힌 새 심볼
배경과 색어두운 남색 배경, 주황 그라데이션 버튼밝은 회색(#FAFAFA) 점 격자, 핑크(#FF91AC) 버튼
글자기존 웹 서체, 버튼은 일반 대소문자새 서체 n8n Baumer, 버튼과 메뉴는 대문자 고정폭 글꼴
첫 화면번개 이미지와 고객사 로고실제 노드로 그린 워크플로우

n8n 창업자 Jan Oberhauser는 10월 20일 공식 블로그에서 옛 로고는 노드를 연결한다는 아이디어였고, 새 로고는 연결 그 자체보다 연결이 만들어 내는 움직임을 보여 주려는 것이라고 설명했습니다. 사람이 워크플로우 중간에 결정하고, 에이전트가 행동하고, 모델이 정보를 해석하는 지금의 n8n에서는 노드 사이에서 일어나는 일이 더 중요해졌다는 뜻입니다.

바뀌지 않는 것

같은 글에서 "This is a zhush, not a rebuild."(처음부터 다시 만든 게 아니라 손질한 것)라고 밝히고, 커뮤니티, Community Edition, 모델 선택권, 그리고 핑크는 그대로 간다고 정리했습니다. 이름이나 라이선스가 바뀐 게 아니라 겉모습이 바뀐 것입니다.

Step 2. 첫 화면의 워크플로우를 직접 늘려 보기​

새 첫 화면에서 가장 먼저 해 볼 것은 오른쪽 끝의 + 버튼입니다. 옆에 핑크색 CLICK HERE 라벨이 붙어 있습니다.

  1. n8n.io에 접속해 몇 초 기다립니다. 트리거부터 노드가 하나씩 그려집니다.
  2. 오른쪽 끝 + 버튼을 누릅니다.
  3. 화면이 옆으로 이동하면서 다음 노드가 이어 붙습니다.

+ 버튼을 누른 뒤 환불 워크플로우가 데이터베이스 기록, 환불 사유 분류, 사유별 분기 노드로 이어진 화면

환불 요청 워크플로우에서 +를 누르자 "Record refund in database", "Classify reason for refund", "Route by reason" 노드가 이어졌습니다.

새로고침할 때마다 예시가 바뀝니다. 직접 확인한 예시만 세 가지였습니다.

  • 매일 아침 8시에 NYT와 CNN 헤드라인을 모아 GPT-5로 요약하고 Gmail로 보내는 뉴스 브리핑
  • 환불 요청이 오면 주문을 조회하고 Slack으로 승인을 받은 뒤, 승인되면 환불 처리, 아니면 Zendesk 티켓을 여는 흐름
  • 고객 지원 요청을 분류하고 긴급하면 팀에 알리는 흐름

헤드라인 아래 문장이 "Open any step, see what it does, and explain to anyone who runs it."(어떤 단계든 열어서 무엇을 하는지 보고, 운영하는 누구에게나 설명할 수 있습니다)입니다. 그림 대신 진짜 워크플로우를 첫 화면에 둔 것이 이 문장을 그대로 보여 줍니다.

Step 3. 직군별 사례 탭으로 내 업무와 비슷한 예 찾기​

고객사 로고 아래 어두운 카드에는 네 사람의 이름표가 있습니다. 탭이 자동으로 돌아가고, 직접 눌러서 고를 수도 있습니다.

MARK, IT 탭이 선택된 사례 카드. 신규 입사자 온보딩 워크플로우가 그려져 있음

탭사례화면 설명 요약
MARK, IT신규 입사자 온보딩입사자에게 Slack, Jira, Notion 등 권한을 한 워크플로우로 바로 부여
DEBORAH, SECURITY보안 위협 확인의심 지표를 여러 보안 도구로 조회하고 한 보고서로 묶어 AI가 요약
OLU, DEVOPS알림 분류알림이 오면 AI 에이전트가 조사하고 심각도에 따라 담당자와 도구로 전달
ALIX, SALES리드 검증새 메시지에 AI 에이전트가 답하며 리드를 검증하고 리드 기록을 갱신

강의나 사내 설명 자료를 만들 때 이 네 사례를 출발점으로 쓰기 좋습니다. 직군 이름이 붙어 있어서 "우리 팀은 어떤 걸 자동화할 수 있나"라는 질문에 바로 연결됩니다.

그 아래 숫자 띠에는 GitHub 별 208.6k(상위 50위 프로젝트), G2 평점 4.7/5, 커뮤니티 25만 명 이상이 적혀 있습니다. 바뀌기 전 화면의 GitHub 버튼에는 206,926이 찍혀 있었으니, 두 화면 사이 약 2주 동안 별이 1,600개 넘게 늘었습니다.

Step 4. 연결과 신뢰 섹션에서 같은 워크플로우가 어떻게 변하는지 보기​

다음 섹션 제목은 "The USB-C for your AI stack"(AI 스택을 위한 USB-C)입니다. 기본 연동 500개 이상, HTTP로 어떤 API든, MCP로 어떤 에이전트나 코딩 어시스턴트든 연결한다고 적혀 있습니다. 화면에는 Slack, Supabase, Postgres 같은 앱 아이콘이 흩어져 떠 있습니다.

그 아래 "See + understand + trust your agents"(에이전트를 보고, 이해하고, 믿으세요) 섹션은 이 글에서 가장 꼼꼼히 볼 부분입니다. 왼쪽 항목 세 개를 하나씩 누르면, 오른쪽에서 같은 청구서 처리 워크플로우가 세 가지 버전으로 바뀝니다.

Full visibility across agents 항목. Outlook 청구서 메일을 AI 에이전트가 확인하고 Slack에 알리는 워크플로우

Full visibility across agents: 에이전트가 일하는 모습을 실시간으로 보거나 지난 실행을 열어 볼 수 있습니다. 모델은 Claude Sonnet 4.6, 도구는 QuickBooks 조회입니다.

Put rules around AI actions 항목. 청구서 선별 단계와 재무팀 승인 대기 노드가 추가된 워크플로우

Put rules around AI actions: 앞단에 청구서를 먼저 거르는 단계가 붙고, 지급 전에 "Finance approves payments"(재무팀 승인) 노드가 Slack으로 승인을 기다립니다. 구조화된 입출력과 사람의 승인(human-in-the-loop)을 넣는 예입니다.

Self-host your AI stack 항목. 자체 서버의 Llama 3.3과 로컬 임베딩, 사내 ERP 조회로 바뀐 워크플로우

Self-host your AI stack: 모델이 "Llama 3.3 on your servers"(내 서버의 Llama 3.3)로, 임베딩이 로컬 임베딩으로, 조회 대상이 사내 ERP로 바뀝니다. Docker나 자체 서버에 설치해 데이터를 내 환경에 두는 경우입니다.

같은 업무를 놓고 "보기, 규칙 걸기, 내 서버로 옮기기"를 차례로 보여 주기 때문에, 회사에서 AI 에이전트 도입을 설득할 때 이 세 장을 그대로 순서로 쓸 수 있습니다.

Step 5. 문서화, 복구, 버전 관리 섹션 확인하기​

다음 섹션 "Built by you + readable by anyone"(내가 만들고, 누구나 읽을 수 있게)도 같은 방식으로 항목 세 개를 눌러 봅니다.

Documentation, built in 항목. 월간 보고서 워크플로우 아래에 단계별 설명 메모가 붙어 있음

Documentation, built in: 워크플로우 아래 메모 세 장("지난달 숫자 모으기", "보고서 만들기", "공유하기")이 붙어 있습니다. "The workflow is the documentation."(워크플로우가 곧 문서입니다)라는 설명 그대로, 따로 인수인계 문서를 쓰지 않아도 된다는 메시지입니다.

Recover in one step 항목. 실패한 단계가 빨간 테두리로 표시된 워크플로우

Recover in one step: 실패한 Google Sheets 단계가 빨간 테두리로 표시됩니다. 오류를 한눈에 찾고, 실패한 단계만 다시 실행한다는 설명이 붙어 있습니다.

Every change, tracked 항목. 워크플로우 버전 목록과 게시 타임라인 화면

Every change, tracked: 누가 언제 어떤 버전을 게시했는지 보여 주는 버전 기록 화면입니다.

이어지는 "Move fast + break nothing"(빠르게 움직이되 아무것도 망가뜨리지 않기) 섹션은 지난 실행을 다시 돌리거나 데이터를 모의로 넣어 외부 시스템을 기다리지 않고 테스트하고, 로그로 무슨 일이 있었는지 확인한다는 두 줄로 정리돼 있습니다.

Step 6. 엔터프라이즈 섹션과 푸터의 숨은 장난 찾기​

엔터프라이즈 섹션은 카드 네 장으로 정리돼 있습니다.

Enterprise-ready for teams of any size 섹션. 보안, 관측, 개발자 경험, AI 거버넌스 카드 네 장

카드화면에 적힌 기능
Security + control완전 온프레미스 옵션, SSO SAML, LDAP, 암호화된 시크릿 저장소, 버전 관리, RBAC 권한
Observability + transparency감사 로그, SIEM으로 로그 스트리밍, 워크플로우 기록, 실시간 알림, 사용량 대시보드
Developer experienceGit 기반 관리, 분리된 환경, 여러 사람이 함께 쓰는 워크플로우, 워크플로우 비교
AI governance사람의 승인, 가드레일, 평가

그 아래 사례 연구는 Huel(AI 우선 문화로 1,000시간 절약)과 Vodafone(보안 운영에서 220만 파운드 효과) 두 건입니다.

마지막으로 페이지 맨 아래 어두운 푸터까지 내려가서 점 격자 위로 마우스를 움직여 보세요. 커서를 따라 흰 칸이 켜졌다 사라집니다.

푸터 점 격자 위에서 마우스를 움직이자 커서 경로를 따라 흰 칸이 켜진 화면

n8n 커뮤니티 공지에서도 새 브랜드에는 새 웹사이트 푸터처럼 작은 놀이 요소가 곳곳에 있다고 소개했습니다. 브랜드 설명에 나오는 "조금은 장난스럽게"라는 성격을 이런 곳에 숨겨 둔 셈입니다.

Step 7. 클라우드, 셀프호스팅, 크리에이터 포털은 어디까지 바뀌었는지 비교하기​

홈페이지가 바뀌었다고 n8n 서비스 전체가 한 번에 바뀐 것은 아닙니다. 같은 날(10월 27일) 데이터팝콘이 쓰는 n8n 화면 세 곳을 열어 로고와 색을 비교했습니다.

n8n.io, creators.n8n.io, app.n8n.cloud, 셀프호스팅 n8n의 로고 비교. 앞의 둘은 새 로고, 뒤의 둘은 옛 로고

화면주소로고색과 버튼상태
홈페이지n8n.io새 로고밝은 점 격자, 핑크, 대문자 고정폭새 브랜드 적용
크리에이터 포털creators.n8n.io새 로고점 격자 헤더, 핑크 버튼과 캡슐새 브랜드 적용
클라우드 관리 화면app.n8n.cloud옛 로고주황 버튼과 사용량 막대화면 구성만 새로움, 브랜드는 그대로
셀프호스팅 n8nn8n.datapopcorn.ai옛 로고주황 전송 버튼브랜드 그대로

7-1. 크리에이터 포털: 이미 새 브랜드​

템플릿을 올리는 크리에이터 포털은 홈페이지와 같은 새 브랜드가 들어가 있습니다. 왼쪽 위에 새 핑크 심볼과 대문자 고정폭 CREATOR PORTAL, 헤더 배경에 점 격자, Share new template 버튼과 검토 상태 캡슐(IMPLEMENT CHANGES)이 모두 핑크입니다.

creators.n8n.io 템플릿 대시보드. 새 n8n 로고, 점 격자 헤더, 핑크 버튼과 캡슐

데이터팝콘 계정의 템플릿 화면입니다. 검토 중 1개, 게시 2개가 보입니다.

7-2. n8n Cloud 관리 화면: 구성은 새것, 로고는 옛것​

app.n8n.cloud의 관리 화면은 Overview, Instance settings, Assistant credits, Gateway credits, Billing, Export 메뉴로 정리된 새 구성입니다. 하단에 Switch to classic UI(예전 화면으로 전환) 버튼이 있어 예전 화면과 새 화면을 오갈 수 있습니다. 하지만 왼쪽 위 로고는 옛 노드 로고이고, Open instance 버튼과 실행 횟수 막대는 예전 주황색입니다.

app.n8n.cloud Overview 화면. 옛 n8n 로고와 주황색 Open instance 버튼, 실행 횟수와 버전 카드

인스턴스 버전은 2.43.5였고, 2.45.4로 업데이트할 수 있다는 표시가 떠 있었습니다. 계정 이메일은 가렸습니다.

Switch to classic UI를 눌러 예전 화면도 열어 봤습니다. 메뉴가 위쪽 가로 배치이고 커뮤니티 포럼 안내 카드가 붙은 구성인데, 로고와 주황 버튼은 새 화면과 같습니다. 두 화면 모두 아직 옛 브랜드라는 뜻입니다. 확인 뒤에는 Try the new look으로 새 화면으로 되돌려 두었습니다.

app.n8n.cloud 예전(classic) 대시보드. 옛 로고와 주황 Open instance 버튼, Try the new look 버튼

Open instance로 들어간 클라우드 n8n 에디터(datapopcorn.app.n8n.cloud)도 왼쪽 위 로고는 옛 노드 로고입니다.

클라우드 n8n 에디터의 Assistant 화면. 옛 로고, Personal, Shared with you, Chat, Projects, Admin Panel 메뉴

프로젝트 이름은 가렸습니다.

7-3. 셀프호스팅 n8n: 아직 예전 그대로​

데이터팝콘 셀프호스팅 서버(n8n.datapopcorn.ai)도 옛 로고입니다. 로그인 화면부터 옛 로고와 주황 Sign in 버튼 그대로입니다.

셀프호스팅 n8n 로그인 화면. 옛 n8n 로고와 주황색 Sign in 버튼

로그인하면 첫 화면이 "What do you want to automate?"(무엇을 자동화하고 싶나요?)라고 묻는 Assistant(Preview) 화면이고, 전송 버튼은 주황색입니다. 도움말 메뉴에는 Update (1 version behind)(1버전 뒤처짐) 표시가 떠 있었습니다.

셀프호스팅 n8n의 Assistant 화면. 옛 로고와 주황색 전송 버튼

클라우드 에디터와 셀프호스팅 에디터를 같은 날 나란히 놓고 보면, 브랜드는 둘 다 옛것이고 차이는 메뉴 구성에 있습니다.

항목클라우드 에디터(Pro 플랜)셀프호스팅 에디터
로고옛 노드 로고옛 노드 로고
첫 화면Assistant(Preview), "What do you want to automate?"같은 Assistant(Preview) 화면
입력창 아래저장할 공간을 고르는 Personal space 선택없음
왼쪽 메뉴Overview, Personal, Shared with you, Chat, Projects, Admin PanelOverview, Templates, Insights, Help, Settings만
업데이트관리 화면에서 2.43.5 → 2.45.4 업데이트 안내도움말 메뉴에 1버전 뒤처짐 표시

메뉴 차이는 플랜과 라이선스, 계정 권한에 따라 달라지는 부분이라 브랜드 변경과는 별개입니다.

정리하면 새 브랜드는 홈페이지와 크리에이터 포털처럼 바깥에서 보이는 사이트에 먼저 들어갔고, 실제로 워크플로우를 만드는 제품 화면에는 아직 들어오지 않았습니다. n8n 공식 글도 "제품, 웹사이트, 커뮤니티, 행사에 차례로 보이게 될 것"이라고 했으니 제품 화면도 곧 바뀔 것으로 보입니다. 클라우드는 n8n이 업데이트하면 바뀌겠지만, 셀프호스팅은 새 로고가 들어간 버전이 나온 뒤 직접 업그레이드해야 바뀔 가능성이 큽니다. 제품 화면이 바뀌면 이 글에 다시 캡처를 추가하겠습니다.

강의 자료라면 지금은 두 로고를 모두 알려 주세요

수강생이 홈페이지에서는 새 로고를, 자기 n8n 화면에서는 옛 로고를 보게 됩니다. 제품 화면이 바뀔 때까지는 "같은 n8n, 로고만 바뀌는 중"이라고 한 줄 설명해 두면 혼란이 줄어듭니다.

Step 8. 공식 브랜드 가이드로 내 자료를 새 브랜드에 맞추기​

여기부터는 직접 해야 하는 작업입니다. n8n 로고나 색이 들어간 강의 썸네일, 슬라이드, 교재가 있다면 이번 리브랜딩으로 옛 모습이 됐습니다.

8-1. 가이드 사이트 열기​

홈페이지 푸터의 BRAND GUIDELINES를 누르거나 guidelines.n8n.design으로 바로 들어갑니다. 왼쪽 메뉴에 Overview, TOV(말투), Logo, Colors, Typography, The Grid, Graphic Devices, Build with AI가 있습니다.

옛 링크는 404입니다

예전에 쓰던 n8n.io/colors, n8n.io/typography 주소는 10월 27일 확인 결과 404를 돌려줍니다. 자료나 북마크에 옛 주소가 있다면 새 가이드 주소로 바꿔 주세요.

8-2. 로고 파일 받기​

n8n 가이드 사이트 Logo 페이지. 핑크 심볼과 n8n 워드마크

Logo 페이지 아래쪽에서 심볼만, 또는 심볼과 글자를 합친 전체 로고를 SVG와 ZIP으로 받을 수 있습니다. 가이드 내용 중 자료 만들 때 바로 쓰이는 규칙만 추렸습니다.

  • 심볼은 연결점 8개와, 빈 공간에 숨은 노드 8개로 이루어져 있습니다. n8n의 8을 뜻합니다.
  • 밝은 배경에는 핑크 심볼과 검은 글자(n8n-logo-black-accent), 어두운 배경에는 핑크 심볼과 흰 글자(n8n-logo-white-accent)를 씁니다.
  • 핑크 배경 위에는 핑크 로고를 쓰지 않고 검은 로고를 씁니다.
  • 파트너 로고와 함께 쓸 때는 + 기호로 잇고, n8n 로고를 왼쪽(가로 배치) 또는 위쪽(세로 배치)에 둡니다.

8-3. 색과 서체 확인하기​

n8n 가이드 사이트 Colors 페이지

용도값
대표 핑크(Accent)#FF91AC
기본 검정(Core Black)#191919
기본 흰색(Core White)#FAFAFA
회색#F8F8F8부터 #242424까지 12단계

서체는 EK Baumer를 손본 n8n Baumer입니다. 소문자 a의 꼬리를 뗀 대체 글자를 기본으로 쓰고, 굵기는 Regular(400)와 Medium(500) 두 가지만 씁니다.

8-4. n8ndesign.md를 AI 에이전트에 연결하기​

가이드의 Build with AI 메뉴에서 n8ndesign.md 파일을 받을 수 있습니다. 이 파일 하나에 색, 서체, 간격, 로고 사용법, 말투 규칙이 AI 에이전트가 읽기 좋은 형태로 들어 있습니다. 제가 받은 파일은 V5(2026년 10월 19일 업데이트)였습니다.

n8n 가이드 사이트 Build with AI 페이지. n8ndesign.md 소개

  1. DOWNLOAD N8NDESIGN.MD 버튼으로 파일을 받아 작업 폴더에 넣습니다.
  2. 쓰는 도구 탭(Claude, ChatGPT, Codex, Cursor)을 고르고 안내대로 연결합니다. Claude라면 CLAUDE.md에 @n8ndesign.md 한 줄을 넣습니다.
  3. 가이드가 제공하는 지시문을 붙여 넣습니다.
Before you design or build any UI, read n8ndesign.md and follow it exactly: colors, spacing, type and logo usage. If something isn't covered, ask me instead of guessing.

(UI를 디자인하거나 만들기 전에 n8ndesign.md를 읽고 색, 간격, 서체, 로고 사용법을 그대로 따르세요. 다루지 않는 부분은 추측하지 말고 물어보세요.)

  1. 가이드의 예시 프롬프트 중 하나로 시안을 만듭니다. 저는 소셜 카드 프롬프트를 이 글 주제에 맞게 바꿔 썼습니다.
Make a 1080×1080 social card announcing [news], on-brand per n8ndesign.md. Use pink for one accent only.

(n8ndesign.md에 맞춰 [소식]을 알리는 1080×1080 소셜 카드를 만드세요. 핑크는 강조 한 곳에만 쓰세요.)

AI 에이전트에게 n8ndesign.md를 읽히고 위 프롬프트로 만든 결과가 아래 카드입니다. 이 글의 대표 이미지도 같은 방식으로 만들었습니다.

n8ndesign.md를 따라 만든 1080x1080 카드. 점 격자 배경, 공식 n8n 로고, 핑크와 회색 캡슐, 눌린 패널 안의 한글 제목

에이전트가 파일 규칙을 따라 처리한 부분은 이렇습니다.

  • 로고를 직접 그리지 않고 가이드 주소에서 공식 SVG(n8n-logo-black-accent.svg)를 받아 넣었습니다. n8ndesign.md에 "로고를 절대 생성하지 말 것"이 첫 규칙으로 들어 있습니다.
  • 밝은 배경에서 핑크 글씨는 대비가 2.03:1로 부족하다는 규칙에 따라, 핑크는 첫 캡슐의 배경색으로만 썼습니다.
  • 캡슐 두 개를 점으로 이어 붙이고, 캡슐 글자는 대문자 고정폭으로 넣었습니다. n8n 화면의 노드 연결점을 닮은 장치입니다.
  • 제목 패널은 가이드의 Deboss M 값(안쪽 그림자 8px, 흐림 12px)으로 종이에 눌린 느낌을 냈습니다.
한글은 n8n Baumer로 나오지 않습니다

n8n Baumer에는 한글 글자가 없고, 가이드 사이트에서 폰트 파일 다운로드 링크도 찾지 못했습니다. 그래서 한글 제목과 본문은 Pretendard, 캡슐의 영문 대문자는 일반 고정폭 글꼴로 대신했습니다. 한국어 자료는 "영문은 브랜드 규칙, 한글은 비슷한 무게의 산세리프"로 정해 두는 것이 현실적입니다.

자주 겪는 문제와 해결​

증상원인해결
예전에 저장한 n8n.io/colors, /typography 링크가 열리지 않음브랜드 페이지가 새 가이드 사이트로 옮겨짐guidelines.n8n.design 또는 푸터의 BRAND GUIDELINES 사용
첫 화면 워크플로우가 볼 때마다 다름방문할 때마다 다른 예시 워크플로우를 보여 줌원하는 예시가 나올 때까지 새로고침, 캡처는 노드가 다 그려진 뒤에
사례 탭 캡처가 다른 사람으로 바뀜탭이 자동으로 돌아감원하는 이름표를 눌러 고정한 뒤 몇 초 기다렸다 캡처
AI가 n8n 로고를 비슷하게 그려 넣음공식 파일 주소를 모름n8ndesign.md를 연결하고, 로고는 가이드 SVG를 쓰라고 지시
밝은 배경의 핑크 글씨가 잘 안 읽힘대비 2.03:1로 글자에 부족함핑크는 면(배경, 도형)에만 쓰고 글자는 #191919
한글이 n8n 서체로 나오지 않음n8n Baumer에 한글이 없음한글은 Pretendard 등 비슷한 산세리프로 대체
홈페이지는 새 로고인데 내 n8n 화면은 옛 로고2026-10-27 기준 클라우드·셀프호스팅 제품 화면에는 아직 미반영버그가 아님. 셀프호스팅은 새 버전 공지를 보고 업그레이드
옛 로고가 강의 썸네일과 교재에 남아 있음2026년 10월 14일 브랜드 변경가이드에서 로고 팩을 받아 교체, 함께 쓰는 로고는 +로 연결
직접 확인하지 못한 것
  • 클라우드와 셀프호스팅 제품 화면에 새 로고가 언제 들어오는지는 아직 알 수 없습니다. 10월 27일 기준으로는 두 곳 모두 옛 로고입니다. 셀프호스팅 서버의 정확한 버전 번호는 이번에 확인하지 못했습니다.
  • 첫 화면 예시 워크플로우가 몇 종류인지는 세지 않았습니다. 이 글에는 직접 본 세 가지만 적었습니다.

참고 자료​