← 포트폴리오 목록

매장별 필터 배포와 엔진 품질 검증 콘솔

MVP 이후 확장 방향으로, 키오스크별 프리셋 배포 현황을 관리하고 렌더링 엔진의 색 재현 품질과 처리 속도를 비교 검증하며 Flutter 앱의 호출 인터페이스를 점검하는 운영 콘솔 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSRechartsNode.jsExpressPostgreSQLPrismaRedis
주요 기능
  • 매장별 프리셋 배포 현황
  • 색 재현 ΔE 보정 하네스
  • 엔진 벤치마크·회귀 검증
  • Flutter 호출 인터페이스 콘솔

프로젝트 개요

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

MVP 이후 확장 방향으로, 키오스크별 프리셋 배포 현황을 관리하고 렌더링 엔진의 색 재현 품질과 처리 속도를 비교 검증하며 Flutter 앱의 호출 인터페이스를 점검하는 운영 콘솔 프로젝트입니다. 매장 단위 배포, ΔE 보정 하네스, 연동 콘솔을 한 화면 체계로 구성합니다.

작업 범위

  • 매장별 프리셋 배포 현황: 키오스크와 매장 단위로 어떤 프리셋 버전이 배포됐는지 벤토 카드로 한눈에 보고, 대기·적용·실패 상태와 롤백 대상을 확인합니다
  • 색 재현 ΔE 보정 하네스: Lightroom 참조 이미지와 엔진 출력의 색 차이를 ΔE 지표로 계산하고 히트맵과 구간별 분포로 보여주며, 매핑 파라미터 변경 전후를 비교합니다
  • 엔진 벤치마크·회귀 검증: 이미지 크기와 코어 수 조건별 렌더 시간을 비교하고, 회귀 테스트 결과를 픽셀 차이와 해시 일치 여부로 확인합니다
  • Flutter 호출 인터페이스 콘솔: 키오스크 앱이 엔진을 호출하는 CLI와 로컬 API 방식을 화면에서 시험하고, 이미지 경로와 필터 ID를 넣어 요청·응답을 로그로 확인합니다

주요 업무

  • 매장별 프리셋 배포 현황 화면: 프리셋 버전과 대상 매장을 잇는 배포 테이블, 상태 전이 모델, 롤백 이력을 구현하고 Redis 큐로 배포 작업을 비동기 처리합니다
  • 색 재현 ΔE 보정 하네스 화면: CIELAB 변환과 CIEDE2000 계산 모듈, 영역별 차이 히트맵 렌더, 튜닝 이력 비교 화면을 구현합니다
  • 엔진 벤치마크·회귀 검증 화면: CLI 배치 실행 결과를 수집하는 벤치마크 러너, 타일 분할 병렬 처리 설정 화면, 해시·픽셀 차이 기반 회귀 판정 로직을 구현합니다
  • Flutter 호출 인터페이스 콘솔 화면: Express 기반 로컬 API와 CLI 어댑터를 같은 엔진 코어에 연결하고, 요청 검증·오류 코드 표·호출 로그 화면을 구현합니다
매장별 필터 배포와 엔진 품질 검증 콘솔
요구사항 정의

프로젝트 핵심 과제

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

다수 키오스크에 프리셋을 배포할 때 일부 매장만 실패하는 부분 실패를 구분하고 재시도하는 상태 관리 설계가 필요합니다

ΔE 수치는 낮아도 육안으로는 다르게 느껴질 수

지표와 검수 메모를 함께 기록하는 튜닝 기준 설계가 필요합니다

GPU가 없는 PC 조건에서 타일 크기와 워커 수에 따른 처리 시간 차이를 재현 가능하게 측정하는 하네스 설계가 필요합니다

Flutter 앱 쪽 호출 준비 상태가 달라도 통합 테스트를 진행할 수 있

더미 호출 시험 화면 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

매장별 프리셋 배포 현황

키오스크와 매장 단위로 어떤 프리셋 버전이 배포됐는지 벤토 카드로 한눈에 보고, 대기·적용·실패 상태와 롤백 대상을 확인합니다.

  • 배포 상태를 대기·전송·적용·실패로 정의한 상태 전이 모델과 재시도 정책 설계
  • Redis 기반 작업 큐로 다수 키오스크 대상 배포를 순차·병렬 혼합 처리
  • 프리셋 체크섬을 함께 전달하여 키오스크 측 수신 파일의 무결성을 확인하는 프로토콜 설계

프리셋 배포를 버전 단위 스냅샷으로 다루어 매장별 롤백 지점을 항상 남기도록 설계합니다.

매장별 프리셋 배포 현황
매장별 프리셋 배포 현황 실제 화면
핵심 기능 2

색 재현 ΔE 보정 하네스

Lightroom 참조 이미지와 엔진 출력의 색 차이를 ΔE 지표로 계산하고 히트맵과 구간별 분포로 보여주며, 매핑 파라미터 변경 전후를 비교합니다.

  • sRGB에서 CIELAB으로 변환하고 CIEDE2000으로 픽셀별 색 차이를 계산하는 모듈 구현
  • 차이 히트맵과 ΔE 구간 분포 차트를 Recharts로 시각화
  • 매핑 파라미터 버전별 ΔE 평균·최대값을 저장하여 튜닝 이력을 비교하는 화면 설계

수치 지표로 자동 튜닝 방향을 보여주고, 육안 검수 결과는 메모와 함께 기록하는 반복 튜닝 워크플로를 설계합니다.

색 재현 ΔE 보정 하네스
색 재현 ΔE 보정 하네스 실제 화면
핵심 기능 3

엔진 벤치마크·회귀 검증

이미지 크기와 코어 수 조건별 렌더 시간을 비교하고, 회귀 테스트 결과를 픽셀 차이와 해시 일치 여부로 확인합니다.

  • 이미지를 타일로 나누어 워커 스레드에서 병렬 처리하는 렌더 옵션을 화면에서 조절
  • 기준 결과 이미지와 신규 결과의 MD5·픽셀 차이를 비교하는 회귀 판정 로직 구현
  • 벤치마크 실행 결과를 조건별로 저장하고 Recharts 추이 차트로 비교

GPU가 없는 PC 조건을 가정해 CPU 워커 수와 타일 크기를 바꿔가며 측정하는 하네스를 설계합니다.

엔진 벤치마크·회귀 검증
엔진 벤치마크·회귀 검증 실제 화면
핵심 기능 4

Flutter 호출 인터페이스 콘솔

키오스크 앱이 엔진을 호출하는 CLI와 로컬 API 방식을 화면에서 시험하고, 이미지 경로와 필터 ID를 넣어 요청·응답을 로그로 확인합니다.

  • 이미지 경로·필터 ID·출력 경로를 받는 요청 스키마와 오류 코드 표를 정의하고 JSON Schema로 검증
  • CLI와 로컬 HTTP API가 같은 엔진 호출 함수를 공유하도록 어댑터 계층 설계
  • 호출 이력과 응답 시간을 SQLite가 아닌 PostgreSQL 로그 테이블에 저장하고 필터링 화면 제공

호출 방식별 요청·응답 규약을 문서와 시험 화면으로 함께 제공하여 Flutter 앱 쪽 통합 테스트를 지원하도록 설계합니다.

Flutter 호출 인터페이스 콘솔
Flutter 호출 인터페이스 콘솔 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

배포 모델과 상태 전이 설계 · 2026.09

프리셋 버전·매장·배포 작업 테이블 설계, 상태 전이와 롤백 이력 모델 정의

STEP 2

Redis 큐 기반 배포 API 개발 · 2026.09

Express 배포 API와 재시도 정책, 체크섬 검증 프로토콜 구현

STEP 3

ΔE 계산 모듈과 시각화 개발 · 2026.09

CIELAB 변환, CIEDE2000 계산, 히트맵과 분포 차트 구현

STEP 4

벤치마크·연동 콘솔 화면 구성 · 2026.09

벤치마크 러너, 회귀 판정, CLI·로컬 API 시험 화면과 호출 로그 구현

개발 결과

버전 스냅샷 기반 프리셋 배포 모델 설계배포 상태 전이와 체크섬 검증, 매장별 롤백 지점을 갖춘 배포 테이블 구조를 설계합니다.
CIEDE2000 색 차이 계산 모듈 구현sRGB에서 CIELAB 변환과 CIEDE2000을 구현하고 픽셀별 히트맵 시각화를 구성합니다.
타일 병렬 렌더 벤치마크 러너 구축타일 크기와 워커 수를 조건으로 실행 결과를 저장하고 추이 차트로 비교하는 하네스를 구성합니다.
CLI·로컬 API 공용 호출 어댑터 설계두 호출 방식이 같은 엔진 함수를 공유하는 어댑터 계층과 오류 코드 규약을 설계합니다.

기술적 주안점

  • 프리셋 배포를 버전 단위 스냅샷으로 다루어 매장별 롤백 지점을 항상 남기도록 설계합니다
  • 수치 지표로 자동 튜닝 방향을 보여주고, 육안 검수 결과는 메모와 함께 기록하는 반복 튜닝 워크플로를 설계합니다
  • GPU가 없는 PC 조건을 가정해 CPU 워커 수와 타일 크기를 바꿔가며 측정하는 하네스를 설계합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의