항목
연결된 항목을 한눈에 살펴보세요.
typography language 테스트 목적 한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다. 확인 항목 제목의 줄바꿈이 과도하지 않은가 영문 약어가 본문보다 튀지 않는가 숫자와 단위가 문단 흐름을 깨지 않는가 코드와 본문이 같은 톤으로 섞이지 않는가 예시 Hugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다. ...
color surface 테스트 목적 배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다. 확인 항목 페이지 배경과 카드가 섞이지 않는가 강조 영역이 너무 많지 않은가 라이트와 다크에서 바탕 인상이 유지되는가 시각 샘플 표면 레이어static 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다. ...
motion shape 테스트 목적 모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다. 확인 항목 hover와 focus 상태가 구분되는가 radius가 카드와 버튼에 같은 문법으로 적용되는가 transition이 빠르되 거슬리지 않는가 기대 결과 레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다. ...
design tokens 테스트 목적 토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다. 확인 항목 기초 값과 의미 값이 구분되는가 컴포넌트가 직접 숫자를 들고 있지 않은가 토큰 변경이 여러 UI에 예측 가능하게 반영되는가 기대 결과 페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다. ...
spacing layout 테스트 목적 spacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다. 확인 항목 제목과 본문 사이 간격이 일관적인가 카드 목록의 밀도가 적절한가 모바일에서 여백이 너무 좁거나 넓지 않은가 판정 간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다. ...