사용 가이드로 건너뛰기
Critique Typography작성자 owl-listener

Critique Typography 스킬.

가독성과 기존 타이포그래피 시스템을 기준으로 렌더링된 텍스트를 점검하세요.

  • 타이포그래피
  • 가독성
소스 검토 · critique-typographySKILL.md
작업 가독성과 기존 타이포그래피 시스템을 기준으로 렌더링된 텍스트를 점검하세요. 결과물 크기 체계, 가독성, 일관성, 토큰 준수별로 정리된 검토 결과. 시작 전 확인 화면 수준의 비평에는 CSS 선언 목록만이 아니라 실제 출력이 필요합니다.
편집 요약 · 소스 검토일 2026-11-02 · 생성된 예제가 아닙니다

01 기능 소개

가독성과 기존 타이포그래피 시스템을 기준으로 렌더링된 텍스트를 점검하세요

화면의 글자 크기 체계, 가독성, 일관성, 토큰 준수를 검토하고 구체적인 문제와 수정안을 작성하세요.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Critique Typography는 렌더링된 화면에서 글자가 실제로 어떻게 쓰이는지 살펴봅니다. 크기 체계의 사용, 읽기 편안함, 일관성, 토큰 준수를 검토합니다. 유용한 지적은 보이는 현상과 적용돼야 할 기존 스타일 또는 토큰을 함께 명시해 팀이 구체적인 불일치를 수정할 수 있게 합니다.

소스는 줄 길이, line-height, 자간, 대비, 의미적 역할 같은 구체적인 검토 차원을 포함합니다. 동등한 요소를 동등하게 처리하는지도 묻습니다. 따라서 인터페이스 구현 후, 특히 개별 조정이 쌓여 원래 타이포그래피 시스템이 흐트러졌을 때 유용합니다.

예상 산출물

  • 크기 체계, 가독성, 일관성, 토큰 준수별로 정리된 검토 결과.
  • 각 문제에 대한 관찰, 설명, 실행 가능한 수정안.
  • 검토한 차원마다 통과, 경미한 문제 또는 중대한 문제 평가.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    렌더링된 타이포그래피 시스템 읽기

    정의된 텍스트 스타일과 토큰을 화면과 함께 확인합니다. 제목, 라벨, 본문, 캡션을 실제 역할에 따라 구분합니다.

  2. 02
    읽기 조건 평가

    맥락 안에서 크기, line-height, 줄 길이, 자간, 대비를 검토합니다. 소스의 수치 지침은 제품 요구사항에 비춰 평가할 검토 기준으로 다룹니다.

  3. 03
    동등한 요소 비교

    반복되는 라벨, 제목, 텍스트 블록에 일관된 굵기, 정렬, 크기 단계가 쓰이는지 확인합니다. 일회성 스타일과 임의의 중간값을 찾습니다.

  4. 04
    문제를 수정안에 연결

    차원마다 중립적 관찰을 문제와 제안하는 수정안에서 분리합니다. 기존 정의가 적용된다면 적절한 토큰 이름을 명시합니다.

02 활용 상황

언제 사용하면 좋을까요

화면 수준의 비평에는 CSS 선언 목록만이 아니라 실제 출력이 필요합니다.

적합한 경우

  • 타이포그래피 일관성이 흐트러졌을 때구현된 화면에 임의의 크기나 굵기 조정이 누적된 경우입니다.
  • 초점을 좁힌 시각적 비평레이아웃은 정해졌지만 텍스트 위계나 읽기 편안함을 개선해야 할 때입니다.

확인할 한계

  • 렌더링된 증거화면 수준의 비평에는 CSS 선언 목록만이 아니라 실제 출력이 필요합니다.
  • 기존 시스템 기준초기 크기 체계 정의는 별도의 typography-scale 스킬이 담당합니다.
  • 범위가 한정된 평가타이포그래피 검토는 완전한 접근성 인증이나 제품 전체 감사가 아닙니다.

준비할 입력

  • 렌더링된 화면중요한 크기와 상태의 인터페이스를 제공하세요.
  • 타이포그래피 정의타이포그래피 토큰과 의도한 역할을 제공하세요.
  • 콘텐츠 맥락실제 텍스트, 언어, 읽기 조건을 포함하세요.

03 핵심 결정

중요한 판단 기준

  1. 구체적인 수정

    수정안에서 적용해야 할 정확한 스타일이나 토큰을 지정할 수 있습니다.

  2. 비교 가능한 차원

    보고서는 크기 체계 문제를 가독성 및 일관성과 구분합니다.

  3. 눈에 보이는 증거

    결과는 검토자가 실제 관찰할 수 있는 것을 설명합니다.

04 예시 브리프

목적을 좁힌 요청으로 시작하세요

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

소스와 설정 확인

중요한 크기와 상태의 인터페이스를 제공하세요.

업스트림 소스 파일
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md

아래 참고 링크에서 원본 사용 지침을 확인할 수 있습니다. 사용 전에 리포지터리의 설정 요건을 확인하세요. 설치 명령어가 아닙니다.

결과물 하나부터 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
데스크톱과 모바일 너비로 렌더링된 분석 개요에 critique-typography를 적용해주세요. 보이는 제목, 라벨, 값, 본문을 타이포그래피 토큰과 비교하세요. 크기 체계, line-height, 줄 길이, 대비, 동등한 요소 간 일관성을 검토하세요. 차원마다 중립적으로 관찰하고 문제를 설명한 뒤, 해당 토큰이 있으면 정확한 이름을 포함해 구체적인 수정안을 제안하세요. 통과, 경미한 문제 또는 중대한 문제로 평가하세요. 현재 레이아웃 방향을 유지하고 측정한 속성과 추가 확인이 필요한 판단을 구분하세요.

결과 확인

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 각 문제는 보이는 요소와 해당 글자의 역할을 가리킵니다.
  • 추천하는 토큰은 프로젝트의 실제 정의를 사용합니다.
  • 평가에는 관찰과 구체적인 수정안이 함께 제시됩니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스와 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
owl-listener
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-11-02 · 9a6930cf84a8
편집 소스 요약
가독성과 기존 타이포그래피 시스템을 기준으로 렌더링된 텍스트를 점검하세요.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 궁금한 점

새 타이포그래피 크기 체계를 정의하나요?

소스는 사용 방식 검토에 집중하며 크기 체계 생성은 별도 스킬로 안내합니다.

결과 형식은 무엇인가요?

차원마다 관찰, 문제 설명, 실행 가능한 수정안, 심각도 평가를 제공합니다.

하드코딩된 글자 값을 확인하나요?

네. 토큰 준수는 글꼴, 크기, 굵기, line-height, letter-spacing을 포함합니다.

OpenDesign

작업 요청과 디자인 결과물을 한곳에 모으세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-typography/SKILL.md