Garmin 워치 페이스 디자인 미리보기 도구

이 도구는 브라우저에서 원형 시계 화면을 미리 보여 줍니다. 시간, 날짜, 걸음 수, 심박수를 표시하는 비즈니스 스타일의 레이아웃을 그리며, 각 요소의 색상을 바꿀 수 있습니다. 색상이 변경되면 미리 보기도 업데이트되고, 완성된 디자인은 PNG 이미지로 내려받을 수 있습니다.

이 기능은 디자인 미리 보기만 제공합니다. 시계에 연결되지 않으며 설치 가능한 시계 화면을 만들지도 않습니다.

미리 보기에 표시되는 내용

화면은 대부분의 원형 시계 화면에서 사용하는 다음과 같은 레이아웃으로 구성됩니다.

• 상단에 가로로 표시되는 날짜
• 중앙에 크게 표시되는 시간
• 아래에 나란히 표시되는 걸음 수와 심박수
• 가장자리를 둘러싼 시간 눈금이 있는 베젤

예시 수치는 변경할 수 있으므로 실제와 비슷한 숫자로 디자인을 확인할 수 있습니다. 네 자리 걸음 수는 두 자리 걸음 수보다 더 많은 공간을 차지하며, 12시간제 시계는 오전 또는 오후 표시를 추가합니다.

어두운 색 구성표를 사용하는 이유

대부분의 둥근 가민 시계는 메모리 인 픽셀 또는 OLED 디스플레이를 사용합니다. OLED 화면에서는 검은 픽셀이 단순히 꺼지므로 어두운 배경이 전력을 덜 사용합니다. 또한 밝은 배경은 눈부심을 반사하므로, 밝은 햇빛 아래에서는 어두운 화면을 더 쉽게 읽을 수 있습니다.

이러한 이유로 여기의 사전 설정은 모두 어둡게 되어 있습니다. 밝은 배경도 선택할 수 있지만, 도구는 이것이 일반적인 방식에서 벗어난다는 점을 알려 줍니다.

대비와 가독성

시계는 한눈에 읽는 경우가 많고 어두운 곳이나 움직이는 중에 읽기도 하므로, 휴대전화보다 대비가 더 중요합니다. 이 도구는 WCAG 2.1 공식에 따라 각 요소와 배경 사이의 대비율을 측정합니다.

이 비율은 두 색상의 상대 휘도를 비교합니다.

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

C는 명암비이다.

L1은 더 밝은 휘도이고 L2는 더 어두운 휘도입니다. 결과는 동일한 색상을 의미하는 1:1부터 흰색 바탕의 검은색에 해당하는 21:1까지입니다.

알아 두어야 할 기준은 두 가지입니다.

• 3:1은 큰 글자의 최소 기준입니다.
• 4.5:1은 일반 크기의 텍스트에 필요한 최소값이다.

시간 표시가 크므로 원칙적으로는 3:1이면 충분하지만, 야외에서는 더 높은 비율이 좋다. 작은 레이블에는 4.5:1 이상의 명암비가 유리하다.

풀이 예시

매우 어두운 남색인 #0b1020을 배경으로 사용하고 흰색 텍스트를 #ffffff로 설정해 보겠습니다. 대비는 약 18:1이며, 어떤 조명에서도 편안하게 읽을 수 있습니다.

단계 수의 색상을 배경과 비슷한 파란색 #2a3a5e로 변경하면 명암비가 약 1.6:1로 떨어진다. 그러면 팔 길이만큼 떨어진 거리에서는 숫자가 거의 보이지 않으며, 도구가 이를 경고한다.

디자인 내려받기

내려받기 버튼을 누르면 실시간 미리 보기가 320 × 320 픽셀 크기의 PNG로 변환됩니다. 이미지는 브라우저에서 생성되며 아무것도 업로드되지 않습니다. 이 파일은 시안으로 사용하거나, 피드백을 위해 공유하거나, Garmin의 Connect IQ 도구로 실제 화면을 제작하는 동안 참고 자료로 보관할 수 있습니다.

자주 묻는 질문

이 기능으로 설치 가능한 시계 화면을 만들 수 있나요?

아니요. 디자인의 그림만 생성합니다. 설치 가능한 화면을 만들려면 Garmin의 Connect IQ SDK 또는 Garmin Watch Face Builder가 필요합니다.

시계는 원형인데 미리 보기는 왜 정사각형인가요?

이미지는 정사각형 캔버스 안에 원형 화면을 그린 형태이며, 시계 화면 그래픽은 일반적으로 이런 방식으로 제작됩니다. 모서리 부분은 시계에서 표시되지 않을 뿐입니다.

실제 시계 화면은 어떤 크기여야 하나요?

모델에 따라 다릅니다. 일반적인 원형 Garmin 디스플레이의 크기는 240 × 240, 260 × 260, 416 × 416 픽셀입니다. 미리 보기에서는 중간 수준인 320 × 320을 사용합니다.

시계에서 색상이 다르게 보이는 이유는 무엇인가요?

시계 디스플레이마다 밝기와 색 재현이 다르며, 메모리 인 픽셀 화면은 제한된 색상 팔레트를 사용합니다. 미리 보기는 참고용으로 활용한 다음 실제 화면에서 확인하세요.

대비 수치는 무엇을 의미하나요?

이 수치는 웹사이트에도 사용되는 WCAG 2.1 접근성 표준의 비율입니다. 수치가 높을수록 읽기 쉽습니다.