← 포트폴리오 목록

오름 등반 인증 관리자 콘솔

제주 오름 100곳 등반 인증 사진을 OCR로 자동 검수하고, 배지·진행률을 자동 계산하는 관리자 콘솔을 Node.js + Express + PostgreSQL 기반으로 구현합니다.

OCR 기반 자동검수 파이프라인 구현OCR API로 표지판 텍스트를 추출해 오름 정보와 자동 대조하는 검수 로직 구현, 규칙 기반 필터링 3종 설계
배지·진행률 원자적 트랜잭션 설계인증 승인/반려 이벤트에 연동된 배지 지급·회수 로직을 단일 트랜잭션으로 구현해 데이터 정합성 확보
오름-코스-태그 관계형 스키마 설계다대다 태그 연결과 코스 정보를 포함한 정규화 스키마 설계, 다중 조건 검색 인덱스 구성
서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaAWS S3
주요 기능
  • 인증 사진 자동검수 워크플로우
  • 오름 정보·코스 관리
  • 회원 계정 관리
  • 배지·진행률 관리
Overview

프로젝트 개요

범위: 개발, 디자인, 기획

제주 오름 100곳 등반 인증 사진을 OCR로 자동 검수하고, 배지·진행률을 자동 계산하는 관리자 콘솔을 Node.js + Express + PostgreSQL 기반으로 구현합니다. 소셜 로그인 회원 관리와 오름 정보 CRUD까지 포함한 API-first 백엔드·관리자 웹 풀사이클 구현한 프로젝트입니다.

작업 범위

  • 인증 사진 자동검수 워크플로우: 관리자가 사용자가 업로드한 등반 인증 사진을 검수 대기 목록에서 선택해 OCR 표지판 대조 결과와 함께 상세 패널에서 확인하고 승인·반려를 처리할 수 있는 화면
  • 오름 정보·코스 관리: 관리자가 제주 오름 100곳의 지역·난이도·테마·코스 정보를 등록·수정하고 태그를 관리하는 화면
  • 회원 계정 관리: 카카오·네이버 소셜 로그인으로 가입한 회원의 목록 조회, 상태(활성/휴면/탈퇴) 관리, 검색·통계를 처리하는 화면
  • 배지·진행률 관리: 등반 인증 승인 시 배지 지급 조건을 판정하고, 사용자별 챌린지 진행률(30곳/100곳 마일스톤)을 모니터링하는 화면

주요 업무

  • 인증 사진 자동검수 워크플로우 화면: 리스트-상세 2단 구조로 검수 대기 목록과 선택 항목의 사진·OCR 결과·반려 사유 입력을 한 화면에서 처리하도록 구현할 예정
  • 오름 정보·코스 관리 화면: PostgreSQL 스키마로 오름-코스-태그 관계를 정규화하고, CRUD 폼과 목록 검색·필터를 구현할 예정
  • 회원 계정 관리 화면: OAuth 2.0 콜백으로 생성된 회원 레코드를 상태별로 필터링하고, 탈퇴 처리 시 연관 데이터를 정리하는 구조로 구현할 예정
  • 배지·진행률 관리 화면: 배지 지급 조건 로직을 이벤트 기반으로 트리거하고, 반려 시 배지·진행률을 원자적으로 회수하는 구조로 구현할 예정
오름 등반 인증 관리자 콘솔
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

선행 개발 중인 프론트엔드 팀과 API 규격 조율이 필요해

Swagger 기반 API-first 설계와 주간 명세 동기화 프로세스로 대응할 계획

OCR 표지판 인식률이 사진 각도·조도에 따라 달라질 수 있어

신뢰도 임계값 기반 자동/수동 검수 분기 로직 설계 필요

최대 10장 업로드되는 인증 사진의 저장·썸네일 처리 성능을 확보하기 위한 비동기 이미지 파이프라인 설계

반려로 인한 배지·진행률 회수 시 동시 인증 요청과의 경합을 막는 트랜잭션 격리 수준 설계

구현 내용

핵심 기능 상세

핵심 기능 1

인증 사진 자동검수 워크플로우

관리자가 사용자가 업로드한 등반 인증 사진을 검수 대기 목록에서 선택해 OCR 표지판 대조 결과와 함께 상세 패널에서 확인하고 승인·반려를 처리할 수 있는 화면.

  • OCR API(Naver Clova OCR 또는 Google Vision) 연동으로 표지판 텍스트를 추출해 오름 정보와 자동 대조하는 검수 파이프라인 설계
  • AWS S3 기반 사진 저장소에 원본·썸네일을 분리 저장하고 CDN 경로로 상세 패널에 렌더링
  • 중복 사진·음식/화면 캡처 필터링 규칙을 룰 엔진으로 구현해 자동 반려 판정 처리

OCR 인식 기반 표지판 텍스트 대조와 규칙 기반 필터링을 결합한 자동검수 파이프라인을 구현해 관리자가 애매한 건만 재확인하도록 설계합니다.

인증 사진 자동검수 워크플로우
인증 사진 자동검수 워크플로우 실제 화면
핵심 기능 2

오름 정보·코스 관리

관리자가 제주 오름 100곳의 지역·난이도·테마·코스 정보를 등록·수정하고 태그를 관리하는 화면. PostgreSQL 스키마로 오름-코스-태그 관계를 정규화하고, CRUD 폼과 목록 검색·필터를 구현할 예정.

  • 오름-코스-태그 3단 관계형 스키마를 Prisma로 설계해 다대다 태그 연결 처리
  • 지역·난이도·테마 다중 필터 조합 검색 UI 구현
  • 코스 좌표·입구 정보를 지도 미리보기와 함께 폼에 통합

오름-코스-태그 관계형 스키마를 설계해 100곳 데이터를 다중 조건으로 검색·관리 가능한 구조를 구현합니다.

오름 정보·코스 관리
오름 정보·코스 관리 실제 화면
핵심 기능 3

회원 계정 관리

카카오·네이버 소셜 로그인으로 가입한 회원의 목록 조회, 상태(활성/휴면/탈퇴) 관리, 검색·통계를 처리하는 화면.

  • 카카오·네이버 OAuth 2.0 콜백 처리 및 회원 자동 생성 로직 구현
  • 회원 상태(활성/휴면/탈퇴) 전이 규칙과 상태별 목록 필터 구현
  • 회원 탈퇴 시 인증 사진·배지 연관 데이터 처리 정책을 트랜잭션으로 설계

OAuth 2.0 소셜 로그인 콜백과 회원 상태 전이 로직을 결합해 안정적인 회원 관리 구조를 구현합니다.

회원 계정 관리
회원 계정 관리 실제 화면
핵심 기능 4

배지·진행률 관리

등반 인증 승인 시 배지 지급 조건을 판정하고, 사용자별 챌린지 진행률(30곳/100곳 마일스톤)을 모니터링하는 화면.

  • 인증 승인 이벤트를 구독해 배지 지급 조건을 판정하는 이벤트 기반 로직 구현
  • 사용자별 인증 개수 집계로 30곳/100곳 마일스톤 진행률을 계산하는 쿼리 설계
  • 반려 처리 시 배지·진행률을 원자적 트랜잭션으로 회수하는 로직 구현

인증 승인/반려 이벤트에 연동된 배지 지급·회수 로직을 트랜잭션으로 구현해 데이터 정합성을 확보합니다.

배지·진행률 관리
배지·진행률 관리 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 DB 스키마 설계 · 2026.09

오름-코스-태그, 회원, 인증, 배지 등 핵심 테이블 정의 및 관계 매핑, ERD 설계

STEP 2

소셜 로그인 및 오름·회원 API 개발 · 2026.09

카카오·네이버 OAuth 연동, Express 기반 오름/회원 CRUD API 30여개 구현

STEP 3

인증 검수 파이프라인 및 배지 로직 구현 · 2026.09

OCR API 연동 자동검수, 배지 지급·회수 트랜잭션 로직 구현

STEP 4

관리자 웹 UI 개발 및 통합 테스트 · 2026.09

React 기반 검수/오름/회원/배지 관리 화면 구현, API-프론트엔드 통합 검증

프로젝트 성과

주요 성과

OCR 기반 자동검수 파이프라인 구현OCR API로 표지판 텍스트를 추출해 오름 정보와 자동 대조하는 검수 로직 구현, 규칙 기반 필터링 3종 설계
배지·진행률 원자적 트랜잭션 설계인증 승인/반려 이벤트에 연동된 배지 지급·회수 로직을 단일 트랜잭션으로 구현해 데이터 정합성 확보
오름-코스-태그 관계형 스키마 설계다대다 태그 연결과 코스 정보를 포함한 정규화 스키마 설계, 다중 조건 검색 인덱스 구성
OAuth 소셜 로그인 통합 구현카카오·네이버 OAuth 2.0 콜백 처리와 회원 중복 가입 방지 로직을 하나의 인증 모듈로 통합 구현
Highlights

기술적 주안점

  • OCR 인식 기반 표지판 텍스트 대조와 규칙 기반 필터링을 결합한 자동검수 파이프라인을 구현해 관리자가 애매한 건만 재확인하도록 설계합니다
  • 오름-코스-태그 관계형 스키마를 설계해 100곳 데이터를 다중 조건으로 검색·관리 가능한 구조를 구현합니다
  • OAuth 2.0 소셜 로그인 콜백과 회원 상태 전이 로직을 결합해 안정적인 회원 관리 구조를 구현합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기