Clock_App / 타이머 화면 디자인

타이머 화면의 가장 중요한 타임 피커 부분을 먼저 만들어 줄 것이다.

최대한 정렬을 맞추기 위해 큰 프레임을 만들어준 후 안에 삽입하는 방식으로 하였다.

위의 앱바에서 24만큼 띄워준 곳에 440x374의 프레임을 만들어 주었다.

440은 iPhon 16 Pro Max의 너비이다.

그런 다음에 타임 피커 위에 시간, 분, 초를 표시해 줄 것인데 폰트는 inter, Medium, 14p, kGray로 맞춰줬다.

이 친구들은 상단에서 16 띄어주었다.

이제 그 아래에는 타임피커를 배치해줘야 하는데 마땅히 넣을만한 것을 찾지 못하여 직접 텍스트로 입력하여 넣어줬다.

상하에 위치한 글자는 inter, Medium, 48p, kDial로 맞추어 주었고 중앙에 위치한 글자는 inter, Bold, 48p, kBlack으로 맞추어 주었다.

이제 아래에 시작 버튼만 만들어주면 끝이 나는데 그냥 One UI 기본색을 따라갈 수도 있겠으나 이 프로젝트만의 특별한 포인트 컬러를 만들어주고 그 색을 시작 버튼에 넣어주었다.

색은 코틀린의 아이콘에서 대충 따와서 넣어주었다.

• Stops 0% = E3465B
• Stops 50% = C017E4
• Stops 100% = 8150FE

이름은 kPointGradient로 지정해 줬다.

그리고 다시 돌아와서, 버튼을 만들어 줄 것인데 크기는 One UI에 최대한 맞춰서 136x56으로 지정해 주었다. 래디우스는 그냥 최대로 줬다.

마지막으로 안에 들어갈 '시작' 텍스트는 inter, Medium, 18p, kWhite로 맞춰주었다.

이렇게 타이머 화면 디자인이 끝났다.