# 앱 로딩 아이콘 변경하기

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EC%95%B1%EB%A1%9C%EB%94%A9%EC%95%84%EC%9D%B4%EC%BD%98%EC%A0%9C%EB%AA%A9.png)

**앱제작 응용TIP) 앱 로딩아이콘 변경방법 안내**

<mark style="background-color:blue;">**▶**</mark>**&#x20;로딩 아이콘이란?**

앱 내에서 작업이 실행되기 전, 즉 실행할 프로그램을 준비하는 단계를 로딩이라고 하구요.

로딩이 되는 동안 표시 되는 이미지가 로딩 아이콘이에요.

<div align="left"><img src="https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/3033619efc6c659b91c2d59584fb0b56.png" alt=""></div>

**↑↑위의 이미지처럼 로딩이 되는 동안 회색 동그라미 아이콘이 돌아가게 됩니다.**

로딩 아이콘은 서버에서 자동으로 불러오는 기능이기 때문에 스윙 사용자분들이 특별히 작업하셔야 할 내용은 없어요.\
위의 이미지처럼 기본 로딩 아이콘이 제공됩니다\~^^\
그러나 로딩 아이콘 이미지를 좀 더 앱 스타일에 맞게 수정하고 싶으실 때가 있죠.\
따라서 매뉴얼을 통해서 기존의 로딩 아이콘 외에 다른 이미지를 넣어서 로딩 아이콘을 변경하는 방법을 알려드릴게요!!

***

### <mark style="color:blue;">**1. 로딩 아이콘 변경하기**</mark>

스윙투앱 홈페이지 로그인 후 앱제작V2로 이동합니다.

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%A1%9C%EB%94%A9%EC%95%84%EC%9D%B4%EC%BD%98%EB%B3%80%EA%B2%BD-NEW1.png)

1\) \[고급설정] 버튼 선택

2\) \[앱제작 설정]에 보시면 로딩아이콘 메뉴가 있습니다.

3\) 로딩 아이콘 \[EDIT] 버튼을 선택합니다.

4\) EDIT 창에서 설정값에 로딩 아이콘으로 사용할 이미지를 등록해주세요.

<mark style="color:red;">\*로딩 이미지는 사용자가 직접 제작하여 넣어주시구요.</mark>

<mark style="color:red;">\*가로,세로는 정사각형 비율로 작업해주시고, 크기는 500px 이상으로 작업해주세요.</mark>

<mark style="color:red;">\*GIF 이미지도 첨부 가능합니다.</mark>

5\) 이미지 첨부 후 \[업데이트 버튼]을 선택합니다.

6\)\[저장] 버튼 선택

7\)\[앱제작요청] 버튼을 선택합니다.

버전 업데이트 하시면 번경된 로딩 아이콘으로 반영이 됩니다.&#x20;

<mark style="color:purple;">\*고급설정 메뉴를 수정할 경우 저장만 하시면 안되구요!! 반드시 앱을 재제작해서 앱을 업데이트해주셔야 해요.</mark>

<mark style="color:purple;">\*그리고 고급설정 메뉴 수정시 가상머신에서는 수정된 내용이 반영되지 않으니 반드시 핸드폰에서 앱 실행 후 확인해주세요.</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/05/%EC%BA%A122.jpg)

<mark style="color:orange;">**1) 변경할 로딩 이미지1**</mark>

[![](https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/1b3a5629c91243948e7895c8db2ab03a.png)](https://blog.naver.com/PostView.nhn?blogId=swing2app\&logNo=221320836435\&redirect=Log\&widgetTypeCall=true\&topReferer=https%3A%2F%2Fblog.naver.com%2FPostSearchList.nhn%3FblogId%3Dswing2app%26categoryNo%3D0%26range%3Dall%26SearchText%3D%25EC%2595%25B1%2B%25EB%25A1%259C%25EB%2594%25A9%26x%3D0%26y%3D0\&directAccess=false#)

<mark style="color:orange;">**2) 변경할 로딩 이미지2(gif)**</mark><br>

[![](https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/310edd67b2021e30ce829f8de52ab7b0.png)](https://blog.naver.com/PostView.nhn?blogId=swing2app\&logNo=221320836435\&redirect=Log\&widgetTypeCall=true\&topReferer=https%3A%2F%2Fblog.naver.com%2FPostSearchList.nhn%3FblogId%3Dswing2app%26categoryNo%3D0%26range%3Dall%26SearchText%3D%25EC%2595%25B1%2B%25EB%25A1%259C%25EB%2594%25A9%26x%3D0%26y%3D0\&directAccess=false#)

위의 2가지 이미지로 반영할게요!

***

### <mark style="color:blue;">**2. 앱 실행화면 – 로딩 아이콘 확인하기**</mark>

&#x20;<mark style="color:orange;">**기존 로딩 아이콘**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%A1%9C%EB%94%A9%EC%95%84%EC%9D%B4%EC%BD%981.gif)

**위의 로딩 아이콘은&#x20;**<mark style="color:blue;">**스윙에서 기본 제공하는 로딩 아이콘**</mark>**&#x20;스타일이에요.**

![](https://wp.swing2app.co.kr/wp-content/uploads/2020/05/%EC%BA%A122.jpg)

<mark style="background-color:blue;">**▶**</mark><mark style="color:orange;">**앱 실행화면) 변경한 로딩 아이콘1**</mark>&#x20;

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/09/%EB%A1%9C%EB%94%A9%EC%95%84%EC%9D%B4%EC%BD%982.gif)

스윙 로고 이미지를 넣어서 변경한 로고 아이콘이구요.

\
\ <mark style="background-color:blue;">**▶**</mark><mark style="color:orange;">**앱 실행화면) 변경한 로딩 아이콘2**</mark>

<div align="left"><img src="https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/601469de8864b75d2dbd26ea66e11176.png" alt=""></div>

<mark style="color:blue;">**응용 ) GIF 이미지도 넣을 수 있어요!**</mark>

위에서 설명드린 것처럼 로딩아이콘은 gif 이미지도 넣을 수 있습니다.\
\
![](https://wp.swing2app.co.kr/wp-content/uploads/2020/05/%EC%BA%A122.jpg)

로딩아이콘은 변경하지 않아도 기본 셋팅되어 제공이 되기 때문에 그대로 사용하셔도 되구요.

앱에 어울리는 다른 로딩 아이콘 이미지를 넣어서 응용하여 제작이 가능하십니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.swing2app.co.kr/manual/tip/loadingicon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.