웹 파일 전송

시작하기

기본 개념

웹 서비스에서 안정적으로 파일을 업로드하고 다운로드하기

웹 서비스에서 문서, 이미지, 영상, 데이터와 같은 파일을 활용할 때는 사용자가 웹 화면에서 파일을 선택하고 필요한 위치로 전송할 수 있는 기능이 필요합니다.

웹 파일 전송은 웹 서비스에 파일 업로드와 다운로드 기능을 적용해, 사용자가 브라우저에서 파일을 선택하고 대용량 파일을 업무 시스템과 저장 위치 사이에 전송할 수 있도록 구성합니다.

예를 들어 사용자는 웹 서비스에서 대용량 영상 파일을 업로드하고, 업무에 필요한 결과 파일을 다운로드해 바로 활용할 수 있습니다.


웹 서비스와 파일 전송 기능을 연결하면 사용자는 익숙한 웹 화면에서 파일을 선택하고, 전송 과정은 설정된 전송 환경에 따라 처리할 수 있습니다.

전송 흐름

파일 선택부터 전송 완료까지 이어지는 과정 이해하기

웹 파일 전송은 사용자가 파일을 선택한 뒤 전송을 시작하고, 진행 상황을 확인하면서 완료된 파일을 다음 업무에서 활용하는 흐름으로 구성됩니다.

① 파일 선택

↓

② 전송 준비

↓

③ 파일 업로드 또는 다운로드

↓

④ 전송 진행 상태 확인

↓

⑤ 전송 완료

↓

⑥ 파일 활용

업로드에서는 사용자의 장비에서 선택한 파일이 지정된 업무 시스템이나 저장 위치로 전송됩니다.

다운로드에서는 업무 시스템에 준비된 파일을 사용자의 장비로 전송해 필요한 업무에 활용할 수 있습니다.

이 흐름을 통해 사용자는 웹 서비스에서 파일을 선택하고, 전송 상태를 확인한 뒤 완료된 파일을 바로 활용할 수 있습니다.

업무 변화

대용량 파일 전송을 더 빠르고 안정적으로 처리하기

대용량 파일을 웹 서비스에서 다룰 때는 파일 크기와 네트워크 환경에 따라 전송 시간이 길어질 수 있습니다.

웹 파일 전송 기능을 적용하면 대용량 파일을 업무 환경에 맞는 전송 방식으로 처리하고, 진행 상황과 결과를 웹 화면에서 확인할 수 있습니다.

적용 전과 후

웹 서비스에 파일 전송 기능을 적용하면 사용자는 파일 선택부터 완료 확인까지 하나의 화면 흐름에서 업무를 진행할 수 있습니다.

업무팀

업무팀은 웹에서 필요한 파일을 직접 업로드하고 다운로드하며, 전송이 완료된 파일을 바로 활용하는 과정에 집중합니다.

파일 업로드

웹에서 필요한 파일 바로 올리기

사용자는 웹 서비스의 파일 전송 화면에서 업무에 필요한 파일을 선택해 업로드할 수 있습니다.

파일을 선택하면 파일 이름과 크기를 확인하고 전송을 시작합니다. 여러 파일을 함께 선택해 한 번에 업로드하는 방식으로도 활용할 수 있습니다.

예를 들어 대용량 영상, 설계 파일, 업무 데이터, 문서를 웹 서비스에 업로드하면 지정된 업무 시스템이나 작업 공간에서 해당 파일을 확인하고 활용할 수 있습니다.

파일 다운로드

업무에 필요한 파일 바로 내려받기

웹 서비스에서 제공하는 파일은 필요한 업무 환경으로 다운로드할 수 있습니다.

사용자는 파일 목록에서 필요한 항목을 선택하고 다운로드를 시작합니다. 여러 파일을 선택해 함께 내려받는 방식으로도 구성할 수 있습니다.

다운로드가 완료되면 사용자는 받은 파일을 현재 업무 환경에서 확인하고 다음 작업에 활용할 수 있습니다.

전송 확인

진행 중인 파일과 완료 결과 확인하기

파일을 업로드하거나 다운로드하면 전송 화면에서 진행 상황을 확인할 수 있습니다.

파일별 진행률과 전체 전송 상태를 통해 현재 처리 중인 파일과 완료된 파일을 구분해 확인할 수 있습니다.


주요 확인 항목은 다음과 같습니다.

• 파일 이름

• 파일 크기

• 전송 진행률

• 전송 상태

• 완료 결과

사용자는 전송 상태를 확인한 뒤 완료된 파일을 기준으로 다음 업무를 진행할 수 있습니다.

파일 활용

전송된 파일을 다음 업무에 바로 활용하기

전송이 완료된 파일은 해당 업무의 다음 단계에서 사용할 수 있습니다.

예를 들어 사용자가 대용량 원본 파일을 업로드하면 처리 시스템에서 파일을 활용해 변환이나 분석 작업을 진행할 수 있습니다. 결과 파일이 준비되면 사용자는 웹 서비스에서 다운로드해 후속 업무를 이어갈 수 있습니다.

파일 업로드
    ↓  

업무 시스템 처리
    ↓  

결과 파일 준비
    ↓  

파일 다운로드
    ↓  

다음 업무 진행

이처럼 업무팀은 웹 서비스에서 파일을 직접 전송하고, 완료된 파일을 현재 업무와 다음 업무에 연결해 활용할 수 있습니다.

IT 엔지니어

IT 엔지니어는 웹 서비스와 파일 전송 환경을 연결하고, 전송 기능과 정책을 구성하며, 실행 결과를 운영하는 과정에 집중합니다.

장비 구성

웹 서비스와 파일 전송 장비 연결하기

웹 파일 전송 기능을 구성하려면 웹 서비스와 파일을 처리할 서버 또는 업무 시스템을 연결합니다.

웹 애플리케이션에서는 파일 전송 기능을 제공하고, 연결된 서버와 장비에서는 업로드된 파일을 수신하거나 다운로드할 파일을 제공합니다.

구성은 업무 환경에 따라 다음과 같이 확장할 수 있습니다.

Web Service
     │
     ▼
File Transfer
     │
 ┌───┴────┐
 ▼        ▼
Server   Storage
 │        │
 ▼        ▼
Processing  Workspace

웹 서비스와 전송 환경을 연결하면 파일 업로드와 다운로드를 업무 시스템의 파일 흐름과 연결할 수 있습니다.

전송 구성

업로드·다운로드와 파일 경로, 대상 위치 설정하기

웹 서비스에서 사용할 업로드와 다운로드 기능을 구성하고, 파일을 전송할 경로와 대상 위치를 설정합니다.

업로드 기능에서는 사용자가 전송한 파일이 저장될 위치를 지정하고, 다운로드 기능에서는 사용자에게 제공할 파일의 위치를 연결합니다.

주요 설정 항목은 다음과 같이 구성할 수 있습니다.

파일 전송 경로를 구성하면 웹 서비스와 업무 시스템 사이에 필요한 파일 흐름을 연결할 수 있습니다.

전송 정책

파일과 대상의 전송 기준 및 접근 범위 설정하기

전송 기능을 구성한 후에는 파일 처리 기준과 접근 범위를 설정합니다.

파일 크기, 확장자, 전송 대상, 저장 경로 등 업무 환경에 필요한 기준을 적용해 파일 전송 흐름을 구성할 수 있습니다.

주요 설정 영역은 다음과 같습니다.

이 기준을 적용하면 웹 서비스에서 사용하는 파일과 전송 환경을 업무 목적에 맞게 관리할 수 있습니다.

업무 연결

파일 전송 후 다음 업무까지 이어지도록 구성하기

파일 전송이 완료된 후에는 다음 작업을 연결해 하나의 업무 흐름으로 구성할 수 있습니다.

예를 들어 업로드된 파일을 처리 서버로 전송한 뒤 변환 작업을 실행하거나, 처리 완료 후 결과 파일을 지정된 작업 공간에 준비하고 사용자에게 알림을 전송하도록 구성할 수 있습니다.

전체 흐름은 다음과 같이 구성할 수 있습니다.

Web Upload
    ↓  

File Transfer
    ↓  

Processing
    ↓  

Result Storage
    ↓  

Notification
    ↓  

Web Download

외부 서비스와 연결하면 파일 전송 결과를 업무와 운영 환경으로 확장할 수 있습니다.

결과 확인

실행된 전송 작업과 처리 결과 확인하기

웹에서 파일 전송이 실행되면 Runs와 실행 기록을 통해 처리 결과를 확인할 수 있습니다.

운영자는 전체 전송 작업의 상태와 파일별 처리 결과를 확인하고, 전송 환경의 운영 상태를 관리할 수 있습니다.

주요 확인 항목은 다음과 같습니다.

업무팀이 현재 파일의 전송 상태를 확인하는 것과 달리, IT 엔지니어는 실행 기록을 기준으로 전송 작업 전체와 시스템별 처리 결과를 관리합니다.

장애 대응

전송 상태를 확인하고 필요한 작업 다시 처리하기

확인이 필요한 전송 작업이 발생하면 Runs와 Audit Log에서 실행 정보와 처리 과정을 확인합니다.

파일 전송 환경에서는 웹 서비스와 서버의 연결 상태, 파일 경로, 접근 권한, 대상 시스템의 상태 등을 기준으로 전송 과정을 확인할 수 있습니다.

확인 흐름은 다음과 같습니다.

전송 작업 확인
    ↓  

실행 상태 확인
    ↓  

상세 정보 확인
    ↓  

연결 · 경로 · 권한 확인
    ↓  

환경 조정
    ↓  

작업 재실행
    ↓  

새로운 Run 확인

확인이 완료되면 필요한 전송 작업을 다시 실행하고, 새로운 Run을 통해 파일 처리 결과를 확인할 수 있습니다.

이 구조에서는 업무팀이 웹에서 파일을 직접 전송하고 활용하는 흐름과 IT 엔지니어가 웹 파일 전송 환경을 구성하고 운영하는 흐름을 구분해 각 역할에 맞는 내용을 제공합니다.

개발자

코드 제너레이터로 만든 코드를 웹페이지에 붙여 전송 기능 연결하기

전송 컨트롤을 직접 작성하지 않습니다. 관리 화면에서 대상 장비와 폴더를 고르면 그 위치에 연결된 코드가 생성되고, 개발자는 그 코드를 웹페이지에 붙인 뒤 기존 업무 로직과 연결합니다.

코드 생성

장비 폴더를 선택해 전송 코드 만들기

Devices에서 파일을 주고받을 웹 서버를 선택하고 Browse를 클릭해 파일 탐색기를 엽니다.

탐색기에서 대상 폴더를 선택한 뒤 Generate 메뉴를 클릭합니다.

INNORIX Code Generator 화면에서 전송 방향을 선택합니다. 폴더를 선택한 경우 업로드가 기본으로 지정되어 있고, 다운로드 체크박스를 함께 선택할 수 있습니다.

파일을 선택한 경우에는 다운로드가 자동으로 지정됩니다. 여러 파일을 다중 선택해 한 번에 다운로드 코드를 만들 수도 있습니다.

Copy to Clipboard로 코드를 복사하거나 Download as File로 내려받습니다.

이 방식에서는 업로드를 받는 서버 스크립트를 따로 만들지 않습니다. 생성된 코드가 선택한 장비의 폴더에 직접 연결되고, 파일 수신은 해당 장비의 에이전트가 처리합니다.

생성 코드 구조

만들어진 코드의 구성 확인하기

생성된 코드는 컨트롤 생성 호출과 렌더 대상 지정으로 이뤄집니다.

<div id="file_control"></div>

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800,
    height: 400,
    agent: 'false',
    custom: {
      product: 'webpages',
      subproduct: 'codegenerator'
    }
  });

  config.el = '#file_control';
</script>

대상 폴더와 장비 정보는 코드 안에 함께 담겨 있습니다. 이 부분은 손대지 않습니다. 경로를 바꾸려면 코드를 수정하는 것이 아니라 관리 화면에서 다시 생성합니다.

el 값은 페이지의 요소 ID와 맞춰야 합니다. 한 페이지에 컨트롤을 둘 이상 두려면 요소 ID와 el 값을 서로 다르게 지정합니다.

웹페이지에 삽입

생성된 코드를 기존 페이지에 붙이기

복사한 코드를 컨트롤이 표시될 위치에 붙여 넣습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build File Upload</title>
    <link rel="stylesheet" href="./site.css">
    <script src="./innorix.js"></script>
</head>
<body>
    <h1>INNORIX Web-based Upload</h1>

    
    <div id="file_control"></div>

    <script>
      const config = create({
        TransferMode: 'upload',
        width: 800,
        height: 400,
        agent: 'false',
        custom: { product: 'webpages', subproduct: 'codegenerator' }
      });

      config.el = '#file_control';
    </script>
</body>
</html>

페이지를 열면 컨트롤이 표시되고 파일을 추가해 지정한 폴더로 바로 업로드할 수 있습니다.

기존 페이지에 붙일 때는 두 가지만 확인합니다. 컨트롤 자원 스크립트가 페이지에 포함되어 있는지, 그리고 el이 가리키는 요소가 실제로 존재하는지입니다.

다운로드 코드 연결

폴더와 파일 각각의 다운로드 코드 붙이기

폴더 다운로드는 폴더를 선택해 다운로드 체크박스를 지정하면 생성됩니다.

특정 파일만 내려받게 하려면 탐색기에서 파일을 선택합니다. 파일은 다운로드만 가능하므로 방향이 자동으로 지정됩니다.

생성된 코드는 업로드와 같은 형태이고 TransferMode만 다릅니다.

<div id="download_control"></div>

<script>
  const downloadConfig = create({
    TransferMode: 'download',
    width: 800,
    height: 400,
    agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  downloadConfig.el = '#download_control';
</script>

한 페이지에서 업로드와 다운로드를 함께 제공하려면 코드를 두 번 생성해 각각 붙입니다. 요소 ID와 el 값을 다르게 지정하는 것만 주의하면 됩니다.

<div id="upload_control"></div>
<div id="download_control"></div>

업무 정보 전달

전송과 함께 페이지의 입력값 넘기기

업로드 화면에는 파일 외에 담당자 이름이나 연락처 같은 입력이 함께 있는 경우가 많습니다.

이 값은 custom에 담아 전송과 함께 넘깁니다. 생성된 코드에 이미 들어 있는 항목은 그대로 두고 필요한 키만 추가합니다.

<input id="name" placeholder="John Doe">
<input id="contact" placeholder="+84 912 345 678">

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800,
    height: 400,
    agent: 'false',
    custom: {
      product: 'webpages',
      subproduct: 'codegenerator'
    }
  });

  config.el = '#file_control';

  document.querySelector('#uploadBtn').addEventListener('click', function () {
    // Values entered on the page are sent along with the transfer
    config.custom.uploader = document.querySelector('#name').value;
    config.custom.contact = document.querySelector('#contact').value;
  });
</script>

custom에 담은 값은 전송 이력에 함께 기록되므로, 나중에 어느 담당자가 올린 파일인지 확인할 수 있습니다.

이 값은 브라우저에서 만들어집니다. 권한 판단에는 쓰지 않고, 확실히 남겨야 하는 정보는 서버 세션과 대조해 기록합니다.

파일 정책 적용

받을 파일의 종류와 개수 제한하기

업로드 화면에서 받을 파일을 제한합니다.

const config = create({
  TransferMode: 'upload',
  width: 800,
  height: 400,
  agent: 'false',
  allowType: ['tar', '7z', 'rar', 'zip'],
  maxFileCount: 1,
  maxFileSize: 10737418240,
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#file_control';

컨트롤의 안내 문구도 지정한 조건에 맞춰 바뀝니다. 사용자가 파일을 고르기 전에 어떤 파일을 올릴 수 있는지 확인할 수 있습니다.

확장자 제한은 allowType으로 만듭니다. denyType은 새 확장자가 나올 때마다 목록을 늘려야 합니다.

여기서 거는 제한은 화면에서 잘못된 파일을 미리 걸러 주는 용도입니다. 반드시 지켜야 하는 기준이라면 IT 엔지니어 절의 전송 정책에서 함께 겁니다.

완료 처리

전송이 끝난 시점을 업무 로직으로 잇기

생성 설정에 콜백을 지정하면 준비와 완료 시점을 받을 수 있습니다.

const config = create({
  TransferMode: 'upload',
  width: 800,
  height: 400,
  agent: 'false',
  custom: { product: 'webpages', subproduct: 'codegenerator' },

  notifyReadyEvent: function () {
    // The control is ready; enable the submit button
    document.querySelector('#uploadBtn').disabled = false;
  },

  uploadCompletedEvent: function (result) {
    // Hand the finished upload over to the application
    fetch('/api/submissions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        uploader: document.querySelector('#name').value,
        files: result
      })
    });
  }
});

config.el = '#file_control';

컨트롤이 준비되기 전에는 전송 버튼을 비활성화해 두는 편이 좋습니다. 준비 콜백에서 활성화하면 사용자가 빈 컨트롤을 누르는 상황을 막을 수 있습니다.

완료 콜백은 브라우저에서 실행됩니다. 사용자가 창을 닫으면 호출되지 않으므로, 수십 GB 전송처럼 오래 걸리는 화면이라면 완료 기록을 여기에만 의존하지 않습니다. IT 엔지니어 절의 전송 이력으로 교차 확인하는 절차를 함께 둡니다.

코드 재생성과 관리

대상이 바뀌었을 때 코드 갱신하기

생성된 코드에는 장비와 폴더 정보가 담겨 있습니다. 다음 경우에는 코드를 수정하지 말고 관리 화면에서 다시 생성합니다.

방향과 대상은 재생성, 표시와 정책은 코드 수정으로 나눠 다루면 됩니다.

여러 페이지에서 같은 폴더를 쓴다면 생성한 코드를 공통 파일로 빼고 각 페이지에서 불러오는 편이 관리하기 쉽습니다. 폴더가 바뀌었을 때 한 곳만 고치면 됩니다.

<script src="./innorix-upload.js"></script>
<div id="file_control"></div>