Clock_App / 내비게이션 바 디자인하기

시계 앱을 따라 구현한 다곤 했지만 조금은 내 입맛대로 조미료 정도는 바꿀 생각이다.

즉 디자인을 해야 한다는 건데 그러기 위해선 당연하게도 Figma 같은 툴로 제작을 해야 할 것이다.

가장 먼저 내 폰에서 시계 앱 화면을 캡처해서 가져와봤다.

 

이제 여기에서 가장 먼저 해야 할 것은 각 화면에 모두 들어있는, 쉽게 말해 공통 사항인 내비게이션 바를 디자인 할 것이다.

그럼 이 내비게이션 바들을 쌩으로 만드느냐? 그것도 아니다. 나는 기본적으로 Flutter에서 제공되는 기본 위젯들을 위주로 사용할 것이기에 Material 3 Design을 따르게 제작할 것이다.

그리고 Figma에는 쉽게 형식을 따를 수 있도록 Material 3 Design Kit를 제공해주고 있다.

위의 시계 앱 내부 캡처를 봐보면 알람, 세계시각, 스톱워치, 타이머등의 요소가 바텀 내비게이션 바가 위치해 있는 곳에 있는 것을 볼 수 있는데 문제는 각 요소가 탭 형식으로 이루어진 것처럼 보인다는 것이다.

즉 무엇이냐? 바텀 내비게이션을 탭으로 구현할 것이다.

어렵지 않다. 디자인 키트에서 바로 가져오면 되니까.

Pages 항목에 바로 가져가서 쓸 수 있도록 위젯들이 마련되어 있다. 이거 가져가서 사용해 주도록 하자.

여기서 시계 앱의 탭과 가장 유사하게 생긴 것은 누가 뭐래도 첫 번째 탭일 것이다.

이거 그대로 복사해서 사용하고 있는 파일로 가져와 준다.

디자인하는 프레임은 근본 있게 440x956 사이즈인 iPhone 16 Pro Max를 사용해 주겠다

탭 가져왔으면 가장 먼저 인스턴스 되어 있는걸 깨주자.

이제 이거 깨 주면 내 마음대로 주물럭 할 수 있게 된다.

폰 사이즈에 맞게 양옆 늘려주고.. 어차피 이거 오토레이아웃으로 제작되어 있어서 막 늘려도 자동대로 제위치 찾아가니 걱정할 필요도 없다.

그리고 이제 요소도 하나 더 추가해주자. 지금은 3개밖에 없으니 말이다.

봐보면 이렇게 구성되어 있는데 여기서 Tab4를 보이게 해주면 간단하게 탭을 추가해 줄 수 있다. Tab5는 필요 없으니 삭제해 주도록 하자.

Tabs 부분도 Detach Instance해줘야 수정 및 삭제를 할 수 있게된다.

+Divider도 삭제해주자. 시계 앱을 봐보면 inset부분에 구분하는 선이 없다.

그리고 탭들 이름도 다 바꿔주자.

이제 이러면 거의 90퍼센트 끝났다.

현재 지정되어 있는 색들은 Material 3 Design의 primary와 surface, on-surface 색인데 이 색들을 각각 배경색, 회색, 검은색으로 바꿔줄 것이다. 그러기 위해서 나도 색들을 만들어 주겠다.

간단하게 만들어주었다.

• kBlack = 121212
• kBackgoround = F7F6FB
• kGray = 9A999E
• kWhite = FCFBFF

이렇게 만든 색들을 삽입해 주고 Height를 56까지만 늘려주면 가볍게 탭바 부분은 완성이 된다.