[7월 4주차] 대기 시간까지 브랜드가 되는 로딩 화면 — 로딩 스피너 & 프로그레스 바

안녕하세요, 나쵸코드입니다.🙌

사용자가 앱에서 가장 자주 마주하는 화면 중 하나가 바로 '로딩'이에요. 페이지를 넘길 때마다 잠깐씩 등장하는 만큼, 이 짧은 순간이 앱의 완성도를 좌우하기도 하죠. 이번 주에는 그 로딩 화면을 브랜드에 맞게 직접 꾸밀 수 있는 커스텀 로딩 스피너와 상단 프로그레스 바 기능을 준비했어요.

1️⃣ 어떤 점이 좋아졌을까요?

➊ 로딩 스피너 타입을 골라 쓸 수 있어요

기존에는 OS 기본 로딩 모양만 사용할 수 있었는데, 이제 여러 가지 스피너 타입 중에서 앱 분위기에 맞는 걸 선택할 수 있어요. 원하는 모양이 없다면 직접 올리기로 준비한 파일을 그대로 사용해도 됩니다.

➋ 색상·개수·속도·애니메이션까지 세밀하게 조절돼요

색상만 바꾸는 수준이 아니라, 스피너의 개수와 회전 속도, 애니메이션까지 조절할 수 있어요. 배경(딤) 색상과 투명도도 자유롭게 설정할 수 있어서, 로딩 화면 전체의 톤을 브랜드에 맞춰 통일할 수 있습니다.

➌ 상단 프로그레스 바가 추가됐어요

화면 상단에 2px 높이의 얇은 프로그레스 바를 띄울 수 있게 됐어요. 상단 영역(Safe Area) 바로 아래에 위치해서, 페이지가 얼마나 불려왔는지 사용자가 자연스럽게 알 수 있어요. 토글 하나로 켜고, 색상만 지정하면 끝입니다.

2️⃣ 이렇게 활용해보세요

• 브랜드 컬러로 통일하기 - 스피너 색상과 프로그레스 바 색상을 브랜드 컬러로 맞추면, 로딩 순간까지 우리 앱처럼 느껴져요.

• 로고·캐릭터 스피너 만들기 - 직접 올리기로 브랜드 로고나 캐릭터 파일을 넣어, 우리 앱만의 로딩 화면을 만들 수 있어요.

• 오동작 방지하기 - 배경 터치 막기를 켜두면, 로딩 중 사용자의 실수 입력으로 생기는 오동작을 예방할 수 있어요.

• 체감 속도 높이기 - 상단 프로그레스 바로 진행 상황을 보여주면, 같은 로딩 시간도 덜 답답하게 느껴져요.

3️⃣ 사용 안내

➊ 요금제 안내

• 무료·베이직 플랜: OS 기본 타입만 제공돼요. OS 기본은 안드로이드와 iOS의 로딩 모양이 서로 달라요.

• 비즈니스 플랜: 여러 스피너 타입과 직접 올리기를 사용할 수 있고, 색상 외에 개수·속도·애니메이션까지 조절할 수 있어요.

➋ 주의 사항

• 설정을 저장한 뒤 앱을 새로 빌드해야 변경 사항이 적용돼요.

• 직접 올리기로 파일을 업로드한 경우에는 색상 변경이 불가해요.

• 상단 프로그레스 바의 높이는 2px로 고정되어 있어요.

• 배경 터치 막기는 항상 켜두는 것을 권장드려요.

이번 업데이트 소식, 어떠셨나요? 나쵸코드를 사용하면서 필요한 기능이 있다면 채널톡으로 제안해 주세요!

감사합니다. 나쵸코드 드림