크루 캘린더 개선하기

크루 캘린더를 만든 지 몇 주 됐다. 화장실 앞에서 모바일 기기로 여는 화면이라 하루에 두어 번은 꼭 열게 되는데, 그렇게 며칠 쓰다 보니 걸리는 자리가 손에 먼저 잡혔다. 지난번 가나 화면을 고칠 때와 같은 종류의 일이다. 만들 때는 하나씩 정했는데 쓸 때는 한꺼번에 만나는 것들.

UI를 바꾸는 작업은 참 쉽지 않다. 이번엔 고치는 동안 로컬 서버를 띄워두고 화면을 보면서 정했는데, 보면서 하면 한 번에 맞힐 줄 알았지만 그렇지 않았다. 눈앞에 띄워놓고도 미감이 따라주지 않아서 고쳤다가 되돌리고 다시 고치기를 여러 번 했다. 머릿속에서는 말이 되던 것이 화면에 뜨면 아니었다. 디자인은 참 쉽지 않다.

안 쓰는 버튼은 빼고, 쓰는 것은 한 줄에 둔다

달력 위에 「자주」와 「하나씩」 두 줄의 버튼이 있었다. 「자주」는 감자·고구마 조합 넷이고, 「하나씩」은 감자 +1, 고구마 +1, 토, 모래갈이를 낱개로 올리는 버튼이다.

며칠 써보니 「하나씩」 줄은 한 번도 안 눌렀다. 화장실 앞에서 세는 건 언제나 감자와 고구마 둘 다라서, 하나만 올릴 일이 실제로는 생기지 않는다. 안 쓰는 버튼은 자리만 차지하고 마는 게 아니다. 모바일에서는 달력이 그만큼 아래로 밀린다. 기록하러 열든 지난 날을 보러 열든, 매번 안 누르는 줄 하나를 지나 스크롤해야 한다.

낱개 버튼 둘은 뺐다. 대신 토·모래갈이·건강검진은 남겨서 조합 넷 뒤에 같은 줄에 이어 붙였다. 가끔 있는 일이지만 있을 때는 바로 적어야 하는 것들이다. 줄을 하나로 두면 눈이 위아래로 오갈 일이 없다.

토는 종류를 물어야 한다. 헤어볼인지 사료인지 공복인지를 뭉뚱그리면 한 달 뒤에 남는 게 「토 6번」뿐이라 병원에서 할 말이 없다. 전에는 토를 누르면 아래에 「어떤 토」 줄이 하나 더 펼쳐졌는데, 방금 두 줄을 하나로 합쳐놓고 누를 때마다 다시 둘이 되면 합친 보람이 없다.

그래서 줄을 늘리지 않고 그 안을 바꾼다. 토를 누르면 조합 버튼까지 통째로 감추고, 눌린 「토」와 종류 넷만 남는다. 하나를 고르거나 「토」를 다시 누르면 돌아온다. 「토」를 지우지 않고 눌린 채로 남긴 게 요점이다. 지금 무엇을 묻고 있는지 말해주면서, 다시 누르면 돌아가는 길이 된다. 나가는 길이 들어온 길과 같아야 헷갈리지 않는다.

줄의 이름이 어디에 적히는지를 말하게 한다

「자주」라는 라벨은 조합 넷만 가리키던 말이라 셋이 더 붙은 뒤로는 줄 전체를 못 덮는다. 뭐라고 부를까 하다가 이 버튼들이 실제로 하는 일을 다시 봤다.

오늘에 적는다. 화면에 어느 달이 펼쳐져 있든 상관없다. 8월을 보다가 눌러도 9월 5일에 들어간다. 아래에 적을 스와이프까지 붙고 나면 달 넘기기가 손짓 하나로 쉬워지니, 줄의 이름이 그 얘기를 해주면 되겠다 싶었다.

라벨을 「오늘:」로 바꿨다. 그러자 머리글에 있던 「오늘」 버튼과 부딪혔다. 그 버튼은 오늘을 적는 게 아니라 이번 달로 돌아가는 버튼이라, 원래 이름이 더 정확한 쪽으로 「이번 달」이 됐다. 한 화면에 「오늘」이 둘이면 어느 것도 못 뜻한다.

달이 바뀌는 자리에서 줄을 끊지 않는다

첫 주 앞과 마지막 주 뒤가 비어 있었다. 8월 1일이 토요일이면 첫 줄에 칸 여섯이 텅 비어서 격자가 시작하다 만 것처럼 보였다.

그보다 걸린 건 흐름이 끊긴다는 것이었다. 이 달력은 며칠이 이어지는가를 보는 화면이다. 고구마가 31일과 1일에 이어서 없었던 것이 두 화면으로 갈라지면, 정작 그게 뜻을 갖는 순간에 안 보인다.

이웃 달의 날짜를 흐리게 채웠다. 흐리게만 하고 지우지는 않아서, 그 칸의 기록도 같이 그리고 눌러서 고칠 수도 있다.

기록까지 같이 그리려면 읽어오는 범위를 격자에 맞춰야 한다. 1일~말일만 읽으면 그 칸들이 언제나 비어 보이는데, 이 달력에서 표시 없는 날은 「확인 안 함」이라는 뜻이 있는 상태라 그건 빈 칸이 아니라 거짓말이 된다.

달력은 손으로 넘긴다

달을 넘기려면 화면 위쪽 구석의 화살표를 눌러야 했다. 정작 손은 달력 위에 있는데 넘길 때마다 거기까지 올라가야 한다.

이제 달력을 좌우로 밀면 넘어간다. 왼쪽으로 밀면 다음 달, 오른쪽으로 밀면 지난 달이다. 책장을 넘기는 방향과 같다.

다만 밀었다고 다 넘기지는 않게 했다. 이 달력은 위아래로 스크롤하는 화면 한가운데 있어서, 페이지를 굴리다 손가락이 조금만 비스듬해져도 달이 넘어가 버릴 수 있다. 가로로 움직인 거리가 세로보다 확실히 클 때만 넘긴다.

넘어간 뒤에도 보던 자리를 지키게 했다. 화면을 맨 위로 끌어올리지 않으니, 여러 달을 연달아 넘겨봐도 눈이 계속 같은 자리에 머문다.

밀 수 있는 곳은 달력 격자로 한정했다. 페이지 전체에 걸어두면 시트가 떠 있을 때나 아래 필터를 누르려다 손이 미끄러졌을 때도 달이 넘어간다.

범례가 곧 필터다

달력 밑에 🥔 감자 🍠 고구마 💦 토 … 하는 캡션이 깔려 있었다. 이 줄을 누를 수 있게 했다. 고른 것만 칸에 남고, 하나라도 걸리면 줄 끝에 「초기화」가 뜬다.

필터를 따로 만들 수도 있었지만 그러지 않았다. 이 줄에 적힌 것이 곧 칸에 그려지는 표시라, 고르는 자리도 여기가 맞다. 목록을 두 벌 두면 언젠가 서로 어긋난다.

칸에서 그 표시만 없앤다. 날짜를 지우거나 흐리게 하지 않는다. 「토」만 켰을 때 알고 싶은 건 「토가 어느 날에 몰렸나」이고, 그건 달력의 모양이 그대로 남아 있어야 읽힌다. 날들이 사라지면 간격을 못 센다.

필터는 달을 넘겨도 유지되도록 했다. 이 필터를 켜는 목적이 대개 여러 달에 걸쳐 한 가지를 훑는 것이어서다. 「토」만 켜놓고 세 달을 넘겨보는데 넘길 때마다 풀리면 쓸 이유가 없다. 달 이동이 주소의 ?month=만 바뀌는 이동이라 이 컴포넌트가 그대로 살아 있고, 그래서 상태를 주소에 안 올려도 된다. 짐작으로 두기엔 불안해서 실제로 몇 달 넘겨보고 확인했다.

「초기화」는 뭔가 걸렸을 때만 나오게 했다. 늘 떠 있으면 아무것도 안 거른 상태에서도 지금 무언가 걸려 있는 것처럼 읽힌다. 「전체」 대신 「초기화」라고 쓴 건, 같은 줄에 선 낱말 여섯은 고르는 것인데 이것만 되돌리는 동작이라서다. 하나만 성격이 다르면 그렇다고 말해줘야 한다.

저장은 늘 같은 자리에 있다

날짜를 누르면 아래에서 시트가 올라온다. 여덟 항목에 메모 칸까지 붙어 있어서 모바일 기기에서는 시트 하나가 통째로 굴렀고, 값을 다 넣고 나서 「저장」을 찾으러 한 번 더 내려가야 했다. 기록 하나 고치는 데 드는 동작이 두 배가 된다.

셋으로 나눴다. 머리(날짜·닫기)와 발(저장)은 서 있고 가운데만 구른다.

머리와 발의 경계는 처음엔 선을 하나 그어서 나눴다. 그런데 그 선이 늘 그어져 있는 게 걸렸다. 선이 하는 말은 「여기가 경계다」인데, 정작 알고 싶은 건 밑에 더 있느냐다. 끝까지 내려와 가려진 게 없을 때도 선은 그대로 남아 있다.

그래서 선을 지우고 스크롤 페이드로 바꿨다. 배경색에서 투명으로 가는 그라데이션을 스크롤 칸의 위아래 끄트머리에 덮는 것이다. 글자가 배경에 잠기면서 끊기니 잘렸다는 게 그림으로 읽히고, 다 봤으면 잠길 것이 없어서 저절로 사라진다. 위쪽은 스크롤을 내렸을 때, 아래쪽은 아직 더 남았을 때만 켜진다.

토 넷을 묶던 상자도 테두리를 걷어내고 옅은 면으로 바꿨다. 시트 아래쪽에 가로선이 세 개나 몰려 있었기 때문이다. 상자의 밑선, 발을 나누는 선, 그리고 저장 버튼의 테두리. 20px 남짓 안에 나란히 그어져 있으니 어느 선이 무엇을 나누는 것인지 알아볼 수가 없었다. 상자를 면으로 바꾸자 그중 하나가 사라졌다.

맨 위에 있던 「— 는 확인하지 않은 것, 0 은 확인했는데 없었던 것」 설명은 뺐다. 이 시트는 승인된 사람만 여는 화면이라 읽는 사람이 사실상 한 명이고 그 한 명은 이미 안다. 처음 한 번을 위해 매번 넉 줄을 읽히면 정작 손이 닿아야 하는 항목들이 그만큼 아래로 밀린다.

고치는 중에 하나 밟았다. 스크롤 칸을 한 겹 감싸면서 안쪽에 h-full을 줬는데, 부모 높이가 flex로 정해지는 동안에는 기댈 값이 없어서 내용 높이 그대로 부풀었다. 저장 버튼이 글자 위에 겹쳐 찍혔다. 창을 좁혀보다 발견했고, 안쪽도 flex 항목으로(min-h-0 flex-1) 바꿔서 고쳤다.

그림은 팔레트를 안 따른다

맥에서 다크 모드로 열었더니 모래갈이 🧹와 건강검진 🩺이 안 보였다. 빗자루는 자루가 짙은 나무색이고 청진기는 관이 거의 검정이라, 어두운 바탕에 놓으면 형태가 안 남는다. 색은 토큰으로 두면 두 팔레트가 알아서 갈리지만, 이모지는 글자색을 바꿔도 제 색 그대로다.

하필 이 둘은 가끔 있는 항목이라 칸에 그림 하나만 뜨는데, 그 하나가 안 보이면 있었는지 없었는지를 알 방법이 없다.

바꾸는 데 세 번 걸렸다.

후보	왜 안 됐나
🪣 🏥	밝기는 됐지만 이 크기에서 둘 다 뭉개진 덩어리로 보였다
🚽 💉	형태는 좋았지만 둘 다 몸통이 흰색이라 이번엔 라이트 모드에서 잠겼다
⏳ 🩻	통과

실패한 두 번이 각각 다른 것을 가르쳐줬다. 밝기만 보고 고르면 안 되고, 양쪽 끝 색은 피해야 한다. 흰 그림은 밝은 바탕에서, 검은 그림은 어두운 바탕에서 사라진다. 몸통에 가운데 색이 있는 그림이라야 두 팔레트를 다 견딘다. 모래시계는 황토색 모래고 엑스레이는 청회색 판이다. 뜻도 오히려 가까워졌다. 모래갈이에는 이름에 이미 모래가 들어 있고, 건강검진에서 실제로 찍는 것이 엑스레이다.

어두운 쪽만 보고 고쳤다가 밝은 쪽을 무너뜨린 게 이번 실수였다. 다음부터는 두 팔레트에서 실제 칸 크기로 본 뒤에 고른다.

테두리는 묶는 일에만, 누르는 것은 알약

범례를 필터로 바꾸면서 처음엔 여섯 개를 전부 테두리 친 알약으로 만들었다. 띄워놓고 보니 보기 싫었다. 바로 위 달력이 온통 선으로 그려진 그림인데 그 밑에 또 다른 굵기의 테두리 여섯 개가 서서 선끼리 경쟁했고, 「토」와 「건강검진」은 글자 수가 세 배 차이라 테두리를 두르니 그게 상자 크기로 드러나 줄이 울퉁불퉁했다.

위쪽 기록 줄도 같은 문제였다. 테두리 친 상자 안에 테두리 친 버튼 일곱 개. 선이 두 겹이라 어느 선이 무엇을 묶는지가 흐려졌다.

몇 번 갈아엎고 나서 규칙 하나가 남았다. 테두리는 묶는 일에만 쓴다. 달력 격자처럼 선이 곧 내용인 것, 머리글의 꺽쇠처럼 세 칸을 하나로 만드는 바깥 상자. 낱개로 서는 버튼은 테두리 없는 옅은 알약이다. 칠한 면이 선으로 그린 상자보다 조용하면서도 손에 가깝다.

칠의 짙기에도 규칙이 생겼다. hover가 켜진 것보다 늘 희미하다. 손을 올린 것과 고른 것이 같은 짙기면 지금 켜져 있는 게 어느 쪽인지 알 수 없다. 그리고 hover에 글자색만 주지 않고 알약도 같이 깐다. 알약이 떠야 그림까지 한 덩어리로 묶여 보인다.

작은 것 셋. 머리글의 ← →는 꺽쇠로 바꿨다. 화살표는 대가 있어서 글자만 한 덩어리로 보이는데 꺽쇠는 획 둘이라 작은 칸에서 가볍고, 넘긴다는 뜻은 그대로 남는다. 오십음도 캐러셀이 쓰던 것을 공용 컴포넌트로 꺼내 같이 쓴다. 두 번째로 필요해진 자리에서 베껴 쓰면 굵기나 크기가 조용히 갈라지기 때문이다.

「오늘」과 「필터」 라벨은 고정 폭으로 벌려두지 않고 쌍점을 붙였다. 빈 자리로 벌려두면 라벨과 내용이 한 줄로 안 읽히고 따로 논다. 세로 가운데는 여백을 눈대중으로 밀어서 맞추지 않고, 라벨에 칩과 똑같은 안쪽 여백과 줄높이를 줘서 저절로 맞게 했다. 눈대중으로 맞춘 것은 글자 크기가 조금만 바뀌어도 다시 어긋난다.

보면서 고치는 재미

지난번엔 걸리던 것들을 적어놓고 한 번에 고쳤다. 이번엔 화면을 띄워놓고 하나씩 옮겨가며 고쳤는데, 그래서인지 되돌린 자리가 유독 많았다.

필터 칩에 테두리를 둘렀다가 벗기고, 버튼을 면으로 만들었다가 테두리로 돌렸다가 다시 알약으로 갔다. 「이번 달」 버튼은 이번 달에서 숨겼다가 되돌렸다. 숨으면 나타나고 사라질 때마다 양옆 꺽쇠가 자리를 옮겨서다. 이모지는 세 번 바꿨다.

되돌린 횟수만 보면 헛수고 같지만, 그러고 나서야 규칙이 하나씩 생겼다. 테두리는 묶는 일에만, hover는 켜진 것보다 희미하게, 이모지는 밝지도 어둡지도 않은 것으로.

디자인은 아직 제대로 배워본 적이 없다. 언젠가 공부도 좀 해봐야지 싶다. 그전까지는 눈에 걸리는 자리를 하나씩 고치고, 무엇을 왜 바꿨는지 이렇게 적어두려고 한다. 조금씩 나아지는 걸 보는 재미가 있다.