상대 시간을 짧거나 긴 형식으로 표시하는 방법

소개

"2시간 전" 또는 "3개월 후"와 같은 상대 시간을 표시할 때 형식은 서로 다른 공간을 차지합니다. 콘텐츠 경과 시간을 나타내는 타임스탬프는 사용 가능한 공간과 명확성 요구 사항에 따라 "2시간 전", "2시간 전" 또는 "2시간 전"으로 표시될 수 있습니다. 각 형식은 가독성과 가로 공간 사이에서 균형을 맞춥니다.

상황에 따라 서로 다른 형식 선택이 필요합니다. 게시물 타임스탬프를 표시하는 소셜 미디어 피드는 "2시간 전"과 같은 명확한 텍스트가 유용합니다. 여러 활동 지표를 표시하는 모바일 대시보드는 "2시간 전"과 같은 간결한 텍스트가 필요합니다. 타임라인 이벤트를 표시하는 데이터 시각화는 화면에 정보를 맞추기 위해 가능한 한 가장 압축된 형식을 사용합니다.

JavaScript의 Intl.RelativeTimeFormat는 이러한 선택을 제어하기 위해 style 옵션을 제공합니다. 완전히 표기된 단어를 사용하는 긴 표시, 표준 약어를 사용하는 짧은 표시, 또는 가능한 가장 축약된 표현을 사용하는 좁은 표시 중에서 선택할 수 있습니다. 이 옵션을 통해 사용자에게 상대 시간이 표시되는 방식을 정밀하게 제어할 수 있습니다.

style 옵션이 제어하는 것

Intl.RelativeTimeFormat의 style 옵션은 "long", "short", "narrow"의 세 가지 값을 허용합니다. 각 값은 상대 시간 출력에 대해 서로 다른 수준의 상세도를 생성합니다.

long 값은 "2시간 전"과 같이 완전한 단어를 표시합니다. short 값은 "2시간 전"과 같은 표준 약어를 사용합니다. narrow 값은 "2시간 전"과 같이 가장 간결한 표현을 생성하며, 종종 공백을 제거하고 최소한의 기호를 사용합니다.

const longFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(longFormatter.format(-2, "hour"));
// Output: "2 hours ago"

const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(shortFormatter.format(-2, "hour"));
// Output: "2 hr. ago"

const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(narrowFormatter.format(-2, "hour"));
// Output: "2h ago"

style 옵션을 생략하면 기본값은 "long"입니다. 즉, 다른 표시 스타일을 명시적으로 요청하지 않는 한 상대 시간 포맷팅은 완전한 단어를 사용합니다.

긴 스타일로 상대 시간 형식 지정

긴 스타일은 완전한 단어를 사용합니다. 이 형식은 추가 가로 공간을 사용하는 대신 최대한의 명확성을 제공합니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

포매터는 단수형과 복수형을 자동으로 처리합니다. 1시간은 단수형 "hour"를 사용하고 여러 시간은 복수형 "hours"를 사용합니다. 어떤 형태를 사용할지 수동으로 결정할 필요가 없습니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(formatter.format(-1, "hour"));
// Output: "1 hour ago"

console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"

console.log(formatter.format(1, "day"));
// Output: "in 1 day"

console.log(formatter.format(5, "day"));
// Output: "in 5 days"

사용하는 단위에 관계없이 각 시간 단위는 완전히 표기됩니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(formatter.format(-30, "second"));
// Output: "30 seconds ago"

console.log(formatter.format(-5, "minute"));
// Output: "5 minutes ago"

console.log(formatter.format(-3, "month"));
// Output: "3 months ago"

console.log(formatter.format(2, "year"));
// Output: "in 2 years"

긴 스타일은 사용자가 약어를 해석할 필요 없이 상대 시간을 즉시 명확하게 만듭니다. 시간 약어에 익숙하지 않은 사용자는 완전히 표기된 단어가 더 접근하기 쉽습니다.

짧은 스타일로 상대 시간 형식 지정

짧은 스타일은 대부분의 사람들이 인식하는 표준 약어를 사용합니다. 이 형식은 가독성과 공간 효율성의 균형을 맞춥니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(formatter.format(-2, "hour"));
// Output: "2 hr. ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

포매터는 일반적으로 인식되는 약어를 사용합니다. 시간은 "hr.", 분은 "min.", 초는 "sec."가 됩니다. 이러한 약어는 문자 수를 줄이면서도 가독성을 유지합니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(formatter.format(-30, "second"));
// Output: "30 sec. ago"

console.log(formatter.format(-5, "minute"));
// Output: "5 min. ago"

console.log(formatter.format(-3, "month"));
// Output: "3 mo. ago"

console.log(formatter.format(2, "year"));
// Output: "in 2 yr."

각 시간 단위는 표준 약어를 사용합니다. 초는 "sec.", 분은 "min.", 월은 "mo.", 년은 "yr."를 사용합니다. 이러한 약어는 널리 인식되며 대부분의 상황에서 잘 작동합니다.

짧은 스타일로 과거와 미래 시간을 모두 형식 지정할 수 있습니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(formatter.format(-7, "day"));
// Output: "7 days ago"

console.log(formatter.format(2, "week"));
// Output: "in 2 wk."

console.log(formatter.format(-1, "quarter"));
// Output: "1 qtr. ago"

포매터는 두 방향을 일관되게 처리합니다. 과거 시간은 "ago"를 사용하고 미래 시간은 "in"을 사용합니다. 약어는 방향에 관계없이 동일하게 유지됩니다.

좁은 스타일로 상대 시간 형식 지정

좁은 스타일은 가능한 가장 간결한 표현을 생성합니다. 이 형식은 공백을 제거하고 최소한의 기호를 사용하여 모든 문자를 절약합니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format(-2, "hour"));
// Output: "2h ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

포매터는 대부분의 단위에 대해 한 글자 약어와 최소한의 간격을 사용합니다. 시간은 "h", 분은 "m", 초는 "s"가 됩니다. 출력은 짧은 스타일이나 긴 스타일보다 더 간결합니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format(-30, "second"));
// Output: "30s ago"

console.log(formatter.format(-5, "minute"));
// Output: "5m ago"

console.log(formatter.format(-3, "month"));
// Output: "3mo ago"

console.log(formatter.format(2, "year"));
// Output: "in 2y"

좁은 스타일은 로케일과 단위에 따라 다릅니다. 일부 단위는 훨씬 짧은 출력을 생성하는 반면 다른 단위는 짧은 스타일과 유사하게 유지됩니다. 영어는 "days"를 그대로 유지하지만 시간, 분, 초는 한 글자로 축약합니다.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format(-7, "day"));
// Output: "7 days ago"

console.log(formatter.format(2, "week"));
// Output: "in 2w"

console.log(formatter.format(-1, "quarter"));
// Output: "1q ago"

좁은 스타일은 공간이 극도로 제한적이고 사용자가 시간 측정 컨텍스트에 익숙한 경우에 가장 적합합니다. 압축된 형식은 사용자가 명시적인 구분이나 설명 없이 단위를 해석할 수 있다고 가정합니다.

긴 스타일, 짧은 스타일, 좁은 스타일 비교

세 가지 스타일 옵션 간의 차이는 각 옵션으로 동일한 상대 시간을 포맷할 때 명확해집니다.

const longFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

const value = -2;
const unit = "hour";

console.log("Long:   " + longFormatter.format(value, unit));
console.log("Short:  " + shortFormatter.format(value, unit));
console.log("Narrow: " + narrowFormatter.format(value, unit));

// Output:
// Long:   2 hours ago
// Short:  2 hr. ago
// Narrow: 2h ago

긴 스타일은 완전한 단어와 명시적인 간격을 사용합니다. 짧은 스타일은 마침표가 있는 표준 약어를 사용합니다. 좁은 스타일은 최소한의 간격으로 한 글자를 사용합니다. 이러한 진행은 명확성과 공간 효율성 간의 트레이드오프를 보여줍니다.

다양한 상대 시간 값을 비교하여 각 스타일이 다양한 시간 범위를 어떻게 처리하는지 확인할 수 있습니다.

const times = [
  { value: -30, unit: "second" },
  { value: -5, unit: "minute" },
  { value: -2, unit: "hour" },
  { value: 3, unit: "day" },
  { value: 2, unit: "week" },
  { value: -3, unit: "month" }
];

times.forEach(time => {
  const long = new Intl.RelativeTimeFormat("en-US", {
    style: "long"
  }).format(time.value, time.unit);

  const short = new Intl.RelativeTimeFormat("en-US", {
    style: "short"
  }).format(time.value, time.unit);

  const narrow = new Intl.RelativeTimeFormat("en-US", {
    style: "narrow"
  }).format(time.value, time.unit);

  console.log(`${time.value} ${time.unit}:`);
  console.log(`  Long:   ${long}`);
  console.log(`  Short:  ${short}`);
  console.log(`  Narrow: ${narrow}`);
  console.log("");
});

// Output:
// -30 second:
//   Long:   30 seconds ago
//   Short:  30 sec. ago
//   Narrow: 30s ago
//
// -5 minute:
//   Long:   5 minutes ago
//   Short:  5 min. ago
//   Narrow: 5m ago
//
// -2 hour:
//   Long:   2 hours ago
//   Short:  2 hr. ago
//   Narrow: 2h ago
//
// 3 day:
//   Long:   in 3 days
//   Short:  in 3 days
//   Narrow: in 3 days
//
// 2 week:
//   Long:   in 2 weeks
//   Short:  in 2 wk.
//   Narrow: in 2w
//
// -3 month:
//   Long:   3 months ago
//   Short:  3 mo. ago
//   Narrow: 3mo ago

문자 수 차이는 여러 타임스탬프에서 상당해집니다. 많은 상대 시간을 표시하는 피드나 목록에서 좁은 스타일은 긴 스타일에 비해 상당한 가로 공간을 절약합니다.

언어별 상대 시간 스타일 차이

세 가지 스타일 옵션 모두 지정한 로케일에 맞게 조정됩니다. 언어마다 다른 약어, 단어, 간격 규칙을 사용합니다.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

const value = -2;
const unit = "hour";

locales.forEach(locale => {
  const longFormatter = new Intl.RelativeTimeFormat(locale, {
    style: "long"
  });

  const shortFormatter = new Intl.RelativeTimeFormat(locale, {
    style: "short"
  });

  console.log(locale + ":");
  console.log("  Long:  " + longFormatter.format(value, unit));
  console.log("  Short: " + shortFormatter.format(value, unit));
});

// Output:
// en-US:
//   Long:  2 hours ago
//   Short: 2 hr. ago
// de-DE:
//   Long:  vor 2 Stunden
//   Short: vor 2 Std.
// fr-FR:
//   Long:  il y a 2 heures
//   Short: il y a 2 h
// ja-JP:
//   Long:  2 時間前
//   Short: 2 時間前

긴 스타일은 각 언어가 시간 단위에 대한 고유한 단어와 다른 어순을 가지고 있기 때문에 로케일에 따라 크게 다릅니다. 독일어는 시간 양 앞에 "vor"를 사용하고, 프랑스어는 양 앞에 "il y a"를 사용하며, 일본어는 숫자 뒤에 시간 표시를 배치합니다. 포매터는 어순을 자동으로 처리합니다.

짧은 스타일도 로케일 규칙에 맞게 조정됩니다. 독일어는 시간에 "Std."를 사용하고, 프랑스어는 "h"를 사용하며, 일본어는 긴 스타일과 동일한 형식을 사용합니다. 이러한 로케일별 약어는 각 문화권에서 상대 시간을 축약 형식으로 표기하는 방식을 반영합니다.

포매터는 문법적 변형을 자동으로 처리합니다. 각 로케일은 해당 언어에 자연스러운 출력을 생성합니다.

const locales = ["en-US", "es-ES", "pt-BR"];

const value = -3;
const unit = "month";

locales.forEach(locale => {
  const narrowFormatter = new Intl.RelativeTimeFormat(locale, {
    style: "narrow"
  });

  console.log(locale + ": " + narrowFormatter.format(value, unit));
});

// Output:
// en-US: 3mo ago
// es-ES: hace 3 m
// pt-BR: há 3 meses

좁은 스타일은 로케일 간 차이를 보여줍니다. 영어는 월에 "mo"를 사용하고, 스페인어는 "m"을 사용하며, 포르투갈어는 "meses"로 표기합니다. 이러한 차이는 간결한 시간 표기에 대한 로케일별 규칙을 반영합니다.

긴 스타일을 사용해야 하는 경우

긴 스타일은 공간 효율성보다 명확성과 접근성이 더 중요할 때 가장 적합합니다. 이 선택은 상대 시간을 해석 없이 즉시 이해할 수 있게 만듭니다.

접근성 중심 인터페이스는 긴 스타일의 이점을 누립니다. 스크린 리더가 완전히 표기된 단어를 더 자연스럽게 발음하기 때문입니다. 스크린 리더가 "2시간 전"을 발음하는 것이 "2시간 전"보다 더 자연스럽게 들리며, 후자는 어색하게 읽히거나 특수 발음 규칙이 필요할 수 있습니다.

교육 콘텐츠는 긴 스타일의 이점을 누립니다. 학습자가 시간 약어에 익숙하지 않을 수 있기 때문입니다. 타임스탬프를 설명하는 교육 자료는 혼란을 피하기 위해 단위를 완전히 표기해야 합니다.

활동 피드와 타임라인은 명확하고 대화적인 톤을 유지하기 위해 긴 스타일을 사용합니다. 소셜 미디어 게시물에서 "3시간 전"을 표시하는 것이 흐르는 텍스트에서 "3시간 전"보다 더 자연스럽게 읽힙니다.

공식 보고서와 문서는 일관된 작성 기준을 유지하기 위해 긴 스타일을 사용합니다. 비즈니스 보고서, 감사 로그, 공식 문서는 일반적으로 상대 시간을 축약하지 않고 완전히 표기합니다.

국제 사용자는 언어를 학습 중일 때 긴 스타일의 이점을 누립니다. "시간" 및 "일"과 같이 완전히 표기된 단위 이름은 비원어민에게 약어보다 이해하기 쉽습니다.

function formatActivityTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "long",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));

  return formatter.format(diffInHours, "hour");
}

const threeHoursAgo = new Date(Date.now() - 3 * 60 * 60 * 1000);

console.log("Activity: " + formatActivityTimestamp(threeHoursAgo, "en-US"));
// Output: "Activity: 3 hours ago"

긴 스타일은 간결함보다 이해를 우선시합니다. 사용자가 모호함이나 해석 노력 없이 상대 시간을 파악해야 할 때마다 사용하세요.

짧은 스타일을 사용해야 하는 경우

짧은 스타일은 공간이 중요하지만 약어가 널리 이해되는 상황에서 가장 잘 작동합니다. 이 형식은 명확성과 효율성의 균형을 맞춥니다.

모바일 인터페이스는 화면 너비가 제한되어 있기 때문에 짧은 스타일의 이점을 얻습니다. 여러 타임스탬프를 표시하는 대시보드 카드는 정보를 화면에 맞추기 위해 간결한 상대 시간이 필요합니다. "2 hours ago" 대신 "2 hr. ago"를 사용하면 타임스탬프당 문자를 절약할 수 있으며, 여러 값에 걸쳐 누적됩니다.

댓글 섹션은 인터페이스를 어지럽히지 않고 댓글이 게시된 시간을 표시하기 위해 짧은 스타일을 사용합니다. 댓글 옆에 "5 min. ago"를 표시하는 것이 "5 minutes ago"보다 더 간결하면서도 명확합니다.

열에 타임스탬프를 표시하는 데이터 테이블은 일관된 너비가 필요합니다. "hr.", "min.", "sec."와 같은 짧은 약어는 열 너비를 관리 가능하게 유지합니다. "hours", "minutes", "seconds"와 같은 긴 단위는 불필요하게 열을 넓힙니다.

알림 패널은 알림을 확인하는 사용자가 시간 약어에 익숙하기 때문에 짧은 스타일을 사용합니다. "1 hr. ago"를 표시하는 알림은 명확성과 디스플레이 공간의 효율적인 사용 사이의 균형을 맞춥니다.

이메일 클라이언트는 메시지 경과 시간을 표시하기 위해 짧은 스타일을 사용합니다. 메시지 목록에 "2 days ago"를 표시하는 것이 "2d ago"보다 명확하지만 완전히 풀어 쓴 "2 days ago"보다 간결합니다.

function formatCommentTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "short",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInMinutes = Math.round(diffInMs / (1000 * 60));

  return formatter.format(diffInMinutes, "minute");
}

const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);

console.log(formatCommentTimestamp(fiveMinutesAgo, "en-US"));
// Output: "5 min. ago"

짧은 스타일은 명확성과 효율성 사이의 균형을 맞춥니다. 대부분의 사용자는 혼란 없이 표준 약어를 인식합니다.

좁은 스타일을 사용해야 하는 경우

좁은 스타일은 모든 문자가 중요하고 사용자가 시간 표기법에 매우 익숙한 극도로 공간이 제한된 상황에서 가장 잘 작동합니다.

단일 지표를 표시하는 컴팩트 위젯은 표시 크기가 최소일 때 좁은 스타일을 사용할 수 있습니다. 작은 텍스트로 "5분 전"을 표시하는 타이머 위젯은 "5분 전"보다 더 잘 맞습니다.

밀집된 정보가 있는 데이터 시각화는 좁은 스타일의 이점을 얻습니다. 차트 레이블, 그래프 주석 및 타임라인 마커는 기본 시각적 콘텐츠를 가리지 않도록 최소한의 텍스트가 필요합니다. "2시간 전" 대신 "2h 전"을 사용하면 컨텍스트를 이해하는 사용자에게 가독성을 유지하면서 문자를 절약할 수 있습니다.

제한된 공간이 있는 모바일 홈 화면 위젯은 정보 밀도를 최대화하기 위해 좁은 스타일을 사용합니다. 작은 타일에 여러 최근 이벤트를 표시하는 활동 추적 위젯은 컴팩트한 상대 시간 표기법의 이점을 얻습니다.

스마트워치 인터페이스는 화면 공간이 극도로 제한되어 있기 때문에 좁은 스타일을 사용합니다. 작은 원형 화면에 "1h 전"을 표시하는 것이 더 긴 형식보다 더 잘 작동합니다.

타임스탬프가 있는 많은 항목을 표시하는 목록 보기는 각 행을 컴팩트하게 유지하기 위해 좁은 스타일을 사용할 수 있습니다. 최근 재생된 트랙을 표시하는 음악 앱, 시청 기록을 표시하는 비디오 앱 또는 운동 기록을 표시하는 피트니스 앱은 모두 최소한의 타임스탬프 형식의 이점을 얻습니다.

function formatCompactTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "narrow",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));

  return formatter.format(diffInHours, "hour");
}

const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);

console.log(formatCompactTimestamp(twoHoursAgo, "en-US"));
// Output: "2h ago"

좁은 스타일은 사용자가 시간 표기법에 익숙하고 도움 없이 단위를 해석할 수 있다고 가정합니다. 이 옵션은 최대 공간 효율성을 위해 명확성을 희생합니다.

스타일과 숫자 옵션 결합

style 옵션은 numeric 옵션과 함께 작동합니다. numeric 옵션은 "어제"와 같은 자연어를 사용할지 "1일 전"과 같은 숫자 출력을 사용할지를 제어합니다. style 옵션은 숫자 출력이 표시될 때 그 상세도를 제어합니다.

const autoLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "auto",
  style: "long"
});

console.log(autoLong.format(-1, "day"));
// Output: "yesterday"

console.log(autoLong.format(-2, "day"));
// Output: "2 days ago"

const autoShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "auto",
  style: "short"
});

console.log(autoShort.format(-1, "day"));
// Output: "yesterday"

console.log(autoShort.format(-2, "day"));
// Output: "2 days ago"

numeric가 "auto"이고 포매터가 "어제"와 같은 자연어를 사용하는 경우, 스타일을 지정할 숫자 출력이 없기 때문에 style 옵션은 효과가 없습니다. 포매터는 스타일에 관계없이 동일한 출력을 생성합니다.

포매터가 숫자 출력을 생성할 때 style 옵션은 상세도를 제어합니다.

const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "long"
});

console.log(alwaysLong.format(-1, "day"));
// Output: "1 day ago"

const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "short"
});

console.log(alwaysShort.format(-1, "day"));
// Output: "1 day ago"

const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "narrow"
});

console.log(alwaysNarrow.format(-1, "day"));
// Output: "1 day ago"

일(day)의 경우 세 가지 스타일 모두 영어에서 유사한 출력을 생성합니다. 스타일 차이는 다른 시간 단위에서 더 명확하게 나타납니다.

const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "long"
});

const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "short"
});

const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "narrow"
});

console.log("Long:   " + alwaysLong.format(-2, "hour"));
console.log("Short:  " + alwaysShort.format(-2, "hour"));
console.log("Narrow: " + alwaysNarrow.format(-2, "hour"));

// Output:
// Long:   2 hours ago
// Short:  2 hr. ago
// Narrow: 2h ago

이 조합을 사용하면 자연어 표시 여부와 숫자 출력 표시 방식을 모두 완전히 제어할 수 있습니다.

기억해야 할 사항

style 옵션은 Intl.RelativeTimeFormat로 형식을 지정할 때 상대 시간이 표시되는 방식을 제어합니다. "2 hours ago"와 같이 완전한 단어로 표시하려면 "long"로 설정하고, "2 hr. ago"와 같은 표준 약어로 표시하려면 "short"로 설정하며, "2h ago"와 같은 간결한 형식으로 표시하려면 "narrow"로 설정합니다. 이 옵션을 생략하면 기본값은 "long"입니다.

명확성과 접근성이 공간보다 중요하거나 사용자가 시간 약어에 익숙하지 않을 때는 long 스타일을 사용하세요. 공간이 중요하고 사용자가 표준 약어를 이해하는 범용 애플리케이션에는 short 스타일을 사용하세요. narrow 스타일은 공간 제약이 극심하고 사용자가 시간 표기법에 매우 익숙한 경우에만 사용하세요.

포매터는 다양한 단어, 약어, 어순 및 공백 규칙을 포함하여 로케일별 변형을 자동으로 처리합니다. style를 numeric 옵션과 결합하여 자연어 표시 여부와 숫자 출력 표시 방식을 모두 제어할 수 있습니다.