> For the complete documentation index, see [llms.txt](https://documentation.swing2app.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.swing2app.co.kr/manual/tip/loadingicon.md).

# 앱 로딩 아이콘 변경하기

![](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)

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

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