# Image

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FsE4GtW2Hv3URoaCWEY15%2FImage.png?alt=media&#x26;token=b5284058-e476-491b-a89b-5046b8065b17" alt="" width="125"><figcaption></figcaption></figure>

## 컨트롤 설명

Image 컨트롤을 통해 다양한 이미지를 쉽게 표시하고 관리할 수 있습니다.

<div align="center"><figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FMpBq2vLrdLZz87tP3QJB%2Fimage_edit.gif?alt=media&#x26;token=03bc05a2-5e16-4913-a3f9-7ab647fde063" alt="" width="188"><figcaption><p>이미지 컨트롤 사용 예시</p></figcaption></figure></div>

## 디자인(Design) 모드

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FX2TeCgD9rrgk2rUWCRn4%2Fimage.png?alt=media&#x26;token=e9570e39-9e4b-444b-b93e-8d88ec5bb7c0" alt="" width="375"><figcaption><p>이미지 컨트롤 Design 속성 캡쳐</p></figcaption></figure>

### 디자인 속성

#### 이미지 여러개 보여주기

한 프레임 안에 이미지를 여러개 보여줄 때 선택합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FDMNXEKinHvv2wrLZCiM7%2Fimage.png?alt=media&#x26;token=342a1e8a-a8a0-4960-9187-03042def51eb" alt="" width="327"><figcaption></figcaption></figure>

#### 내 PC에서 업로드

컴퓨터에서 직접 이미지 파일을 업로드하거나 Freepik에서 제공하는 다양한 이미지를 활용합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FYgIq5eTSrPzXjspIrdmk%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-07-30%2016.00.13.png?alt=media&#x26;token=2dc72727-5ab2-41cc-97ac-5846d628549f" alt="" width="317"><figcaption></figcaption></figure>

<img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FV72XCyew04inG23QXBzr%2Fimage.png?alt=media&#x26;token=61a59a4d-1f1d-4390-8b74-419d6ab2f837" alt="" data-size="line"> 버튼을 누르면 내 PC에 있는 이미지를 업로드 할 수 있습니다.

<img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FU3ZBB393HirlAAagkByH%2Fimage.png?alt=media&#x26;token=5df54bbe-e5e4-4e04-a9e5-0f65da44afe2" alt="" data-size="line"> 버튼을 누르면 Freepik에서 제공하는 이미지를 업로드 할 수 있습니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FUeYyu6sH6uYCM7s7qen2%2Fimage.png?alt=media&#x26;token=b7a40a6d-5132-423b-b73a-ec8d9ee2cffd" alt=""><figcaption><p>Freepik 이미지 검색 팝업</p></figcaption></figure>

#### 이미지 보이기 설정

이미지 노출 시 채우기, 맞추기, 자르기 중 하나를 선택합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FbOYo6T3rBCXvKPKkkXcs%2Fimage.png?alt=media&#x26;token=34e42f92-215c-4da0-882e-342b814d9e08" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FZOQHJwVzuV65nyG3Op8x%2Fimage.png?alt=media&#x26;token=4f04353b-4bf9-4511-9013-a0a44dc00a58" alt=""><figcaption></figcaption></figure>

### 공통 디자인 속성

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="../../design-mode/control-name">컨트롤 명</a></td><td></td><td></td><td></td></tr><tr><td><a href="../../design-mode/width-height">너비 높이</a></td><td></td><td></td><td><a href="../../design-mode/width-height">width-height</a></td></tr><tr><td><a href="../../design-mode/background">배경</a></td><td></td><td></td><td><a href="../../design-mode/background">background</a></td></tr><tr><td><a href="../../design-mode/border">보더</a></td><td></td><td></td><td><a href="../../design-mode/border">border</a></td></tr><tr><td><a href="../../design-mode/margin">마진</a></td><td></td><td></td><td><a href="../../design-mode/margin">margin</a></td></tr><tr><td><a href="../../design-mode/padding">패딩</a></td><td></td><td></td><td><a href="../../design-mode/padding">padding</a></td></tr><tr><td><a href="../../design-mode/absolute-position">절대값 위치 설정</a></td><td></td><td></td><td><a href="../../design-mode/absolute-position">absolute-position</a></td></tr><tr><td><a href="../../design-mode/opacity">투명도 설정</a></td><td></td><td></td><td><a href="../../design-mode/opacity">opacity</a></td></tr></tbody></table>

## 개발(Dev) 모드

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FTPvhfdBGfn69hSpXAceL%2Fimage.png?alt=media&#x26;token=d8a63f90-ae9a-4da0-9475-a975753b6d92" alt="" width="563"><figcaption><p>이미지 컨트롤 Dev 속성 캡쳐</p></figcaption></figure>

### 이미지 컨트롤 유형 선택

이미지 컨트롤이 갖는 고유 속성들에 대한 자세한 설명을 다룹니다. 이미지 컨트롤 유형별 속성창이 달라 뷰 모드, 편집 모드로 나누어 설명합니다.

#### 뷰 모드

사용자에게 이미지를 보여주는 용도입니다. 이미지 업로드 등 편집 기능을 제공하지 않습니다.&#x20;

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F7FdbtndMnvzqQaE4UG9E%2Fimage.png?alt=media&#x26;token=af71659f-953f-4392-9b1c-092b91ceef73" alt=""><figcaption><p>이미지 컨트롤 뷰 모드 속성 캡쳐</p></figcaption></figure>

| 속성명                            | 설명                                                                             |
| ------------------------------ | ------------------------------------------------------------------------------ |
| 새 창으로 이미지 보기                   | 이미지 컨트롤 선택시 전체 화면으로 이미지를 확인할 수 있습니다. 핀치 제스처를 통해 부분 확대가 가능합니다.                  |
| [이미지 여러개 보여주기](#undefined-6)   | 이미지를 여러개 보여줄 수 있습니다. 속성 활성화시 \[이미지 보여줄 방법 정하기]  하위 속성이 다중 값을 입력받을 수 있도록 변경됩니다. |
| [이미지 보여줄 방법 정하기](#undefined-5) | 이미지 컨트롤과 원하는 이미지를 지정하는 방식을 정하고 하위속성을 통해 연결할 수 있습니다.                            |

#### 이미지 보여주기 방식

<table><thead><tr><th width="169">방법</th><th>설명</th></tr></thead><tbody><tr><td>내 PC에서 업로드</td><td>컴퓨터에서 직접 이미지 파일을 업로드하거나 Freepik에서 제공하는 다양한 이미지를 활용합니다.<br><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F6NihXhHe6VhC2MyesIvu%2Fimage.png?alt=media&#x26;token=def39684-0244-4c5a-a874-7b75833d2ebb" alt=""></td></tr><tr><td>URL</td><td>사용할 이미지가 있는 외부 URL을 입력합니다.<br><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FNd1bhnJQjsiHeq0xw4TB%2Fimage.png?alt=media&#x26;token=2fb66010-4a28-41fe-be1f-06cc269d2ddc" alt=""></td></tr><tr><td>FlexFile</td><td>플렉스튜디오에서 제공하는 파일 시스템을 활용합니다. FlexFile 사용시 파일 별로 발급되는 FileKey가 저장된 콜렉션키를 입력하고 공유범위를 지정합니다.<br><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FvkZrCmZ0hA8HHDGprkq7%2Fimage.png?alt=media&#x26;token=1eb81b1e-3424-4315-94cb-137847cd7076" alt="" data-size="original"></td></tr><tr><td>Base64</td><td>Base64 형식의 파일을 보여줍니다. 저장된 콜렉션키를 입력합니다.</td></tr><tr><td>Ksystem</td><td>Ksystem 형식으로 이미지를 보여줍니다. <a href="../../../reference/data-connection/k-system">연동이 필요합니다.</a></td></tr></tbody></table>

#### 이미지 여러개 보여주기 활성화

<table><thead><tr><th width="169">방법</th><th>설명</th></tr></thead><tbody><tr><td>내 PC에서 업로드</td><td>아래 이미지 추가 버튼을 클릭하여 여러 이미지를 업로드할 수 있습니다. 단, Freepik 사용은 불가능 합니다.<br><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FbWx49EIjyoriLsCLlJ3C%2Fimage.png?alt=media&#x26;token=6480a7a4-2fcb-4e36-8391-ef1d1ab7cd9f" alt=""></td></tr><tr><td>URL</td><td>데이터소스를 사용하여 여러 이미지 URL을 보여줄 수 있습니다. 콜렉션 키 프로퍼티에 원하는 URL이 정의된 키 값을 입력합니다.<br><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FYMHfbbNDtbWJjTE3oCgI%2Fimage.png?alt=media&#x26;token=ba1bd3ed-ea9d-483f-a627-046054891ecf" alt=""></td></tr><tr><td>FlexFile</td><td>데이터소스를 사용하여 여러 FlexFile을 이미지 컨트롤로 보여줄 수 있습니다. 콜렉션 키 프로퍼티에 FileKey가 정의된 키 값을 입력합니다. <br><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F9cliIz20Vo1nhi7wf90L%2Fimage.png?alt=media&#x26;token=b96c56d5-b23c-49f4-b2a4-c314b20b0343" alt=""></td></tr><tr><td>Base64</td><td><p>Base64 형식의 파일을 보여줍니다. 저장된 콜렉션키를 입력합니다. 데이터소스를 사용하여 여러 이미지를 보여줄 수 있습니다. <br></p><div><figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FC1CJ6fMEHueqRrXGN8c2%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-07-08%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.02.04.png?alt=media&#x26;token=91e13d4d-2734-4b2c-8970-96094dcd6210" alt="" width="305"><figcaption></figcaption></figure></div></td></tr><tr><td>Ksystem</td><td>Ksystem 형식으로 여러 이미지를 보여줍니다. <a href="../../../reference/data-connection/k-system">연동이 필요합니다.</a></td></tr></tbody></table>

#### 편집 모드

저장 방식은 Flexfile, Base64, KsystemFile을 지원합니다. KsystemFile의 경우 [별도의 연동이 필요](https://docs.flextudio.com/flextudio/reference/data-connection/k-system)합니다.

#### Flexfile

플렉스튜디오에서 제공하는 파일 시스템인 FlexFile을 활용하여 이미지 파일을 업로드할 수 있습니다. FlexFile을 사용하여 파일을 업로드하는 경우 발급받은 FileKey를 통해 뷰 모드에서 이미지를 보여줄 수 있습니다.

{% hint style="warning" %}
다중 업로드 기능은 제공하지 않습니다. 하나의 이미지 파일만 업로드 및 변경이 가능합니다.\
편집 모드에서는 업로드된 이미지를 클릭할 경우 새 창으로 이미지 보기의 부분 확대를 기본으로 동작합니다
{% endhint %}

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F7FEWx6RFdexxaEPhfblV%2Fimage.png?alt=media&#x26;token=6b0f0301-0200-47f8-810b-4efc129e2fd4" alt=""><figcaption><p>이미지 컨트롤 편집 모드 속성 캡쳐</p></figcaption></figure>

| 속성명                | 설명                                                                                                                                            |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| 기본 이미지 설정하기        | <p>사용자가 업로드한 이미지가 없는 경우 기본으로 보여줄 이미지를 지정합니다. 뷰모드 설정과 동일합니다. 단, 이미지 여러개 보여주기 기능은 제공되지 않습니다.</p><p><a href="#undefined-5">이미지 보여줄 방법 설명</a></p> |
| FileKey를 저장할 콜렉션키  | 발급받은 FileKey를 저장할 콜렉션키를 입력합니다.                                                                                                                |
| FileName을 저장할 콜렉션키 | FileName을 저장할 콜렉션키를 입력합니다.                                                                                                                    |
| 공유 범위 설정           | 파일 공유범위를 지정합니다.                                                                                                                               |
| 폴더 명               | 업로드한 파일을 저장할 폴더명을 입력합니다. 별도로 입력하지 않은 경우 images 폴더에 저장됩니다.                                                                                     |

#### Base64

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FhwG3vaSoln2YI3OSeS4V%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-07-08%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.54.22.png?alt=media&#x26;token=72b03df0-74ed-4041-af6b-eea6e3bd5fb7" alt=""><figcaption></figcaption></figure>

| 속성명               | 설명                             |
| ----------------- | ------------------------------ |
| FileKey를 저장할 콜렉션키 | 발급받은 FileKey를 저장할 콜렉션키를 입력합니다. |

#### KsystemFile

KsystemFile의 경우 [별도의 연동이 필요](https://docs.flextudio.com/flextudio/reference/data-connection/k-system)합니다.

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FXNdvmNudETT3EZimfPba%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-07-08%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.58.26.png?alt=media&#x26;token=1706c181-6663-4813-97f1-9798d7abff84" alt=""><figcaption></figcaption></figure>

| 속성명   | 설명                                 |
| ----- | ---------------------------------- |
| 콜렉션 키 | AttachFileSeq 값을 저장할 콜렉션 키를 입력합니다. |
| Const | ERP 시스템에 정의된 파일 const 정보를 입력합니다.   |

### 공통 개발 속성

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td><a href="../../dev-mode/component/status">컨트롤 상태</a></td><td></td></tr><tr><td></td><td><a href="../../../reference/voca/authkey">권한키</a></td><td></td></tr><tr><td></td><td><a href="../../dev-mode/component/loadscript">로드스크립트</a></td><td></td></tr></tbody></table>

### 참고

FlexFile에 대한 자세한 내용은 [FileUpload 컨트롤](https://docs.flextudio.com/flextudio/scenario/component/control/fileupload) 페이지를 참고하세요