← 포트폴리오 목록

포토부스 필터 프리셋 편집기와 렌더링 엔진

원본 사진을 불러와 HSL, 톤 커브, 노이즈 슬라이더로 필터를 조절하고 Before/After로 즉시 비교하는 데스크톱 편집기와 렌더링 엔진의 맞춤 MVP 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종플랫폼
기술 스택
ElectronReactTypeScriptTailwind CSSNode.jsExpressSQLiteFluttersharp
주요 기능
  • 필터 편집 캔버스
  • HSL·톤 커브 조절
  • JSON 프리셋 관리
  • 3D LUT 적용·썸네일 내보내기

프로젝트 개요

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

원본 사진을 불러와 HSL, 톤 커브, 노이즈 슬라이더로 필터를 조절하고 Before/After로 즉시 비교하는 데스크톱 편집기와 렌더링 엔진의 맞춤 MVP 프로젝트입니다. JSON 프리셋 저장, 3D LUT 적용, 썸네일 내보내기까지 하나의 흐름으로 구현합니다.

작업 범위

  • 필터 편집 캔버스: 원본 이미지를 캔버스에 불러오고 우측 인스펙터의 슬라이더를 움직이면 결과가 곧바로 반영되며, Before/After 분할선으로 원본과 적용본을 비교합니다
  • HSL·톤 커브 조절: 색상 8구간 HSL 슬라이더와 RGB·휘도 채널별 톤 커브, 노이즈·그레인·비네팅 항목을 Lightroom 감각의 패널 구성으로 조절합니다
  • JSON 프리셋 관리: 현재 조절 값을 이름과 태그가 있는 프리셋으로 저장하고, 목록에서 검색·복제·수정·삭제하며 썸네일 카드로 확인합니다
  • 3D LUT 적용·썸네일 내보내기: .cube 파일을 불러 3D LUT를 적용하고 강도를 조절하며, 선택한 프리셋들의 썸네일을 일괄로 내보냅니다

주요 업무

  • 필터 편집 캔버스 화면: 슬라이더 값 변경을 렌더 요청으로 묶는 디바운스 파이프라인과 저해상도 프록시 우선 렌더 후 원본 해상도로 교체하는 2단계 미리보기를 구현합니다
  • HSL·톤 커브 조절 화면: 색상 8구간 가중 블렌딩과 스플라인 기반 톤 커브 룩업 테이블을 만들어 픽셀 단위 변환에 적용하는 처리 파이프라인을 구현합니다
  • JSON 프리셋 관리 화면: 버전 필드가 있는 JSON 스키마와 검증·마이그레이션 로직을 두고 SQLite 메타데이터와 프리셋 파일을 함께 관리하는 CRUD를 구현합니다
  • 3D LUT 적용·썸네일 내보내기 화면: .cube 파서와 삼선형 보간 기반 LUT 적용 모듈, 배치 썸네일 렌더 큐를 구현합니다
포토부스 필터 프리셋 편집기와 렌더링 엔진
요구사항 정의

프로젝트 핵심 과제

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

고해상도 사진에서 슬라이더 조작 중에도 미리보기를 끊김 없이 갱신하기 위한 프록시 렌더와 워커 분리 설계가 필요하며

프록시와 원본 결과의 색 차이를 줄이는 대응이 필요합니다

Lightroom 톤 커브와 HSL 보정 결과에 가까운 감각을 내기 위한 파라미터 매핑 기준 정의가 필요하며

수치 지표를 사전에 합의하는 방식으로 대응합니다

.cube LUT의 격자 크기와 도메인 범위가 파일마다 달라 보간 결과가 어긋나지 않

정규화하는 처리가 필요합니다

프리셋 스키마가 바뀌어도 기존 프리셋 파일을 읽을 수 있

버전별 마이그레이션 경로 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

필터 편집 캔버스

원본 이미지를 캔버스에 불러오고 우측 인스펙터의 슬라이더를 움직이면 결과가 곧바로 반영되며, Before/After 분할선으로 원본과 적용본을 비교합니다.

  • 저해상도 프록시 이미지로 먼저 렌더하고 유휴 시 원본 해상도로 교체하는 2단계 미리보기 구조 설계
  • Electron IPC로 UI 프로세스와 렌더 워커를 분리하여 슬라이더 조작 중 화면 멈춤을 방지하는 구조 적용
  • Before/After 분할 비교 뷰를 캔버스 클리핑으로 구현하고 줌·팬 상태를 두 뷰가 공유

슬라이더 입력을 최신 값 우선 큐로 합쳐 렌더 워커에 전달하는 구조로 조작 반응성을 유지하도록 설계합니다.

필터 편집 캔버스
필터 편집 캔버스 실제 화면
핵심 기능 2

HSL·톤 커브 조절

색상 8구간 HSL 슬라이더와 RGB·휘도 채널별 톤 커브, 노이즈·그레인·비네팅 항목을 Lightroom 감각의 패널 구성으로 조절합니다.

  • HSV 색상환을 8구간으로 나누고 구간 경계에서 가중 블렌딩하여 색 끊김 없는 HSL 보정 구현
  • 제어점 기반 단조 스플라인으로 256단계 룩업 테이블을 생성하는 톤 커브 에디터 구현
  • 그레인·비네팅·노이즈를 독립 단계로 두고 적용 순서를 고정한 렌더 파이프라인 설계

Lightroom 파라미터 이름과 엔진 내부 파라미터를 잇는 매핑 테이블을 분리하여 튜닝 값을 코드 수정 없이 교체할 수 있게 설계합니다.

HSL·톤 커브 조절
HSL·톤 커브 조절 실제 화면
핵심 기능 3

JSON 프리셋 관리

현재 조절 값을 이름과 태그가 있는 프리셋으로 저장하고, 목록에서 검색·복제·수정·삭제하며 썸네일 카드로 확인합니다.

  • schemaVersion 필드와 단계별 마이그레이션 함수로 프리셋 포맷 변경에 대응하는 구조 설계
  • JSON Schema 기반 검증으로 범위를 벗어난 파라미터를 저장 전에 차단
  • SQLite로 프리셋 메타데이터와 태그 검색 인덱스 구성

프리셋 파일을 서버 배포 단위와 같은 구조로 정의하여 이후 중앙 배포로 확장해도 스키마를 바꾸지 않도록 설계합니다.

JSON 프리셋 관리
JSON 프리셋 관리 실제 화면
핵심 기능 4

3D LUT 적용·썸네일 내보내기

.cube 파일을 불러 3D LUT를 적용하고 강도를 조절하며, 선택한 프리셋들의 썸네일을 일괄로 내보냅니다. .cube 파서와 삼선형 보간 기반 LUT 적용 모듈, 배치 썸네일 렌더 큐를 구현합니다.

  • .cube 헤더와 격자 크기를 파싱하고 삼선형 보간으로 색을 변환하는 LUT 모듈 구현
  • LUT 강도를 원본과 변환 결과의 선형 혼합으로 처리하여 슬라이더로 조절
  • sharp 기반 배치 큐로 프리셋별 썸네일을 순차 생성하고 진행 상태를 UI에 전달

LUT 적용을 파이프라인의 독립 단계로 두어 HSL·커브 조절과 순서를 바꿔도 결과 차이를 비교할 수 있게 설계합니다.

3D LUT 적용·썸네일 내보내기
3D LUT 적용·썸네일 내보내기 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

프리셋 스키마와 파라미터 매핑 설계 · 2026.09

JSON 프리셋 스키마 정의, Lightroom 파라미터와 엔진 파라미터 매핑 테이블 설계

STEP 2

이미지 처리 파이프라인 구현 · 2026.09

HSL·톤 커브·노이즈·그레인·비네팅 단계와 .cube 3D LUT 모듈 구현

STEP 3

Electron 편집기 UI 개발 · 2026.09

캔버스·좌우 패널·Before/After 비교 뷰와 IPC 렌더 워커 구성

STEP 4

프리셋 CRUD와 썸네일 내보내기 · 2026.09

SQLite 기반 프리셋 저장소, 배치 썸네일 큐, 가져오기 검증 구현

개발 결과

2단계 미리보기 렌더 구조 설계프록시 우선 렌더 후 원본 해상도로 교체하는 워커 구조와 최신 입력 우선 큐를 설계합니다.
HSL 8구간 블렌딩 엔진 구현구간 경계 가중 블렌딩으로 색 끊김 없는 HSL 보정 처리를 구현하고 파라미터 매핑을 분리합니다.
.cube 3D LUT 파서와 보간 모듈 구축격자 크기 검증과 삼선형 보간으로 LUT를 적용하며 강도 혼합 옵션을 제공합니다.
버전형 프리셋 스키마 설계schemaVersion과 마이그레이션 함수 체계로 프리셋 포맷 변경에도 저장 파일을 읽을 수 있게 구성합니다.

기술적 주안점

  • 슬라이더 입력을 최신 값 우선 큐로 합쳐 렌더 워커에 전달하는 구조로 조작 반응성을 유지하도록 설계합니다
  • Lightroom 파라미터 이름과 엔진 내부 파라미터를 잇는 매핑 테이블을 분리하여 튜닝 값을 코드 수정 없이 교체할 수 있게 설계합니다
  • 프리셋 파일을 서버 배포 단위와 같은 구조로 정의하여 이후 중앙 배포로 확장해도 스키마를 바꾸지 않도록 설계합니다

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

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

프로젝트 문의