앱에 파일 업로드를 추가하는 방법: 스토리지, 제한, 보안

앱에 파일 업로드를 추가하려면 파일을 오브젝트 스토리지(버킷)에 저장하고, 서버 디스크나 데이터베이스에는 두지 마세요. 그리고 데이터베이스에는 파일의 키, 이름, 크기, 형식, 소유자를 담은 작은 레코드를 저장하세요. 파일 크기와 형식은 서버에서 확인하고, 파일이 공개용인지(제품 사진처럼) 비공개인지(청구서처럼) 미리 정하세요. 비공개 파일은 요청한 사람이 누구인지 확인한 뒤에만 제공하세요. AI 앱 빌더에서는 업로드 기능을 프롬프트 하나로 설명할 수 있어요. 중요한 것은 재배포 후에도 파일이 남아 있고, 잘못된 사람이 파일을 열 수 없는지 테스트하는 거예요.

어떤 업로드가 필요한지 정하기

만들기 전에 세 가지 질문에 답하세요:

1. 어떤 파일인가요? 프로필 사진, 제품 이미지, PDF, 스프레드시트, 오디오, 비디오. 이것이 형식과 크기 제한을 결정해요.
2. 누가 볼 수 있나요? 모두(공개 갤러리) 또는 업로드한 사람과 관리자만(계약서, 신분증, 고객 파일).
3. 업로드 후에는 무엇을 하나요? 그냥 저장하나요, 미리보기를 보여 주나요, 이미지 크기를 바꾸나요, 내용을 읽나요?

공개 이미지와 비공개 문서는 서로 다른 설정이 필요하므로, 이것부터 먼저 정하세요.

파일을 어디에 둘까

대부분의 앱에는 오브젝트 스토리지와 데이터베이스 레코드를 함께 쓰는 것이 맞는 답이에요. 앱이 조회하는 것은 데이터베이스 행("이 사용자의 문서 보기")이고, 버킷은 실제 바이트를 보관할 뿐이에요.

공개 파일과 비공개 파일

• 공개 파일(제품 사진, 블로그 이미지, 아바타)은 공개 URL로 제공할 수 있어요. 링크를 가진 누구나 열 수 있는데, 이런 콘텐츠에는 괜찮아요.
• 비공개 파일(청구서, 계약서, 의료나 신분 관련 문서, 고객 산출물)은 추측 가능한 공개 URL이 있어서는 안 돼요. 서버가 로그인한 사용자가 파일을 소유하거나 권한이 있는지 확인한 뒤, 파일을 스트리밍해 주거나 짧은 시간만 유효한 서명된 URL을 반환해야 해요.

흔하면서도 심각한 버그는 비공개 파일을 예측 가능한 이름으로 공개 버킷에 두는 거예요. /uploads/invoice-102.pdf를 추측할 수 있으면 누군가의 청구서를 볼 수 있어요.

프롬프트 예시

공개 이미지 업로드:

관리자가 제품마다 최대 5장의 제품 사진을 업로드할 수 있게 해 줘. 각 파일은 JPG, PNG, WebP를 허용하고 최대 5MB까지야. 파일은 파일 스토리지에 저장하고, 각 파일의 키, 크기, 순서를 product_images 테이블에 저장해. 썸네일과 삭제 버튼을 보여 줘. 형식과 크기는 브라우저만이 아니라 서버에서도 검증해 줘.

비공개 문서 업로드:

로그인한 고객용 문서 페이지를 추가해 줘. 고객은 최대 20MB의 PDF를 업로드할 수 있어. 파일은 비공개야. 파일 스토리지에 저장하고, 소유자 ID, 원래 파일 이름, 크기, 업로드 시각을 documents 테이블에 저장해. 소유자와 관리자만 다운로드할 수 있어. 다운로드는 권한을 확인하는 서버 라우트를 거치게 해 줘. 이 파일들에 공개 URL을 절대 노출하지 마.

유용한 후속 요청:

업로드 중에는 진행률 막대를 보여 주고, 파일이 너무 크거나 형식이 잘못되면 명확한 오류를 보여 줘.

문서 행을 삭제하면 저장된 파일도 함께 삭제해 줘.

단계별 진행

1. 업로드 필드마다 형식과 크기 제한을 정하세요. "문서"가 아니라 "최대 20MB의 PDF"처럼 구체적으로요.
2. 스토리지를 활성화하세요. AI 빌더에서는 업로드를 요청하면 스토리지를 설정해 줘요. 그 밖의 환경에서는 버킷을 만들고 자격 증명을 서버 측 시크릿으로 추가하세요.
3. 파일 레코드용 데이터베이스 테이블을 만드세요: ID, 소유자, 스토리지 키, 원본 이름, 형식, 크기, 생성 시각.
4. 서버에서 업로드 라우트를 만드세요. 사용자가 로그인했는지 확인하고, 형식과 크기를 검사하고, 사용자의 파일 이름이 아니라 안전한 스토리지 키를 생성하고, 파일을 저장하고, 레코드를 삽입하세요.
5. 다운로드나 표시 경로를 만드세요. 공개 파일은 공개 URL로, 비공개 파일은 권한을 확인하는 라우트나 서명된 URL로 제공하세요.
6. UI를 만드세요. 파일 선택, 필요하면 드래그 앤 드롭, 진행 상태, 미리보기, 오류 표시.
7. 삭제를 처리하세요. 레코드를 지우면 저장된 파일도 지워지게 하세요.
8. 테스트하세요. 업로드하고, 새로고침하고, 재배포하거나 공개한 뒤 파일이 여전히 열리는지 확인하세요. 그다음 다른 사용자로 로그인해서 첫 번째 사용자의 비공개 파일을 열어 보려고 시도하세요.

흔한 실수

• 서버 디스크에 업로드 쓰기. 개발 환경에서는 동작하지만, 재시작이나 재배포 후 파일이 사라져요.
• 브라우저 검사를 믿기. 파일 입력의 "accept" 설정은 힌트일 뿐 보안이 아니에요. 형식과 크기는 서버에서 확인하세요.
• 사용자의 파일 이름을 스토리지 키로 사용하기. 이름이 충돌하거나 이상한 문자를 포함할 수 있어요. 고유한 키를 생성하고 원본 이름은 따로 저장하세요.
• 비공개 파일을 공개 버킷에 두기. 위에서 설명한 것으로, 뉴스에 나올 만한 종류의 사고예요.
• 모든 파일 형식 허용. HTML이나 SVG 파일은 일부 설정에서 여러분의 도메인에서 스크립트를 실행할 수 있어요. 필요한 형식만 허용하세요.
• 크기 제한 없음. 거대한 업로드 하나가 스토리지 할당량을 다 쓰거나 요청을 시간 초과시킬 수 있어요.
• 고아 파일. 데이터베이스 행만 지우고 파일은 두면, 비용을 내는 스토리지가 천천히 쌓여요.
• 모바일을 잊음. 휴대폰 사진은 용량이 크고 HEIC 같은 형식일 수 있어요. 받을지 변환할지 정하세요.

체크리스트

• 파일은 서버 디스크나 데이터베이스가 아니라 오브젝트 스토리지에 저장돼요
• 각 파일은 소유자, 키, 이름, 형식, 크기를 담은 데이터베이스 레코드를 가져요
• 형식과 크기는 서버에서 확인해요
• 스토리지 키는 파일 이름에서 가져오지 않고 생성해요
• 비공개 파일은 권한 확인 후에만 제공돼요
• 다른 사용자는 링크가 있어도 여러분의 비공개 파일을 열 수 없어요
• 레코드를 삭제하면 파일도 삭제돼요
• 공개하거나 재배포한 뒤에도 파일이 여전히 로드돼요
• 업로드 오류가 명확하게 보이며 휴대폰에서도 마찬가지예요

Mythex에서 파일 업로드

Mythex는 앱에 업로드가 필요할 때 프로젝트의 파일 스토리지를 자동으로 활성화할 수 있어요. 버킷을 직접 만들 필요가 없어요. 채팅에서 /storage를 입력할 수도 있어요. Free와 Pro에서 사용할 수 있고, Free는 1GB 한도가 있으며, 상태는 설정 → 스토리지에서 확인할 수 있어요.

문서에서 명확히 말하듯, 공개된 호스팅은 지속적인 로컬 파일 시스템이 아니므로, 디스크에 저장하지 말고 플랫폼 스토리지를 쓰도록 에이전트에게 요청하세요. 저장된 파일과 다운로드는 크기와 다운로드된 양에 따라 크레딧 잔액에서 차감돼요. Pro는 Free 요율의 절반을 내요. 자세한 내용은 문서의 파일 스토리지를 참고하세요.

업로드는 보통 파일 레코드를 위한 데이터베이스와, 비공개 파일을 위한 로그인과 함께 쓰여요. 고객끼리 문서를 주고받는 곳을 만든다면 고객 포털 만드는 방법을 보고, 출시 전에는 AI로 만든 앱을 위한 보안 체크리스트를 한 번 거치세요.

자주 묻는 질문