thumbnail

로딩

로딩 스피너는 시스템이 데이터를 불러오는 동안 사용자가 '진행중임'을 인식하도록 도와줍니다.

나쵸코드2025-11-05

1단계) 앱 디자인 > 로딩 클릭

2단계) 로딩 스피너 타입 선택

무료 혹은 베이직 플랜의 경우, OS 기본 타입만 제공됩니다.

단, OS 기본은 OS별 로딩 모양이 상이합니다. 우측 화면 미리보기 패널에서 확인할 수 있습니다.

비즈니스 플랜의 경우, 여러 타입과 직접 올리기가 제공됩니다.

OS 기본 타입과 달리 색상 외에도 개수, 속도, 애니메이션 조절이 가능하며, 직접 올리기로 다양한 커스텀이 가능합니다.

3단계) 로딩 스피너 색상 변경

직접 올리기를 통해 파일을 업로드할 시에는 색상 변경이 불가합니다.

4단계) 로딩 스피너 세부 설정 변경

색상뿐만 아니라 개수, 속도, 애니메이션을 조절해 다양한 로딩을 만들 수 있습니다.

5단계) 로딩 스피너 배경 토글 클릭

로딩 스피너의 배경(딤 dim)을 설정할 수 있습니다.

6단계) 로딩 스피너 배경의 색상과 투명도 변경

로딩 스피너의 배경 색상과 투명도를 자유롭게 조절합니다.

7단계) 로딩 스피너 배경 터치 막기 설정

로딩 스피너의 배경 터치 막기 기능은 켜두는 것을 권장합니다.

로딩중 예기치 않은 사용자의 입력, 오동작을 예방하기 위해 배경 터치 막기는 항시 켜두는 것을 권장드립니다.

8단계) 우측 화면 미리보기 패널에서 로딩 스피너 확인

설정한 로딩 스피너는 우측 미리보기 패널의 Android 및 iOS 목업에서 확인할 수 있습니다. 단, 실제 구현 화면과는 차이가 있을 수 있습니다.

9단계) [저장하기] 버튼 클릭

10단계) 로딩 스피너 설정 완료!

로딩 스피너 설정을 저장한 후, 새로 앱을 빌드해야 변경 사항이 적용됩니다.

1단계) 앱 디자인 > 로딩 > 상단 프로그레스 바 토글 클릭

상단 프로그레스 바는 고정된 높이 2px로, 화면 상단 영역(Safe Area) 바로 아래 위치합니다.

2단계) [색상 버튼] 클릭

3단계) 상단 프로그레스 바 색상 변경

상단 프로그레스 바의 색상은 브랜드 컬러 사용을 권장합니다.

4단계) 우측 화면 미리보기 패널에서 상단 프로그레스 바 확인

설정한 상단 프로그레스 바는 우측 미리보기 패널의 Android 및 iOS 목업에서 확인할 수 있습니다. 단, 실제 구현 화면과는 차이가 있을 수 있습니다.

5단계) [저장하기] 버튼 클릭

6단계) 상단 프로그레스 바 설정 완료!

상단 프로그레스 바 설정을 저장한 후, 새로 앱을 빌드해야 변경 사항이 적용됩니다.