PST 또는 Pacific Standard Time과 같은 시간대 이름을 표시하는 방법

JavaScript를 사용하여 짧은 형식, 긴 형식 또는 오프셋 형식으로 시간대 이름 표시하기

소개

사용자에게 시간을 표시할 때 시간대를 함께 표시하면 해당 시간이 현지 시간대인지 다른 시간대인지 이해하는 데 도움이 됩니다. 3:00 PM PST로 예약된 회의는 사용자가 태평양 시간대에서 변환해야 함을 알려줍니다. PST 레이블이 없으면 사용자는 어떤 시간대가 적용되는지 추측해야 합니다.

시간대는 여러 형식으로 표시될 수 있습니다. PST와 같은 약어, Pacific Standard Time와 같은 전체 이름 또는 GMT-8와 같은 오프셋 기반 형식을 표시할 수 있습니다. 각 형식은 서로 다른 목적을 제공합니다. 약어는 공간을 절약하지만 모호할 수 있습니다. 전체 이름은 명확하지만 더 많은 공간을 차지합니다. 오프셋은 특정 시간대 이름보다 시간 차이가 더 중요할 때 유용합니다.

JavaScript는 시간대 이름을 자동으로 표시하는 Intl.DateTimeFormat API를 제공합니다. 이 레슨에서는 시간대 이름이 무엇인지, 표준시와 일광 절약 시간제 사이에 어떻게 변경되는지, 다양한 형식으로 표시하는 방법을 설명합니다.

시간대 이름 형식 이해하기

시간대 이름은 각각 다른 특성을 가진 여러 가지 형식으로 표시됩니다.

짧은 이름은 PST, EST 또는 JST와 같은 약어를 사용합니다. 이는 공간을 절약하지만 모호할 수 있습니다. CST는 북미의 중부 표준시, 중국 표준시 또는 쿠바 표준시를 의미할 수 있습니다.

긴 이름은 Pacific Standard Time, Eastern Standard Time 또는 Japan Standard Time와 같이 전체 시간대 이름을 표기합니다. 이는 모호함을 피하지만 더 많은 공간을 차지합니다.

일반 이름은 현재 표준시를 사용하는지 일광 절약 시간제를 사용하는지 명시하지 않고 시간대를 나타냅니다. PT는 태평양 시간을 의미하며, 날짜에 따라 PST 또는 PDT일 수 있습니다.

오프셋 형식은 UTC와의 시간 차이를 표시합니다. GMT-8는 그리니치 표준시보다 8시간 늦음을 의미합니다. GMT-05:00는 시간과 분을 콜론으로 구분하여 5시간 늦음을 의미합니다.

선택하는 형식은 사용 사례에 따라 다릅니다. 공간이 제한적이고 모호성이 허용되는 경우 짧은 이름을 사용하세요. 공간보다 명확성이 중요한 경우 긴 이름을 사용하세요. UTC와의 숫자 관계를 표시해야 하는 경우 오프셋을 사용하세요.

Intl.DateTimeFormat을 사용하여 시간대 이름 표시하기

Intl.DateTimeFormat 생성자는 형식화된 날짜 및 시간에서 시간대 이름이 표시되는 방식을 제어하는 timeZoneName 옵션을 허용합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM PST"

이는 America/Los_Angeles 시간대의 시간을 표시하는 미국 영어용 포매터를 생성합니다. timeZoneName: 'short' 옵션은 출력에 축약된 시간대 이름을 추가합니다. 결과는 끝에 PST를 포함합니다.

timeZone 옵션은 형식화할 때 사용할 시간대를 설정합니다. timeZoneName 옵션은 시간대 이름을 표시할지 여부와 표시 방법을 제어합니다. 이 두 옵션은 함께 작동합니다. timeZone는 변환을 결정하고, timeZoneName는 레이블을 결정합니다.

짧은 시간대 이름 표시하기

timeZoneName: 'short' 옵션은 축약된 시간대 이름을 표시합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 10:30 AM EST"

짧은 형식은 동부 표준시에 대해 EST를 생성합니다. 이 형식은 간결하며 테이블, 목록 또는 기타 공간이 제한된 레이아웃에서 잘 작동합니다.

시간대마다 다른 약어가 생성됩니다.

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// Output:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

각 시간대는 표준 약어를 생성합니다. 태평양은 PST, 중부는 CST, 동부는 EST, 런던은 GMT, 도쿄는 JST를 사용합니다.

긴 시간대 이름 표시하기

timeZoneName: 'long' 옵션은 전체 시간대 이름을 표시합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM Pacific Standard Time"

긴 형식은 PST 대신 Pacific Standard Time를 생성합니다. 이는 모호함을 제거하지만 훨씬 더 많은 공간을 차지합니다.

긴 이름은 명확성이 필수적이고 공간이 충분할 때 잘 작동합니다.

const date = new Date('2025-01-15T15:30:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(date));
// Output: "10:30 AM Eastern Standard Time"

전체 이름은 사용자가 약어를 해독할 필요 없이 어떤 시간대가 적용되는지 명확하게 보여줍니다.

시간대 오프셋 표시

timeZoneName: 'shortOffset' 옵션은 UTC 오프셋을 간결한 형식으로 표시합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-8"

이는 GMT-8를 표시하여 해당 시간대가 UTC보다 8시간 늦다는 것을 나타냅니다. 오프셋 형식은 특정 시간대 이름보다 UTC와의 숫자적 관계가 더 중요할 때 유용합니다.

timeZoneName: 'longOffset' 옵션은 시간과 분을 포함한 오프셋을 표시합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-08:00"

이는 시간과 분 사이에 콜론이 있는 GMT-08:00를 표시합니다. 이 형식은 더 정확하며 ISO 8601 규약을 따릅니다.

30분 또는 45분 오프셋이 있는 시간대는 긴 형식으로 전체 오프셋을 표시합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "9:00 PM GMT+05:30"

인도 표준시는 UTC로부터 5시간 30분의 오프셋을 가집니다. 긴 오프셋 형식은 이를 GMT+05:30로 표시합니다.

일반 시간대 이름 표시

timeZoneName: 'shortGeneric' 옵션은 일광 절약 시간제 적용 여부와 관계없이 적용되는 일반 약어를 표시합니다.

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// Output: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Output: "8:30 AM PT"

겨울과 여름 날짜 모두 태평양 시간대에 대해 PT를 표시합니다. 일반 형식은 태평양 표준시와 태평양 일광 절약 시간을 구분하지 않습니다. 이는 계절에 관계없이 일관된 레이블을 원할 때 유용합니다.

timeZoneName: 'longGeneric' 옵션은 전체 일반 이름을 제공합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM Pacific Time"

이는 Pacific Standard Time 대신 Pacific Time를 표시합니다. 일반 긴 형식은 표준시 또는 일광 절약 시간을 명시하지 않고 명확성을 제공합니다.

일광 절약 시간제가 시간대 이름에 미치는 영향

시간대 이름은 표준시와 일광 절약 시간 사이에서 변경됩니다. timeZoneName 옵션은 이러한 변경을 자동으로 반영합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Output: "8:30 AM PDT"

1월에는 포매터가 태평양 표준시에 대해 PST를 표시합니다. 7월에는 태평양 일광 절약 시간에 대해 PDT를 표시합니다. 포매터는 날짜를 기준으로 올바른 이름을 자동으로 선택합니다.

오프셋도 표준 시간과 일광 절약 시간 사이에서 변경됩니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Output: "8:30 AM GMT-7"

겨울에 태평양 시간대는 GMT-8입니다. 여름에는 GMT-7입니다. 일광 절약 시간제가 시작되면 오프셋이 1시간 변경됩니다.

긴 형식의 이름도 변경 사항을 반영합니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Output: "8:30 AM Pacific Daylight Time"

긴 형식은 Pacific Standard Time에서 Pacific Daylight Time로 변경됩니다. 포매터는 날짜와 시간대를 기반으로 이러한 전환을 자동으로 처리합니다.

다양한 언어로 시간대 이름 표시하기

시간대 이름은 언어에 따라 다르게 표시됩니다. 로케일 식별자는 포매터가 시간대 이름에 사용할 언어를 결정합니다.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// Output: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// Output: "07:30 heure normale du Pacifique"

영어는 Pacific Standard Time를 표시합니다. 스페인어는 hora estándar del Pacífico를 표시합니다. 프랑스어는 heure normale du Pacifique를 표시합니다. 각 언어는 시간대 이름에 대해 고유한 번역을 사용합니다.

짧은 이름은 약어이기 때문에 언어 간에 동일하게 유지되는 경우가 많습니다.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM PST"

console.log(esFormatter.format(date));
// Output: "7:30 PST"

영어와 스페인어 모두 짧은 약어로 PST를 사용합니다. 그러나 스페인어 형식 규칙이 영어와 다르기 때문에 이 예제에서 스페인어는 AM 표시를 생략합니다.

오프셋은 모든 언어에서 숫자로 유지됩니다.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Output: "7:30 GMT-08:00"

영어와 일본어 모두 오프셋에 대해 GMT-08:00를 표시합니다. 숫자 오프셋은 번역이 필요하지 않습니다.

시간대 이름만 표시하기

다른 날짜 및 시간 구성 요소를 생략하여 시간대 이름만 표시할 수 있습니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Pacific Standard Time"

다른 옵션 없이 timeZoneName만 지정하면 포매터는 시간대 이름만 출력합니다. 이는 날짜 및 시간과 별도로 시간대를 표시해야 할 때 유용합니다.

이를 사용하여 레이블이나 범례를 만들 수 있습니다.

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'long'
});

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// Output:
// Pacific Standard Time (or Pacific Daylight Time depending on date)
// Central Standard Time (or Central Daylight Time depending on date)
// Eastern Standard Time (or Eastern Daylight Time depending on date)
// Greenwich Mean Time (or British Summer Time depending on date)
// Japan Standard Time

드롭다운 메뉴나 선택 인터페이스에 표시하기 적합한 시간대 이름 목록을 생성합니다.

특정 날짜 형식과 시간대 이름 결합

시간대 이름을 특정 날짜 및 시간 형식 옵션과 결합할 수 있습니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025, 10:30 AM EST"

전체 날짜 형식과 짧은 시간대 이름을 결합합니다. 출력에는 요일, 전체 월 이름, 일, 연도, 시간 및 시간대 약어가 포함됩니다.

이를 사용하여 완전한 날짜 시간 표시를 만들 수 있습니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

timeZoneName 옵션은 dateStyle 또는 timeStyle와 함께 사용할 수 없습니다. 스타일 단축키를 사용해야 하는 경우 시간대 이름은 이미 long 및 full 시간 스타일에 포함되어 있습니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

long 시간 스타일은 자동으로 짧은 시간대 이름을 포함합니다. timeZoneName를 별도로 지정할 필요가 없습니다.

이벤트 일정에 시간대 이름 표시

시간대 이름은 사용자가 여러 지역에서 이벤트가 발생하는 시간을 이해하는 데 도움이 됩니다.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'short',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// Output:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

각 이벤트는 해당 지역 시간대와 함께 표시됩니다. 사용자는 킥오프 미팅이 동부 표준시 오전 9시, 디자인 리뷰가 태평양 표준시 오전 9시, 스프린트 계획이 일본 표준시 오전 10시임을 확인할 수 있습니다.

동일한 이벤트를 여러 시간대로 표시할 수도 있습니다.

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// Output:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

단일 미팅 시간을 여러 시간대로 변환하여 표시합니다. 다른 지역의 팀원들이 자신의 현지 시간을 빠르게 찾을 수 있습니다.