구글 시트 데이터를 동적 HTML 테이블 API로 변환 - n8n 워크플로우

스프레드시트 데이터를 시각화하기 위한 간단한 API 엔드포인트가 필요한 개발자.
백엔드 설정 없이 임시 데이터 보고서를 즉시 게시해야 하는 콘텐츠 관리자.
n8n Function 노드를 사용하여 맞춤형 데이터 변환 및 렌더링을 수행하는 고급 예제를 찾는 사용자.
데이터 표현을 위한 강력하고 맞춤화된 n8n 템플릿 구축에 관심 있는 모든 사람.

이 고급 n8n 워크플로우는 구글 시트에 저장된 데이터를 시각적으로 매력적인 동적 HTML 테이블로 게시하기 위한 매우 빠른 솔루션을 제공합니다. 데이터베이스나 복잡한 호스팅 환경을 설정하는 대신, 이 n8n 자동화는 필요할 때 최신 데이터를 가져오는 공개 엔드포인트를 생성합니다. Function n8n 노드의 사용자 지정 스크립팅 기능을 활용하여, 워크플로우는 데이터를 읽고, 반응형 디자인을 위해 표준 부트스트랩(Bootstrap) 스타일을 적용한 후, 요청 시 렌더링된 HTML을 즉시 제공합니다. 이 특정 n8n 워크플로우는 강력한 n8n 트리거를 사용하여 구조화된 데이터를 프레젠테이션 준비가 된 웹 콘텐츠로 효율적으로 변환하는 방법을 보여줍니다.

이 n8n 워크플로우는 공개 엔드포인트를 통해 외부에서 시작됩니다.

1. 시작 (Webhook n8n 트리거): 지정된 경로로 들어오는 HTTP 요청(GET 또는 POST)을 Webhook n8n 트리거가 수신하면 프로세스가 시작됩니다.


2. 데이터 가져오기 (Google Sheets에서 읽기): 워크플로우는 즉시 Google Sheets n8n 노드로 이동합니다. 이 노드는 지정된 스프레드시트 ID에서 인증을 수행하고 모든 데이터 행과 헤더를 읽어옵니다.


3. HTML 생성 (Build HTML Function n8n 노드): 데이터는 'Build HTML' Function n8n 노드로 전달됩니다. 이 중요한 단계에서는 내장된 JavaScript를 사용하여 입력 항목들을 반복 처리합니다. 필요한 Bootstrap 5 종속성을 포함하여 전체 HTML 문서를 동적으로 생성하고, 열 헤더를 태그에, 데이터 값을 태그에 올바르게 매핑하여 완전하고 스타일링된 HTML 테이블을 구성합니다. 이 맞춤형 n8n 노드는 최종 HTML 문자열을 포함하는 출력 항목을 생성합니다.


4. 응답 (Webhook에 응답): 마지막으로, 'Respond to Webhook' n8n 노드는 생성된 HTML 문자열({{$json["html"]}})을 가져와 초기 n8n 트리거를 발생시킨 클라이언트에게 응답으로 다시 보냅니다. 브라우저가 원시 텍스트 대신 테이블을 렌더링하도록 보장하기 위해 Content-Type 헤더를 text/html; charset=UTF-8로 명시적으로 설정하도록 구성됩니다.

1. 가져오기: 이 n8n 워크플로우 JSON을 사용자의 n8n 인스턴스로 가져옵니다.


2. 웹훅 설정: 'Webhook' n8n 트리거 노드를 활성화하여 고유한 테스트 및 프로덕션 URL을 생성합니다. 이것이 공개 API 엔드포인트가 됩니다.


3. Google Sheets 자격 증명: 'Read from Google Sheets' n8n 노드를 필요한 Google Sheets 자격 증명으로 업데이트합니다. 서비스 계정 또는 OAuth 자격 증명이 대상 시트에 대한 읽기 권한이 있는지 확인하세요.


4. 시트 ID 구성: 'Read from Google Sheets' n8n 노드 매개변수에서 플레이스홀더 SheetId를 게시하려는 데이터가 포함된 실제 Google 시트 ID로 교체합니다.


5. 활성화: n8n 워크플로우를 저장하고 활성화합니다. 이제 웹훅 URL에 액세스하면 n8n 자동화가 실행되고 렌더링된 HTML 테이블이 반환됩니다.

Webhook (n8n 트리거): 이 n8n 워크플로우의 진입점 역할을 합니다. responseMode: responseNode로 설정되어 있으며, 이는 최종 출력이 후속 노드에 의해 처리됨을 의미합니다.
Read from Google Sheets (Google Sheets n8n 노드): 지정된 스프레드시트 ID에서 모든 데이터를 읽어옵니다. 유효한 Google Sheets OAuth2 자격 증명이 필요합니다.
Build HTML (Function n8n 노드): 핵심 로직 엔진입니다. JavaScript를 사용하여 입력 항목들을 반복하고 Bootstrap 클래스를 이용해 스타일이 적용된 HTML 테이블을 동적으로 구성합니다. 이 n8n 노드의 출력은 html 키를 포함하는 객체입니다.
Respond to Webhook (n8n 노드): 최종 출력을 처리합니다. 이전 Function n8n 노드의 사용자 지정 HTML 출력(={{$json["html"]}})을 응답 본문으로 매핑하고, 필수적인 Content-Type 헤더를 text/html; charset=UTF-8로 설정합니다.