숫자 표기
숫자 표기 (Numerics)
숫자, 날짜, 시간, 통화를 UI에 표시할 때는 사용자가 빨리 훑어볼 수 있도록 일관된 규칙이 필요해요. 미국 표준을 기반으로 하는 PatternFly의 숫자 표기 지침을 이 문서에서 정리해 드릴게요.
출처: 문서
본문
글꼴 스타일 (Font styling)
필요하다면 숫자에 tabular(등간격) 스타일을 적용하는 글꼴 수정자 .pf-v6-m-tabular-nums를 제공해요. tabular 글꼴 스타일에 대해 더 알아보세요.
날짜와 시간 형식 (Date and time formats)
모든 날짜와 시간 형식은 하드코딩하지 말고 현지화(localizable)가 가능해야 해요. 현지화 가능한 날짜와 시간 형식을 만들 때 개발 팀은 date-fns나 Day.js 같은 리소스를 사용해 같은 라이브러리를 공유해야 해요.
PatternFly 날짜와 시간 형식은 미국 표준을 따릅니다. 현지화할 때는 언어 로케일에 적합한 형식을 사용하고 ISO 표준을 따르세요.
| 요소 (Element) | 지침 (Guideline) | 예시 (Example) |
|---|---|---|
| 날짜 (Date) | Month DD, YYYY 형식을 사용하세요. | September 17, 2020 또는 Sep 17, 2020 |
| 날짜 숫자 값 (Date numeric value) | 날짜를 숫자 값이나 라벨로 나타낼 때는 MM-DD-YYYY를 사용하세요. | 09-17-2020 |
| 시간 (Time) | 시간을 12시간제 또는 24시간제(UTC)로 표시하세요. | 12시간제: 3:00 PM, 초 포함: 3:30:11 PM, 24시간제: 15:00 |
| 12시간제 표기 (12-hour time notation) | 이 시간 규약은 하루 24시간을 각각 12시간씩, AM과 PM 두 기간으로 나눠요. 12시간제 표기는 미국 표준이에요. | 3:00 PM |
| 24시간제 표기 (24-hour time notation) | 이 시간 규약은 하루를 24시간으로 나누고 자정부터 자정까지 이어져요. 시간은 0부터 23까지로 표현돼요. | 14:00 |
| 날짜와 시간 (Date and time) | 날짜 뒤에 타임스탬프와 함께 시간대(timezone)를 포함하세요. | Thursday, January 21, 2019 9:38:11 PM EST, Thursday, 21 January 2019, 9:38:11 PM EST, 07 Jan 2019, 23:33 UTC |
| 시간대 (Time zone) | 사용자의 시간대나 UTC로 시간을 표시하세요. 여러 시간대에 걸칠 때는 UTC를 사용하세요. | Maintenance begins today at 14:00 UTC (2 PM EST). |
| 요일 (Day) | 요일의 전체 이름을 쓰세요. 공간이 제한적이면 요일의 3글자 약어를 사용하세요: Mon, Tue, Wed, Thu, Fri, Sat, Sun | Monday, September 17, 2020 또는 Mon, Sep 17, 2020 |
| 월 (Month) | 월의 전체 이름을 쓰세요. 공간이 제한적이면 월의 3글자 약어를 사용하세요: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec | September 17, 2020 또는 Sep 17, 2020 |
| 지속 시간 (Duration) | HH:MM:SS 또는 HH:MM | 03:15:30, 03:15, 00:15 |
절대 시간 또는 상대 시간 (Absolute or relative time)
절대 타임스탬프를 쓸지 상대 타임스탬프를 쓸지는 문맥에 따라 달라져요.
절대 시간 (Absolute time)
사건이 발생한 정확한 날짜와 시간을 나타내려면 절대 타임스탬프를 사용하세요. 예를 들어 "07 Jan 2020, 23:33 UTC". 더 많은 예시는 날짜와 시간 형식 표를 참고하세요.
상대 시간 (Relative time)
사건이 얼마나 오래 전에 발생했는지 나타내려면 상대 타임스탬프를 사용하세요. 상대 시간을 보고할 때는 다음 표현에 맞추세요:
| 시간 범위 (Time frame) | 지침 (Guideline) | 상대 타임스탬프 (Relative timestamp(s)) |
|---|---|---|
| 1분 미만 전 | 시간을 초나 밀리초로 표시하지 마세요. | Just now |
| 1시간 미만 전 | 시간을 분 단위로, 가장 가까운 분으로 반올림해 표시하세요. | 1 minute ago, 4 minutes ago |
| 1일 미만 전 | 시간을 시 단위로, 가장 가까운 시로 반올림해 표시하세요. | 1 hour ago, 4 hours ago |
| 1개월 미만 전 | 시간을 일 단위로 표시하세요. | 1 day ago, 24 days ago |
| 1년 미만 전 | 시간을 월 단위로, 가장 가까운 월로 반올림해 표시하세요. | 1 month ago, 10 months ago |
| 1년 이상 전 | 시간을 연 단위로, 가장 가까운 연으로 반올림해 표시하세요. | 1 year ago, 5 years ago |
숫자와 통화 (Numbers and currency)
사용자가 콘텐츠를 더 빨리 훑어볼 수 있도록, 쓰여진 숫자 대신 숫자 표기(numeral)를 사용하세요.
| Before | After |
|---|---|
| Your transaction will be complete in three business days. | Your transaction will be complete in 3 business days. |
| You have a credit of two dollars. | You have a credit of US$2.00. |
숫자 그룹핑 (Digit grouping)
큰 숫자 안에서 자릿수를 그룹핑할 때는 미국 표기 표준을 사용하세요. 천 단위를 콤마로 구분하고 센트를 소수점으로 구분하세요. 예를 들어:
- 1,000,000,000
- 1,000,000.00
통화 (Currency)
"$" 기호만 사용하는 통화를 표시할 때는 ISO 통화 코드의 처음 2글자를 추가하세요. 예를 들어:
- US$1,500 (United States)
- AU$1,500 (Australia)
- HK$1,500 (Hong Kong)
- CA$1,500 (Canada)
다른 통화는 가능하면 3글자 ISO 코드를 사용하세요. 국가 통화 기호를 사용할 수도 있지만, 일부 사용자는 그 기호에 익숙하지 않을 수 있다는 점을 명심하세요. 확실하지 않을 때는 ISO를 기본으로 하세요. 예를 들어:
- EUR 1,500 또는 £1,500 (British pound)
- GPB 1,500 또는 €1,500 (Euro)
- JPY 1,500 또는 ¥1,500 (Japanese Yen)
컴퓨터화된 시스템이나 라틴 문자를 사용하지 않는 국가를 위해 쓸 때는 통화의 ISO 3자리 숫자 코드를 사용하세요.
| 국가 (Country) | 통화 (Currency) | 알파벳 코드 (Alphabetic code) | 숫자 코드 (Numeric code) |
|---|---|---|---|
| United States | Dollar | USD | 840 |
| China | Yuan | CNY | 156 |
| European Union | Euro | EUR | 978 |
| United Kingdom | Pound | GBP | 826 |
일반적으로 우리는 통화 환전(currency conversions)을 제공하지 않아요.