개념 2026-09-08

정보구조와 화면 설계

자동화의 완성은 "읽힌다"까지, 이름이 곧 정보구조, 성격 다른 건 안 섞기, 접두사로 한 단계만 쪼개기, 계획서는 "바뀐 것" 표로, CSS 함정 몇 개.

봇이 결과물을 잘 만들어도 안 읽히면 소용이 없었습니다. “만들어진 게 어떻게 보이는지”를 다루며 배운 것. → 상위: 개발 지식 지도

자동화의 완성은 “돌아간다”가 아니라 “읽힌다”까지다

봇이 GitHub에 커밋하는 데 성공했는데, 하루 뒤 들어와 보니 그 결과물이 “기타”라는 이름 아래 묻혀 있었다. 코드는 정확히 시킨 대로 동작했지만, 그 규칙이 만들어진 시점에는 용어 사전이라는 게 존재하지도 않았다.

→ 같은 교훈의 운영 쪽 짝: 조용히 틀리는 버그 잡기

이름이 곧 정보구조다

가장 먼저 고친 것: 기타용어 사전. 이 단어 하나 때문에 매일 자동으로 자라는 자산이 잡동사니처럼 보이고 있었다. 라벨 하나 바꾼 게 그날 작업 전체의 출발점이었다.

성격이 다른 건 한 칸에 안 섞는다

용어 사전개발일지
누가 쓰나봇이 자동으로내가 직접
왜 보나모르는 용어를 찾아보려고어떻게 만들었는지 되짚으려고

사이드바를 “자동으로 자라는 것 / 내가 쓰는 것” 두 덩어리로 갈랐더니 나머지 문제가 다 풀렸다. 이후 “용어 / 이슈”, “지식 지도”도 같은 원칙으로 칸을 나눴다.

출처: 학습위키 구조를 다시 짠 하루 · 지식 지도를 얹은 하루

판정 규칙을 새로 만들지 말고 한 단계만 쪼갠다

사이드바는 이미 “주차 없는 글 = 봇 자동 생성”으로 묶고 있었다. 그 안에서 파일명 앞부분으로 한 단계만 더 갈랐다:

const 자동생성 = weeks.find((w) => w.주차 === 0)?.items ?? [];
const 이슈노트 = 자동생성.filter((e) => e.slug.startsWith('issues-'));
const 용어사전 = 자동생성.filter((e) => !e.slug.startsWith('issues-'));

공통 함수(getWikiGrouped)는 안 건드렸다. 새 판정 로직 없이 접두사만으로 분기.

라벨을 넓혀 때우기 전에, 생성하는 쪽에 분류를 시킬 수 있는지 본다

용어 사전에 이슈가 섞였을 때, “용어 사전”을 “키워드 노트”로 이름만 넓히는 대신 봇 출력에 유형 한 칸을 추가했다. 봇이 유형만 뱉으면 사이트는 파일명으로 자동 분류된다. 후처리/병합 로직은 경로를 변수로 받게 짜두면 분기 비용이 0 — 그날 병합 노드를 한 줄도 안 고쳤다.

<details>로 접기·펴기는 스크립트가 필요 없다

<details class="group" open>
  <summary class="group-title">용어 사전</summary>
  ...
</details>

open을 붙이면 기본이 펼침. 기본 삼각형 마커만 지우고 직접 화살표를 그렸다:

summary::-webkit-details-marker { display: none; }
summary::before { content: '▸'; transition: transform 0.15s; }
details[open] > summary::before { transform: rotate(90deg); }

가운데 정렬을 풀 때는 본문 폭을 따로 묶는다

사이트 전체가 max-width; margin: 0 auto라 넓은 화면에서 사이드바가 한복판에 떴다. 가운데 정렬만 풀면 이번엔 본문이 화면 폭만큼 늘어나 한 줄이 1100px가 된다. 그리드 칸 자체에 폭을 박고 남는 공간을 오른쪽에 버린다:

.wiki-grid {
  grid-template-columns: 240px minmax(0, 780px);
  justify-content: start;
}

#앵커로 이동할 때 제목이 안 보이는 문제

  • 제목이 헤더 바로 밑에 붙어서 눈에 들어오는 건 ‘다음 항목’이었다 → .prose :is(h1,h2,h3,h4)[id] { scroll-margin-top: 40vh; }
  • “여기야” 표시 → :target에 2.4초 노란 배경 플래시
  • 맨 끝 항목도 올라오게 → .col-main { padding-bottom: 45vh; }
  • 한 번 더 막힘: 브라우저가 #앵커로 스크롤하는 순간엔 글꼴·툴팁 밑줄이 아직 안 붙어서 글 길이가 다르다 → requestAnimationFrame · document.fonts.ready · load 시점에 위치를 다시 맞춘다.

출처: 7주차 회고 — 자리 4

옵시디언은 “새 도구”가 아니라 “같은 폴더의 다른 창”

  • 옵시디언은 사이트가 쓰는 src/content/wiki/ 폴더를 그대로 연다. 복사본이 아니다.
  • 모양을 옵시디언에서 잡고, 굳으면 공개: true로 사이트에.
  • 옵시디언 설정 폴더 .obsidian/은 사이트와 무관하니 .gitignore에.
  • 게시 전 링크 변환: [[glossary-semiconductor#HBM|HBM]][HBM](/wiki/glossary-semiconductor#hbm). 앵커 규칙 = 소문자, 공백은 -, 한글은 그대로 (## 포터블 SSD#포터블-ssd). 미리보기에서 실제로 눌러 전부 확인.

출처: 지식 지도를 얹은 하루

계획서는 덮어쓰지 말고 “바뀐 것” 표로 남긴다

프로젝트 문서가 8월 초 계획서에 멈춰 있었다. 지우고 새로 쓰는 대신 원안(PRD) / 지금 / 바꾼 이유 표를 만들었다. 결과물보다 판단 근거가 포트폴리오에서 더 오래 쓰인다. 같은 이유로 지난 회고는 손대지 않았다 — 그 시점엔 그게 사실이었으니 고치면 기록이 아니게 된다.

애매한 판정은 그때그때 정하지 말고 규칙으로 못 박는다

“제작인가 개선인가”가 애매했을 때, 기준(“챌린지 종료일이 아니라 구현 완료일 기준”)을 정해 저장소의 AGENTS.md에 규칙으로 적어뒀다. 다음부터 안 흔들린다.