상대적 시간을 어제 또는 1일 전으로 어떻게 포맷팅하나요?

소개

현대 웹 애플리케이션 전반에 타임스탬프가 나타납니다. 소셜 미디어 게시물에는 "어제 게시됨"이 표시되는 반면, 분석 대시보드에는 "1일 전"이 표시됩니다. 둘 다 동일한 시간 간격을 설명하지만, 표현 방식에 따라 다른 경험을 만듭니다. 첫 번째는 대화체적이고 자연스럽게 느껴집니다. 두 번째는 정확하고 공식적으로 느껴집니다.

자바스크립트는 Intl.RelativeTimeFormat API를 통해 이러한 형식 선택을 제어할 수 있게 합니다. 사용자가 "어제"와 같은 자연스러운 표현을 볼지, 아니면 "1일 전"과 같은 숫자 표현을 볼지 결정할 수 있습니다. 이 결정은 인터페이스가 얼마나 공식적이거나 캐주얼하게 느껴지는지에 영향을 미칩니다.

numeric 옵션이 형식 스타일을 제어합니다

Intl.RelativeTimeFormat의 numeric 옵션은 출력 형식을 결정합니다. 이 옵션은 두 가지 값을 허용합니다.

auto 값은 존재하는 경우 자연어 표현을 생성합니다. always 값은 모든 경우에 숫자 표현을 생성합니다.

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

이 두 포맷터는 동일한 시간 값에 대해 서로 다른 출력을 생성합니다.

어제와 내일을 표시하려면 auto를 사용하세요

자연어 표현을 원할 때는 numeric을 auto로 설정하세요. 포맷터는 -1, 0, 1의 일 값에 대해 "어제", "오늘", "내일"을 생성합니다.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

자연스러운 표현이 존재하지 않을 때 포맷터는 숫자 표현으로 전환합니다.

rtf.format(-2, 'day');  // "2 days ago"
rtf.format(2, 'day');   // "in 2 days"

이는 일반적인 시간 참조는 자연어를 사용하고 덜 일반적인 참조는 숫자를 사용하는 혼합 스타일을 만듭니다.

항상 숫자 값을 표시하기 위해 사용

일관된 숫자 출력을 원할 때 numeric을 always로 설정하세요. 포맷터는 -1, 0, 1을 포함한 모든 값에 대해 숫자 표현을 생성합니다.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

numeric 옵션을 생략하면 always 값이 기본값으로 사용됩니다.

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

이 기본값은 자연스러운 표현을 명시적으로 선택하지 않는 한 일관된 숫자 형식을 보장합니다.

다른 언어에도 자연스러운 시간 표현이 존재합니다

영어 외의 언어들도 고유한 자연스러운 시간 표현을 가지고 있습니다. 프랑스어는 어제를 "hier"로, 스페인어는 "ayer"로, 일본어는 "昨日"로 표현합니다.

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

numeric 옵션은 모든 로케일에서 작동합니다. 사용자는 auto를 선택하면 자신의 언어로 된 자연스러운 표현을 보게 됩니다. always를 선택하면 자신의 언어로 된 숫자 표현을 보게 됩니다.

인터페이스 스타일에 따라 선택하세요

공식적인 인터페이스는 numeric: 'always'의 이점을 얻습니다. 분석 대시보드, 시스템 로그, 기술 보고서는 정확하고 일관된 형식이 필요합니다. 숫자 값은 모든 시간 범위에서 그 정확성을 제공합니다.

캐주얼한 인터페이스는 numeric: 'auto'의 이점을 얻습니다. 소셜 미디어 피드, 메시징 앱, 커뮤니티 포럼은 자연스러운 언어를 통해 연결감을 형성합니다. "어제"와 "내일" 같은 표현은 더 인간적으로 느껴집니다.

전체 인터페이스에서의 일관성을 고려하세요. 동일한 애플리케이션의 다른 부분에서 두 스타일을 혼합하면 혼란이 생깁니다. 사용자는 타임스탬프가 경험 전반에 걸쳐 동일한 패턴을 따를 것으로 예상합니다.

always의 기본값은 가장 예측 가능한 동작을 만듭니다. 자연스러운 언어가 특정 인터페이스를 향상시킬 때 의도적으로 auto를 선택하세요.