WORKLOG.md (6142B)
1 # 작업 기록
2
3 커밋 메시지가 각 변경의 근거를 담고 있으므로, 여기 적는 것은 **거기서 안 보이는
4 것** — 결정이 뒤집힌 자리, 되풀이된 실수, 아직 안 끝난 것 — 뿐이다.
5
6 `git log --reverse`가 순서를 알려 준다. 이 문서는 순서가 아니라 형태를 남긴다.
7
8 ---
9
10 ## 참조 사이트(hahwul.com)와의 거리
11
12 이 사이트는 hahwul.com을 보고 만들었고, 그 관계가 세 번 바뀌었다.
13
14 1. **처음**: 정체성을 베끼지 말자고 제안했으나 사용자가 "구성은 동일하게, 배경과
15 디테일만 변형"으로 확정했다.
16 2. **중간**: 완성 후 "너무 똑같다"는 지적이 두 번 나왔다. 채도(참조는 34%,
17 사용자의 다른 사이트들은 82~100%)와 바닥색(참조만 순수 중립)이 결정적
18 차이였고, 거기서부터 자기 색을 갖기 시작했다.
19 3. **지금**: 특정 장치를 짚어 "이건 채용해"라고 지시하는 방식. 언어 토글, 리딩
20 레일, 플레이트 헤더, 프로젝트 모자이크, 탈색-호버가 그렇게 들어왔다.
21
22 **운용 규칙:** 참조와 다르다는 것 자체는 결함이 아니다. **재서 우리 쪽이 나쁠
23 때만** 고친다. 구조와 비율은 가져오되 장식·서체·카피는 가져오지 않는다.
24 사용자가 특정 장치를 짚으면 그건 확정 지시다.
25
26 ## 뒤집힌 결정 둘
27
28 **프로젝트 상세 페이지 재설계 → 되돌림.** 참조와 섹션 순서가 같다는 이유로
29 문서형(명패–스펙–주장–영수증)으로 다시 지었는데 사용자가 "아까가 훨씬 나았어"로
30 되돌렸다. 원래의 히어로–숫자띠–특징격자–터미널–CTA 구성이 확정이다.
31
32 **그림 탈색 필터 제거 → 복원.** 참조에서 값만 그대로 가져온 것이라 한 번 걷어
33 냈다가, 나중에 사용자가 직접 요청해 되살렸다. 근거가 달라졌다는 점이 중요하다 —
34 지금은 "색은 평상시에 없고 손이 닿을 때만 나온다"는 이 시트 자신의 전제를
35 그림까지 밀고 간 것이다.
36
37 ## 되풀이된 실수: 상자와 글자를 서로 다른 것에 매달았다
38
39 **세 번 같은 방식으로 틀렸다.**
40
41 | 자리 | 상자 | 글자 | 증상 |
42 |---|---|---|---|
43 | 하이라이트 카드 제목 | 컨테이너 폭 | `vw` | 950px 아래에서 디센더와 설명 둘째 줄이 잘림 |
44 | 리딩 레일 라벨 | `line-height` | 글꼴 줄상자 | 라벨마다 1px씩 잘림 |
45 | 모자이크 작은 타일 | 고정 비율 | `vw` | 740~1000px 구간에서 글이 상자를 넘침 |
46
47 상자가 A를 따라 줄고 글자가 B를 따라 줄면, 두 곡선이 만나는 지점 아래에서
48 반드시 넘친다. **`overflow: hidden`이 있으면 그 넘침이 조용히 잘림으로 나온다.**
49
50 고친 방법: 카드는 `container-type: inline-size` + `cqw`, 레일은 `max-height` +
51 `padding-bottom`, 모자이크는 좁은 폭에서 비율을 놓고 글이 높이를 정하게.
52
53 **부속 교훈:** `-webkit-line-clamp`은 이 엔진에서 `display`가 `flow-root`로
54 계산돼 죽는다. 그러면 `overflow: hidden`만 남아 `line-height` 높이에서 글자를
55 자른다. 이 시트에는 더 이상 쓰지 않는다.
56
57 ## 측정을 믿지 말고 렌더를 믿을 것
58
59 잘림을 "안 잘린다"고 두 번 잘못 보고했다.
60
61 - `label.scrollHeight > label.clientHeight`로 넘침을 판정했는데, **가운데 정렬된
62 flex 열은 위로 넘친 내용을 스크롤로 보고하지 않는다.**
63 - 죽은 링크 검사에서 `exists()`를 썼는데, `public/ko/`는 하위 갈래 때문에
64 디렉터리로 존재하지만 `index.html`이 없어 404였다. `is_file()`이라야 한다.
65
66 둘 다 **폭을 바꿔가며 실제로 찍어 보고서야** 드러났다. 프록시 지표는 프록시일
67 뿐이다.
68
69 ## 검사기가 잡는 것
70
71 `sqzass`는 마크다운의 `@/` 링크·템플릿 변수·에셋 이름을 검증하지만 `[extra]`
72 안과 템플릿이 조립한 주소는 검증하지 않는다. 그 구멍을 `tools/check.py`가 메운다.
73
74 | 검사 | 무엇을 | 왜 생겼나 |
75 |---|---|---|
76 | `check_projects` | 카탈로그 ↔ 실제 페이지 양방향 | `[extra]`는 생성기가 안 읽는다 |
77 | `check_preview` | 홈의 미리보기·모자이크 URL과 파일 | 어긋나면 조용히 안 나온다 |
78 | `check_i18n` | 두 언어 키 집합 일치 | 안 맞으면 그 키를 처음 쓰는 날 터진다 |
79 | `check_links` | 빌드된 HTML의 내부 링크 | 한국어 홈을 없앤 날 로고가 11장에서 404를 가리켰다 |
80
81 `check_links`는 `public/`이 있어야 돌기 때문에 CI가 빌드 **뒤에** 한 번 더 부른다.
82 `tools/stars.py`는 `content/` 전체를 훑는다 — 별 개수가 프로젝트 상세와 홈
83 카탈로그 두 곳에 있어서 한쪽만 갱신되면 조용히 낡는다.
84
85 세 검사기 모두 **일부러 깨뜨려 실패하는 것까지 확인**하고 커밋했다.
86
87 ## 아직 안 끝난 것
88
89 - **`sqzass` PR #1이 열려 있다.** 목록에 날짜를 싣는 `PageRefCtx.date`이고,
90 Posts 원장이 그걸 쓴다. 머지되면 `.github/workflows/pages.yml`에서
91 `--branch feat/pageref-date` 한 줄을 지운다.
92 - **그림 넉 장이 없다.** `uaf`·`udfx`·`usfx`·`doomsday`는 모자이크에서 색면으로만
93 선다. 커버가 생기면 홈 카탈로그에 `cover` 한 줄이면 들어온다. 참조 사이트와의
94 실제 거리는 구조가 아니라 이 그림들이다.
95 - **글이 한 편뿐이다.** 그래서 홈의 Writing 목록이 비어 있다(맨 위 한 편은
96 카드로 올라가고 목록은 그 다음부터다). CSS로 메울 수 있는 문제가 아니다.
97 - **프로젝트 타일 격자가 1349px 아래에서 3열 → 2열로 떨어지고** 그 뒤 컨테이너
98 안에서 70% 폭으로 뜬다. 실측된 결함이지만, 그 격자가 그렇게 짜인 이유를 적어
99 둔 주석을 깨지 않고 고치는 방법을 아직 못 찾았다.
100
101 ## 소유권
102
103 셸은 root로 돌지만 데스크톱 세션은 `himesama`(UID 1000)다. 파일을 만지고 나면
104 `chown -R himesama:himesama`를 돌려야 사용자가 편집할 수 있다.