파일 업로드 구현 — ActiveStorage와 Cloudinary 활용하기

사용자 프로필 이미지, 게시글 첨부 사진, 상품 썸네일 등 웹 서비스에는 파일 업로드가 빠질 수 없죠.
Rails에서는 ActiveStorage를 통해 파일 업로드를 간편하게 처리할 수 있습니다. 그리고 이를 Cloudinary 같은 외부 스토리지와 연동하면 저장 공간 걱정 없이 이미지 최적화까지 누릴 수 있죠.

이번 글에서는 ActiveStorage + Cloudinary 조합으로 파일 업로드 기능을 구현하는 과정을 정리합니다.

---

📦 1. ActiveStorage 설치 및 설정

Rails 5.2부터 내장된 ActiveStorage는 파일 업로드와 외부 스토리지 연동을 담당하는 기본 기능입니다.

$ bin/rails active_storage:install
$ bin/rails db:migrate

이 명령어는 active_storage_blobs와 active_storage_attachments라는 두 개의 테이블을 만들어 줍니다.

---

☁️ 2. Cloudinary 설정

1. cloudinary gem 설치

# Gemfile
gem 'cloudinary', '~> 1.25'
gem 'activestorage-cloudinary-service'

$ bundle install

2. Cloudinary 계정 생성 및 환경변수 설정

Cloudinary에 가입한 뒤, 대시보드에서 API Key/Secret 정보를 확인합니다. 이를 환경변수로 저장해 주세요.

# .env 또는 credentials.yml.enc에 저장
CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME

3. storage.yml 설정

# config/storage.yml
cloudinary:
  service: Cloudinary

4. 환경 설정

# config/environments/development.rb
config.active_storage.service = :cloudinary

---

📎 3. 모델에 파일 첨부하기

# app/models/post.rb
class Post < ApplicationRecord
  has_one_attached :image
end

has_one_attached, has_many_attached 등으로 이미지 필드를 선언할 수 있어요.

---

🖼️ 4. 폼에서 파일 업로드

<%= form_with model: @post, local: true do |form| %>
  <%= form.label :title %>
  <%= form.text_field :title %>

  <%= form.label :image %>
  <%= form.file_field :image %>

  <%= form.submit %>
<% end %>

form_with 안에서 file_field를 쓰면 자동으로 multipart/form-data로 전송됩니다.

---

🖥️ 5. 업로드된 파일 보여주기

<% if @post.image.attached? %>
  <%= image_tag @post.image.variant(resize_to_limit: [500, 500]) %>
<% end %>

Cloudinary를 사용할 경우 자동으로 이미지 URL이 최적화되어 반환됩니다. variant 메서드로 크기 조정도 가능하죠.

---

💡 확장 팁

• 비디오도 업로드 가능 (has_one_attached :video)
• Cloudinary Dashboard에서 업로드된 파일 확인 및 삭제 가능
• 이미지 변환 preset, lazy-loading, CDN 연동도 가능

---

🎯 마치며

파일 업로드는 많은 서비스에서 기본이 되는 기능입니다.
하지만 파일을 직접 관리하기보다는, ActiveStorage로 구조화하고, Cloudinary로 외부 위임하는 방식이 개발자에겐 훨씬 편하고 안정적이죠.
이번 글을 통해 파일 업로드를 빠르게 구현하면서도, 클라우드 시대에 어울리는 확장성과 유지보수성을 확보해보세요!