오픈데이 Openday 1

오늘 한 일

• 스택을 정하고 프로젝트를 열었다
  • 이유: 종착지가 계정 있는 웹앱이라, 이미 지나온 조합(React + Vite + TypeScript → Cloudflare)으로 잡으면 처음 겪는 문제가 거의 없다
  • 다른 후보는 접었다. 순수 JS는 항목이 늘면 결국 옮기게 되고, Svelte는 문법 배우다 첫날 셔터를 못 보고, Astro는 화면 전체가 상호작용이라 얻는 게 없고, Flutter Web은 첫 로딩이 무겁다
• 프로젝트 문서를 먼저 쓰고 시작했다
  • 작업 원칙을 다른 프로젝트와 같은 세트로 맞추고, 그날 정한 결정(저장 방식·화면 기준·근무 형태)을 문서에 박았다
  • 이유: 세션이 바뀌면 대화는 사라지고, 다음에 다른 전제로 작업하면 되돌리기 어렵다
• 첫 조각을 띄웠다 — OPEN으로 셔터가 올라가고, 업무 목록이 보이고, 도장이 찍히고, CLOSE로 셔터가 내려가며 요약이 뜬다
  • 셔터는 금속 슬랫을 반복 무늬로 그리고 1.15초에 걸쳐 올린다. 마감 요약은 셔터가 다 내려온 뒤에 떠서 “불 끄고 인사”하는 순서가 되게 했다
• 나중에 서버로 옮길 것을 전제로 저장 구조를 잡았다
  • 저장하는 쪽을 화면에서 떼어내고, 업무 정의와 하루 기록을 나누고, 사용자 자리와 구조 버전을 미리 넣었다
  • 이유: “집에서도 쓰고 싶다”는 말이 나오는 날이 오면 그때 계정을 붙이는데, 그날 화면을 다시 짜지 않으려면 지금 나눠 두는 게 싸다
• 화면을 한 채에서 세 채로 늘렸다 — 오늘·창고·기록실
  • 가로로 나란히 놓고 탭을 누르면 옆 가게로 걸어가듯 미끄러진다
  • 이유: 업무를 만들 곳과 지난 날을 볼 곳이 필요해졌는데, 셔터 안에 다 넣으면 퇴근 후에는 아무것도 못 보게 된다
• 업무 체계를 붙였다
  • 하위 업무 한 단계, 도장 방식 세 가지(완료·횟수·없음), 배치 세 가지(상시·요일별·일회성)
  • “문의 응대” 아래 전화·이메일·홈페이지를 두고 각각 도장을 찍는 형태가 기준 사례였다. 상위는 도장을 안 찍고 표시만 하는 선택지가 그래서 필요했다
  • 업무별 메모와 그날 특이사항도 함께
• 일회성 업무는 「오늘」 화면에서 바로 만들게 했다
  • 이유: 근무 중에 갑자기 생긴 일인데 창고까지 다녀오면 흐름이 끊긴다
• 지우기와 보관을 이력으로 갈랐다
  • 도장을 찍은 적 있는 업무는 보관만 되고, 잘못 만든 업무는 완전히 지운다
  • 이유: 지난 기록은 업무 이름을 가리키기만 하므로, 이름을 지우면 그날 기록이 빈칸이 된다
• 도장을 다시 만들었다
  • 「도장 쾅」 버튼과 완료 도장을 하나로 합쳐, 회색 빈 도장 자리를 누르면 찍히면서 붉어지게 했다
  • 우클릭하면 되돌아간다. 횟수는 하나씩 줄고 0에서 멈춘다
  • 이유: 버튼과 도장이 따로 있으니 자리를 두 번 먹고, 찍는 순간 버튼이 사라졌다 도장이 나타나는 교체가 어색했다
• 기록실을 다이어리처럼 만들었다
  • 월 달력에서 도장 수에 따라 칸이 진해지고, 날짜를 누르면 그 아래 상세로 부드럽게 굴러간다
  • 상세에서는 업무마다 결과가 뜨고, 하위가 있는 업무는 앞의 토글을 열어 항목별 건수를 본다
• 업무 앞에 일정 뱃지를 붙였다 — 상시·요일·하루만을 색으로 구분

---

막힌 부분

• 도장을 되돌릴 때도 찍히는 연출이 재생됐다
  • 원인: 연출을 카운트 숫자에 묶어 두어서 숫자가 줄어드는 것도 변화로 쳤다
  • 해결: 숫자가 올라갈 때만 재생되도록 조건을 따로 뒀다
• 이미 완료인 도장을 다시 눌러도 연출이 돌았다
  • 상태는 그대로인데 화면만 반응하니 눌린 것처럼 보였다
  • 해결: 완료형이 이미 찍혀 있으면 왼쪽 클릭을 무시하고, 마우스를 올려도 뜨지 않게 했다
• 기록실에서 날짜를 누르면 상세로 이동해야 하는데 화면 전체가 흔들릴 뻔했다
  • 원인: 특정 위치로 굴려 주는 표준 기능은 대상까지 가는 길의 모든 상위 영역을 함께 굴린다. 우리 구조에는 가게 세 채가 늘어선 거리가 상위에 있어서 캐러셀 위치가 틀어질 수 있었다
  • 해결: 기록실 패널만 직접 굴리게 했다
• 하위 집계를 접는 토글을 두 화면에 다 넣었다가 「오늘」에서는 걷어냈다
  • 오늘 화면은 바로 아래에 하위 업무 목록이 이미 펼쳐져 있어 접을 이유가 없었다

도장을 찍을 때마다 가로 스크롤바가 깜빡였다

도장이 커졌다 작아지는 연출이 목록 오른쪽 끝에서 일어나 보드 밖으로 삐져나갔다. 그런데 삐져나간 것만으로는 스크롤바가 생기지 않아야 했다. 목록에 세로 스크롤만 켜 두었기 때문인데, CSS는 한 축만 지정하면 나머지 축을 자동으로 바꾼다.

.task-list {
  overflow-y: auto;
  /* overflow-x를 적지 않으면 visible이 아니라 auto로 계산된다 */
  overflow-x: hidden;
}

• 해결: 가로를 명시적으로 잠그고, 도장 연출을 줄 한가운데로 옮겨 애초에 넘치지 않게 했다
• 남은 한계: 나중에 도장 자체가 버튼이 되면서 이 연출 레이어는 통째로 사라졌다

창고에서 업무 하나를 펼치면 다른 업무가 눌려 글자가 잘렸다

펼친 카드도 남은 공간만큼만 늘어나 하위 업무가 잘려 나갔다. 두 증상의 원인이 하나였다. 세로로 쌓은 flex는 공간이 모자라면 자식을 알아서 줄인다.

.panel-scroll > * {
  flex: none;
}

• 해결: 기본 축소를 끄니 펼친 카드는 내용 길이만큼 늘어나고 나머지는 제 높이를 지켰다
• 함께: 목록이 길어지므로 카드를 펼치면 그 카드가 위로 올라오게 스크롤을 옮겼다

켜진 탭에 마우스를 올리면 글자가 사라졌다

탭 글자색을 어두운 갈색으로 바꾸는 hover 규칙이 있고, 켜진 탭은 배경이 같은 갈색이었다. 글자색 지정은 켜진 탭 쪽에 있었는데도 hover가 이겼다. 클래스 하나짜리 규칙보다 클래스 + 상태 조건이 더 구체적이기 때문이다.

.tab:not(.tab--on):hover {
  color: var(--frame);
}

• 해결: hover 색 변경을 꺼진 탭에만 적용되게 범위를 좁혔다
• 원인: 스타일이 안 먹을 때 오타부터 찾았는데 실제로는 우선순위 문제였다

기록실에서 하위 집계 줄만 자리가 밀렸다

집계와 메모는 “다음 줄을 통째로 차지하라”고 지정해 두었는데 같은 줄에 끼어들었다. 줄바꿈이 꺼져 있으면 그 지정이 무시된다.

.detail-list li {
  display: flex;
  flex-wrap: wrap;
}

• 해결: 줄바꿈을 켰다
• 하위 업무가 있는 업무가 하나뿐이라 그 줄만 이상해 보였는데, 메모를 단 업무가 있었어도 똑같이 나왔을 문제였다

들여쓰기를 했는데 들여쓴 티가 안 났다

기록실에서 하위 항목을 22px 들여썼다. 그런데 그 값이 하필 앞에 놓인 토글 폭(14px)과 간격(8px)의 합과 정확히 같아서, 하위 항목이 상위 제목 시작점에 딱 맞물렸다.

• 해결: 한 칸 더 넣어 44px로
• 숫자를 눈이 아니라 앞 요소의 폭에서 거꾸로 계산해야 하는 자리였다

---

다음에 할 일

• Cloudflare Pages에 올려 쓸 사람에게 링크 보내기
• 미완료 이월 — “다음 날”이 아니라 “다음 근무일”로 넘어가게
• 근무 요일 설정 화면
• 쉬는 날 화면 — CLOSED 팻말과 잠옷 캐릭터
• JSON 내보내기·불러오기 — 브라우저 데이터가 날아가도 기록이 남게
• 한국 공휴일 처리 방식 정하기 — 연도별 표를 들고 갈지, 공공 API를 부를지
• 캐릭터·팻말 그림을 어떻게 마련할지 정하기
• 글꼴 자체 호스팅 여부 정하기

---

Series: 오픈데이 Openday

---

Suggested Posts