1단계) 앱 디자인 > 시스템 바 > 안드로이드 클릭
2단계) 상단 바 배경 [사용] 클릭
상단 바 배경을 사용하지 않으면, 화면이 상단 영역까지 확장되어 풀스크린으로 사용할 수 있습니다.
3단계) 상단 바의 배경 색상 선택
4단계) 상단 바 아이콘 색상 [어둡게] 선택
아이콘 색상을 밝게 혹은 어둡게를 선택해, 배경색과의 대비를 확보하면 가독성을 높이고 앱 화면의 시각적 일관성을 유지시킬 수 있습니다.
5단계) 하단 바 배경 [사용] 선택
하단 바 배경을 사용하지 않으면, 화면이 하단 영역까지 확장되어 풀스크린으로 사용할 수 있습니다.
6단계) 하단 바의 배경 색상 선택
7단계) 하단 바 아이콘 색상 [밝게] 선택
아이콘 색상을 밝게 혹은 어둡게를 선택해, 배경색과의 대비를 확보하면 가독성을 높이고 앱 화면의 시각적 일관성을 유지시킬 수 있습니다.
8단계) [저장하기] 클릭
9단계) [확인] 클릭
10단계) 시스템 바(안드로이드) 설정 완료!
시스템 바 설정을 저장한 후, 새로 앱을 빌드해야 변경 사항이 적용됩니다.
1단계) 앱 디자인 > 시스템 바 > iOS 클릭
2단계) 상단 바 배경 [사용] 클릭
상단 바 배경을 사용하지 않으면, 화면이 상단 영역까지 확장되어 풀스크린으로 사용할 수 있습니다.
3단계) 상단 바의 배경 색상 선택
4단계) 상단 바 아이콘 색상 확인
안드로이드와 달리 iOS는 상 · 하단 배경 색에 따라 아이콘 색상을 자동으로 최적화합니다. 별도의 설정 없이 흰색 또는 검정(회색)으로 설정됩니다.
5단계) 하단 바 배경 [사용] 선택
하단 바 배경을 사용하지 않으면, 화면이 하단 영역까지 확장되어 풀스크린으로 사용할 수 있습니다.
6단계) [저장하기] 클릭
7단계) [확인] 클릭
8단계) 시스템 바(iOS) 설정 완료!
시스템 바 설정을 저장한 후, 새로 앱을 빌드해야 변경 사항이 적용됩니다.
나쵸코드 탭 바를 사용하지 않고,
웹 사이트에서 이미 탭 바를 사용중인 사용자들은 다음 내용을 확인해 주세요.
안드로이드 - (상 · ) 하단 바 배경 [미사용] 시, 주의사항
안드로이드의 상 · 하단 바의 Safe Area 높이는 기기별로 상이합니다.
탭 바의 하단 여백을 Safe Area 값에 맞게 조정하면, 아이콘과 웹 UI가 겹치는 현상을 방지할 수 있습니다.
iOS - (상 · ) 하단 바 배경 [미사용] 시, 주의사항
iOS의 상 · 하단 바의 Safe Area 높이는 기기별로 상이합니다.
탭 바의 하단 여백을 Safe Area 값에 맞게 조정하면, 아이콘과 웹 UI가 겹치는 현상을 방지할 수 있습니다.