노드 사용자 인터페이스 설계하기

n8n 노드의 사용자 인터페이스를 설계할 때 따라야 할 UI 텍스트 스타일, 용어, 필드 배치, 도움말 등에 대한 표준과 가이드를 설명합니다.

대부분의 노드는 API를 GUI(그래픽 사용자 인터페이스)로 표현한 것입니다. 인터페이스를 설계한다는 것은 API 엔드포인트와 매개변수를 사용자 친화적인 방식으로 표현하는 방법을 찾는 것을 의미합니다. API 전체를 그대로 노드의 폼 필드로 옮기면 좋은 사용자 경험을 만들어내지 못할 수 있습니다. 이 문서는 따라야 할 설계 가이드와 표준을 제공합니다. 이 가이드라인은 n8n이 사용하는 것과 동일합니다. 이를 통해 커뮤니티 노드와 빌트인 노드를 함께 사용하는 사용자에게 매끄럽고 일관된 사용자 경험을 제공할 수 있습니다. 설계 가이드 # 모든 노드는 n8n의 노드 UI 요소 를 사용하므로, 색상이나 테두리 등의 스타일 세부 사항은 신경 쓸 필요가 없습니다. 그렇지만 기본적인 설계 프로세스를 거치는 것은 여전히 유용합니다. 통합하려는 API의 문서를 검토하세요. 스스로에게 다음을 질문해 보세요. 무엇을 생략할 수 있는가? 무엇을 단순화할 수 있는가? API의 어떤 부분이 헷갈리는가? 사용자가 이를 이해하도록 어떻게 도울 수 있는가? 와이어프레임 도구를 사용해 필드 레이아웃을 시도해 보세요. 노드에 필드가 너무 많아서 복잡해지고 있다면, 필드 표시 및 숨기기 에 대한 n8n의 가이드를 참고하세요. 표준 # UI 텍스트 스타일 # 요소 스타일 드롭다운 값 타이틀 케이스 힌트 문장 케이스 정보 박스 문장 케이스. 문장이 하나뿐인 정보에는 마침표( . )를 사용하지 않습니다. 문장이 두 개 이상이면 항상 마침표를 사용합니다. 이 필드에는 링크를 포함할 수 있으며, 링크는 새 탭에서 열려야 합니다. 노드 이름 타이틀 케이스 매개변수 이름 타이틀 케이스 서브타이틀 타이틀 케이스 툴팁 문장 케이스. 툴팁 문장이 하나뿐인 경우 마침표( . )를 사용하지 않습니다. 문장이 두 개 이상이면 항상 마침표를 사용합니다. 이 필드에는 링크를 포함할 수 있으며, 링크는 새 탭에서 열려야 합니다. UI 텍스트 용어 # 노드가 연결하는 서비스와 동일한 용어를 사용하세요. 예를 들어 Notion 노드는 Notion 문단이 아니라 Notion 블록이라고 표현해야 합니다. Notion이 이러한 요소를 블록이라고 부르기 때문입니다. 이 규칙에는 예외가 있으며, 대개는 기술 용어를 피하기 위한 것입니다(예: upsert 작업의 이름 및 설명 에 대한 가이드를 참고하세요). 어떤 서비스는 API와 GUI에서 같은 대상을 다른 용어로 부르기도 합니다. 대부분의 사용자에게 익숙한 것은 GUI 용어이므로, 노드에서는 GUI 언어를 사용하세요. 일부 사용자가 해당 서비스의 API 문서를 참고해야 할 수도 있다고 생각되면, 이 정보를 힌트에 포함하는 것을 고려하세요. 더 간단한 대안이 있는데도 전문 용어를 사용하지 마세요. 이름을 지을 때는 일관성을 유지하세요. 예를 들어 directory 와 folder 중 하나를 선택했다면 계속 그것만 사용하세요. 노드 명명 규칙 # 규칙 올바른 예 잘못된 예 노드가 트리거 노드인 경우, 표시 이름 끝에 앞에 공백을 두고 'Trigger'를 붙여야 합니