← 포트폴리오 목록
인쇄물 제작 외주 의뢰 플랫폼
인쇄물 제작을 의뢰하는 B2B 외주 플랫폼의 구현한 프로젝트입니다.
Canvas API 기반 인라인 교정 피드백 기능 구현시안 이미지 위에 좌표 기반 코멘트 핀을 남기는 Canvas API 인터랙션을 구현하여 외부 협업 도구 없이 플랫폼 내 교정 프로세스를 완결하는 구조를 설계합니다.
옵션 조합 단가 테이블 기반 실시간 견적 계산 설계규격×수량×후가공 옵션 조합별 단가를 DB에서 관리하고 프론트에서 즉시 계산하는 구조로 운영자 단가 수정이 실시간으로 반영되는 유연한 견적 시스템을 설계합니다.
대용량 디자인 파일(최대 500MB) S3 분할 업로드 구현AI/PSD 등 500MB 이상 디자인 파일을 청크 단위로 분할 업로드하고 재개(resume) 처리를 지원하는 S3 Multipart Upload 파이프라인을 구현합니다.
Overview
프로젝트 개요
인쇄물 제작을 의뢰하는 B2B 외주 플랫폼의 구현한 프로젝트입니다. 명함·배너·리플렛 등 다양한 인쇄 품목에 대해 디자인 원본 파일을 업로드하고 규격·수량·후가공 옵션을 선택한 뒤 결제하는 플로우를 구현합니다. 주문별 제작 진행 상태를 실시간으로 확인하고 완성본 파일을 다운로드하는 전 과정을 커버하는 풀스택 구현 데모를 제안합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
AI/PSD 등 500MB 이상 디자인 파일 업로드 시 네트워크 단절·타임아웃 상황을 고려한 Multipart Upload 재개 처리 설계
교정 라운드별 파일 버전 이력 관리와 S3 버전닝을 연동하면서 스토리지 비용을 최소화하는 보존 정책 설계
Canvas 코멘트 핀 좌표가 이미지 크기·줌 레벨에 따라 정확히 대응하
정규화 좌표 체계 설계
옵션 조합 수가 증가할 때도 견적 계산 쿼리 성능이 유지되는 단가 테이블 인덱스 전략 수립
핵심 기능 1
주문 센터
의뢰인이 진행 중·완료된 인쇄 주문을 한눈에 확인하고 신규 주문을 시작하는 메인 화면입니다. 품목별 주문 현황을 카드 형태로 시각화하고, 제작 단계(접수→시안→교정→인쇄→배송) 타임라인을 제공합니다
핵심 기능 2
신규 의뢰
품목 선택→파일 업로드→옵션 설정→견적 확인→결제로 이어지는 단계별 주문 생성 마법사 화면입니다
핵심 기능 3
파일 교정
제작자가 시안 파일을 업로드하면 의뢰인이 온라인에서 검토·수정 요청·최종 승인하는 교정 협업 화면입니다. 시안 이미지 위에 코멘트를 핀으로 찍는 인라인 피드백 구조를 구현하고, 교정 라운드별 버전 이력을 관리합니다
핵심 기능 4
완성본 수령
인쇄·제본이 완료된 결과물 파일을 의뢰인이 다운로드하고 배송 정보를 확인하는 화면입니다. 완성본 파일은 Presigned URL로 보안 다운로드를 제공하며, 실물 배송 주문의 경우 운송장 조회 연동을 지원합니다
구현 과정
프로젝트 진행 단계
STEP 1
주문 도메인 모델링
품목·옵션·단가·교정 라운드 엔티티 설계 및 FastAPI 스키마 정의
STEP 2
파일 업로드·다운로드 파이프라인
S3 Multipart Upload, Presigned URL, 버전 이력 관리 구현
STEP 3
결제·정산 플로우 구현
포트원 PG 연동, 결제 완료 웹훅, 환불 처리 구현
STEP 4
교정 협업 기능 구현
Canvas 코멘트 핀, 교정 라운드 버전 관리, 승인 플로우 구현
STEP 5
실시간 상태 갱신 및 알림 연동
SSE 기반 실시간 단계 갱신, 이메일·카카오 알림 연동
프로젝트 성과
Canvas API 기반 인라인 교정 피드백 기능 구현시안 이미지 위에 좌표 기반 코멘트 핀을 남기는 Canvas API 인터랙션을 구현하여 외부 협업 도구 없이 플랫폼 내 교정 프로세스를 완결하는 구조를 설계합니다.
옵션 조합 단가 테이블 기반 실시간 견적 계산 설계규격×수량×후가공 옵션 조합별 단가를 DB에서 관리하고 프론트에서 즉시 계산하는 구조로 운영자 단가 수정이 실시간으로 반영되는 유연한 견적 시스템을 설계합니다.
대용량 디자인 파일(최대 500MB) S3 분할 업로드 구현AI/PSD 등 500MB 이상 디자인 파일을 청크 단위로 분할 업로드하고 재개(resume) 처리를 지원하는 S3 Multipart Upload 파이프라인을 구현합니다.
SSE 기반 경량 실시간 제작 단계 갱신 구조 구현Server-Sent Events로 웹소켓 없이 제작 단계 변경을 실시간 반영하는 경량 구조를 설계하여 서버 연결 비용을 최소화합니다.
Celery + Redis 기반 비동기 작업 큐 설계파일 처리·알림 발송·세금계산서 이메일 등 시간이 걸리는 작업을 Celery 비동기 큐로 분리하여 API 응답 속도를 유지하는 구조를 구현합니다.
Review
기술적 주안점
- SSE 기반 실시간 상태 갱신으로 웹소켓 없이도 제작 진행 단계를 즉시 반영하는 경량 실시간 구조를 설계합니다
- 옵션 조합 단가 테이블을 백엔드에서 관리하고 프론트에서 실시간 계산하는 구조로 운영자가 단가를 유연하게 수정할 수 있는 확장 구조를 설계합니다
- Canvas API로 시안 이미지에 직접 코멘트를 남기는 인라인 피드백 기능을 구현하여 외부 협업 도구 없이 플랫폼 내에서 교정 프로세스를 완결합니다
