CodeDeck

이미지 로딩 중...

AWS S3 미디어 통합 완벽 가이드 - 슬라이드 1/8
A

AI Generated

2025. 11. 22. · 2 Views

AWS S3 미디어 통합 완벽 가이드

실전 프로젝트에서 가장 많이 사용되는 AWS S3와 미디어 파일 처리를 완벽하게 마스터하세요. S3 버킷 설정부터 Presigned URL, 음성/영상 메시지 전송, 미디어 재생까지 실무에 바로 적용할 수 있는 모든 것을 다룹니다.

목차

  1. S3 버킷 설정
  2. S3 업로드 구현
  3. S3 다운로드 구현
  4. Presigned URL 생성
  5. 음성 메시지 전송
  6. 영상 메시지 전송
  7. 미디어 재생 기능

1. S3 버킷 설정

시작하며

여러분이 사용자들이 업로드한 사진, 동영상, 음성 파일을 저장해야 하는 상황을 겪어본 적 있나요? 처음에는 서버 컴퓨터에 직접 저장하다가, 용량이 부족해서 하드디스크를 추가로 구매하고, 백업 걱정에 밤잠을 설친 경험이 있으실 겁니다.

이런 문제는 실제 개발 현장에서 자주 발생합니다. 서버의 저장 공간은 한정되어 있고, 파일이 많아질수록 관리가 어려워지며, 만약 서버가 고장나면 모든 데이터가 날아갈 수 있습니다.

게다가 전 세계 사용자들에게 빠르게 파일을 전달하는 것도 쉽지 않습니다. 바로 이럴 때 필요한 것이 AWS S3 버킷입니다.

S3는 마치 무한대의 창고처럼 여러분의 파일을 안전하게 보관해주고, 전 세계 어디서든 빠르게 접근할 수 있게 해줍니다.

개요

간단히 말해서, S3 버킷은 클라우드에 있는 거대한 파일 저장소입니다. 여러분의 컴퓨터에 있는 폴더와 비슷하지만, 인터넷을 통해 접근할 수 있고 용량 제한이 거의 없다고 생각하면 됩니다.

실제 서비스를 운영하다 보면 사용자들이 업로드하는 이미지, 동영상, 문서 파일 등을 어딘가에 저장해야 합니다. 예를 들어, SNS 앱에서 사용자가 프로필 사진을 올리거나, 유튜브처럼 동영상을 업로드하거나, 음성 메시지를 녹음해서 보내는 경우에 매우 유용합니다.

기존에는 서버 컴퓨터의 하드디스크에 직접 파일을 저장했다면, 이제는 S3에 파일을 올려서 안전하게 보관하고 필요할 때 언제든 가져올 수 있습니다. S3의 핵심 특징은 첫째, 무제한 저장 공간을 제공한다는 점입니다.

둘째, 99.999999999%(11 nines)의 내구성으로 데이터 손실 걱정이 없습니다. 셋째, 전 세계에 분산된 서버를 통해 빠른 속도로 파일을 전달할 수 있습니다.

이러한 특징들이 여러분의 서비스를 안정적이고 확장 가능하게 만들어줍니다.

코드 예제

// AWS SDK 설치: npm install @aws-sdk/client-s3
import { S3Client } from "@aws-sdk/client-s3";

// S3 클라이언트 생성 - AWS 계정 정보로 연결
const s3Client = new S3Client({
  region: "ap-northeast-2", // 서울 리전
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  },
});

// 버킷 설정 정보
const bucketConfig = {
  bucketName: "my-media-storage",
  region: "ap-northeast-2",
  // 버킷 정책: 공개 여부 설정
  publicRead: false, // 보안을 위해 기본적으로 비공개
};

설명

이것이 하는 일: S3 클라이언트를 생성하고 AWS 계정과 연결하여 파일을 저장할 준비를 합니다. 마치 은행 계좌를 개설하는 것처럼, 여러분의 AWS 계정 정보로 S3 서비스에 접근할 수 있는 권한을 얻는 것입니다.

첫 번째로, S3Client를 생성하는 부분은 AWS S3 서비스와 통신할 수 있는 연결 통로를 만드는 역할을 합니다. region을 "ap-northeast-2"로 설정한 것은 서울에 있는 AWS 데이터센터를 사용하겠다는 의미입니다.

한국 사용자가 많다면 서울 리전을 선택하는 것이 속도 면에서 유리합니다. 그 다음으로, credentials 부분이 실행되면서 여러분의 AWS 계정을 인증합니다.

accessKeyId와 secretAccessKey는 마치 은행의 계좌번호와 비밀번호 같은 것으로, 이 정보가 맞아야만 S3에 접근할 수 있습니다. 보안을 위해 환경변수(process.env)에 저장하여 코드에 직접 노출되지 않도록 합니다.

마지막으로, bucketConfig 객체가 버킷의 기본 설정을 정의합니다. publicRead를 false로 설정한 것은 누구나 파일을 볼 수 없도록 보안을 강화한 것입니다.

필요한 경우에만 특정 사용자에게 접근 권한을 부여할 수 있습니다. 여러분이 이 코드를 사용하면 AWS S3에 안전하게 연결하고, 파일을 업로드하거나 다운로드할 준비가 완료됩니다.

한 번 설정해두면 프로젝트 전체에서 재사용할 수 있어서 매우 효율적입니다.

실전 팁

💡 환경변수는 반드시 .env 파일에 저장하고 .gitignore에 추가하세요. AWS 키가 유출되면 누군가 여러분의 계정으로 무단으로 서비스를 사용할 수 있습니다.

💡 리전 선택은 사용자 위치를 고려하세요. 한국 사용자가 많으면 서울(ap-northeast-2), 미국 사용자가 많으면 us-east-1을 선택하면 속도가 빨라집니다.

💡 처음에는 publicRead를 false로 설정하고, 정말 필요한 경우에만 특정 파일이나 폴더만 공개하세요. 보안은 항상 먼저 고려해야 합니다.

💡 개발 환경과 운영 환경에서 다른 버킷을 사용하세요. 테스트 중에 실제 사용자 데이터를 건드리는 실수를 방지할 수 있습니다.

💡 버킷 이름은 전 세계에서 유일해야 하므로, 회사명이나 프로젝트명을 포함하여 고유한 이름을 만드세요.

2. S3 업로드 구현

시작하며

여러분이 사용자가 선택한 이미지 파일을 서버에 저장하려고 할 때, 파일 크기가 너무 커서 서버 메모리가 부족해지거나, 동시에 여러 사용자가 파일을 올릴 때 서버가 느려지는 경험을 해보셨나요? 이런 문제는 특히 이미지나 동영상 같은 큰 파일을 다룰 때 자주 발생합니다.

서버의 저장 공간은 한정되어 있고, 대용량 파일을 처리하는 데는 많은 리소스가 필요합니다. 게다가 파일을 잃어버리면 복구가 어렵습니다.

바로 이럴 때 필요한 것이 S3 업로드 기능입니다. S3는 대용량 파일을 안정적으로 처리하고, 자동으로 백업까지 해주어 여러분의 서버 부담을 크게 줄여줍니다.

개요

간단히 말해서, S3 업로드는 로컬 파일을 클라우드 저장소로 전송하는 작업입니다. 여러분의 컴퓨터에서 USB에 파일을 복사하는 것과 비슷하지만, 인터넷을 통해 AWS의 안전한 저장소로 보내는 것입니다.

실무에서는 사용자 프로필 사진, 게시글 이미지, PDF 문서, 음성 녹음 파일 등을 업로드할 때 필수적입니다. 예를 들어, 전자상거래 사이트에서 상품 이미지를 올리거나, 메신저 앱에서 사진을 전송하거나, 온라인 교육 플랫폼에서 강의 동영상을 업로드하는 경우에 매우 유용합니다.

기존에는 서버의 파일시스템에 직접 저장했다면, 이제는 S3 API를 호출해서 클라우드에 안전하게 업로드할 수 있습니다. S3 업로드의 핵심 특징은 첫째, 멀티파트 업로드로 대용량 파일도 안정적으로 처리할 수 있습니다.

둘째, 업로드 중 네트워크가 끊겨도 재시도가 가능합니다. 셋째, 파일 메타데이터(타입, 인코딩 등)를 함께 저장할 수 있습니다.

이러한 특징들이 안정적인 파일 관리 시스템을 만들어줍니다.

코드 예제

import { PutObjectCommand } from "@aws-sdk/client-s3";
import fs from "fs";

// 파일 업로드 함수
async function uploadFileToS3(filePath, key) {
  // 로컬 파일 읽기
  const fileContent = fs.readFileSync(filePath);

  // 업로드 명령 생성
  const command = new PutObjectCommand({
    Bucket: "my-media-storage", // 버킷 이름
    Key: key, // S3에 저장될 파일 경로 (예: "images/profile.jpg")
    Body: fileContent, // 실제 파일 내용
    ContentType: "image/jpeg", // 파일 타입 지정
    Metadata: {
      uploadedBy: "user123", // 추가 정보 저장
      uploadDate: new Date().toISOString(),
    },
  });

  // S3에 업로드 실행
  const response = await s3Client.send(command);
  return response;
}

설명

이것이 하는 일: 로컬에 있는 파일을 읽어서 S3 버킷에 업로드하고, 파일에 대한 메타정보도 함께 저장합니다. 마치 편지를 봉투에 넣고 받는 사람 주소를 쓴 다음 우체통에 넣는 것처럼, 파일을 준비해서 S3로 전송하는 과정입니다.

첫 번째로, fs.readFileSync(filePath)는 여러분의 컴퓨터에 있는 파일을 메모리로 읽어들입니다. 이 부분은 파일을 열어서 내용을 확인하는 것과 같습니다.

동기 방식으로 작동하므로 파일을 다 읽을 때까지 다음 코드가 실행되지 않습니다. 그 다음으로, PutObjectCommand 객체가 생성되면서 업로드에 필요한 모든 정보를 담습니다.

Key는 S3에서 파일이 저장될 위치를 지정하는데, 폴더 구조처럼 "images/profile.jpg" 형식으로 만들 수 있습니다. ContentType을 정확히 지정하면 나중에 브라우저에서 파일을 열 때 올바르게 표시됩니다.

Metadata에는 업로드한 사용자, 날짜 등 추가 정보를 저장할 수 있어서 나중에 파일 관리가 편해집니다. 마지막으로, s3Client.send(command)가 실제로 파일을 S3로 전송합니다.

네트워크를 통해 AWS 서버로 파일이 전달되고, 성공하면 응답 객체를 반환합니다. 이 응답에는 업로드된 파일의 ETag(버전 식별자) 등의 정보가 포함됩니다.

여러분이 이 코드를 사용하면 어떤 크기의 파일이든 안정적으로 S3에 업로드할 수 있습니다. 업로드된 파일은 자동으로 여러 데이터센터에 복제되어 안전하게 보관되며, 전 세계 어디서든 빠르게 접근할 수 있습니다.

실전 팁

💡 대용량 파일(100MB 이상)은 멀티파트 업로드를 사용하세요. 파일을 여러 조각으로 나누어 병렬로 업로드하면 속도가 훨씬 빠르고 안정적입니다.

💡 ContentType을 정확히 설정하지 않으면 브라우저에서 파일을 다운로드할 때 올바르게 표시되지 않을 수 있습니다. 이미지는 "image/jpeg", 동영상은 "video/mp4" 등으로 정확히 지정하세요.

💡 파일명에 한글이나 특수문자가 있으면 인코딩 문제가 생길 수 있으므로, UUID나 타임스탬프를 사용해 고유한 영문 파일명을 생성하는 것이 좋습니다.

💡 업로드 전에 파일 크기와 타입을 검증하세요. 악의적인 사용자가 서버 리소스를 남용하는 것을 방지할 수 있습니다.

💡 업로드 실패 시 재시도 로직을 구현하세요. 네트워크 불안정으로 인한 일시적 오류는 재시도하면 대부분 성공합니다.

3. S3 다운로드 구현

시작하며

여러분이 S3에 저장된 사용자의 프로필 사진을 보여주거나, 업로드된 문서를 다운로드하게 해야 하는 상황에서, 어떻게 파일을 가져와야 할지 고민해본 적 있나요? 단순히 URL을 제공하면 될 것 같지만, 보안 문제나 권한 관리가 필요한 경우가 많습니다.

이런 문제는 특히 비공개 파일을 다룰 때 중요합니다. 누구나 접근할 수 있는 공개 파일이라면 간단하지만, 특정 사용자만 볼 수 있어야 하는 개인 정보나 유료 콘텐츠는 안전하게 관리해야 합니다.

바로 이럴 때 필요한 것이 S3 다운로드 기능입니다. 프로그래밍 방식으로 파일을 가져오면 권한을 체크하고, 로그를 남기고, 필요한 처리를 한 후 사용자에게 제공할 수 있습니다.

개요

간단히 말해서, S3 다운로드는 클라우드에 저장된 파일을 가져오는 작업입니다. 도서관에서 책을 빌리는 것처럼, S3에서 필요한 파일을 찾아서 여러분의 서버나 사용자에게 전달하는 것입니다.

실무에서는 사용자가 자신이 업로드한 파일을 다시 보거나, 관리자가 모든 파일을 검토하거나, 시스템이 자동으로 파일을 처리해야 할 때 필수적입니다. 예를 들어, 클라우드 저장소 서비스에서 파일 목록을 보여주고 다운로드하게 하거나, 이미지 편집 앱에서 원본 파일을 불러오거나, 백업 시스템에서 파일을 복구하는 경우에 매우 유용합니다.

기존에는 서버의 파일시스템에서 직접 파일을 읽었다면, 이제는 S3 API를 호출해서 파일 내용을 가져올 수 있습니다. S3 다운로드의 핵심 특징은 첫째, 스트리밍 방식으로 메모리 사용을 최소화할 수 있습니다.

둘째, 특정 범위만 가져오는 부분 다운로드가 가능합니다. 셋째, 파일 메타데이터도 함께 받아올 수 있습니다.

이러한 특징들이 효율적인 파일 전송을 가능하게 합니다.

코드 예제

import { GetObjectCommand } from "@aws-sdk/client-s3";
import { writeFileSync } from "fs";

// S3에서 파일 다운로드
async function downloadFileFromS3(key, savePath) {
  // 다운로드 명령 생성
  const command = new GetObjectCommand({
    Bucket: "my-media-storage",
    Key: key, // 가져올 파일 경로 (예: "images/profile.jpg")
  });

  // S3에서 파일 가져오기
  const response = await s3Client.send(command);

  // 스트림을 버퍼로 변환
  const chunks = [];
  for await (const chunk of response.Body) {
    chunks.push(chunk);
  }
  const fileBuffer = Buffer.concat(chunks);

  // 로컬에 파일 저장
  writeFileSync(savePath, fileBuffer);

  // 메타데이터 반환
  return {
    contentType: response.ContentType,
    metadata: response.Metadata,
    size: response.ContentLength,
  };
}

설명

이것이 하는 일: S3에 저장된 파일을 찾아서 내용을 가져오고, 스트림 형태의 데이터를 실제 파일로 변환하여 로컬에 저장합니다. 마치 인터넷에서 동영상을 스트리밍으로 보는 것처럼, 데이터를 조금씩 받아서 처리하는 방식입니다.

첫 번째로, GetObjectCommand는 S3에서 어떤 파일을 가져올지 지정합니다. Key에 파일 경로를 넣으면 S3가 해당 파일을 찾아줍니다.

버킷 안에 수백만 개의 파일이 있어도 Key만 정확하면 빠르게 찾을 수 있습니다. 그 다음으로, response.Body가 실행되면서 파일 내용을 스트림 형태로 받습니다.

스트림은 데이터를 한 번에 다 받지 않고 조금씩 받는 방식인데, 이렇게 하면 메모리를 효율적으로 사용할 수 있습니다. 특히 대용량 파일을 다룰 때 서버 메모리가 부족해지는 것을 방지할 수 있습니다.

for await 루프로 데이터 조각(chunk)들을 모아서 완전한 파일로 만듭니다. 마지막으로, Buffer.concat(chunks)가 모든 조각을 하나로 합치고, writeFileSync로 로컬 파일 시스템에 저장합니다.

응답 객체에는 파일 내용뿐만 아니라 ContentType, Metadata, ContentLength 같은 정보도 포함되어 있어서 파일에 대한 추가 정보를 얻을 수 있습니다. 여러분이 이 코드를 사용하면 S3에 있는 어떤 파일이든 안전하게 가져올 수 있습니다.

권한이 있는 파일만 접근할 수 있고, 다운로드 과정에서 파일이 손상될 염려도 없습니다. 가져온 파일로 이미지 처리, 동영상 변환, 데이터 분석 등 다양한 작업을 수행할 수 있습니다.

실전 팁

💡 대용량 파일은 스트림을 직접 파이프로 연결하여 메모리에 올리지 않고 바로 저장하세요. response.Body.pipe(fs.createWriteStream(savePath)) 방식을 사용하면 메모리 사용량을 크게 줄일 수 있습니다.

💡 Range 헤더를 사용하면 파일의 특정 부분만 다운로드할 수 있습니다. 동영상 플레이어에서 특정 구간만 필요할 때 유용합니다.

💡 다운로드 실패 시 재시도 로직과 함께 exponential backoff(점진적 대기 시간 증가)를 구현하세요. 일시적 네트워크 오류에 대응할 수 있습니다.

💡 파일이 존재하지 않으면 NoSuchKey 에러가 발생하므로, try-catch로 에러를 처리하고 사용자에게 적절한 메시지를 보여주세요.

💡 자주 사용되는 파일은 CloudFront나 로컬 캐시를 활용하여 매번 S3에서 가져오지 않도록 최적화하세요.

4. Presigned URL 생성

시작하며

여러분이 사용자에게 파일을 다운로드하게 하거나 업로드하게 해야 하는데, AWS 계정 정보를 공유할 수도 없고, 모든 요청을 서버를 거쳐야 해서 서버 부담이 크다는 고민을 해본 적 있나요? 특히 대용량 파일을 다룰 때는 서버의 네트워크 비용과 처리 시간이 크게 증가합니다.

이런 문제는 실제 서비스에서 매우 자주 발생합니다. 사용자가 파일을 업로드하거나 다운로드할 때마다 서버를 거치면, 서버가 병목지점이 되어 속도가 느려지고 비용도 증가합니다.

게다가 보안을 유지하면서도 편리한 접근을 제공하기가 어렵습니다. 바로 이럴 때 필요한 것이 Presigned URL입니다.

일시적인 접근 권한을 가진 URL을 생성하여 사용자가 S3와 직접 통신하게 하면, 서버 부담 없이 안전하게 파일을 주고받을 수 있습니다.

개요

간단히 말해서, Presigned URL은 일정 시간 동안만 유효한 특별한 URL입니다. 마치 호텔 키카드처럼, 정해진 시간 동안만 특정 파일에 접근할 수 있는 임시 통행증을 만드는 것입니다.

실무에서는 사용자가 직접 S3에 파일을 업로드하거나, 비공개 파일을 안전하게 공유하거나, 대용량 파일을 빠르게 다운로드하게 할 때 필수적입니다. 예를 들어, 파일 공유 서비스에서 '24시간 동안만 다운로드 가능한 링크'를 만들거나, 사용자가 브라우저에서 직접 S3로 이미지를 업로드하게 하거나, 유료 콘텐츠를 구매한 사용자에게 일시적으로 접근권을 주는 경우에 매우 유용합니다.

기존에는 서버가 모든 파일 전송을 중계했다면, 이제는 Presigned URL을 생성해서 사용자와 S3가 직접 통신하게 할 수 있습니다. Presigned URL의 핵심 특징은 첫째, 시간 제한을 설정하여 보안을 강화할 수 있습니다.

둘째, 서버를 거치지 않아 네트워크 비용과 처리 시간을 절약할 수 있습니다. 셋째, AWS 자격 증명 없이도 파일에 접근할 수 있습니다.

이러한 특징들이 효율적이고 안전한 파일 공유 시스템을 만들어줍니다.

코드 예제

import { GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

// 다운로드용 Presigned URL 생성 (읽기 권한)
async function createDownloadUrl(key, expiresIn = 3600) {
  const command = new GetObjectCommand({
    Bucket: "my-media-storage",
    Key: key,
  });

  // 1시간(3600초) 동안 유효한 URL 생성
  const url = await getSignedUrl(s3Client, command, { expiresIn });
  return url;
}

// 업로드용 Presigned URL 생성 (쓰기 권한)
async function createUploadUrl(key, contentType, expiresIn = 900) {
  const command = new PutObjectCommand({
    Bucket: "my-media-storage",
    Key: key,
    ContentType: contentType, // 업로드할 파일 타입 제한
  });

  // 15분(900초) 동안 유효한 URL 생성
  const url = await getSignedUrl(s3Client, command, { expiresIn });
  return url;
}

설명

이것이 하는 일: S3 파일에 대한 임시 접근 권한을 URL 형태로 만들어, 사용자가 AWS 계정 없이도 정해진 시간 동안 파일을 업로드하거나 다운로드할 수 있게 합니다. 마치 건물 출입증을 임시로 발급하는 것처럼, 특정 시간 동안만 유효한 접근 권한을 부여하는 것입니다.

첫 번째로, 다운로드용 URL을 생성하는 createDownloadUrl 함수는 GetObjectCommand를 사용합니다. 이것은 "이 파일을 읽을 수 있는 권한"을 의미합니다.

getSignedUrl이 이 명령에 여러분의 AWS 자격 증명으로 디지털 서명을 추가하여 안전한 URL을 만듭니다. expiresIn을 3600초(1시간)로 설정하면, 1시간 후에는 이 URL이 자동으로 무효화되어 보안이 강화됩니다.

그 다음으로, 업로드용 URL을 생성하는 createUploadUrl 함수는 PutObjectCommand를 사용합니다. 이것은 "이 경로에 파일을 쓸 수 있는 권한"을 의미합니다.

ContentType을 지정하면 사용자가 해당 타입의 파일만 업로드할 수 있어서, 악의적인 파일 업로드를 방지할 수 있습니다. 업로드는 보안상 더 민감하므로 만료 시간을 900초(15분)로 짧게 설정했습니다.

마지막으로, 생성된 URL은 일반적인 웹 주소처럼 보이지만, 쿼리 파라미터에 서명 정보가 포함되어 있습니다. 사용자는 이 URL을 받아서 브라우저나 HTTP 클라이언트로 직접 S3에 요청을 보낼 수 있습니다.

서버는 URL만 생성하고 실제 파일 전송은 S3가 직접 처리하므로, 서버 리소스를 절약할 수 있습니다. 여러분이 이 코드를 사용하면 대용량 파일도 서버 부담 없이 빠르게 전송할 수 있고, 시간 제한으로 보안도 강화할 수 있습니다.

예를 들어, 사용자가 1GB 동영상을 업로드할 때 서버 메모리와 네트워크를 전혀 사용하지 않고 S3가 직접 처리하게 할 수 있어서 비용 절감 효과가 큽니다.

실전 팁

💡 업로드용 URL은 가능한 짧은 만료 시간을 설정하세요. 악의적인 사용자가 URL을 재사용하는 것을 방지할 수 있습니다. 보통 5-15분이면 충분합니다.

💡 ContentType을 반드시 지정하여 사용자가 의도하지 않은 파일 타입을 업로드하지 못하게 하세요. 이미지만 받으려면 "image/jpeg", "image/png" 등으로 제한하세요.

💡 Presigned URL을 데이터베이스에 저장하지 마세요. 필요할 때마다 새로 생성하는 것이 보안상 안전합니다.

💡 업로드 완료 후 서버에 콜백을 보내도록 클라이언트를 구현하여, 업로드된 파일을 데이터베이스에 기록하고 후처리(썸네일 생성 등)를 할 수 있습니다.

💡 CORS 설정을 버킷에 추가해야 브라우저에서 Presigned URL로 직접 업로드할 수 있습니다. 허용할 도메인과 메서드를 명시하세요.

5. 음성 메시지 전송

시작하며

여러분이 메신저 앱이나 음성 노트 기능을 만들 때, 사용자가 녹음한 음성 파일을 어떻게 저장하고 전송해야 할지 고민해본 적 있나요? 텍스트 메시지와 달리 음성 파일은 크기가 크고, 재생 가능한 형식으로 저장해야 하며, 빠르게 전송되어야 합니다.

이런 문제는 음성 기반 소통이 중요한 서비스에서 핵심적인 부분입니다. 음성 파일은 보통 몇 MB에서 수십 MB까지 커질 수 있고, 여러 오디오 포맷(MP3, WAV, AAC 등)을 지원해야 하며, 모바일 네트워크에서도 빠르게 로드되어야 합니다.

바로 이럴 때 필요한 것이 S3를 활용한 음성 메시지 전송 시스템입니다. S3에 음성 파일을 저장하고 Presigned URL로 공유하면, 안정적이고 빠른 음성 메시지 기능을 구현할 수 있습니다.

개요

간단히 말해서, 음성 메시지 전송은 녹음된 오디오 파일을 클라우드에 저장하고 다른 사용자가 재생할 수 있게 하는 기능입니다. 카카오톡 보이스톡이나 WhatsApp 음성 메시지처럼, 녹음 버튼을 누르고 말한 내용이 상대방에게 전달되는 것입니다.

실무에서는 메신저 앱의 음성 메시지, 음성 메모 앱, 팟캐스트 업로드, 음성 피드백 시스템 등에서 필수적입니다. 예를 들어, 고객 지원 시스템에서 사용자가 음성으로 문제를 설명하게 하거나, 교육 플랫폼에서 학생이 발음 연습 파일을 제출하거나, 소셜 미디어에서 음성 포스팅을 하는 경우에 매우 유용합니다.

기존에는 서버에 직접 오디오 파일을 저장했다면, 이제는 S3에 업로드하고 메타데이터를 관리하여 효율적으로 처리할 수 있습니다. 음성 메시지 전송의 핵심 특징은 첫째, 다양한 오디오 포맷을 지원할 수 있습니다.

둘째, 파일 크기 최적화로 빠른 전송이 가능합니다. 셋째, 재생 시간과 같은 메타데이터를 함께 저장할 수 있습니다.

이러한 특징들이 원활한 음성 커뮤니케이션을 가능하게 합니다.

코드 예제

import { PutObjectCommand } from "@aws-sdk/client-s3";
import { v4 as uuidv4 } from "uuid";

// 음성 메시지 업로드
async function uploadVoiceMessage(audioBuffer, userId, duration) {
  // 고유한 파일명 생성 (충돌 방지)
  const messageId = uuidv4();
  const key = `voice-messages/${userId}/${messageId}.mp3`;

  const command = new PutObjectCommand({
    Bucket: "my-media-storage",
    Key: key,
    Body: audioBuffer,
    ContentType: "audio/mpeg", // MP3 형식
    Metadata: {
      userId: userId,
      duration: duration.toString(), // 재생 시간 (초)
      uploadedAt: new Date().toISOString(),
      messageType: "voice",
    },
  });

  await s3Client.send(command);

  // 다운로드용 Presigned URL 생성 (7일간 유효)
  const downloadUrl = await createDownloadUrl(key, 604800);

  return {
    messageId,
    url: downloadUrl,
    duration,
  };
}

설명

이것이 하는 일: 녹음된 음성 파일을 S3에 업로드하고, 재생에 필요한 정보를 메타데이터로 저장한 다음, 다른 사용자가 들을 수 있는 URL을 생성합니다. 마치 라디오 방송을 녹음해서 클라우드에 올리고, 친구에게 링크를 보내는 것과 같습니다.

첫 번째로, uuidv4()로 고유한 메시지 ID를 생성합니다. 이것은 동시에 여러 사용자가 음성 메시지를 보내도 파일명이 충돌하지 않게 해줍니다.

Key를 voice-messages/{userId}/{messageId}.mp3 형식으로 만들면 사용자별로 폴더가 나뉘어 관리하기 편해집니다. 그 다음으로, ContentType을 "audio/mpeg"로 설정하여 브라우저가 이 파일을 오디오로 인식하게 합니다.

Metadata에 재생 시간(duration)을 저장하면, 나중에 음성 메시지 목록을 보여줄 때 "3분 27초" 같은 정보를 표시할 수 있습니다. messageType을 "voice"로 저장하면 나중에 다른 타입의 미디어와 구분할 수 있습니다.

마지막으로, 업로드가 완료되면 Presigned URL을 생성합니다. 만료 시간을 604800초(7일)로 설정하여 일주일 동안 메시지를 들을 수 있게 합니다.

메신저 앱에서는 보통 메시지가 오래 유지되므로 충분한 시간을 설정하는 것이 좋습니다. 반환된 객체에는 메시지 ID, URL, 재생 시간이 포함되어 클라이언트 앱에서 바로 사용할 수 있습니다.

여러분이 이 코드를 사용하면 카카오톡 같은 메신저의 음성 메시지 기능을 쉽게 구현할 수 있습니다. 사용자가 녹음 버튼을 누르고 말하면, 앱이 오디오를 녹음하고 이 함수로 업로드하며, 상대방은 URL을 받아서 재생할 수 있습니다.

S3가 전 세계에 분산되어 있어서 어디서든 빠르게 재생됩니다.

실전 팁

💡 업로드 전에 클라이언트에서 오디오를 압축하세요. MP3나 AAC 같은 손실 압축 포맷을 사용하면 파일 크기를 크게 줄이면서도 품질은 유지할 수 있습니다.

💡 긴 음성 메시지는 제한을 두세요. 보통 메신저는 1-5분 정도로 제한하여 저장 공간과 전송 시간을 관리합니다.

💡 오디오 파일 검증을 서버에서 수행하세요. 파일 헤더를 확인하여 실제로 오디오 파일인지, 악성 코드가 포함되지 않았는지 체크하세요.

💡 재생 시간은 클라이언트에서 계산하여 전송하되, 신뢰할 수 없으므로 서버에서 재검증하는 것이 좋습니다. FFmpeg 같은 도구로 실제 오디오 길이를 확인할 수 있습니다.

💡 음성 메시지 삭제 기능을 구현할 때는 S3에서도 파일을 삭제하고, 데이터베이스 레코드도 함께 제거하여 일관성을 유지하세요.

6. 영상 메시지 전송

시작하며

여러분이 동영상 공유 기능을 만들 때, 사용자가 촬영한 영상을 어떻게 저장하고 스트리밍해야 할지 막막했던 경험이 있나요? 영상 파일은 음성보다 훨씬 크고(수백 MB에서 GB 단위), 다양한 해상도와 코덱을 지원해야 하며, 빠른 스트리밍을 위한 최적화가 필요합니다.

이런 문제는 동영상이 핵심인 서비스에서 가장 어려운 기술적 과제입니다. 영상은 용량이 커서 업로드와 다운로드에 시간이 오래 걸리고, 네트워크 상태에 따라 끊김 없이 재생하기 어려우며, 다양한 기기와 브라우저에서 호환성을 보장해야 합니다.

바로 이럴 때 필요한 것이 S3를 활용한 영상 메시지 전송 시스템입니다. S3에 영상을 저장하고 적절한 메타데이터와 함께 관리하면, 유튜브나 인스타그램 같은 동영상 서비스의 기본 기능을 구현할 수 있습니다.

개요

간단히 말해서, 영상 메시지 전송은 촬영된 비디오 파일을 클라우드에 저장하고 다른 사용자가 재생할 수 있게 하는 기능입니다. 인스타그램 스토리나 유튜브 영상처럼, 동영상을 업로드하면 다른 사람들이 볼 수 있게 되는 것입니다.

실무에서는 소셜 미디어의 동영상 포스팅, 화상 메시지, 교육용 강의 영상, 제품 리뷰 동영상 등에서 필수적입니다. 예를 들어, 온라인 쇼핑몰에서 상품 사용 영상을 올리게 하거나, 원격 교육 플랫폼에서 강의를 녹화하여 공유하거나, 소셜 미디어에서 짧은 동영상 클립을 공유하는 경우에 매우 유용합니다.

기존에는 서버에 동영상을 저장하고 스트리밍 서버를 구축해야 했다면, 이제는 S3에 업로드하고 CloudFront 같은 CDN과 연동하여 전 세계에 빠르게 전송할 수 있습니다. 영상 메시지 전송의 핵심 특징은 첫째, 대용량 파일을 안정적으로 처리할 수 있습니다.

둘째, 다양한 비디오 포맷과 해상도를 지원할 수 있습니다. 셋째, 썸네일과 같은 추가 정보를 함께 관리할 수 있습니다.

이러한 특징들이 프로페셔널한 동영상 플랫폼을 만들어줍니다.

코드 예제

import { PutObjectCommand } from "@aws-sdk/client-s3";
import { v4 as uuidv4 } from "uuid";

// 영상 메시지 업로드
async function uploadVideoMessage(videoBuffer, userId, metadata) {
  const videoId = uuidv4();
  const key = `video-messages/${userId}/${videoId}.mp4`;

  const command = new PutObjectCommand({
    Bucket: "my-media-storage",
    Key: key,
    Body: videoBuffer,
    ContentType: "video/mp4", // MP4 형식
    Metadata: {
      userId: userId,
      duration: metadata.duration.toString(), // 재생 시간
      width: metadata.width.toString(), // 해상도 너비
      height: metadata.height.toString(), // 해상도 높이
      fps: metadata.fps?.toString() || "30", // 프레임 레이트
      thumbnailKey: `thumbnails/${videoId}.jpg`, // 썸네일 경로
      uploadedAt: new Date().toISOString(),
    },
  });

  await s3Client.send(command);

  // 스트리밍용 Presigned URL (24시간 유효)
  const streamUrl = await createDownloadUrl(key, 86400);

  return {
    videoId,
    streamUrl,
    duration: metadata.duration,
    resolution: `${metadata.width}x${metadata.height}`,
  };
}

설명

이것이 하는 일: 촬영된 동영상 파일을 S3에 업로드하고, 재생에 필요한 상세 정보(해상도, 프레임 레이트, 재생 시간)를 메타데이터로 저장한 다음, 스트리밍 재생이 가능한 URL을 생성합니다. 마치 유튜브에 영상을 업로드하고 공유 링크를 받는 것과 비슷합니다.

첫 번째로, 고유한 videoId를 생성하고 파일 경로를 video-messages/{userId}/{videoId}.mp4 형식으로 만듭니다. 이렇게 하면 사용자별로 폴더가 나뉘어 관리하기 편하고, 동일한 사용자가 여러 영상을 올려도 충돌하지 않습니다.

MP4는 가장 범용적인 비디오 포맷으로 거의 모든 브라우저와 디바이스에서 재생됩니다. 그 다음으로, Metadata에 영상의 상세 정보를 저장합니다.

duration은 영상 길이로 "3분 45초" 같은 정보를 보여줄 때 사용합니다. width와 height는 해상도 정보로, 클라이언트가 적절한 플레이어 크기를 설정할 수 있게 합니다.

fps는 초당 프레임 수로, 영상의 부드러움을 나타냅니다. thumbnailKey는 썸네일 이미지의 경로를 저장하여, 영상 목록을 보여줄 때 미리보기 이미지를 표시할 수 있습니다.

마지막으로, Presigned URL을 생성하여 사용자가 영상을 스트리밍할 수 있게 합니다. 만료 시간을 86400초(24시간)로 설정하여 하루 동안 링크가 유효하게 합니다.

반환된 객체에는 영상 ID, 스트리밍 URL, 재생 시간, 해상도 정보가 포함되어 클라이언트 앱이 바로 사용할 수 있습니다. 여러분이 이 코드를 사용하면 인스타그램이나 틱톡 같은 동영상 공유 기능을 구현할 수 있습니다.

사용자가 영상을 촬영하거나 업로드하면 S3에 저장되고, 다른 사용자들은 URL로 스트리밍 재생할 수 있습니다. S3는 대용량 파일도 안정적으로 처리하고, 전 세계 어디서든 빠른 속도로 스트리밍됩니다.

실전 팁

💡 대용량 동영상은 멀티파트 업로드를 사용하세요. 100MB 이상의 파일은 여러 조각으로 나누어 병렬 업로드하면 속도가 크게 향상되고 네트워크 오류에도 강합니다.

💡 업로드 후 Lambda 함수를 트리거하여 자동으로 썸네일을 생성하고 여러 해상도의 버전을 만드세요. 이렇게 하면 다양한 네트워크 속도에 맞춰 최적화된 영상을 제공할 수 있습니다.

💡 비디오 코덱은 H.264를 사용하세요. 가장 널리 지원되는 코덱이며, 압축률도 우수합니다. H.265는 더 효율적이지만 일부 구형 기기에서 재생되지 않을 수 있습니다.

💡 스트리밍 성능을 높이려면 CloudFront를 S3 앞단에 배치하여 CDN으로 사용하세요. 전 세계 엣지 로케이션에서 캐싱되어 재생 속도가 크게 향상됩니다.

💡 영상 업로드 전에 파일 크기 제한을 두세요. 무제한으로 허용하면 저장 비용이 폭증하고 서비스가 느려질 수 있습니다. 일반적으로 소셜 미디어는 100MB-1GB 정도로 제한합니다.

7. 미디어 재생 기능

시작하며

여러분이 S3에 저장된 음성이나 영상 파일을 사용자에게 보여주려 할 때, 단순히 URL만 제공하면 될까요? 실제로는 재생 상태 관리, 진행률 표시, 자동 재생, 에러 처리 등 많은 것들을 고려해야 합니다.

이런 문제는 사용자 경험(UX)에 직접적인 영향을 미칩니다. 재생이 느리거나 끊기면 사용자들은 서비스를 떠나고, 모바일 데이터를 과도하게 소비하면 불만이 생기며, 재생 오류가 발생해도 아무런 안내가 없으면 혼란스러워합니다.

바로 이럴 때 필요한 것이 체계적인 미디어 재생 시스템입니다. S3의 Presigned URL과 HTML5 미디어 API를 결합하면, 유튜브나 스포티파이 같은 전문적인 재생 경험을 제공할 수 있습니다.

개요

간단히 말해서, 미디어 재생 기능은 S3에 저장된 오디오나 비디오 파일을 사용자가 원활하게 재생할 수 있게 하는 시스템입니다. 음악 스트리밍 앱이나 동영상 플랫폼처럼, 재생/일시정지, 탐색, 볼륨 조절 등의 기능을 제공하는 것입니다.

실무에서는 모든 미디어 관련 서비스에서 필수적입니다. 예를 들어, 팟캐스트 앱에서 에피소드를 듣게 하거나, 온라인 강의 플랫폼에서 강의 영상을 보게 하거나, 음악 스트리밍 서비스에서 노래를 재생하거나, 메신저에서 음성/영상 메시지를 보게 하는 경우에 매우 유용합니다.

기존에는 파일을 다운로드한 후 재생했다면, 이제는 스트리밍 방식으로 즉시 재생을 시작하고 필요한 부분만 가져와서 효율적으로 처리할 수 있습니다. 미디어 재생 기능의 핵심 특징은 첫째, 스트리밍으로 빠른 시작이 가능합니다.

둘째, 적응형 비트레이트로 네트워크 상태에 맞춰 품질을 조절할 수 있습니다. 셋째, 이어듣기 같은 고급 기능을 구현할 수 있습니다.

이러한 특징들이 프로페셔널한 미디어 서비스를 만들어줍니다.

코드 예제

// React 컴포넌트 예제
import { useState, useRef, useEffect } from "react";

function MediaPlayer({ mediaUrl, mediaType }) {
  const [playing, setPlaying] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const mediaRef = useRef(null);

  // 재생/일시정지 토글
  const togglePlay = () => {
    if (playing) {
      mediaRef.current.pause();
    } else {
      mediaRef.current.play();
    }
    setPlaying(!playing);
  };

  // 진행률 업데이트
  const handleTimeUpdate = () => {
    const current = mediaRef.current.currentTime;
    const total = mediaRef.current.duration;
    setProgress((current / total) * 100);
  };

  // 메타데이터 로드 시 duration 설정
  const handleLoadedMetadata = () => {
    setDuration(mediaRef.current.duration);
  };

  // 특정 시점으로 이동
  const seekTo = (percentage) => {
    const time = (percentage / 100) * duration;
    mediaRef.current.currentTime = time;
  };

  return (
    <div className="media-player">
      {mediaType === "video" ? (
        <video
          ref={mediaRef}
          src={mediaUrl}
          onTimeUpdate={handleTimeUpdate}
          onLoadedMetadata={handleLoadedMetadata}
        />
      ) : (
        <audio
          ref={mediaRef}
          src={mediaUrl}
          onTimeUpdate={handleTimeUpdate}
          onLoadedMetadata={handleLoadedMetadata}
        />
      )}

      <button onClick={togglePlay}>
        {playing ? "일시정지" : "재생"}
      </button>

      <div className="progress-bar" onClick={(e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        const percentage = ((e.clientX - rect.left) / rect.width) * 100;
        seekTo(percentage);
      }}>
        <div style={{ width: `${progress}%` }} />
      </div>
    </div>
  );
}

설명

이것이 하는 일: S3의 Presigned URL을 받아서 HTML5 미디어 요소로 재생하고, 재생 상태, 진행률, 재생 시간 등을 관리하는 완전한 미디어 플레이어를 만듭니다. 마치 유튜브 플레이어처럼, 사용자가 재생을 제어하고 진행 상황을 볼 수 있게 합니다.

첫 번째로, mediaRef를 사용하여 실제 HTML <video> 또는 <audio> 요소에 접근합니다. React의 useRef 훅을 사용하면 DOM 요소를 직접 제어할 수 있습니다.

mediaType에 따라 비디오 또는 오디오 요소를 렌더링하여 다양한 미디어 타입을 하나의 컴포넌트로 처리합니다. 그 다음으로, 이벤트 핸들러들이 미디어 재생 상태를 추적합니다.

handleTimeUpdate는 재생이 진행될 때마다 호출되어 현재 재생 위치를 업데이트합니다. handleLoadedMetadata는 미디어 파일의 메타데이터가 로드되면 호출되어 전체 재생 시간을 가져옵니다.

이 정보들로 진행률 바를 표시하고 "3:45 / 10:20" 같은 시간 정보를 보여줄 수 있습니다. togglePlay 함수는 재생과 일시정지를 전환합니다.

mediaRef.current.play()와 pause()는 HTML5 미디어 API의 표준 메서드로, 모든 브라우저에서 동작합니다. 상태를 함께 업데이트하여 버튼 텍스트가 "재생"과 "일시정지" 사이에서 변경됩니다.

마지막으로, seekTo 함수가 사용자가 진행률 바를 클릭했을 때 해당 시점으로 이동합니다. 클릭 위치를 백분율로 계산하고, 이를 실제 시간으로 변환하여 currentTime을 설정합니다.

이렇게 하면 유튜브처럼 원하는 시점으로 바로 이동할 수 있습니다. 여러분이 이 코드를 사용하면 스포티파이나 유튜브 같은 전문적인 미디어 재생 경험을 제공할 수 있습니다.

S3에서 파일을 스트리밍하므로 전체 파일을 다운로드하지 않아도 즉시 재생이 시작되고, 사용자는 원하는 대로 재생을 제어할 수 있습니다. 모바일 기기에서도 원활하게 작동합니다.

실전 팁

💡 자동 재생은 대부분의 브라우저에서 차단됩니다. 사용자 인터랙션(클릭, 터치) 후에만 재생을 시작하도록 구현하세요.

💡 버퍼링 이벤트를 처리하여 로딩 인디케이터를 보여주세요. waiting 이벤트는 버퍼링이 시작될 때, canplay 이벤트는 재생 가능할 때 발생합니다.

💡 에러 처리를 반드시 추가하세요. error 이벤트를 리스닝하여 네트워크 오류, 지원하지 않는 포맷 등의 문제를 사용자에게 알려주세요.

💡 모바일에서는 Picture-in-Picture 모드를 지원하세요. 사용자가 다른 앱을 사용하면서도 영상을 볼 수 있어 편리합니다.

💡 재생 위치를 localStorage에 저장하여 이어보기/이어듣기 기능을 구현하세요. 사용자가 나중에 돌아왔을 때 마지막 위치부터 계속 재생할 수 있습니다.

#AWS#S3#Media#Presigned URL#File Upload#AWS,S3,Media

이 카드뉴스가 포함된 코스

Fastify + Socket.io 실시간 메신저 완벽 구현

Fastify와 Socket.io를 활용하여 개인 채팅, 그룹 채팅, 파일 전송, 읽음 표시, 타이핑 인디케이터 등 실제 메신저의 모든 기능을 단계별로 구현하는 실전 프로젝트 코스입니다.

intermediate20개 카드뉴스약 25시간

댓글 (0)

댓글을 작성하려면 로그인이 필요합니다.

함께 보면 좋은 카드 뉴스

Docker 배포와 CI/CD 완벽 가이드

Docker를 활용한 컨테이너 배포부터 GitHub Actions를 이용한 자동화 파이프라인까지, 초급 개발자도 쉽게 따라할 수 있는 실전 배포 가이드입니다. AWS EC2에 애플리케이션을 배포하고 SSL 인증서까지 적용하는 전 과정을 다룹니다.

보안 강화 및 테스트 완벽 가이드

웹 애플리케이션의 보안 취약점을 방어하고 안정적인 서비스를 제공하기 위한 실전 보안 기법과 테스트 전략을 다룹니다. XSS, CSRF부터 DDoS 방어, Rate Limiting까지 실무에서 바로 적용 가능한 보안 솔루션을 제공합니다.

Redis 캐싱과 Socket.io 클러스터링 완벽 가이드

실시간 채팅 서비스의 성능을 획기적으로 향상시키는 Redis 캐싱 전략과 Socket.io 클러스터링 방법을 배워봅니다. 다중 서버 환경에서도 안정적으로 작동하는 실시간 애플리케이션을 구축하는 방법을 단계별로 알아봅니다.

반응형 디자인 및 UX 최적화 완벽 가이드

모바일부터 데스크톱까지 완벽하게 대응하는 반응형 웹 디자인과 사용자 경험을 개선하는 실전 기법을 학습합니다. Tailwind CSS를 활용한 빠른 개발부터 다크모드, 무한 스크롤, 스켈레톤 로딩까지 최신 UX 패턴을 실무에 바로 적용할 수 있습니다.

React 채팅 UI 구현 완벽 가이드

실시간 채팅 애플리케이션의 UI를 React로 구현하는 방법을 다룹니다. Socket.io 연동부터 컴포넌트 설계, 상태 관리까지 실무에 바로 적용할 수 있는 내용을 담았습니다.