Mole 메뉴 막대 숫자가 주변과 어울리게 만들기

Mole은 메뉴 막대의 작은 두더지 옆에 숫자 두 개를 보여 줄 수 있고, 기본값은 CPU와 메모리입니다. 주변 아이콘과 나란히 두면 어딘가 어울리지 않는다는 이야기를 오래전부터 들어 왔지만, 정확히 무엇이 문제인지 말해 주는 사람은 없었습니다. 이번에는 제 메뉴 막대를 스크린숏으로 찍어 항목을 하나씩 비교해 봤습니다. 문제는 어느 한 숫자에 있지 않았습니다. 글자 크기, 굵기, 간격은 각각 따로 보면 괜찮았지만, 한데 모이자 메뉴 막대에서 Mole만 튀어 보였습니다.

먼저 이웃을 살펴보기

스크린숏에서 Mole 왼쪽에 있던 항목은 오픈 소스 메뉴 막대 모니터인 Stats였습니다. 메뉴 막대를 그리는 코드를 읽어 보니, 작은 셀은 7pt 가는 레이블 아래에 12pt 레귤러 값을 두고, 두 줄짜리 네트워크 속도는 9pt이며, 메뉴 막대 어디에도 굵은 글씨가 없었습니다. Mole은 8pt 세미볼드 두 줄이었습니다. 같은 스크린숏에서 재 보니 Mole의 글자 높이는 12픽셀, Stats는 13에서 16픽셀이었습니다. Mole은 이웃보다 한 단계 작았고 막대에서 유일하게 굵은 글씨였기 때문에, 작은 회색 얼룩처럼 보였습니다.

전에도 몇 번 조정했습니다. 10pt에서 9pt, 다시 8pt로 줄였는데, 매번 다른 상태 항목 옆이 아니라 두더지만 따로 보고 있었습니다. 그래서 글자는 계속 작아졌지만 굵기는 한 번도 바뀌지 않았습니다. 메뉴 막대는 함께 쓰는 공간이고, 한 앱의 항목만 따로 떼어 보는 사람은 없습니다. 그래서 이번에는 사람들이 매일 이미 익숙하게 보는 스타일을 따랐습니다. 레이블은 7pt 가는 글꼴, 값은 12pt 레귤러, 두 줄 레이아웃과 네트워크 속도는 9pt 레귤러로 하고, 굵은 글씨는 없애고, 위계는 크기로만 나눴습니다.

상자가 아니라 획을 재기

글자가 정해지자 간격 문제가 드러났습니다. 두더지와 첫 번째 숫자 사이, 두 지표 사이, 레이블과 값 사이가 각자 다른 방식으로 계산되고 있어서 항목이 하나로 읽히지 않았습니다. 예전 코드는 이미지 가장자리나 텍스트 레이아웃 상자를 기준으로 거리를 쟀지만, 눈에 보이는 건 획이고 상자와 획 사이의 빈 공간은 글리프마다 다릅니다. 둘 다 3pt로 설정한 간격이 눈으로는 두 배쯤 달라 보일 수도 있었습니다.

이게 가장 뚜렷하게 드러난 곳이 두더지였습니다. 캐릭터마다 스프라이트 시트에 투명 여백이 따로 있어서, 이미지 가장자리에서 고정 거리를 두면 두더지 옆에는 6.5pt만 남고 다른 캐릭터에서는 더 넓어졌습니다. 이제 Mole은 모든 애니메이션 프레임에서 가장 오른쪽에 있는 불투명 픽셀을 찾아 거기서부터 재기 때문에, 어떤 캐릭터를 고르든 숫자까지의 거리가 약 12pt입니다.

두 지표 사이에도 비슷한 함정이 있었습니다. 각 셀은 가장 넓은 값만큼 자리를 확보해 두는데, 퍼센트라면 100%만큼입니다. 이렇게 하면 값이 9%에서 44%로 바뀌어도 메뉴 막대가 움직이지 않고, 두 자리 값일 때는 셀 사이에 약 13pt가 남습니다. 하지만 두 셀이 모두 100%가 되면 확보해 둔 여유가 사라집니다. 작업 중 한 버전은 셀 사이가 3pt밖에 되지 않아서, 최대 부하일 때 두 줄 레이아웃에 100%999 KB/s가 한 덩어리로 찍혔습니다. 이제 셀끼리는 최소 6pt 떨어져 있어서 최대 부하에서도 구분됩니다. 레이블과 값의 위아래 간격은 3.5pt로 Stats와 같습니다.

왼쪽 정렬한 두 줄도 어긋나 보일 수 있다

예전 셀에서는 레이블이 숫자 위 가운데에 놓여 있어서, 위에 떠 있는 설명문처럼 보였습니다. 이번에는 레이블과 값을 모두 왼쪽 정렬하고 같은 x 좌표에서 그리니, 당연히 맞아야 했습니다. 그런데 확대해 보면 레이블이 늘 숫자보다 조금 왼쪽에 있었습니다. 원인은 글꼴에 있습니다. 모든 글리프는 왼쪽에 작은 여백을 품고 있는데, 12pt 고정폭 숫자는 0.7에서 1.0pt, 숫자 1은 1.7pt인 반면 7pt 레이블의 대문자는 0.3에서 0.6pt밖에 되지 않습니다. 같은 지점에서 시작해도 보이는 획은 1에서 3픽셀 어긋나고, 값이 1로 시작할 때 가장 눈에 띕니다.

해결 방법은 레이블을 값의 첫 획에 맞춰 옮기고 값은 그대로 두는 것입니다. 값은 매초 바뀌는데, 첫 자리가 바뀔 때마다 위치가 움직이면 보고 있는 숫자가 좌우로 흔들립니다. 위의 작은 레이블을 옮기면 그런 일이 없고, 레이블은 값의 십의 자리가 바뀔 때만 1pt 미만으로 움직입니다.

획을 정확히 맞춘 뒤에도 값이 여전히 조금 오른쪽으로 보였습니다. 작은 글자 아래에 큰 숫자를 둘 때 흔히 생기는 착시입니다. 12pt의 둥근 숫자는 7pt의 가는 레이블보다 훨씬 커서, 눈은 큰 글리프의 가장자리를 더 안쪽으로 읽습니다. 0, 0.5, 1pt를 비교해 봤습니다. 1pt에서는 이미 숫자가 밖으로 밀려 나온 것처럼 보여서, 지금은 값을 왼쪽으로 0.3pt, 반 픽셀을 조금 넘게 내밀었습니다. 두 줄이 같은 가장자리에 서 있는 것처럼 보이기에 딱 맞는 정도입니다.

모든 숫자의 너비를 확보하기

메뉴 막대에서 무엇이든 너비가 바뀌면 그 오른쪽 아이콘이 전부 함께 움직입니다. 그래서 값의 종류마다 가장 넓은 형태만큼 자리를 확보해야 합니다. 빠진 곳이 두 군데 있었습니다. 팬 속도는 1000 rpm 미만이면 850, 이상이면 2.1k로 표시했는데, 두 형태가 확보하는 너비가 달라서 팬이 1000 rpm을 넘나들 때 메뉴 막대 전체가 튀었습니다. 스왑은 시스템의 바이트 형식을 그대로 써서 10.52 GB, 프랑스어 시스템에서는 1,2 Go가 나왔습니다. 12pt 셀에는 너무 길었고 너비도 값에 따라 바뀌었습니다. 이제 팬의 두 형태는 같은 너비를 쓰고, 메뉴 막대의 스왑은 항상 512 MB, 1.2 GB, 12 GB처럼 최대 세 자리의 짧은 형태로 보여 줍니다. 전체 값은 팝오버에 그대로 있습니다.

네트워크 속도도 하나 고쳤습니다. 예전에는 10 KB/s 미만에서 소수점 한 자리를 보여 줘서, 유휴 상태의 0.0 KB/s가 86 KB/s 위에 놓이면 한 줄에만 소수점이 있었고, 오른쪽 정렬한 두 줄이 가지런해 보이지 않았습니다. 초당 0.1 KB 차이는 알려 주는 게 거의 없으니 이제 KB/s는 항상 정수입니다. MB/s는 10 미만에서 소수점 한 자리를 유지하는데, 1.5 MB/s와 1 MB/s의 차이는 실제로 의미가 있기 때문입니다.

설정하는 방법

Mole 설정에서 메뉴 막대 탭을 엽니다. 표시 행에는 세 가지 옵션이 있습니다. 러너는 두더지만, 측정 항목은 숫자만, 둘 다는 두더지 옆에 숫자를 함께 보여 주니, 이 글에 나온 숫자를 보려면 측정 항목이나 둘 다를 고르면 됩니다. 그러면 아래에 몇 가지 행이 더 나타납니다. 레이아웃을 가로로 두면 레이블이 위, 값이 아래인 셀이 되고, 세로로 두면 작은 글자 두 줄이 됩니다. 지표 1과 지표 2에서 두 지표를 고르는데, 기본값은 CPU와 메모리이고 둘 다 GPU, 온도, 전력, 팬, 스왑, 블루투스 기기의 배터리로 바꿀 수 있습니다. 네트워크 속도를 켜면 오른쪽에 업로드와 다운로드가 추가됩니다. 두더지는 스타일에서 다른 캐릭터로 바꿀 수 있고, 그 옆의 버튼을 누르면 캐릭터가 방향을 돌립니다.

두더지가 왜 그렇게 빨리 달리느냐는 질문을 가끔 받습니다. 달리는 속도가 곧 CPU 수치라서, Mac이 바쁠수록 더 빨리 달립니다. 전체 CPU 사용률과 1분 평균 부하 중 더 높은 쪽을 따릅니다. 완전히 유휴 상태일 때는 약 1.3초에 한 걸음을 내딛고, 70%부터는 더 빨라지지 않아 대략 초당 4걸음입니다. 부하가 낮은 구간에서 곡선이 더 빠르게 올라가서 10%와 30%가 확실히 다르게 보이고, 그래서 브라우저를 열어 두고 글을 좀 쓰는 정도만으로도 Mac이 유휴 상태일 때보다 두 배쯤 빨리 달립니다. 코드를 컴파일하거나 영상을 내보내면 제대로 달리기 시작합니다. 이 속도는 일부러 남겨 둔 신호라서 따로 속도 설정은 없습니다. 다른 캐릭터는 저마다의 속도로 움직이는데, 캐릭터마다 애니메이션 프레임 수가 다르기 때문입니다. 두더지만 표시할 때 그 위에 포인터를 올리면 "CPU가 바쁠수록 더 빨리 달립니다"라는 안내도 나옵니다.

시도했지만 그대로 둔 것

한때는 온도 셀이 너무 크게 느껴졌습니다. 단위를 9pt로 한 버전과 10pt로 한 버전을 만들었는데, 둘 다 작아진 °가 기준선 쪽으로 내려가서 58°C가 오타인 58°c처럼 읽혔고, 퍼센트 기호도 바로 옆 Stats의 것보다 눈에 띄게 작아졌습니다. 다시 재 보니 숫자는 CPU 셀과 크기가 정확히 같았고, 크게 보인 건 58°C에 44%보다 대문자가 하나 더 있기 때문이었습니다. 그래서 크기는 그대로 뒀습니다.

캐릭터 옆에는 두 줄 레이아웃만 쓸 수 있고 레이블이 값 위에 있는 셀은 쓸 수 없다는 오래된 규칙도 있었습니다. 그 규칙이 겨냥했던 건 12pt 세미볼드 버전이었습니다. 굵은 글씨가 없어진 지금은 그 이유가 더는 해당되지 않으니, 이제 두 레이아웃 모두 캐릭터 옆에 둘 수 있고 기본값은 셀입니다.

돌아보면 큰 변경은 하나도 없습니다. 반 픽셀, 소수점 하나, 몇 pt의 간격 같은 것들이지만, 이것들이 모여 아이콘이 메뉴 막대에 녹아드는지 튀어나오는지를 결정합니다. 메뉴 막대 앱을 만들고 있다면, 자기 항목과 많이 쓰는 이웃 몇 개를 한 장의 스크린숏에 담아 비교해 보세요. 상자가 아니라 획을 재고, 모든 값에 가장 넓은 너비를 확보해 두세요. 이 세 가지를 하고 나면 아마 어색해 보이지는 않을 겁니다.

이 값들은 이제 모두 테스트로 지켜지고 있습니다. 굵기, 너비, 레이블 정렬에 각각 하나씩 있어서, 나중에 바꾸더라도 되돌아갈 가능성이 적습니다. 방해하지 않는 Mole 설계와 같은 생각입니다. 메뉴 막대에 있는 것은 매일 보면서도 알아차리지 못할 때 가장 좋습니다.