블로그

color surface 테스트 목적 배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다. 확인 항목 페이지 배경과 카드가 섞이지 않는가 강조 영역이 너무 많지 않은가 라이트와 다크에서 바탕 인상이 유지되는가 시각 샘플 표면 레이어static 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다. ...

section list 테스트 목적 섹션 목록은 하위 페이지의 질서를 보여 줍니다. 제목, 요약, 카드, 메타가 과도하지 않으면서도 충분히 읽혀야 합니다. 확인 항목 목록 정렬이 예측 가능한가 빈 섹션 상태에서도 UI가 무너지지 않는가 하위 페이지의 요약이 과도하게 길지 않은가 기대 결과 목록 페이지는 많은 정보를 한 화면에 넣는 대신, 사용자가 다음 단계를 고를 수 있게 도와야 합니다. ...

section pages 테스트 목적 섹션 페이지는 하위 콘텐츠를 모으는 허브입니다. 요약, 목록, 읽는 순서가 분명해야 합니다. 확인 항목 섹션 소개와 하위 목록이 충돌하지 않는가 하위 페이지가 많아져도 읽기 쉽나 섹션 허브와 실제 본문이 혼동되지 않는가

alerts 테스트 목적 알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다. 확인 항목 알림이 본문 문단과 혼동되지 않는가 경고와 정보의 계층이 분리되는가 긴 메시지가 들어가도 박스가 무너지지 않는가 raw HTML 예시 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다. 실패 기준 알림이 본문처럼 보여 버리는 경우 색만 바뀌고 의미 구조가 없는 경우

language switcher 테스트 목적 언어 전환은 단순히 다른 언어 홈으로 보내는 링크가 아니라, 현재 문서의 대응 번역으로 이동해야 합니다. 확인 항목 현재 페이지가 가능한 경우 같은 문서의 다른 언어로 이동하는가 번역이 없을 때 안전한 대체 경로가 있는가 표기와 순서가 언어별로 일관적인가 운영 원칙 secondary 언어를 준비하지 않았다면 구조만 맞추고 본문은 비워 두는 편이 낫습니다. 잘못된 번역 연결보다 비어 있는 구조가 더 안전합니다. ...

upgrade summary 이번에 정리한 것 content/ko를 기준 트리로 재정리 docs/content-structure와 docs/design-system을 기준 문서로 정비 lab/hugo-content-lab을 페이지 타입, 컴포넌트, 마크업, 네비게이션, 구조, 운영으로 분리 blog를 실제 발행 글 형식으로 정리 front matter를 TOML 기준으로 통일 영향 범위 폴더 영향 content/ko/docs 기준 문서가 읽기 쉬워짐 content/ko/lab 검증 포인트가 더 세분화됨 content/ko/blog 운영 글과 검증 글이 분리됨 content/ko/categories, tags taxonomy 진입점이 명확해짐 결론 이번 작업의 핵심은 파일 수를 늘린 것이 아니라, 각 파일의 책임을 분명히 해서 앞으로의 확장이 예측 가능해진 것입니다. ...

update log 변경 기록 형식 항목 설명 날짜 2026-06-23 대상 content/ko 전반 요약 docs와 lab을 중심으로 콘텐츠 구조와 front matter를 정리 영향 탐색, taxonomy, page-hub, shortcode 검증 흐름 개선 메모 모든 콘텐츠는 KO 기준으로 먼저 완성 TOML front matter로 통일 검증용 콘텐츠는 lab에만 배치 운영 글은 blog에서만 유지

edge cases 테스트 목적 UI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다. 확인 항목 아주 긴 URL이 줄바꿈을 망치지 않는가 한 줄짜리 강한 강조가 과도하지 않은가 영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가 예시 This page keeps long URLs and English phrases readable even when the surrounding content is in Korean. 이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다.

embeds 테스트 목적 외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다. 확인 항목 임베드가 페이지 너비를 넘지 않는가 주변 본문과 간격이 충분한가 로딩 실패 시도 페이지가 무너지지 않는가 메모 실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다. ...

medium post 중간 길이 글은 가장 현실적인 테스트입니다. 너무 짧지도, 너무 길지도 않기 때문에 본문 리듬과 구성 감각이 드러납니다. 섹션 1 이 문단은 흐름을 확인하기 위한 문장입니다. 한글 설명 사이에 English term이 들어가도 리듬이 유지되어야 합니다. ...