우테코 프리코스 주제

프로젝트 기술 명세서: WASM 기반 이미지 에디터 (PixelWasm)

이 문서는 React 프론트엔드와 Rust(WebAssembly) 기반의 이미지 처리 백엔드를 결합하여 웹 브라우저에서 동작하는 고성능 이미지 에디터를 개발하기 위한 기술적인 요구사항과 구현 계획을 상세히 정의합니다.

1. 프로젝트 개요

• 프로젝트명: PixelWasm (WASM 기반 이미지 에디터)
• 핵심 목표: 웹 프론트엔드 개발자가 Rust와 WebAssembly라는 새로운 기술을 활용하여, 브라우저 환경의 한계를 뛰어넘는 고성능 이미지 처리 애플리케이션을 구현하는 경험을 쌓는다.
• 주요 컨셉: 사용자 인터페이스(UI)와 같은 상호작용이 많은 부분은 검증된 React로 구현하고, 픽셀 단위의 반복 연산이 많아 성능이 중요한 이미지 처리 로직은 Rust로 작성하여 WebAssembly로 컴파일하여 실행한다. 이를 통해 JavaScript 단독 구현 대비 성능 우위를 명확히 증명하고 시각화합니다.

2. 주요 목표

1. 기술 확장: Rust 언어와 WebAssembly 생태계에 대한 실용적인 연동 경험을 습득합니다.
2. 성능 최적화: 동일한 이미지 처리 로직을 순수 JavaScript와 WASM으로 각각 구현하여 실행 속도를 수치적으로 비교하고, 성능 개선 효과를 정량적으로 증명합니다.
3. 실용적 결과물: 이미지 업로드, 필터 적용, 자르기, 실행 취소 등 이미지 에디터의 핵심 기능을 갖춘 웹 애플리케이션을 완성합니다.
4. 아키텍처 이해: 프론트엔드(JS)와 네이티브 모듈(WASM) 간의 경계를 이해하고, 메모리 관리 및 데이터(이미지 버퍼) 공유 방식을 학습합니다.

3. 기술 스택

• 언어: TypeScript, Rust
• 프론트엔드: React (v18+), Vite, Tailwind CSS (또는 Emotion)
• 이미지 처리: Rust -> WebAssembly (WASM)
• 빌드 도구: wasm-pack, wasm-bindgen
• 성능 측정: Performance API (performance.now())
• 배포: GitHub Pages 또는 Vercel

4. 시스템 아키텍처

본 프로젝트는 역할 분리를 핵심 아키텍처 원칙으로 삼습니다.

1. UI Layer (React):
   • 사용자는 React로 만들어진 UI와 상호작용합니다. (파일 업로드, 버튼 클릭, 슬라이더 조작 등)
   • 모든 상태 관리는 React 내에서 이루어집니다.
2. Glue Code (JavaScript/TypeScript):
   • 사용자 액션에 따라 Canvas로부터 이미지 데이터를 ImageData 형태로 추출합니다.
   • wasm-bindgen이 생성한 JS 코드를 통해 WASM 모듈의 함수를 호출하고, 이미지 데이터 버퍼를 WASM의 메모리 공간으로 복사합니다.
3. Image Processing Layer (Rust -> WASM):
   • Rust로 작성된 함수(예: grayscale, brightness)가 메모리에 있는 픽셀 데이터를 직접 조작합니다.
   • Rust의 안전성과 C++에 버금가는 성능을 통해 빠르고 효율적인 연산을 수행합니다.
   • 처리된 결과는 동일한 메모리 버퍼에 덮어씌워집니다.
4. Data Flow Back to UI:
   • 처리가 완료되면, JS는 WASM 메모리 공간에서 수정된 데이터 버퍼를 다시 읽어옵니다.
   • 이 데이터를 ImageData로 변환하여 Canvas에 다시 그려(putImageData) 사용자에게 결과를 보여줍니다.

5. 핵심 기능 명세 (중간 난이도 기준)

기능	세부 내용	구현 방식	난이도
이미지 업로드 및 로딩	로컬 파일을 업로드하여 Canvas에 렌더링	React 컴포넌트 (<input type="file">), URL.createObjectURL API 활용	★☆☆☆☆
흑백(Grayscale) 필터	이미지를 흑백 톤으로 변환	Rust WASM 함수로 픽셀(RGB)을 순회하며 평균값 계산 후 적용	★★☆☆☆
밝기(Brightness) 조절	슬라이더를 통해 이미지 밝기를 실시간으로 조절	슬라이더 값 변경 시, 해당 값을 인자로 받는 Rust WASM 함수 호출	★★☆☆☆
자르기(Crop)	사용자가 캔버스 위에서 특정 영역을 드래그하여 선택하고, 해당 영역만 남김	React의 마우스 이벤트(PointerDown/Move/Up)로 영역 좌표를 계산하고, getImageData로 해당 부분만 잘라내어 캔버스 크기를 조절하며 다시 그림	★★★☆☆
실행 취소(Undo)	직전 작업(1-step)을 취소하고 이전 상태로 복구	이미지에 변화를 주기 직전의 ImageData를 JS 변수에 저장해두고, Undo 버튼 클릭 시 해당 데이터로 캔버스를 복원	★★★☆☆
성능 비교 UI	동일한 작업을 JS와 WASM으로 각각 실행했을 때의 처리 시간을 밀리초(ms) 단위로 표시	Performance.now() API를 사용하여 함수 실행 전후의 시간을 측정. 결과를 React 상태로 관리하여 UI에 바 차트(Bar chart)와 배속(e.g., 5.3x faster) 형태로 시각화	★★★☆☆

6. 개발 로드맵 (2주 버전)

• Day 1-3: 환경 설정 및 기본 기능 구현
  • Vite + React + TS 프로젝트 생성 및 Tailwind CSS 설정
  • Rust 개발 환경 및 wasm-pack 설치
  • Rust 라이브러리(crate) 생성 및 grayscale 함수 구현
  • React에서 WASM 모듈을 로딩하고, 이미지 업로드 후 grayscale 필터를 적용하는 기능 구현
• Day 4-6: 핵심 편집 기능 추가
  • 밝기 조절 필터 Rust 함수 추가 및 React UI(슬라이더) 연동
  • 드래그를 통한 이미지 자르기(Crop) 기능 구현
  • 1-step Undo 기능 구현
• Day 7-10: 성능 측정 및 시각화
  • grayscale 로직을 순수 JS로도 구현
  • Performance.now()를 사용한 성능 측정 유틸리티 함수 작성
  • 측정 결과를 보여주는 PerformancePanel React 컴포넌트 제작 및 UI 연동
• Day 11-14: UI 개선, 문서화 및 배포
  • 전체적인 UI/UX 다듬기 (Polishing)
  • 프로젝트 구조, 실행 방법, 학습 내용을 정리한 README.md 파일 작성
  • GitHub Pages 또는 Vercel을 통한 최종 결과물 배포

7. 최종 산출물

1. GitHub 소스 코드 저장소: 프론트엔드와 Rust 코드를 포함한 전체 프로젝트 소스.
2. 배포된 웹 애플리케이션 URL: 누구나 접속하여 기능을 테스트해볼 수 있는 라이브 데모.
3. 프로젝트 README.md:
   • 프로젝트에 대한 명확한 한 줄 소개.
   • 프로젝트의 목적과 구현된 기능 목록.
   • JS vs WASM 성능 비교 결과 그래프 및 분석.
   • 개발 과정에서 겪은 어려움, 배운 점 등을 정리한 회고.
4. (선택) 기능 시연 GIF 또는 영상: 애플리케이션의 주요 기능을 시연하는 짧은 영상.