Next.js와 Cloudinary를 이용한 보안 이미지 업로드 구현 (Signed Upload)

이미지 업로드 기능을 구현할 때 가장 고민되는 지점은 ‘보안’ 과 ‘서버 부하’ 입니다. 클라이언트에서 직접 업로드하자니 API 키 노출이 걱정되고, 서버를 거치자니 리소스 낭비가 심하죠.

이번 포스팅에서는 Next.js Server Action으로 서명을 생성하고, Cloudinary로 직접 업로드하는 최적의 워크플로우를 소개합니다.

1. 전체 아키텍처 흐름도

업로드 프로세스는 크게 서명 생성 -> 직접 업로드 -> DB 저장의 3단계로 진행됩니다.

2. 상세 구현 단계

Step 1: 서버 서명(Signature) 요청

사용자가 업로드를 시작하면, 브라우저는 먼저 Next.js 서버에 서명을 요청합니다.

• 권한 확인: Firebase Admin 등을 통해 실제 관리자(Admin)인지 검증합니다.
• 서명 생성: 서버가 가진 API Secret을 사용해 안전하게 서명을 생성한 후 signature, timestamp, apiKey를 클라이언트에 반환합니다.

Step 2: Cloudinary Direct Upload

클라이언트는 서버에서 받은 서명을 들고 Cloudinary API로 직접 파일을 전송합니다.

• 장점: 대용량 파일이 우리 서버를 거치지 않으므로 서버 부하가 전혀 없으며, API Secret은 서버에만 존재하므로 안전합니다.
• 응답: 업로드가 완료되면 Cloudinary로부터 이미지의 secure_url과 public_id를 전달받습니다.

Step 3: 최종 데이터 저장

이미지 업로드가 성공하면, 클라이언트는 해당 URL을 포함하여 게시글 생성(createPost) 요청을 보냅니다.

• 서버는 전달받은 이미지 경로를 최종적으로 DB에 저장하여 프로세스를 마무리합니다.

3. 마치며

이 방식을 사용하면 클라이언트 단의 편의성과 서버 단의 보안성을 모두 챙길 수 있습니다. 특히 Next.js의 Server Action을 활용하면 별도의 API 엔드포인트를 복잡하게 구성하지 않아도 되어 코드가 훨씬 간결해집니다.

---