기간을 2:30:45 형식으로 표시하는 방법은 무엇인가요?

소개

비디오 플레이어, 스톱워치, 카운트다운 타이머는 익숙한 형식으로 기간을 표시합니다. "2:30:45"를 보면 2시간 30분 45초를 의미한다는 것을 즉시 이해할 수 있습니다. 이 디지털 시계 형식은 레이블이나 공백 없이 콜론을 사용하여 시간 단위를 구분합니다.

이 형식을 수동으로 구축하려면 숫자를 0으로 패딩하고 다양한 기간 길이를 처리해야 합니다. 5분 30초 동안 재생되는 비디오는 "5:30"으로 표시되고 2시간 비디오는 "2:00:00"으로 표시됩니다. 엣지 케이스가 있으면 로직이 복잡해집니다.

function formatDuration(seconds) {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);

  if (h > 0) {
    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  }
  return `${m}:${String(s).padStart(2, '0')}`;
}

Intl.DurationFormat API는 digital 스타일 옵션을 통해 이를 자동으로 처리합니다. 모든 기간 길이에 대해 올바른 형식을 생성합니다.

const duration = { hours: 2, minutes: 30, seconds: 45 };
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "2:30:45"

타이머 디스플레이에 디지털 스타일 사용

digital 스타일은 디지털 시계처럼 기간을 형식화합니다. 포매터를 생성할 때 style 옵션을 "digital"로 설정하세요.

const formatter = new Intl.DurationFormat('en', { style: 'digital' });

표시하려는 시간 단위가 포함된 기간 객체를 전달하세요. 포매터는 단위 사이에 콜론을 추가하고 필요한 경우 값을 0으로 패딩합니다.

const duration = { hours: 1, minutes: 5, seconds: 30 };
formatter.format(duration);
// "1:05:30"

분이 "5" 대신 "05"로 표시되는 것을 확인하세요. 포매터는 시간이 있을 때 자동으로 분을 두 자리로 패딩합니다. 이렇게 하면 목록과 테이블에서 정렬이 유지됩니다.

시간이 없는 기간의 경우 기간 객체에서 해당 속성을 생략하세요.

const shortDuration = { minutes: 5, seconds: 30 };
formatter.format(shortDuration);
// "5:30"

분이 가장 큰 단위일 때는 더 이상 패딩이 필요하지 않습니다. 형식은 명확성을 유지하면서 간결하게 유지됩니다.

디지털 형식이 다양한 기간 길이를 처리하는 방법

디지털 형식은 기간 객체에 포함하는 단위에 따라 출력을 조정합니다. 이는 비디오 플레이어가 비디오 길이에 따라 디스플레이를 조정하는 방식과 일치합니다.

짧은 기간은 분과 초만 표시합니다.

const formatter = new Intl.DurationFormat('en', { style: 'digital' });

const short = { minutes: 3, seconds: 42 };
formatter.format(short);
// "3:42"

긴 기간에는 시간이 포함됩니다.

const long = { hours: 2, minutes: 15, seconds: 8 };
formatter.format(long);
// "2:15:08"

시간이 표시되면 모든 하위 단위는 두 자리로 채워집니다. 시간이 없으면 분은 채우기 없이 표시되지만 초는 여전히 채워집니다.

이 채우기 규칙은 공간을 낭비하지 않으면서 일관된 정렬을 만듭니다. 짧은 동영상 목록은 "5:30", "12:45", "8:02"와 같이 콜론이 정렬되어 표시됩니다. 긴 동영상 목록은 "1:05:30", "2:12:45", "3:08:02"와 같이 일관된 형식으로 표시됩니다.

인터페이스에 필요한 단위만 포함하세요. 한 시간을 초과하지 않는 카운트다운 타이머는 시간을 완전히 생략할 수 있습니다.

const countdown = { minutes: 42, seconds: 15 };
formatter.format(countdown);
// "42:15"

0 채우기 및 표시 옵션 제어

디지털 형식은 기본 채우기 규칙을 사용하지만 개별 시간 단위에 대한 옵션을 지정하여 재정의할 수 있습니다.

단위별 옵션을 설정하여 각 단위가 표시되는 방식을 제어합니다. numeric 값은 패딩 없이 숫자를 표시합니다. 2-digit 값은 두 자리 패딩을 강제합니다.

const duration = { hours: 1, minutes: 5, seconds: 3 };

new Intl.DurationFormat('en', {
  style: 'digital',
  hours: 'numeric',
  minutes: '2-digit',
  seconds: '2-digit'
}).format(duration);
// "1:05:03"

이것이 기본 동작입니다. 다른 형식을 원할 때만 이러한 옵션을 지정하면 됩니다.

시간이 항상 두 자리를 표시하도록 강제합니다.

new Intl.DurationFormat('en', {
  style: 'digital',
  hours: '2-digit',
  minutes: '2-digit',
  seconds: '2-digit'
}).format(duration);
// "01:05:03"

이 형식은 일관된 너비가 레이아웃 이동을 방지하는 동기화된 디스플레이에 적합합니다.

더 컴팩트한 디스플레이를 위해 초에서 채우기를 제거합니다.

const shortDuration = { minutes: 5, seconds: 3 };

new Intl.DurationFormat('en', {
  style: 'digital',
  seconds: 'numeric'
}).format(shortDuration);
// "5:3"

사용자는 디지털 디스플레이에서 초가 채워지기를 기대하기 때문에 이 형식은 덜 일반적입니다.

디지털 형식에 소수 초 추가

일부 애플리케이션은 밀리초 또는 마이크로초를 표시해야 합니다. 디지털 형식은 fractionalDigits 옵션을 통해 소수 초를 지원합니다.

초 뒤에 표시할 소수 자릿수를 설정합니다.

const duration = {
  minutes: 5,
  seconds: 30,
  milliseconds: 123
};

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "5:30.123"

포매터는 초 뒤에 소수점을 추가하고 지정된 수의 소수 자릿수를 표시합니다.

스톱워치는 일반적으로 1/100초를 표시합니다.

const lap = {
  minutes: 1,
  seconds: 23,
  milliseconds: 450
};

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 2
}).format(lap);
// "1:23.45"

포매터는 지정된 정밀도로 반올림합니다. 450밀리초 값은 45/100초가 됩니다.

마이크로초 정밀도를 위해서는 duration 객체에 마이크로초를 포함하고 더 높은 소수 자릿수를 설정하세요.

const precise = {
  seconds: 42,
  milliseconds: 123,
  microseconds: 456
};

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 6
}).format(precise);
// "42.123456"

디지털 형식과 다른 스타일을 사용하는 경우

인터페이스가 타이머, 스톱워치 또는 미디어 플레이어와 유사한 경우 디지털 형식을 선택하세요. 사용자는 이러한 컨텍스트에서 이 형식을 기대합니다.

비디오 플레이어 컨트롤에는 디지털 형식을 사용하세요.

function formatVideoTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  const duration = hours > 0
    ? { hours, minutes, seconds: secs }
    : { minutes, seconds: secs };

  return new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
}

formatVideoTime(6345); // "1:45:45"
formatVideoTime(125);  // "2:05"

카운트다운 타이머와 스톱워치에는 디지털 형식을 사용하세요.

function formatStopwatch(milliseconds) {
  const minutes = Math.floor(milliseconds / 60000);
  const seconds = Math.floor((milliseconds % 60000) / 1000);
  const ms = milliseconds % 1000;

  return new Intl.DurationFormat('en', {
    style: 'digital',
    fractionalDigits: 2
  }).format({ minutes, seconds, milliseconds: ms });
}

formatStopwatch(125450); // "2:05.45"

산문에서 기간을 표시하거나 레이블이 명확성을 향상시킬 때는 다른 스타일을 사용하세요. 항공편 예약 사이트는 컨텍스트가 타이머가 아니기 때문에 "8:15:00" 대신 "8시간 15분"을 표시합니다.

// Good for prose and descriptions
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "1 hr, 46 min and 40 sec"

// Good for timer displays
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "1:46:40"

이전 브라우저를 위한 디지털 형식 수동 구축

Intl.DurationFormat API는 2025년 3월에 사용 가능하게 되었습니다. 이전 브라우저의 경우 디지털 형식을 수동으로 구축하세요.

수동 접근 방식은 총 초에서 시간 단위를 계산하고 값을 0으로 패딩해야 합니다.

function formatDigitalDuration(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = Math.floor(totalSeconds % 60);

  if (hours > 0) {
    const paddedMinutes = String(minutes).padStart(2, '0');
    const paddedSeconds = String(seconds).padStart(2, '0');
    return `${hours}:${paddedMinutes}:${paddedSeconds}`;
  } else {
    const paddedSeconds = String(seconds).padStart(2, '0');
    return `${minutes}:${paddedSeconds}`;
  }
}

formatDigitalDuration(6345); // "1:45:45"
formatDigitalDuration(125);  // "2:05"

함수는 총 초를 3600으로 나누어 시간을 구합니다. 나머지를 60으로 나누면 분이 나옵니다. 최종 나머지는 초입니다.

padStart() 메서드는 값이 10보다 작을 때 앞에 0을 추가합니다. 이를 통해 "5"가 "05"가 되어 일관된 형식을 보장합니다.

총 초 대신 duration 객체로 저장된 기간의 경우 값을 직접 추출하세요.

function formatDurationObject(duration) {
  const h = duration.hours || 0;
  const m = duration.minutes || 0;
  const s = duration.seconds || 0;

  if (h > 0) {
    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  }
  return `${m}:${String(s).padStart(2, '0')}`;
}

formatDurationObject({ hours: 1, minutes: 5, seconds: 30 }); // "1:05:30"
formatDurationObject({ minutes: 5, seconds: 30 }); // "5:30"

밀리초를 포함하고 소수점 정밀도로 형식을 지정하여 소수 초를 추가하세요.

function formatWithMilliseconds(duration) {
  const m = duration.minutes || 0;
  const s = duration.seconds || 0;
  const ms = duration.milliseconds || 0;

  const paddedSeconds = String(s).padStart(2, '0');
  const fractional = String(ms).padStart(3, '0').slice(0, 2);

  return `${m}:${paddedSeconds}.${fractional}`;
}

formatWithMilliseconds({ minutes: 1, seconds: 23, milliseconds: 450 });
// "1:23.45"

API를 사용하기 전에 지원 여부를 확인하세요.

function formatDuration(duration) {
  if (typeof Intl.DurationFormat !== 'undefined') {
    return new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
  } else {
    return formatDurationObject(duration);
  }
}

이 접근 방식은 네이티브 API를 사용할 수 있을 때 이를 활용하면서 모든 브라우저에서 일관된 출력을 제공합니다.

비디오 플레이어 및 타이머의 일반적인 패턴

비디오 플레이어는 현재 시간과 전체 재생 시간을 모두 포맷해야 합니다. 두 값을 모두 처리할 수 있는 재사용 가능한 포매터를 생성하세요.

const videoFormatter = new Intl.DurationFormat('en', { style: 'digital' });

function formatVideoPosition(currentSeconds, totalSeconds) {
  const current = secondsToDuration(currentSeconds);
  const total = secondsToDuration(totalSeconds);

  return `${videoFormatter.format(current)} / ${videoFormatter.format(total)}`;
}

function secondsToDuration(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  return hours > 0
    ? { hours, minutes, seconds: secs }
    : { minutes, seconds: secs };
}

formatVideoPosition(125, 6345); // "2:05 / 1:45:45"

매 프레임마다 업데이트되는 카운트다운 타이머의 경우, 포매터를 한 번 생성하고 재사용하세요.

const timerFormatter = new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 2
});

function updateTimer(remainingMs) {
  const duration = {
    minutes: Math.floor(remainingMs / 60000),
    seconds: Math.floor((remainingMs % 60000) / 1000),
    milliseconds: remainingMs % 1000
  };

  document.getElementById('timer').textContent = timerFormatter.format(duration);
}

랩 타임을 표시하는 스톱워치의 경우, 소수점 초 단위로 경과 시간을 포맷하세요.

const lapFormatter = new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
});

function formatLapTime(startMs, endMs) {
  const elapsedMs = endMs - startMs;

  return lapFormatter.format({
    minutes: Math.floor(elapsedMs / 60000),
    seconds: Math.floor((elapsedMs % 60000) / 1000),
    milliseconds: elapsedMs % 1000
  });
}

const lap1Start = performance.now();
// ... time passes ...
const lap1End = performance.now();

formatLapTime(lap1Start, lap1End); // "1:23.456"

이러한 패턴은 깔끔하고 재사용 가능한 코드를 유지하면서 가장 일반적인 기간 포맷 시나리오를 처리합니다.