이 글은 오픈데이 Openday 시리즈의 9번째 기록입니다. (총 9개)

오늘 한 일

  • 가게 아이콘을 자유롭게 넣을 수 있게 했다
    • 이유: 정해둔 열 개 중에서만 골라야 했다. 목록을 아무리 늘려도 원하는 게 없을 수 있어서, 늘리는 것으로는 끝이 안 난다
    • 이름 칸 왼쪽에 버튼 하나를 두고 누르면 목록이 내려온다. 열 개를 늘 펼쳐 두면 가게를 고치는 화면이 이모지 판이 된다
    • 「이모지」를 고르면 입력칸이 열리며 커서가 선다. 시스템 이모지 고르개는 코드로 못 띄우므로 그다음 한 번은 사람이 누른다
    • 「없음」도 골라진다. 아이콘 없이 이름만 쓰고 싶은 사람이 있다
    • 비면 이름 첫 자를 대신 세운다. 사이드바에서 자리가 비면 어느 가게인지 안 보인다
  • 이월 사슬을 검증했다
    • 이유: 8월 24일에 만들어 배포했는데 「날짜가 바뀌어야 확인된다」는 이유로 일주일 넘게 미뤄져 있었다. 기능이 없는 게 아니라 맞는지 모르는 상태였다
    • 「오늘」을 옮겨 가며 며칠을 걸어 보는 스크립트를 만들었다. 목요일이 공휴일인 그림, 닷새를 안 여는 그림, 두 번 끌려오는지, 했으면 안 따라오는지까지 17개
    • 전부 통과했다. 넘긴 일이 사라지는 경우는 없다
    • 시험 도구는 따로 들이지 않았다. 화면 도구가 이미 쓰던 묶개(esbuild)로 타입 붙은 코드를 한 파일로 묶어 노드로 돌린다. 확인할 게 함수 몇 개일 때는 이 정도면 되고, 도구를 늘리면 그 도구도 관리 대상이 된다
    • 안 본 것도 적어 뒀다 — 자정을 넘길 때 훑기가 실제로 다시 도는지, 두 기기에서 같은 날을 각각 넘겼을 때
  • 화면이 하던 이월 훑기를 도메인으로 뺐다
    • 이유: 화면 코드에 있으면 눌러 보지 않고는 확인할 수가 없다
    • 앱과 검증 스크립트가 같은 함수를 부른다

막힌 부분

아이콘 목록이 카드에 잘렸다

버튼을 눌러 목록을 내렸더니 아래쪽이 잘려서 안내 문구가 안 보였다.

안내 문구 자리가 문제인 줄 알았는데 아니었다. 가게 카드에 「밖으로 나가는 것은 자른다」가 걸려 있어서, 카드 밖으로 내려오는 목록이 통째로 잘리고 있었다. 안내가 맨 아래라 그게 먼저 사라진 것뿐이다.

그 설정이 원래 있던 이유는 따로 있었다. 카드 맨 위 버튼의 배경색이 카드의 둥근 모서리를 네모나게 덮는 걸 막으려던 것이다.

  • 해결: 카드에서 걷어내고, 모서리를 따라야 하는 그 버튼에 직접 둥근 모서리를 줬다
  • 자르지 않고도 원래 목적이 지켜졌다. 넓게 걸어 둔 설정은 원래 무엇을 위한 것인지 되짚으면 좁힐 수 있다

이모지가 버튼 안에서 제각각 섰다

열 개를 나란히 놓았는데 높이가 들쭉날쭉했다.

이모지는 글자마다 높이와 여백이 달라서, 버튼에 그냥 넣으면 글자 기준선을 따라 제각각 선다.

  • 해결: 줄 높이를 하나로 묶고 가운데로 모았다
  • 같은 이유로 「+」도 어긋나 있었다. 전각 문자라 좌우 여백이 달라서 가운데 정렬을 해도 한쪽으로 치우친다. 도형으로 그리니 자리가 기하로 정해져 글꼴과 무관해졌다

단축키 안내가 한쪽 것만이었다

「Win + . 로 고르기」라고 적어 두었는데 맥은 그 단축키가 아니다.

  • 해결: 운영체제를 보고 갈라 준다. 맥이면 Control + Command + Space
  • 하나만 적어 두면 다른 쪽 사람에게는 안내가 아니라 틀린 말이 된다

검증을 옮겨 적으면 검증이 아니다

이월을 확인하는 스크립트를 만들면서, 앱이 화면 뜰 때 하는 훑기를 스크립트에 옮겨 적었다.

돌려 보니 다 통과했는데 이상했다. 통과한 것은 앱이 아니라 옮겨 적은 사본이다. 앱 쪽을 나중에 고치면 사본은 그대로라 어긋나도 계속 통과한다.

  • 해결: 그 훑기를 화면 코드에서 도메인으로 빼고, 앱과 스크립트가 같은 함수를 부르게 했다
  • 검증은 무엇을 확인했는지가 중요하다. 돌아가는 것과 확인된 것은 다르다

다음에 할 일

  • 모바일 화면 재설계 — 가로로 미끄러지는 방 이동, 마우스를 올려야 보이는 표시, 넓은 광고 자리 모두 손가락 화면을 전제하지 않았다
  • 날짜 표기 방식 통일 — 화면마다 다르게 섞여 있다. 한곳에서 만들게 한다
  • 언어 — 문구가 코드 곳곳에 박혀 있어 옮기려면 먼저 한곳으로 모아야 한다
  • 사람들에게 열기 전 구글 확인 절차 — 소유한 도메인이 필요하다
  • 자정을 넘길 때 이월 훑기가 실제로 다시 도는지 — 계산은 확인됐고 화면에 붙는 부분만 남았다

Series: 오픈데이 Openday


Suggested Posts