소개
이전에는 n8n을 활용해 게시판에서 물건 데이터를 자동 크롤링하고, Google Sheets 와 Drive에 데이터와 파일을 저장하고 메일로 전송하는 과정을 구성했습니다.
https://www.gpters.org/nocode/post/bulletin-data-automatic-crawling-abcVdxhbJ0oacM4
이번에는 그 다음 단계로, 지난 과정에서 보완이 필요했던 사항(중복 확인, 실시간 알림)을 추가 적용하고, 수집된 물건 데이터를 편리하게 관리할 수 있도록 사이트 구성 및 추가 자동화 흐름을 구현해 봤습니다.
💡 또한, 실제 개인적으로 활용을 염두에 두고 UI/UX, 데이터 구조, 확장성까지 고려한 시도였습니다.
진행 방법
[전체 Workflow]
1. Google Sheets 기반 중복 확인 및 분기 처리
동일한 공고가 다시 등록되지 않도록 자동 중복 확인 로직을 n8n 내에서 구현했습니다.
신규 공고 등록 전, Google Sheets에서 기존 등록 이력을 확인합니다.
마지막 등록된 공고의
SEQ_ID를 기준으로 새로운 공고 여부를 판단합니다.
첨부파일이 없는 경우도 있어, 첨부파일 유무에 따른 분기 처리 로직도 추가하여 유연성을 확보했습니다.
2. 텔레그램 알림 기능 추가
새 공고가 등록되면 제가 설정한 Telegram 채팅방에 메세지로 자동 알림이 전송됩니다.
알림 메시지에는 공고번호, 제목(공고명), 공고문(파일 다운로드 링크) 등의 정보가 출력됩니다.
이러한 자동화 작업을 통해 실시간 모니터링이 어려운 상황에서도 즉시 확인이 가능해졌습니다.
3. Lovable + Cursor 조합으로 관리 페이지 구성
처음 엔 크롤링을 통한 데이터 수집과 데이터 적재에 대해서만 생각하고 진행했습니다.
하지만 이 데이터를 어떻게 편리하게 관리하고 활용할 수 있을지에 대한 고민이 생겼습니다.
그래서 데이터 관리의 효율화와 시각화의 필요성을 느끼고 웹 사이트를 구성해 보기로 했습니다.
데이터 수집 방식과 관리 방안에 대한 아이디어를 정리하여 기획서와 브랜드맵을 만들고 이를 통해 PRD 를 작성하였습니다.
작성된 PRD 로 Lovable을 활용해 시각적으로 보기 좋은 MVP UI를 신속하게 구성했습니다.
하지만 Lovable 만으로는 원하는 페이지를 구성하기에 한계가 있었기에, 페이지 소스를 Cursor 로 import 한 후 제가 원하는 디자인 정보를 제공한 후 페이지 디자인을 수정하였습니다.
페이지 최초 로딩 시 Google Sheets의 실시간 데이터를 연동했습니다.
페이지 구성과 주요 기능은 다음과 같습니다:
페이지 구성
목록 페이지: 페이징 기능을 통해 다수의 공고도 쉽게 탐색 가능
상세 페이지: 클릭 시 각 공고의 상세 정보 및 첨부파일 확인
대시보드 페이지 : 데이터 등록 현황을 확인할 수 있는 대시보드 기능
주요 기능
검색 & 필터링: 공고번호, 제목, 법원, 관재인 등 키워드 등으로 조건 검색 및 법원별, 상태 구분 정보로 필터링 가능
파일 다운로드: 첨부파일이 있을 경우 직접 다운로드 기능 제공
PDF 파일의 경우 브라우져에서 바로 조회 가능하고 hwp 파일은 다운로드 가능
결과와 배운 점
Lovable 은 빠르게 UI를 구성할 수 있지만, 디자인과 코드 수정에는 제 약이 있으므로 Cursor 와의 조합이 효과적이었습니다.
데이터를 기준으로 분기 처리하거나 유동적으로 알림을 보내는 로직을 구성할 때, n8n의 유연한 흐름 제어 기능이 큰 도움이 되었습니다.
PRD와 시각적 설계 문서를 먼저 만들고 작업을 시작하니, 초기 설계 오류를 줄이고 구현 속도를 높일 수 있었습니다.
결과적으로, 노코드만으로도 공고 데이터를 안정적으로 등록·관리할 수 있는 운영 가능한 수준의 시스템을 만들 수 있다는 확신을 얻었습니다. 💪
앞으로의 계획
아직 페이지 구성이 완벽하지 않다고 생각되어 추가적으로 필요한 기능을 더 고민해서 UI/UX 를 고도화를 하고 싶습니다.
향후에는 Notion DB나 Airtable 등 다양한 데이터베이스 도구와 연동하여 더 정교한 관리 시스템을 확장해볼 계획입니다.