도구 매뉴얼 · 비개발자용

pretext — 화면 위 텍스트의 '진짜 크기'를 재는 도구

웹·앱 화면에서 글자·줄·문단·문장 단위로 '이 텍스트가 실제로 얼마나 자리를 차지하는지'를 빠르게, 정확하게 계산해 주는 텍스트 측정·레이아웃 라이브러리다. 한 화면에 들어가는 카드뉴스 제목 길이, 버튼 라벨 줄바꿈 위치, 다국어 폰트 폭 차이 같은 미세한 디자인 결정에 쓰인다.

기준일: 2026-06-14난이도: 입문성격: 개발자용 라이브러리 (코드 필요)라이선스: MIT (무료, 오픈소스)
먼저 답부터

pretext는 화면 위 텍스트의 실제 폭·높이를 글꼴·언어별로 정확히 계산해 주는 개발자용 라이브러리이며, 사무직·비개발자는 보통 직접 쓸 일이 없다.

What it is

pretext가 뭔가요? — '글자가 몇 픽셀인지' 재는 자

pretext는 페이스북·모바일 팀 출신 개발자 chenglou가 만든 텍스트 측정(text measurement)·레이아웃 라이브러리다. 자바스크립트로 작성됐고, 보통 npm install pretext 같은 명령어로 프로젝트에 추가한 뒤 코드에서 함수로 호출해 사용한다. 비유하자면, 워드·한글에서 글자 수를 세는 '글자수 세기'의 정밀 버전이라기보다, '이 폰트에서 이 텍스트가 화면 위에서 실제로 몇 픽셀을 차지하는가'를 재는 자와 같다.

text measurement텍스트 측정
폰트·크기가 정해진 상태에서 특정 문자열이 실제 화면에서 몇 px 너비·높이를 차지하는지 계산하는 일
layout레이아웃
버튼·카드·문단처럼 화면 위 요소들을 어디에 어떤 크기로 배치할지 정하는 작업
library라이브러리
단독 실행 앱이 아니라, 다른 프로그램 안에 불러와 쓰는 코드 묶음 (예: jQuery, Lodash)
MIT LicenseMIT 라이선스
오픈소스 중에서도 사용·수정·상업적 재배포가 매우 자유로운 라이선스. 단, 라이선스 고지는 유지해야 함
Why it helps

이런 게 왜 필요한가요? — 화면 디자인의 '1px 전쟁'

글자·줄·문단은 폰트·언어·기기마다 폭이 달라진다. 한글은 영어보다 좁고, 중국어는 더 좁고, 아랍어는 오른쪽에서 왼쪽으로 흐른다. 제목을 '딱 맞게' 디자인하려면 화면이 그려지기 전에 미리 '이 글자가 여기서 몇 px일 것' 알아야 한다. 그 추측을 코드가 아니라 숫자로 답하게 해 주는 게 pretext다.

사무직·비개발자 입장에서 pretext가 도움되는 지점은 사실 직접 사용이 아니라, 디자이너·개발자가 만든 결과물을 '왜 이렇게 보일까'를 이해하는 데 있다. 예를 들어 슬랙 알림·카카오 알림톡·카드뉴스 제목이 어떤 기준으로 잘리거나 줄바꿈되는지는 결국 텍스트 폭 계산 로직의 결과다. 내 업무 산출물(공지문, 카드뉴스, 사내 포털 배너 등)을 디자이너에게 넘길 때 '제목은 24자 이내, 폰트 Pretendard 16px, 두 줄까지만'처럼 폭 기준을 같이 적어 주면 다툼이 줄고, 그 폭 기준을 디자이너가 코드에 박을 때 pretext 같은 라이브러리가 쓰인다. 즉 pretext는 '내가 누르는 버튼'이 아니라 '내 결과물이 더 잘려 보이는 이유'를 설명해 주는 도구로 간접적으로 닿아 있다.

흔한 오해

이메일 제목이 모바일에서 '신년 인사 및 …'처럼 잘려 보이는데, 디자이너에게 '그냥 좀 더 짧게 써 주세요'라고만 말함 → 다음에도 같은 자르기 반복

실제로는

폰트·크기·최대 줄 수 기준을 미리 적어 'Pretendard 16px, 모바일 320px 폭 기준 두 줄까지만'이라고 명시 → 디자이너가 그 기준 안에서 디자인, 잘림이 줄어듦

Is it for me

나한테 맞는 도구인가요? — 솔직한 판단

pretext는 npm·yarn 같은 패키지 매니저로 설치하고 자바스크립트/타입스크립트 함수로 호출하는 도구다. 비개발자가 마우스로 클릭하며 쓸 수 있는 UI가 따로 없다. 그래서 '이게 뭔지'까지만 알고, '직접 만져야 하는 일'은 거의 없다.

결론부터 말하면, 코드를 한 줄도 짜본 적 없는 사무직·비개발자에게 pretext는 직접 쓸 도구가 아니다. 라이브러리 자체는 무료(MIT)·초경량으로 잘 만들어져 있고, React·웹디자인 도구·노션 같은 서비스 안에 이미 비슷한 측정 로직이 내장돼 있는 경우가 많다. 반면 화면 잘림·줄바꿈·다국어 폭 차이 때문에 반복적으로 스트레스를 받고 있고, '이 기준을 디자이너에게 말로 설명하는 게 너무 힘들다'고 느끼는 사람에게는 '폭 기준 문구 템플릿'으로 활용 가치가 있다. 본인이 의사결정자라면 pretext 자체보다 '내 문서가 어떤 화면·폰트·폭에서 소비되는가'를 먼저 파악하는 게 우선이다.

적합

이런 사람이면 '이름'만 알아두기

디자이너·개발자에게 의뢰할 때 제목·본문 길이 기준을 'px·줄 수'로 말해야 하는 마케터, 운영 매니저, 콘텐츠 에디터, HR 담당자. 직접 코드를 만지지 않아도 OK.

부적합

이런 사람이면 굳이 볼 필요 없음

글자 수가 '몇 자'까지만 알면 충분한 일반 문서 작성자. 워드·한글·노션의 기본 기능으로 충분하다. 라이브러리 문서라서 읽어도 활용처가 없다.

대안 1

더 쉬운 대안 · 노션·피그마 안의 텍스트 박스

피그마·노션·캔바는 텍스트 박스에 글자를 입력하면 자동으로 폭·높이를 px로 보여 준다. 코드 없이 '직접 측정'할 수 있어서 비개발자에게 가장 자연스럽다.

대안 2

더 쉬운 대안 · 디자이너에게 '기준 시트' 요청

'우리 채널 폰트·사이즈·최대 줄 수'가 정리된 1장짜리 기준 시트만 있어도 대부분의 실무 문제는 해결된다. 그것조차 없다면 pretext를 설치하기보다 그 시트를 먼저 만드는 게 낫다.

How to start

어떻게 시작하나요? — 사무직이 할 수 있는 '준비'

사무직이 pretext를 직접 설치·실행할 일은 거의 없다. 대신 이 라이브러리가 등장하는 '장면'과, 그 장면에서 내가 무엇을 준비해야 하는지를 익혀 두는 게 실질적인 '시작'이다.

  1. 1단계 · pretext가 등장하는 상황 파악하기

    디자이너·개발자가 '텍스트 잘림'·'반응형'·'다국어'·'줄바꿈'을 언급할 때, 그 해결책 후보 중 하나가 텍스트 측정 라이브러리(pretext 포함)다. '내 업무 산출물이 화면에서 잘리는 문제'와 연결된다는 점만 기억해 두자.

  2. 2단계 · 내 산출물에 '폭 기준 메모' 붙이기

    이메일·공지·카드뉴스 제목 옆에 '(Pretendard 16px 모바일 320px, 최대 2줄, 한국어 기준 18자 이내)'처럼 적어 둔다. 실제 라이브러리를 쓰진 않지만, 같은 결과를 만드는 '말로 된 측정 기준'이 된다.

  3. 3단계 · 디자이너·개발자에게 의뢰할 때 기준 전달

    '길이만 짧게 해 달라' 대신 '폰트·사이즈·최대 줄 수·언어' 네 가지를 적어 보낸다. 이 기준 안에서 디자이너가 pretext 같은 도구를 활용한다. 결과물의 잘림·줄바꿈 분쟁이 크게 줄어든다.

  4. 4단계 · 더 쉬운 도구부터 써 보기

    진짜 '직접 재고 싶다면' 피그마 무료 플랜에서 텍스트 박스를 만들어 폭을 px로 확인해 본다. 코드 없이 pretext와 거의 같은 결론을 얻을 수 있다. 코드가 필요하다고 판단될 때만 개발자에게 pretext 도입을 요청한다.

  5. 5단계 · 민감 정보 주의

    고객명·전화번호·내부 비밀번호·결제정보 같은 텍스트를 '이 라이브러리로 한번 재 보자'며 외부 데모 사이트에 붙여 넣지 않는다. AI 도구 일반 안전 수칙과 동일하다.

사무직이 이번 주 안에 할 수 있는 '대안' 체크리스트

  • 피그마/노션에서 제목 1개를 입력하고 px·줄 수 확인해 보기
  • 우리 채널(알림톡·카드뉴스·사내 포털)의 폰트·사이즈·최대 줄 수 메모로 적기
  • 디자이너에게 '이 기준 안에서 잘림 없이 보이는지' 검토 요청
  • 외부 데모 사이트에 고객·내부 정보 붙여 넣지 않기

자주 묻는 질문

pretext는 무료인가요?

공식 GitHub 기준 MIT 라이선스 오픈소스라 무료로 사용·수정·상업 재배포가 가능하다. 단, 라이선스 고지 표기는 유지해야 한다.

코딩을 전혀 모르는 사람도 쓸 수 있나요?

잘 모르면 '이름만 알아도 충분'하다. 설치·호출은 자바스크립트/타입스크립트 코드가 필요해 비개발자가 단독으로 쓰긴 어렵다.

한글·중국어·아랍어 폭도 정확히 재나요?

폰트·언어별 폭을 따로 계산하도록 설계된 라이브러리라 한글·CJK·아랍어 등에서도 비교적 정확하게 동작한다. 실제 결과는 사용 폰트와 버전에 따라 다르다.

워드나 한글의 '글자 수 세기'와 같은 건가요?

비슷해 보이지만 결이 다르다. 글자 수는 '몆 자'를 세고, pretext는 '몆 픽셀·몆 줄'을 잰다. 화면 디자인 결정에는 픽셀이 더 중요하다.

회사에서 도입해도 되나요?

MIT 라이선스라 상업 사용이 허용되지만, 회사 정책상 외부 오픈소스 도입은 보안·컴플라이언스 검토가 필요할 수 있다. IT·법무 승인을 먼저 받는 게 안전하다.

노션·피그마·캔바로 충분하면 굳이 왜 알아야 하나요?

대부분의 사무직은 노션·피그마로 충분하다. 굳이 pretext 이름을 아는 이유는, 디자이너·개발자가 같은 문제를 코드로 풀 때 쓰는 도구라 '같은 언어로 대화'할 수 있기 때문이다.

출처와 확인 경계

2026-06-14 기준 공식 GitHub 저장소·README 정보를 토대로 작성. 라이브러리 화면·버전·라이선스·문서 구조는 변동 가능하므로 사용 전 공식 저장소에서 한 번 더 확인 권장. 본 매뉴얼은 코드를 직접 다루지 않는 사무직·비개발자 관점에서 정리한 안내이며, AI가 만든 해설이므로 인용·도입·계약 등 민감한 결정에는 전문가 확인을 병행할 것.