chenglou/pretext

외부 오픈소스 저장소를 소개하는 글입니다. HDATF 제품이 아닙니다.

무엇을 하나

여러 줄 텍스트의 크기를 재고 배치를 계산하는 JavaScript, TypeScript 라이브러리입니다. 자체 계산을 쓰기 때문에 layout reflow를 일으키는 DOM 측정을 피할 수 있습니다. 결과는 DOM, Canvas, SVG로 그릴 수 있습니다.

ATF에 주는 도움

ATF Works의 긴 메시지 목록이나 채팅 화면에서 DOM reflow 없이 글 높이를 계산해야 할 때 참고할 수 있습니다. Markdown 채팅 데모가 바로 그 경우를 설명합니다.

라이선스

MIT 허용 범위가 넓습니다. 저작권 표시를 유지하면 상업적 이용과 수정이 가능합니다.

같은 분야 저장소

• VoltAgent/awesome-design-md
  잘 알려진 웹사이트의 디자인 토큰, 패턴, 규칙을 정리한 markdown 문서인 DESIGN.md 파일 모음입니다. 프로젝트에 넣어 두면 AI coding agent가 그 디자인 언어를 따르는 UI를 만들 수 있습니다.
• bwya77/vscode-dark-islands
  VS Code와 VSCodium 같은 호환 에디터용 다크 컬러 테마입니다. 떠 있는 유리 느낌의 패널, 둥근 모서리, 알약 모양의 activity bar와 스크롤바, 따뜻한 색감의 syntax highlighting을 제공합니다.
• alexpate/awesome-design-systems
  여러 회사와 기관의 디자인 시스템을 모은 목록입니다. 항목마다 코드로 된 컴포넌트, 보이스와 톤 가이드, 디자이너용 키트, 공개 소스 코드 제공 여부가 표시됩니다.
• lukilabs/beautiful-mermaid
  beautiful-mermaid는 Mermaid 다이어그램을 테마를 바꿀 수 있는 SVG나 터미널용 ASCII, Unicode 텍스트로 그려 주는 TypeScript 라이브러리로, DOM에 의존하지 않습니다. 플로차트, 상태, 시퀀스, 클래스, ER, XY 차트 다이어그램을 지원합니다.
• google-labs-code/design.md
  DESIGN.md는 coding agent에 디자인 시스템을 설명하는 파일 형식입니다. YAML front matter의 design token과 Markdown으로 쓴 설계 이유를 함께 담습니다. lint 도구가 spec 준수, token 참조, WCAG 대비를 점검합니다.

Trendshift 순위 목록에 오른 저장소만 담았고, 목록은 후보를 찾는 데만 썼습니다. 순위 숫자는 옮기지 않았습니다. 설명과 라이선스, 별 수는 각 GitHub 저장소에서 확인했습니다. 해설은 우리의 판단입니다. 이 프로젝트들을 직접 시험한 것은 아니며, 상승 목록에 올랐다고 품질이 증명되지는 않습니다.