오픈데이 Openday 2
오늘 한 일
- 인터넷에 올려 쓸 사람에게 주소를 보냈다
- 이유: 옆에서 화면을 직접 보여줄 수 없으니, 링크만 받아도 알아서 쓸 수 있는 상태가 되어야 보낼 수 있었는데, 어제 그 선까지 왔다고 판단했다
- 보내기 전에 좁은 화면 대응을 먼저 넣었다 — 상대 모니터 크기를 모르는데 폭이 고정이면 잘려 보인다
- 저장소를 만들고 배포를 자동으로 만들었다
- 처음에는 명령을 직접 돌려 올리는 방식으로 붙였다가, 저장소를 연결하면 밀어 넣는 것만으로 올라간다는 걸 확인하고 그쪽으로 바꿨다
- 중간에 자동 배포를 직접 만들어 붙였다가(작업 흐름 파일 + 토큰) 통째로 걷어냈다. 연결 방식이 토큰도 설정 파일도 필요 없어서 남겨둘 이유가 없었다
- 빌드에 타입 검사가 들어 있어서 타입이 어긋나면 배포가 멈춘다. 깨진 화면이 쓰는 사람에게 나가는 걸 한 겹 막아둔 셈이다
- 정식 서비스를 시작하면 배포용 브랜치를 따로 두기로 하고 그 절차를 문서에 적어 뒀다
- 검색에 안 잡히게 막았다
- 이유: 아직 한 명이 쓰는 단계라 주소가 검색 결과에 뜨면 안 된다
- 저장됐다는 표시를 넣었다
- 쓰는 사람 피드백 — 저장 버튼도 없고 아무 반응도 없어서 저장이 된 건지 알 수 없다
- 버튼을 만들면 자동 저장의 편함이 사라지므로 표시만 띄웠다. 손이 멈추면 「✓ 저장됨」이 잠깐 떴다 사라진다
- 화면이 좁다는 피드백을 받아 폭과 높이를 다시 짰다
- 화면 크기 구간마다 값을 따로 적어두던 것을 걷어내고, 화면 기준으로 계산해 알아서 따라오게 했다
- 세로도 고정 높이를 버리고 화면 높이를 탭·가게·광고 자리가 나눠 갖게 했다
- 하단에 광고를 붙였다
- 자리를 먼저 잡아 두고 나중에 광고를 채웠다. 이유: 광고가 채워지며 화면이 밀리면 누르려던 자리가 어긋난다
- 개발 중에는 진짜 광고를 부르지 않게 막았다. 고치며 새로고침할 때마다 노출이 잡히면 무효 트래픽이 된다
- 네 번째 화면 「관리」를 만들었다
- 기록이 어디에 저장되는지 안내, 개인정보처리방침·이용약관 링크, 문의처
- 광고가 광고 식별자를 쓰므로 방침이 필요해졌다. 조항은 로그스톤 샵이 관리하므로 요청해서 받아 연결했다
- 일회성 업무를 오늘 화면에서 고치고 지울 수 있게 했다
- 이유: 그 자리에서 만든 일을 고치려고 창고까지 가야 했다
- 모바일에서는 화면을 가득 쓰게 했다. 다만 손가락 화면에 맞춘 재설계는 다음으로 미뤘다
- 할 일을 백로그 한 곳에 모으고 급한 순으로 세웠다. 항목마다 이유를 함께 적었다
막힌 부분
- 켜진 탭에 마우스를 올리면 글자가 사라졌다
- 원인: 글자색을 바꾸는 규칙이 켜진 탭 규칙보다 우선순위가 높아 배경색과 같은 색으로 덮었다
- 해결: 마우스 효과를 꺼진 탭에만 적용되게 범위를 좁혔다
- 되돌릴 때도 도장이 찍히는 연출이 돌았다
- 원인: 연출을 숫자에 묶어둬서 숫자가 줄어드는 것도 변화로 쳤다
- 해결: 올라갈 때만 재생되게 조건을 나눴다
- 스크롤바를 감췄다 보였다 하며 화면마다 다르게 갔다
- 처음엔 기록실만 감췄다가, 오늘 화면도 감췄다가, 결국 셋 다 보이게 하고 모양을 통일했다
- 배운 것: 같은 종류의 요소는 화면마다 다르게 하면 그때는 그럴듯해도 나중에 설명이 안 된다
탭이 화면에서 사라졌다
세로를 화면 높이에 맞추고 났더니 상단 탭 세 개가 통째로 안 보였다. 두 번 고쳤는데 두 번 다 안 나았다.
첫 번째 원인은 세로 가운데 정렬이었다. 내용이 넘칠 때 넘친 만큼을 위아래로 반씩 잘라내므로, 맨 위에 있는 탭부터 화면 밖으로 밀린다. 가운데 정렬을 걷어냈는데도 그대로였다.
진짜 원인은 따로 있었다. 화면 라이브러리가 #root라는 상자 안에 그리는데 그 상자에 높이를 안 줬다. 높이를 비율로 지정하려면 부모가 높이를 알고 있어야 하는데, 중간에 하나라도 “내용만큼”인 요소가 있으면 그 아래 비율 지정이 통째로 무시된다.
/* 이 사슬이 끊기면 아래쪽 height: 100%가 기준을 잃는다 */
html,
body,
#root {
height: 100%;
}- 해결: 사슬을 이어주니 계산이 비로소 시작됐다
- 원인: 계산식은 처음부터 맞았는데 기준점이 없었다. 결과가 틀리면 식보다 기준점을 먼저 본다
가로 스크롤바가 저절로 생겼다
가게 폭을 “화면 폭 빼기 96px”로 잡았는데 가로 스크롤바가 생겼다. 세로 내용이 길어 세로 스크롤바가 먼저 생긴 게 시작이었다.
화면 폭을 뜻하는 값은 스크롤바 두께까지 포함한다. 그래서 실제로 쓸 수 있는 폭보다 크게 계산되고, 그만큼 가로로 삐져나가 가로 스크롤바가 따라 생긴다.
- 해결: 세로를 화면에 맞춰 세로 스크롤바를 없애니 가로도 같이 사라졌다
- 함께: 가운데 정렬 계산도 화면 폭 대신 부모 폭의 비율로 바꿨다. 부모 폭은 스크롤바를 뺀 값이라 어긋나지 않는다
가게 안쪽이 스크롤되지 않고 잘렸다
업무가 늘면 목록이 스크롤되는 대신 가게를 밀고 나갔고, 가게는 넘침을 숨기고 있어서 스크롤바 없이 그냥 잘렸다.
가로세로로 자리를 나누는 배치에서는 자식이 내용보다 작아지지 않는 게 기본이다. 줄어들 자리마다 풀어줘야 안쪽이 스크롤 영역으로 접힌다.
.shop,
.board,
.board-scroll {
min-height: 0;
}- 해결: 가게 → 보드 → 목록 각 단계에 풀어줬다
- 스크롤이 안 될 때 넘침 설정부터 보게 되는데, 실제로는 이쪽이 원인인 경우가 많다
자동 배포를 만들어 붙였다가 통째로 걷어냈다
작업 흐름 파일을 만들고, 접근 토큰을 발급받아 저장소 비밀값에 넣는 방식으로 자동 배포를 붙였다. 그런데 호스팅 쪽에 저장소를 연결하면 그게 전부 필요 없었다.
- 해결: 연결 방식으로 바꾸고 작업 흐름 파일을 지웠다
- 남은 한계: 처음 만들 때 정한 배포 방식은 나중에 바꿀 수 없다. 연결형으로 가려면 프로젝트를 지우고 다시 만들어야 했고, 그 과정에서 주소가 바뀔 뻔했다
- 순서를 반대로 했으면 토큰 발급도 작업 흐름 파일도 안 만들었을 것이다
크롤러를 막는 흔한 방법은 역효과가 난다
검색에 안 잡히게 하려고 흔히 쓰는 방법은 크롤러 안내 파일에 “전부 막음”을 적는 것이다. 그런데 이건 역효과가 난다. 크롤링을 막으면 크롤러가 페이지 안의 “색인하지 마세요” 지시를 읽을 수가 없어서, 다른 곳에 링크가 걸리면 내용 없이 주소만 검색 결과에 남는다.
- 해결: 들어와서 읽게 두되 응답 헤더와 페이지 양쪽에 색인 금지를 적었다
- 헤더 쪽이 더 확실하다 — 페이지뿐 아니라 모든 파일을 덮고, 크롤러가 화면을 그려보지 않아도 먹힌다
다음에 할 일
- 기록 내보내기·불러오기 — 기록이 브라우저에만 있어 브라우저 정리 한 번이면 되돌릴 수 없다
- 미완료 이월 — “다음 날”이 아니라 “다음 근무일”로 넘기기
- 근무 요일 설정 화면
- 쉬는 날 화면 — CLOSED 팻말과 잠옷 캐릭터
- 모바일 화면 재설계 — 지금은 데스크톱 화면을 좁힌 것뿐이다
- 한국 공휴일 처리 방식 정하기 — 연도별 표를 들고 갈지, 공공 자료를 부를지
- 캐릭터·팻말 그림을 어떻게 마련할지 정하기
- 계정을 붙일 때 첫 화면의 기본 업무를 사용법 안내로 바꾸기