클라이밍 세팅 일정 알리미 - Wallert admin 페이지와 데이터 처리

현재 프로젝트의 문제

이 프로젝트에는 꽤나 큰 문제가 있습니다. 지속적으로 해결하려 노력중이긴 하지만 근본적으로 완전한 해결은 불가능하다고 저 스스로는 생각중이죠. 바로 데이터 의존에 관한 문제인데요. 이 현상 또는 상황을 데이터 의존에 관한 문제라고 하는게 맞는지는 정확히 모르겠습니다.

이 앱은 핵심 기능 단 하나를 목적으로 기획, 개발되고 있습니다. 그리고 그 기능을 위한 핵심 데이터 역시 한 플랫폼에 의존하고 있죠. 앱의 개요에서 알 수 있듯이 모든 데이터는 인스타 계정에 올라오는 게시글을 통해 확인되고, 데이터는 Back-End에서 처리되면서 앱을 가진 사용자에게 알림을 보내는 구조입니다.

정확히 어떤 문제가 있고, 해결 가능한지 살펴보겠습니다.

1. 인스타 게시글 스크래핑의 안정성

Wallert 앱에서 알림으로 보내는 정보는 암장의 벽 세팅 정보입니다. 그리고 현재 테스트로 진행 중인 암장은 국내 최대 규모인 더클라임인데요. 더클라임 뿐만 아니라 대부분의 브랜드 암장들은 인스타를 통해 벽의 세팅 일정을 공유합니다. 블로그도 일부 있으나, 확인해보니 인스타에 비해 비교적 덜 활성화 되어있엇습니다. 그래서 인스타에 올라오는 데이터를 주기적으로 가져와야하는데, 저는 그 작업을 자동화 하기 위해 아래의 프로세스를 만들었습니다.

Python(selenium) + NAS 스케쥴 로 매일 한번 인스타 계정의 게시글을 스크래핑
Node(tesseract.js) 로 게시글 이미지의 텍스트를 분석, 분류 후 DB 저장

이때 1번 작업에서 문제가 생깁니다. Meta가 인스타에 접속하는 봇을 잘 막는건 프로젝트 진행중에 뼈저리게 느꼈습니다. 다행히도 두 달 이상 유지 중이지만 분명 영원하진 않을겁니다. 코드를 유지보수하는 상황이 분명 생길텐데, Python 숙련도가 아직 그렇게 높지 않은 것도 한 몫하겠죠. 여러모로 문제가 생길 가능성이 높은 프로세스를 유지하는건 좋지 않다 생각했습니다.

2. 게시글 정보 정확성

스크래핑의 안정성 문제만 인지하고 있었을 때는 간간히 유지보수 하면서 완성도를 높여보자! 라는 생각이었습니다. 근데 점점 실제 기능을 만들고 사용자 입장을 생각 하다보니 다른 문제가 다시 수면위로 올라왔습니다.

앱의 기획단계로 돌아가, 최종 목표인 알림 기능과 알림을 받길 원하는 유저에 대해 생각해보겠습니다.
앱의 수요는 유저가 알림을 받고자 하는 의지에서 나타납니다.
어려운 문제를 풀기위해 여러번 방문하거나, 재밌다고 소문난 문제, 이벤트 문제 등을 놓치고 싶지 않아하는 사람들을 위한 앱인거죠.

그런 관점에서 이 앱의 알림 내용은
이 벽의 세팅 일정 '글'이 올라왔다 는 알림 보다는, 이 벽은 n일 뒤에 탈거(세팅) 된다 라는 알림을 보내는 것이 옳습니다. 문제는 게시글에 첨부된 이미지에서 그 정보를 추출하는게 너무 복잡하다는거죠.

더클라임의 탈거임박, 세팅완료 이미지

우측 상단의 RESET SOON 과 RESET COMPLETE 텍스트를 tesseract.js 를 통해 게시글의 타입까진 분류했으나, 가운데 날짜와 벽 이름까지 찾아 분석하는건 꽤 어려웠습니다. 암장 브랜드 별로 이미지도 모두 달라서 더 문제였죠.

이렇게 스크래핑의 안정성 문제와 정보 수집의 난이도 문제로 결국 데이터 수집 방법을 다시 고민해보게 되었습니다.

어드민 페이지의 필요성

데이터 수집 방법을 변경하는 것과는 별개로 어드민 페이지는 필수였습니다. 다만, 앱의 기능과 데이터가 단순하기도 하고 기능 먼저 보고 싶은 개인적인 욕심으로 어드민 개발은 뒤로 미루고 있었습니다. 그런데 현재 데이터 수집 과정에 문제가 있는걸 알았으니.. 수동 데이터를 넣기 쉽게 하기 위해서라도 이젠 미뤄선 안됩니다.

데이터 구조 개선

위 문제점들에 입각해 어드민 페이지 개발과 더불어 현재 DB를 알림 기능에 더 적합한 데이터 구조로 변경해보겠습니다.

게시글 이미지, post_type, timestamp 만 수집됨

현재 자동 수집되고 있는 데이터들은 이 images 테이블에 저장됩니다. field를 보면 알 수 있듯이 이미지에 포함된 ‘실제 세팅 날짜’가 아닌, 이미지가 올라온 ‘게시글 자체’에 집중된 데이터 입니다. 지금은 알림도 게시글 이미지 그대로 보내기 때문에, 그냥 인스타 글 알림이랑 다를게 없죠.

과정

이제 실제 알림 서비스에 더 적합한 데이터 구조를 생각해보겠습니다.

{
  "brand": "더클라임 일산",
  "wall": "COMPETITION WALL",
  "TYPE": "SETTING",
  "DATE": "2025-01-01"
}

'A암장 B벽의 탈거까지 n일 남았습니다.' 라는 기본 기능에 충실하려면 필수 데이터는 이 정도일 것 같네요.

Schedules 테이블

해당 데이터들을 따로 저장할 Schedules 테이블을 만들어 준 뒤,
이제 어드민 페이지를 개발 해야합니다. 어드민에는 기본적인 달력형 UI, 그리고 간단한 서버와 api만 필요하기 때문에 Nuxt 3와 Nuxt 3의 Server API 를 활용하겠습니다.

Nuxt 3 Server API 폴더 사용 방법

완성, 이후 목표

어드민 페이지 화면

글로 쓰니 뭔가 바로 완성된 것 같지만 UI와 기능들 구현에 어느정도 시간이 걸렸습니다. 어쨋든 이렇게 기본적인 CRUD 기능과 달력 UI로 관리 가능한 어드민 페이지는 완성이 되었는데요. UI와 편의 기능은 지속적으로 업데이트 예정입니다. 어차피 제가 데이터 추가 하는거라…

이제 데이터 구조는 바꿨으니, 앱에서 보내는 알림만 바꾸면 1차적으로 원하는 수준까지 도달합니다. 다음엔 Flutter와 FCM 관련 기능을 수정하는 과정을 작성해보겠습니다.

KXX Tech Blog
Archive About

Categories