맨위로가기

진행 표시줄

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

진행 표시줄은 작업의 진행 상황을 시각적으로 나타내는 사용자 인터페이스 요소이다. 1896년 카롤 아다미에키가 간트 차트의 초기 형태를 개발했지만, 디지털 컴퓨팅에 도입된 최초의 그래픽 진행 표시줄은 1979년 미첼 모델의 박사 학위 논문에서 등장했다. 진행 표시줄은 사용자의 불안감을 줄이고 효율성을 높이는 데 기여하며, 선형적이지 않은 시간 인식으로 인해 실제 작업량과 다르게 느껴질 수 있다. 또한, 프로그레스 서클, 링, 스피너와 같은 다양한 파생 위젯과 HTML5의 progress 요소로도 구현된다.

2. 역사

진행 표시줄의 개념은 디지털 컴퓨팅 이전에 발명되었다. 1896년 카롤 아다미에키는 ''하모노그램''이라는 차트를 개발했지만, 오늘날에는 간트 차트로 더 잘 알려져 있다.[1] 그러나 아다미에키는 1931년까지 자신의 차트를 발표하지 않았고, 그마저도 폴란드어로만 발표했다. 따라서 이 차트는 1910~1915년경에 차트를 설계하고 서구에서 이를 대중화한 헨리 간트(1861–1919)의 이름을 따서 명명되었다.

컴퓨팅에 이 개념을 도입한 최초의 그래픽 진행 표시줄은 미첼 모델의 1979년 박사 학위 논문인 ''복잡한 컴퓨팅 환경에서의 시스템 동작 모니터링''에서 등장했다.[1] 1985년, 브래드 마이어스는 컴퓨터-인간 상호 작용에 관한 회의에서 "진행률 표시기"에 대한 논문을 발표했다.[2]

2. 1. 초기 개념

카롤 아다미에키는 1896년에 ''하모노그램''이라는 차트를 개발했는데, 이는 오늘날 간트 차트로 더 잘 알려져 있다.[1] 그러나 아다미에키는 1931년까지 자신의 차트를 발표하지 않았고, 그마저도 폴란드어로만 발표했다. 이 차트는 1910~1915년경에 차트를 설계하고 서구에서 이를 대중화한 헨리 간트(1861–1919)의 이름을 따서 명명되었다.[1]

컴퓨팅에 이 개념을 도입한 최초의 그래픽 진행 표시줄은 미첼 모델의 1979년 박사 학위 논문인 ''복잡한 컴퓨팅 환경에서의 시스템 동작 모니터링''에서 등장했다.[1] 1985년, 브래드 A. 마이어스는 컴퓨터-인간 상호 작용에 관한 회의에서 "진행률 표시기"에 대한 논문을 발표했다.[2]

2. 2. 컴퓨팅 도입

진행 표시줄의 개념은 디지털 컴퓨팅 이전에 발명되었다. 1896년 카롤 아다미에키는 ''하모노그램''이라는 차트를 개발했지만, 오늘날에는 간트 차트로 더 잘 알려져 있다.[1] 아다미에키는 1931년까지 자신의 차트를 발표하지 않았고, 그마저도 폴란드어로만 발표했다. 따라서 이 차트는 1910~1915년경에 차트를 설계하고 서구에서 이를 대중화한 헨리 간트(1861–1919)의 이름을 따서 명명되었다.[1]

컴퓨팅에 이 개념을 도입한 최초의 그래픽 진행 표시줄은 미첼 모델의 1979년 박사 학위 논문인 ''복잡한 컴퓨팅 환경에서의 시스템 동작 모니터링''에서 등장했다.[1] 1985년, 브래드 마이어스는 컴퓨터-인간 상호 작용에 관한 회의에서 "진행률 표시기"에 대한 논문을 발표했다.[2]

3. 사용자 인식

원형 진행 표시줄


마이어스(Myers)의 연구는 사람들에게 진행 표시줄이 있는 데이터베이스 검색과 없는 데이터베이스 검색을 실행하도록 요청하는 방식으로 진행되었다. 진행 표시줄을 보면서 기다린 사람들은 전반적으로 더 긍정적인 경험을 했다고 설명했다. 마이어스는 진행 표시줄을 사용하면 불안감이 줄어들고 효율성이 높아진다고 결론지었다.[3]

일반적으로 진행 표시줄은 선형 함수를 사용하여 진행 표시줄의 진행 상황이 완료된 작업량에 정비례하도록 한다. 그러나 다양한 디스크, 메모리, 프로세서, 대역폭 및 기타 요인으로 인해 이러한 추정이 복잡해진다.[4] 결과적으로 진행 표시줄은 가속, 감속 및 일시 중지와 같은 비선형 동작을 보이는 경우가 많다. 이러한 동작은 인간의 비선형적인 시간 인식과 결합되어 진행 표시줄이 완료되는 데 걸리는 시간에 대한 가변적인 인식을 생성한다.[4] 이는 또한 진행 표시줄을 더 "빠르게" 느껴지도록 설계할 수 있음을 의미한다.

프로그램 설치 중이나 여러 파일을 한 번에 복사할 때와 같이 특히 오래 걸리는 작업의 진행 상황을 표시하기 위해 애플리케이션은 때때로 한 번에 두 개의 진행 표시줄을 표시하기도 한다. 하나는 전체 작업에 대한 것이고 다른 하나는 단일 구성 요소 설치 또는 개별 파일 복사와 같은 식별된 하위 작업의 진행 상황을 나타낸다.

마지막으로 진행 표시줄의 그래픽 디자인 또한 인간의 지속 시간 인식에 영향을 미치는 것으로 나타났다.[5]

3. 1. 비선형적 인식

마이어스(Myers)의 연구는 사람들에게 진행 표시줄이 있는 데이터베이스 검색과 없는 데이터베이스 검색을 실행하도록 요청하는 방식으로 진행되었다. 진행 표시줄을 보면서 기다린 사람들은 전반적으로 더 긍정적인 경험을 했다고 설명했다. 마이어스는 진행 표시줄을 사용하면 불안감이 줄어들고 효율성이 높아진다고 결론지었다.[3]

일반적으로 진행 표시줄은 선형 함수를 사용하여 진행 표시줄의 진행 상황이 완료된 작업량에 정비례하도록 한다. 그러나 다양한 디스크, 메모리, 프로세서, 대역폭 및 기타 요인으로 인해 이러한 추정이 복잡해진다.[4] 결과적으로 진행 표시줄은 가속, 감속 및 일시 중지와 같은 비선형 동작을 보이는 경우가 많다. 이러한 동작은 인간의 비선형적인 시간 인식과 결합되어 진행 표시줄이 완료되는 데 걸리는 시간에 대한 가변적인 인식을 생성한다.[4] 이는 또한 진행 표시줄을 더 "빠르게" 느껴지도록 설계할 수 있음을 의미한다.

프로그램 설치 중이나 여러 파일을 한 번에 복사할 때와 같이 특히 오래 걸리는 작업의 진행 상황을 표시하기 위해 애플리케이션은 때때로 한 번에 두 개의 진행 표시줄을 표시하기도 한다. 하나는 전체 작업에 대한 것이고 다른 하나는 단일 구성 요소 설치 또는 개별 파일 복사와 같은 식별된 하위 작업의 진행 상황을 나타낸다.

마지막으로 진행 표시줄의 그래픽 디자인 또한 인간의 지속 시간 인식에 영향을 미치는 것으로 나타났다.[5]

3. 2. 디자인의 영향

마이어스(Myers)의 연구는 사람들에게 진행 표시줄이 있는 데이터베이스 검색과 없는 데이터베이스 검색을 실행하도록 요청하는 방식으로 진행되었다. 진행 표시줄을 보면서 기다린 사람들은 전반적으로 더 긍정적인 경험을 했다고 설명했다. 마이어스는 진행 표시줄을 사용하면 불안감이 줄어들고 효율성이 높아진다고 결론지었다.[3]

일반적으로 진행 표시줄은 선형 함수를 사용하여 진행 표시줄의 진행 상황이 완료된 작업량에 정비례하도록 한다. 그러나 다양한 디스크, 메모리, 프로세서, 대역폭 및 기타 요인으로 인해 이러한 추정이 복잡해진다.[4] 결과적으로 진행 표시줄은 가속, 감속 및 일시 중지와 같은 비선형 동작을 보이는 경우가 많다. 이러한 동작은 인간의 비선형적인 시간 인식과 결합되어 진행 표시줄이 완료되는 데 걸리는 시간에 대한 가변적인 인식을 생성한다.[4] 이는 또한 진행 표시줄을 더 "빠르게" 느껴지도록 설계할 수 있음을 의미한다.

프로그램 설치 중이나 여러 파일을 한 번에 복사할 때와 같이 특히 오래 걸리는 작업의 진행 상황을 표시하기 위해 애플리케이션은 때때로 한 번에 두 개의 진행 표시줄을 표시하기도 한다.

진행 표시줄의 그래픽 디자인 또한 인간의 지속 시간 인식에 영향을 미치는 것으로 나타났다.[5]

3. 3. 다중 진행 표시줄

4. 부정 상태

태스크 완료까지의 처리량이나 시간을 예측할 수 없는 등, 태스크의 진행 비율을 나타낼 수 없는 상황에서는 일정 폭의 컬러 바가 전체 바 안을 반복해서 이동하는 애니메이션과 같은 "부정(미정) 진행 표시줄"(인디터미네이트/indeterminate영어)로 표시된다.[6][7] 이 바는 진행의 총량(크기)이 가득 찼음을 나타내는 것이 아니라, 현재 진행 중임을 나타내는 움직임으로서 인디케이터의 역할을 겸하고 있다. Microsoft Windows에서는 이 표시 상태를 마키 스타일(마키 스타일/marquee style영어)이라고 부르기도 한다.[8] Microsoft Windows 8의 Modern UI 스타일에서는 부정 상태를 나타내기 위해 몇 개의 점 집단이 바의 영역 내를 반복해서 이동하는 애니메이션이 사용되기도 한다.[9][10]

4. 1. 부정 진행 표시줄의 형태

태스크 완료까지의 처리량이나 시간을 예측할 수 없는 등, 태스크의 진행 비율을 나타낼 수 없는 상황에서는 일정 폭의 컬러 바가 전체 바 안을 반복해서 이동하는 애니메이션과 같은 "부정(미정) 진행 표시줄"(indeterminate영어)로 표시된다.[6][7] 이 바는 진행의 총량(크기)이 가득 찼음을 나타내는 것이 아니라, 현재 진행 중임을 나타내는 움직임으로서 인디케이터의 역할을 겸하고 있다. Microsoft Windows에서는 이 표시 상태를 마키 스타일(marquee style영어)이라고 부르기도 한다.[8] Microsoft Windows 8의 Modern UI 스타일에서는 부정 상태를 나타내기 위해 몇 개의 점 집단이 바의 영역 내를 반복해서 이동하는 애니메이션이 사용되기도 한다.[9][10]

4. 2. 역할

태스크 완료까지의 처리량이나 시간을 예측할 수 없는 등, 태스크의 진행 비율을 나타낼 수 없는 상황에서 사용되는 경우, 일정 폭의 컬러 바가 전체 바 안을 반복해서 이동하는 애니메이션과 같은, "부정(미정) 진행 표시줄"(indeterminate영어)로 표시된다[6][7]。이 바는 진행의 총량(크기)이 가득 찼음을 나타내는 것이 아니라, 현재 진행 중임을 나타내는 움직임으로서 인디케이터의 역할을 겸하고 있다. Microsoft Windows에서는 이 표시 상태를 마키 스타일(marquee style영어)이라고 부르기도 한다[8]。Microsoft Windows 8의 Modern UI 스타일에서는 부정 상태를 나타내기 위해 몇 개의 점 집단이 바의 영역 내를 반복해서 이동하는 애니메이션이 사용되기도 한다[9][10]。

5. 파생 위젯

macOS, iOS, 안드로이드나 Microsoft Windows 8[9] 등에서는, '''프로그레스 서클'''(progress circle영어), '''스피닝 프로그레스 인디케이터'''(spinning progress indicator영어)[11], '''프로그레스 링'''(progress ring영어)[12], '''프로그레스 스피너'''(progress spinner영어)[13]처럼, 진행률 표시나 불확정 상태의 애니메이션이 원환(원 그래프)이나 염주와 같은 형태로 표시되는 것도 있다. 프로그레스 바보다 차지하는 면적이 작게 끝나기 때문에, 특히 화면이 작은 모바일 환경에서 많이 사용되고 있다. 예를 들어 여러 파일의 업로드/다운로드 진행률이나, 여러 앱의 설치/업데이트 진행률을 콤팩트하게 개별 표시하는 데 편리하다.

또한, macOS의 '''스피닝 대기 커서'''(spinning wait cursor영어)[14]나, Microsoft Windows Vista 이후의 대기 커서[15]는, 원형 디자인의 아이콘이 애니메이션함으로써, 시스템이나 애플리케이션이 비지 상태임을 나타내게 되어 있지만, 이것들은 예전에 모래시계 디자인의 아이콘이 사용되었던 것이며, 프로그레스 링이나 프로그레스 스피너가 등장하기 훨씬 이전 단계에서 원형 디자인이 되었다. Windows에서는 마우스의 속성 디자인 설정을 변경함으로써, Vista 이후라도 대기 커서를 종래의 모래시계 아이콘 등으로 하거나, 사용자가 준비한 커서 이미지를 설정할 수도 있다[16][17]。대기 커서는 비지 커서 또는 비지 포인터라고도 불린다. Windows의 데스크톱 사용자 인터페이스 가이드라인에서는, 동작이 완료될 때까지 사용자가 1초 이상 대기해야 하는 경우, 비지 포인터(IDC_WAIT)를 표시하도록 지정되어 있다. 백그라운드에서 작업이 진행 중이며, 다른 완료까지의 시각적 피드백을 제공할 수단이 없는 경우에는, 화살표 아이콘과 작은 비지 아이콘이 조합된 포인터를 표시한다. 이러한 활동 상황을 나타내는 포인터는 프로그레스 바나 프로그레스 애니메이션과 조합해서는 안 된다고 되어 있다[18]。

5. 1. 프로그레스 서클/링/스피너

macOS, iOS, 안드로이드나 Microsoft Windows 8[9] 등에서는, '''프로그레스 서클'''(progress circle영어), '''스피닝 프로그레스 인디케이터'''(spinning progress indicator영어)[11], '''프로그레스 링'''(progress ring영어)[12], '''프로그레스 스피너'''(progress spinner영어)[13]처럼, 진행률 표시나 불확정 상태의 애니메이션이 원환(원 그래프)이나 염주와 같은 형태로 표시되는 것도 있다. 프로그레스 바보다 차지하는 면적이 작게 끝나기 때문에, 특히 화면이 작은 모바일 환경에서 많이 사용되고 있다.

또한, macOS의 '''스피닝 대기 커서'''(spinning wait cursor영어)[14]나, Microsoft Windows Vista 이후의 대기 커서[15]는, 원형 디자인의 아이콘이 애니메이션함으로써, 시스템이나 애플리케이션이 비지 상태임을 나타내게 되어 있지만, 이것들은 예전에 모래시계 디자인의 아이콘이 사용되었던 것이며, 프로그레스 링이나 프로그레스 스피너가 등장하기 훨씬 이전 단계에서 원형 디자인이 되었다. Windows에서는 마우스의 속성 디자인 설정을 변경함으로써, 대기 커서를 종래의 모래시계 아이콘 등으로 하거나, 사용자가 준비한 커서 이미지를 설정할 수도 있다[16][17]。대기 커서는 비지 커서 또는 비지 포인터라고도 불린다. Windows의 데스크톱 사용자 인터페이스 가이드라인에서는, 동작이 완료될 때까지 사용자가 1초 이상 대기해야 하는 경우, 비지 포인터를 표시하도록 지정되어 있다. 백그라운드에서 작업이 진행 중이며, 다른 완료까지의 시각적 피드백을 제공할 수단이 없는 경우에는, 화살표 아이콘과 작은 비지 아이콘이 조합된 포인터를 표시한다. 이러한 활동 상황을 나타내는 포인터는 프로그레스 바나 프로그레스 애니메이션과 조합해서는 안 된다고 되어 있다[18]。

5. 2. 스피닝 대기 커서

macOS, iOS, 안드로이드나 Microsoft Windows 8[9] 등에서는, 프로그레스 서클(progress circle영어), 스피닝 프로그레스 인디케이터(spinning progress indicator영어)[11], 프로그레스 링(progress ring영어)[12], 프로그레스 스피너(progress spinner영어)[13]처럼, 진행률 표시나 불확정 상태의 애니메이션이 원환(원 그래프)이나 염주와 같은 형태로 표시되는 것도 있다. 프로그레스 바보다 차지하는 면적이 작게 끝나기 때문에, 특히 화면이 작은 모바일 환경에서 많이 사용되고 있다.

macOS의 스피닝 대기 커서(spinning wait cursor영어)[14]나, Microsoft Windows Vista 이후의 대기 커서[15]는 원형 디자인의 아이콘이 애니메이션함으로써, 시스템이나 애플리케이션이 비지 상태임을 나타낸다. 이러한 디자인은 예전에 모래시계 디자인의 아이콘이 사용되었던 것을 대체하였다. Windows에서는 마우스의 속성 디자인 설정을 변경함으로써, 대기 커서를 모래시계 아이콘 등으로 하거나, 사용자가 준비한 커서 이미지를 설정할 수도 있다.[16][17] 대기 커서는 비지 커서 또는 비지 포인터라고도 불린다. Windows의 데스크톱 사용자 인터페이스 가이드라인에서는, 동작이 완료될 때까지 사용자가 1초 이상 대기해야 하는 경우, 비지 포인터(IDC_WAIT)를 표시하도록 지정되어 있다. 백그라운드에서 작업이 진행 중이며, 다른 완료까지의 시각적 피드백을 제공할 수단이 없는 경우에는, 화살표 아이콘과 작은 비지 아이콘이 조합된 포인터를 표시한다. 이러한 활동 상황을 나타내는 포인터는 프로그레스 바나 프로그레스 애니메이션과 조합해서는 안 된다고 되어 있다[18]。

6. HTML5

HTML5에서는 다수의 사용자 인터페이스 요소가 새롭게 표준화되었는데, 진행 표시줄(Progress Bar)도 `progress` 요소로 추가되었다.

참조

[1] 간행물 Monitoring System Behavior in a Complex Computational Environment Xerox Corporation Palo Alto Research Center 1979
[2] 논문 "The importance of percent-done progress indicators for computer-human interfaces" ACM, New York, NY
[3] 뉴스 Who Made That Progress Bar? https://www.nytimes.[...]
[4] 논문 "Rethinking the progress bar" http://chrisharrison[...] ACM, New York, NY
[5] 논문 "Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations" http://chrisharrison[...] ACM, New York, NY
[6] 웹사이트 Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > 進行状況バー https://web.archive.[...]
[7] 웹사이트 Progress Bars - Win32 apps | Microsoft Docs https://docs.microso[...]
[8] 웹사이트 About Progress Bar Controls - Win32 apps | Microsoft Docs https://docs.microso[...]
[9] 웹사이트 プログレス コントロールのガイドライン - Windows app development https://web.archive.[...]
[10] 웹사이트 ProgressBar Class (Windows.UI.Xaml.Controls) - Windows UWP applications | Microsoft Docs https://docs.microso[...]
[11] 웹사이트 Progress Indicators - Indicators - macOS - Human Interface Guidelines - Apple Developer https://developer.ap[...]
[12] 웹사이트 Guidelines for progress controls - Windows apps | Microsoft Docs https://docs.microso[...]
[13] 웹사이트 Progress spinner | Angular Material https://material.ang[...]
[14] 웹사이트 macOS Human Interface Guidelines: Pointers https://web.archive.[...]
[15] 웹사이트 About Cursors - Win32 apps | Microsoft Docs https://docs.microso[...]
[16] 웹사이트 富士通Q&A - [Windows Vista] マウスポインタのデザインを変更する方法を教えてください。 - FMVサポート : 富士通パソコン https://www.fmworld.[...]
[17] 웹사이트 ASCII.jp：派手に動いて音までなるマウスカーソルに変身させる (1/2) https://ascii.jp/ele[...]
[18] 웹사이트 Windows 7 Mouse and Pointers - Win32 apps | Microsoft Learn https://learn.micros[...]


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com