본문 바로가기
버블 개발/중급

17. Bubble Files (중급) - 버블 파일, 사진 업로드, 삭제, 보호 규칙

by 스타트업 사업가 마르코 2023. 6. 20.
이 섹션에서는 Bubble에 업로드된 파일과 이미지를 처리하는 방법에 대해 다루게 됩니다.

 

(1) Bubble 파일, 이미지 업로드 built-in(내장된) 도구

:Bubble은 파일과 이미지를 업로드하고 저장하기 위해서 built-in(내장된) 도구를 제공합니다.

 

이 기능들은 다양한 요구 사항과 함께 제공되는 당신의 앱에서 중요한 부분이 될 수 있습니다.

 

예를 들어 기밀문서, 개인 파일 또는 직원 기록과 같이 다른 모든 데이터만큼 안전하게 파일을 보관해야 하는 경우도 있습니다.

이 글에서는 파일을 업로드/다운로드, 표시 및 삭제하는 방법과 개인 정보 보호 규칙으로 파일을 보호하는 방법을 살펴봅니다.

일부 외부 플러그인은 Bubble의 built-in(내장) 기능 및 여기에 설명된 방식과 다른 파일 업로드 및 파일 관리 방법을 제공할 수 있습니다.

 

(2) 플러그인에 대한 참고 사항

  • 일부 외부 플러그인은 Bubble의 built-in(내장) 기능 및 여기에 설명된 방식과 다른 파일 업로드 및 파일 관리 방법을 제공할 수 있습니다.
  • 플러그인을 사용하여 파일을 업로드 및 관리하는 경우 파일 저장, 변환 및 기타 외부 서비스에 대해서 플러그인의 공급사가 제공하는 설명서를 숙지하는 것이 좋습니다.
  • 특히, 이 문서에서 ‘파일 개인 정보 유지에 대한 지침’은 Bubble의 기본 파일 관리 기능과 관련이 있습니다.

 

(3) 업로드된 파일 처리 방법

:Bubble 데이터베이스에는 파일을 지원하는 두 가지 필드 타입(field type)인 file 및 image 가 있습니다.

 

이미지 및 파일 필드에는 업로드 된 이미지 및 기타 파일의 URL이 있습니다.
이미지 및 파일 필드에는 업로드 된 이미지 및 기타 파일의 URL이 있습니다.

 

1. 작동 방식

데이터베이스의 필드(field)에는 실제 파일이 포함되지 않고 다른 서버에 있는 해당 파일을 가리키는 URL만 포함됩니다.

*즉, 파일 및 이미지 필드 타입(field type)에는 파일의 URL이라는 짧은 텍스트 문자열(url 주소)만 포함됩니다.

 

2. 업로드시 단계

개발자 또는 사용자가 Bubble의 기본 제공 도구 중 하나를 사용하여 파일을 업로드하면 다음 단계를 거칩니다.

 

1) 파일이 파일 저장 서버에 업로드됩니다.

2) 해당 서버는 해당 파일에 도달하기 위한 URL 주소를 반환합니다.

4) 해당 URL은 workflow(워크플로)를 사용하여 데이터베이스에 저장할 수 있습니다.

 

3. 중요 사항

:다음 logic(로직)에는 몇 가지 중요한 사항이 있습니다.

 

1) 파일 크기는 데이터베이스 크기에 영향을 미치지 않습니다. 왜냐하면 데이터베이스에는 파일을 저장하지 않고 텍스트로 된 URL주소만 저장하기 때문입니다.

2) 데이터베이스의 해당 필드의 파일 내용을 삭제하면 파일이 아닌 URL만 삭제됩니다.

3) 파일은 Bubble의 CDN에 분산되어 있어 빠른 다운로드가 보장됩니다.

 

*CDN:CDN(Content Delivery Network)은 파일을 전 세계 여러 지리적 위치에 있는 서버에 저장하여 파일 로드 속도를 높입니다. 사용자가 파일을 요청하면 CDN이 자동으로 사용자의 위치와 가장 가까운 서버에서 파일을 제공하여 파일 이동 거리를 줄이고 로딩 시간을 단축합니다.

 

(4) 버블 에디터(editor)에서 파일 관리

 

1. 업로드

Bubble editor를 통해 업로드된 파일은 개인 정보 보호 규칙에 의해 보호되지 않습니다.

그러므로 공개용 파일만 업로드해야 합니다.

다음 두 가지 방법으로 파일을 Bubble 편집기에서 직접 업로드할 수 있습니다.

 

1) File manager (파일 관리자)

  • 메인 패널의 좌측 메뉴 중 data - file manager(데이터 - 파일 관리자)로 이동하면 업로드된 모든 파일을 보고 검색할 수 있습니다. 파일을 업로드하려면 오른쪽 상단에 있는 업로드 버튼을 클릭합니다.
  • 파일 관리자를 사용하면 파일을 업데이트할 수 있습니다. 파일을 보려면 file name을 클릭하십시오.
  • 파일 관리자의 파일은 개발자 모드(Development) 혹은 Live에 가기 다르게 저장됩니다. 오른쪽 상단 모서리에 있는 링크(switch to live database)를 클릭하여 두 모드(mode) 사이를 전환합니다.

파일 관리자를 사용하여 업로드
파일 관리자를 사용하여 업로드

 

2) Database manager (데이터베이스 관리자)

  • 파일 또는 이미지 필드가 있는 데이터베이스를 편집할 때 직접 해당 DB field(필드)에 직접 파일을 업로드할 수 있습니다.
  • 파일이 업로드되고 URL이 데이터베이스 항목에 연결됩니다.

 

2. 파일 삭제

버블 editor(편집기)에서 파일 삭제는 데이터 파일 관리자(data - file manager)로 이동하여 수행됩니다. 목록의 체크박스로 삭제할 파일을 선택한 후 우측 상단의 삭제 버튼을 클릭합니다.

 

저장된 파일들은 개발자 모드(Development)와 Live가 별개라는 점을 명심하십시오.
  • 또한 데이터베이스 editor(편집기)에서 데이터베이스를 직접 편집하고 삭제 링크를 클릭하여 파일을 제거하면 해당 db 필드(field)에 저장된 URL만 제거되고 파일은 삭제되지 않습니다.
  • 그러므로 파일 자체를 삭제하려면 data-file manager에 해당 파일을 선택하여 삭제를 해주어야 합니다.

CLEAR 를 눌러서 파일 삭제
CLEAR 를 눌러서 파일 삭제

 

(5) 앱에서 파일 관리

1. 업로드

앱에서 사용자가 파일을 업로드할 수 있도록 하려면 다음 두 가지 Bubble-native element 중에서 선택할 수 있습니다.

 

1) 파일 업로더

2) 이미지 업로더

 

2. 차이점

위의 두 가지 element는 파일을 업로드하고 해당 URL을 데이터베이스에 저장하는 것은 같지만 각각 설정에서 몇 가지 주요 차이점을 제공합니다.

 

1) 이미지 업로더

  • 이미지 미리 보기 제공
  • 이미지 형식 허용
  • 이미지가 800 x 600픽셀보다 큰 경우 check(확인란)를 선택하여 이미지 크기를 이 크기로 조정할 수 있습니다.

 

2) 파일 업로더

  • 파일 이름을 표시하고 사용자가 클릭 한 번으로 파일을 다운로드할 수 있도록 합니다.
  • 모든 파일 형식 허용
  • 최대 파일 크기를 메가바이트 단위로 설정할 수 있습니다.

 

3. 참고사항

  • 보통의 경우 두 element 모두 표준 운영 체제 파일 선택기를 엽니다.
  • 사용자가 파일을 업로드하면 즉시 파일 저장 서버에 업로드됩니다. 즉, 파일이 업로드되자마자 아직 데이터베이스에 URL을 저장하지 않았더라도 URL이 있는 모든 사람이 볼 수 있는 라이브 URL이 기술적으로 포함됩니다.
  • 파일을 비공개로 유지하려면 아래 파일에 개인 정보 보호 규칙을 사용하는 방법을 참조하세요.

 

4. 데이터베이스에 URL 저장

  • 파일이 element 중 하나에 업로드된 후 해당 값은 이미지의 URL을 반환합니다. 그런 다음 워크플로우를 사용하여 관련 데이터 유형의 field(필드)에 URL을 저장해야 합니다.
  • 파일을 업로드한 후 사용자의 필드에 URL을 저장해야 합니다.

.

파일을 업로드 한 후 사용자의 필드에 URL을 지어해야 합니다.
파일을 업로드 한 후 사용자의 필드에 URL을 지어해야 합니다.

 

5. 비공개 파일 업로드

  • 개인 파일은 데이터베이스 레코드에 바인딩되며 해당 데이터 type(유형)과 개인 정보 규칙을 공유합니다. 예를 들어 사용자가 사용자에게 프로필 사진을 업로드하면 해당 이미지 파일은 사용자 데이터 유형에 설정된 개인 정보 보호 규칙에 따라 보호됩니다.
  • 파일을 비공개로 유지하려면 몇 가지 추가 설정이 필요합니다.

 

6. 비공개로 설정

파일을 비공개로 설정하려면 먼저 업로더 요소의 일부 설정을 변경해야 합니다.

 

1) 먼저 이 파일을 비공개로 설정 확인란을 선택합니다.

2) 파일을 첨부할 데이터베이스 항목을 지정할 수 있는 동적 필드가 표시됩니다. 이 예에서는 현재 사용자를 설정했습니다.

 

  • 이 두 단계는 파일이 비공개 파일로 업로드되도록 합니다.
  • 그런 다음 사용자 데이터 type(유형)에 대한 개인 정보 보호 규칙을 확인하여 액세스 권한이 있는 사용자를 제어해야 합니다.

7. 개인 정보 보호 규칙

이 문서의 시작 부분에서 우리는 파일 업로드가 기본적으로 파일 자체와 해당 URL의 두 부분으로 구성된다는 것을 다루었습니다. 이는 개인 정보 보호 규칙을 설정할 때 유용하고 중요해집니다.

 

*파일의 프라이버시에 영향을 미치는 두 가지 설정이 있습니다.
  1. 파일이 저장된 field(필드) ( 모든 필드 보기 가 선택 취소된 경우 표시됨) 이 설정은 URL이 저장된 field(필드)를 숨깁니다. 즉, 액세스 권한이 없는 사용자는 URL을 볼 수 없지만 다른 곳에서 URL을 얻으려면(예: 액세스 권한이 있는 다른 사용자가 공유) URL을 통해 파일에 액세스 할 수 있습니다.
  2. 첨부파일 보기
  • 이 설정은 파일을 볼 수 있는 권한이 없는 모든 사용자가 파일 자체를 사용할 수 없도록 합니다. URL이 있더라도 파일을 보려고 하면 오류 메시지가 표시됩니다.
  • 첫 번째 설정만으로는 파일을 안전하게 저장할 수 있는 방법이 아니라는 점에 유의해야 합니다. 공개적으로 사용할 수 있기 때문에 URL이 있으면 누구나 볼 수 있습니다. 즉, 데이터가 난수화 지만 보안에는 안전하지 않습니다.
  • 두 번째 설정( 첨부 파일 보기 )으로 설정해야만 승인되지 않은 사용자가 액세스 할 수 없음을 확실히 알 수 있습니다.

 

8. 파일 삭제

  • 데이터 유형에서 단순히 파일 또는 이미지 필드를 지우면 데이터베이스에서 파일의 URL만 제거됩니다. 공간을 확보하기 위해 파일을 삭제하려면 더 이상 온라인에서 사용할 수 없는지 확인하고 특정 작업을 설정해야 합니다.
  • 업로드된 파일 삭제 작업은 해당 URL을 사용하여 지정한 파일을 삭제합니다. 위의 예에서는 image 유형인 현재 사용자의 프로필 이미지의 작업을 지정하여 사용자의 프로필 사진을 삭제하고 있습니다.

  • 파일이 삭제된 경우 빈 값을 반환하도록 하기 위해 데이터베이스를 변경하고 나중에 파일 또는 이미지 field(필드)에서 파일의 URL을 지우는 추가 단계를 포함해야 한다는 것은 아닙니다.