오픈데이 Openday 9

오늘 한 일

• 날짜 표기를 한곳에서 만들게 했다
  • 이유: 화면마다 직접 만들면서 빗금(8/25)과 점(2026.08.27)이 섞여 있었다. 만드는 곳이 다섯 군데였다
  • lib/date.ts 하나만 날짜 글자를 만든다. 자리에 따라 요일까지 붙이거나, 좁은 자리는 08.25, 해가 필요한 자리는 2026.08.25
  • 점 표기는 두 자리로 맞춘다. 목록에서 날짜가 세로로 안 어긋난다
• 기록이 조용히 사라지던 두 경로를 막았다
  • 이유: 둘 다 사용자가 뭘 잘못해서 나는 게 아니라 앱이 알아서 지우는 자리였다
  • 로그아웃은 「한 번 맞춘 뒤 로컬을 비운다」인데 그 맞추기가 실패해도 비우는 건 그대로 진행됐다. 이제 실패하면 안 지우고 멈춘 뒤 「다시 맞춰 보기 / 그래도 나가기 / 취소」를 묻는다
  • 자동 맞추기 실패를 조용히 삼키고 있었다. 며칠째 안 올라가고 있어도 「알아서 맞춰져요」로 보인다. 관리 화면에 띠를 띄우고 사이드바 ⚙️에 점을 찍는다
• 기록실에 돌아보기를 붙였다
  • 이유: 쓰는 사람이 「이번 달에 뭘 몇 번 했는지」 보고 싶다고 했다. 그래서 기록실에 한 달·한 해를 돌아보는 자리를 만들자고 했다
  • 기간을 「이 달 / 이 해 / 직접」으로 고른다. 여러 달에 걸치면 달별 막대가 서고, 달 막대를 누르면 달력이 그 달로 간다
  • 상위 업무 아래 하위 업무별 건수를 따로 세운다. 첫 판의 「응대 19건」을 보고 쓰는 사람이 원하는 건 전화가 몇 건이고 이메일이 몇 건인지라고 했다
  • 집계를 저장하지 않고 읽을 때 센다. 쌓아 두면 지난 기록을 고칠 때 같이 고쳐야 하고, 안 고쳐진 게 진실 행세를 한다
  • npm run check:month — 세 종류를 섞은 달과 한 해로 21가지를 실제 도메인 코드로 확인한다
• 맞추는 동안 화면을 덮게 했다
  • 이유: 맞추는 동안 기다리게 하고 싶다고 했다. 맞추는 중에 다른 걸 만지면 방금 고친 것이 이번 차례에 안 실린다
  • 상태마다 쓸 강아지 그림을 골라 넘겼다. 맞추는 중(물음표), 다 맞춤(하트 풍선), 못 맞춤(으르렁)
  • 다 맞춘 결과는 3초 세워 두라고 했다. 바꿀 게 없어 순식간에 끝나면 맞춰진 건지 아무 일도 안 일어난 건지 알 수가 없다
  • 자동 맞추기(손 멈춘 뒤 3초)는 안 덮는다. 손이 멈출 때마다 화면이 얼면 쓸 수가 없다

---

막힌 부분

돌아보기가 그날 기록과 한 자리를 다퉜다

첫 판을 보고 뭔가 불편하다고 했다. 무엇이 불편한지 선택지를 받아 둘을 골랐다. 달력과 자리를 다툰다, 기간을 못 고른다.

앞엣것은 이랬다. 날짜를 안 고른 동안에만 집계를 세웠는데, 상세가 비어 있으니 공짜 자리처럼 보였던 것이다. 실제로는 그날 기록을 보다가 집계로 돌아가려면 선택을 풀어야 했다. 되돌아가는 버튼을 붙여도 다투는 건 그대로였다.

• 해결: 달력 아래에 늘 두고, 날짜를 고르면 그 아래에 그날 기록이 붙는다. 고른 날이 없으면 상세를 자리째 없앤다
• 비어 있는 자리는 공짜가 아니었다. 그 자리가 무엇의 기본 상태인지를 먼저 봤어야 했다

「기간 내 몇 건」을 접두사 조회로는 표현할 수 없었다

골랐던 둘째 이유다. 쓰는 사람의 말을 전하면서 「전화 응대가 기간 내 몇 건」이라고 했는데, 그때는 달과 해만 고를 수 있었다.

저장소가 날짜 앞부분으로 기록을 걸러 오고 있었다. '2026-09'면 그 달, '2026'이면 그 해가 나온다. 편해 보였는데 「3월~8월」을 표현할 방법이 없다.

날짜 키가 'YYYY-MM-DD' 글자라 글자 비교가 곧 날짜 비교다. 그래서 from~to 범위 조회 하나로 바꾸니 달력 한 달도 같은 함수로 읽혔다.

• 해결: loadPeriod(접두사) → loadRange(from, to)
• 접두사는 「그 아래 전부」만 표현한다. 범위를 다루게 되는 순간 못 쓴다

실패해도 「다 맞췄어요」가 뜰 뻔했다

덮개에 결과를 표시하려고 보니, 맞추기 함수가 실패를 안에서 삼키고 있었다. 실패 사실만 상태에 적고 밖으로는 성공처럼 돌아갔다.

그대로 뒀으면 직접 누른 사람에게 실패해도 하트 풍선이 떴다.

• 해결: 실패를 밖으로 내보낸다. 던져 두는 호출(셔터 내림·3초 자동)만 각자 받아 낸다
• 조용히 삼키는 코드는 부르는 쪽이 늘어날 때 드러난다. 처음에는 부르는 곳이 하나라 아무 문제가 없다

인라인 style 없이 막대 길이를 주기

집계 막대의 너비는 값에 따라 달라진다. 그런데 이 프로젝트는 스타일을 한 파일에만 두기로 해서 인라인 style을 못 쓴다.

• 해결: progress 요소를 쓴다. 값은 속성으로 넘어가고 모양은 CSS가 맡는다
• 규칙을 우회할 방법을 찾기 전에, 그 값이 스타일인지 데이터인지를 먼저 봤다. 막대 길이는 데이터였다

---

다음에 할 일

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

---

Series: 오픈데이 Openday

---

Suggested Posts