n8n과 GitHub Pages로 만든 나만의 활동 로깅 워크플로우 만들기

스터디장 히로님의 실습 자료를 참고해서 활동 로깅 자동화 시스템을 만들어보았습니다. 실습 가이드에서는 Activepieces와 Google Forms를 활용했지만, 저는 n8n이 익숙하고 앞으로도 주력 도구로 사용할 계획이라 n8n으로 구현했고, 폼도 Google Forms 대신 정적 HTML 페이지로 구성했습니다.

UI의 자유도와 확장성을 고려해 GitHub Pages로 간단하게 배포했고, 입력값은 n8n webhook으로 받아 처리할 수 있도록 했습니다.

또한, 매시간 알림보다 2시간 간격(오전 8시 ~ 오후 10시)으로 설정하여 사용자에게 부담을 줄이고, 기록 습관을 더 자연스럽게 만들고자 했습니다.

진행 방법

사용 도구

  • n8n: 자동화 워크플로우 구축

  • 정적 HTML 폼: 사용자 입력 UI

  • GitHub Pages: 정적 웹 배포

  • Google Calendar, Google Sheets: 활동 내용 저장 및 조회

  • Discord: 알림 전송

인증은 어떻게?

공개된 GitHub Pages를 활용하다 보니, 누구나 페이지에 접근해서 webhook을 트리거할 수 있는 보안 이슈가 있었습니다. 하지만 이 시스템은 혼자 사용하는 용도이고, 인증 시스템을 별도로 구축하긴 번거롭기 때문에 간단한 방식으로 처리했습니다.

  • Secret code를 URL 파라미터로 전달하여 인증 역할을 하도록 구성했습니다.

  • Discord 메시지로 전달되는 링크는 다음과 같은 형식입니다:

https://<내-페이지>.github.io/dailylog?secret=62b5ee18-xxxx
  • 이 코드를 통해서만 n8n의 webhook이 동작하도록 설정하여 간단하지만 실용적인 인증 방식을 적용했습니다.

워크플로우 요약

실습 가이드를 참고하여 다음과 같은 구조로 구성했습니다.

  • 알림 전송: n8n의 Cron 노드로 오전 8시부터 오후 10시까지 2시간 간격으로 Discord DM 알림 발송

n89
한국어 텍스트가 있는 검은 화면

  • 입력 UI:

    • 간단한 HTML 폼을 만들어 webhook으로 전송되도록 구현

    • Discord 알림을 클릭하면 HTML 폼으로 이동

    • 진입 시각 기준으로 1시간 단위의 시작/종료 시간 자동 세팅

    • 사용자가 선택할 경우 30분 단위로 직접 선택도 가능

  • 자동 입력 기능:

    • 해당 시간에 Google Calendar에서 일정을 조회

    • 일정이 있다면 "한 일" 항목에 자동으로 채워짐

      n8n: 해당 시간 구간 일정 조회
    iPhone의 비밀 키 확인 기능 스크린샷
    webhook trigger 를 받을때 정해진 secret code 와 일치 할때만 다음 진행

  • Webhook 처리: n8n에서 데이터 수신 후 디스코드로로 내용을 알려주고 구글 캘린더 및 시트에 기록합니다. 내가 한일을 AI 가 자동 분류해주고 나머지 입력을 그대로 입력해 줍니다

디스코드에서 메세지 알림
n8n: 구글에 DailyLog 캘린더에 등록

제품을 만드는 과정을 보여주는 다이어그램
n8n: 내가 한일을 자동 뷴류 및 구글 캘린더, 구글 시트 입력하고 discord 에 메세지 보내주고 html 페이지에 기록 완료 알림 보내기

참고한 실습 가이드 구조

히로님의 실습 자료에 따라 자동화 흐름은 다음과 같았습니다:

  • 폼 링크 발송

  • 사전입력 URL 생성

  • 응답 수집

  • AI 분류 및 시간 정규화

  • 캘린더/시트 기록

  • 완료 알림 전송

인증은 어떻게?

참고로 웹페이지는 공개가 되어있기 때문에 누구나 들어와서 n8n 이 동작이 되서 내 구글 캘린더를 조회하거나 등록등을 쉽게 할수 있어서 인증을 붙여야하는데 어차피 나 혼자 사용하는거라 굳이 복잡하게 인증 시스템을 붙이지 않고 간단하게 secret code 를 정해서 url 에 parameter 로 동작할수 있는 secret code 로 넘겨줍니다

결과와 배운 점

  • 기록 습관이 없을 땐 압박보단 유연함이 더 중요하다는 걸 느꼈습니다 😊

  • 익숙한 도구(n8n)를 활용하니 빠르게 구현하고 커스터마이징도 쉬웠어요.

  • 정적 HTML을 쓰니 UI 구성의 자유도가 높고, 배포도 간단했습니다.

  • Google Calendar 일정을 활용해 자동 입력 기능을 추가하니 훨씬 더 편리해졌어요.

도움 받은 글

  • 히로님의 스터디 실습 가이드 (Activepieces 자동화 예시)


👉 기록을 습관화하고 싶다면, 너무 부담주지 말고 편하게 시작하는 자동화 추천드려요! 💡

2
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요