사용 가이드로 건너뛰기
Typography Scale작성자 Owl-Listener

Typography Scale 스킬.

문서화된 소수의 텍스트 스타일로 읽기 쉬운 위계를 만듭니다.

  • UI 디자인
  • 타이포그래피
소스 검토 · Typography ScaleSKILL.md
작업 UI 디자인 결과물 • 크기, 굵기, 행간, 자간이 포함된 이름 있는 텍스트 스타일 스케일. • 본문, 제목, 기술 텍스트에 대한 글꼴 역할 지정. • 반응형 사용 규칙과 실제 콘텐츠 점검. 시작하기 전에 의미 있는 시각 검증을 하려면 실제 글꼴 파일 또는 사용 가능한 플랫폼 글꼴이 필요합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

일관된 타입 시스템 구축하기

모듈러 크기, 굵기, 행간, 자간, 글꼴 역할, 반응형 사용을 다루는 타이포그래피 시스템 참고 자료입니다.

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

작업 방식

Typography Scale은 크기 간의 관계를 굵기, 행간, 자간과 결합합니다. 타입 시스템을 단순한 글꼴 크기의 나열 이상으로 보며, 캡션, 본문 단락, 제목, 디스플레이 문구는 각각 다른 역할과 사용 조건이 필요합니다.

소스에는 모듈러 비율과 글꼴 역할 선택 예시, 그리고 제목과 읽기 길이에 대한 모바일 지침이 포함되어 있습니다. 이는 실제 콘텐츠로 테스트해야 하는 출발점 규칙입니다. 수학적 비율만으로 모든 글꼴이나 문자 체계에서 가독성이 보장된다고 주장하지는 않습니다.

예상 결과물

  • 크기, 굵기, 행간, 자간이 포함된 이름 있는 텍스트 스타일 스케일.
  • 본문, 제목, 기술 텍스트에 대한 글꼴 역할 지정.
  • 반응형 사용 규칙과 실제 콘텐츠 점검.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    기본 관계 선택

    콘텐츠와 기존 브랜드에 맞는 본문 기준 크기와 비율을 선택합니다.

  2. 02
    완전한 스타일 정의

    각 크기에 굵기, 행간, 자간, 명확한 사용 역할을 짝지어 정합니다.

  3. 03
    실제 텍스트 테스트

    긴 제목, 본문 단락, 모바일 너비를 확인하세요. 개별 사례를 고치려고 불필요한 크기를 추가하지 마세요.

02 활용 상황

사용 시기

의미 있는 시각 검증을 하려면 실제 글꼴 파일 또는 사용 가능한 플랫폼 글꼴이 필요합니다.

적합한 경우

  • 일관성 없는 텍스트 스타일제품에 거의 중복된 제목과 레이블이 쌓여 있을 때 유용합니다.
  • 새 UI의 기반각 화면이 제각각 스케일을 만들기 전에 타입 역할을 정립합니다.

확인할 한계

  • 읽기 길이만 다루지 않음행 길이도 중요하지만, 이 스킬은 더 넓은 범위의 타입 시스템을 다룹니다.
  • 서체 라이선스가 아님글꼴 선택과 사용에는 여전히 적절한 라이선스와 플랫폼 사용 가능 여부가 필요합니다.

준비할 입력

  • 글꼴과 브랜드승인된 글꼴 패밀리, 사용 가능한 굵기, 기존 제약 사항을 제공하세요.
  • 콘텐츠 샘플실제와 유사한 레이블, 제목, 단락, 코드 또는 숫자 표시를 포함하세요.
  • 화면 환경모바일, 고밀도 UI, 장문 읽기 요구 사항을 설명하세요.

03 핵심 결정

핵심 결정 사항

  1. 스타일에 역할을 부여

    문서화된 사용 사례가 인접한 크기 사이의 임의적인 결정을 줄입니다.

  2. 모든 것을 줄이지 않는 모바일 대응

    소스는 제목을 줄이는 것과 읽기 좋은 본문 기준 크기를 유지하는 것을 구분합니다.

04 예시 브리프

구체적인 브리프로 시도하기

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

설정 검토

저장소에 문서화된 설치 방법을 사용하고, 참조된 보조 파일을 함께 보관하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 집중된 디자인 방법을 설명합니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

의미 있는 시각 검증을 하려면 실제 글꼴 파일 또는 사용 가능한 플랫폼 글꼴이 필요합니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 사항을 조정하세요.

예시 브리프
아티클 본문, 노트, 내비게이션 레이블, 코드 발췌가 있는 리서치 읽기 앱에 typography-scale을 사용하세요. 절제된 모듈러 스케일을 완전한 스타일 값과 모바일 제목 동작까지 포함해 정의하세요. 자리표시자 텍스트가 아니라 제공된 긴 제목과 단락으로 테스트하세요.

결과 점검

실제 출력을 아래의 관찰 가능한 기준과 대조해 확인하세요.

  • 모든 스타일에는 글꼴 크기 값 외의 요소도 포함됩니다.
  • 자주 쓰이는 텍스트 역할에는 제한된 수의 스타일을 사용합니다.
  • 긴 제목과 본문이 좁은 너비에서도 읽기 쉽게 유지됩니다.

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

05 출처 및 라이선스

소스 및 라이선스

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

소스 소유자
Owl-Listener
라이선스
MIT
검토된 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
모듈러 크기, 굵기, 행간, 자간, 글꼴 역할, 반응형 사용을 다루는 타이포그래피 시스템 참고 자료입니다.

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

06 시작 전 질문

시작 전 질문

모듈러 스케일이 글꼴을 정해 주나요?

아니요. 비율은 크기를 체계화할 뿐이며, 글꼴 선택과 실제 렌더링은 여전히 판단이 필요합니다.

모바일에서 모든 데스크톱 크기를 줄여야 하나요?

소스는 읽기 좋은 본문 크기를 유지하고 행 길이를 조정하면서 제목을 줄일 것을 제안합니다.

일상적으로 몇 가지 스타일을 사용해야 하나요?

소스는 일상적인 사용을 소수의 스타일로 제한하되, 캡션이나 디스플레이 텍스트 같은 추가 역할은 문서화하라고 권장합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

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

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md