HTML, CSS

ProgressBar 구현하는 3가지 방법 :: 마이구미

mygumi 2018. 2. 8. 00:55
반응형

이 글은 ProgressBar 구현에 대해 다뤄본다.

ProgressBar는 "진행바" 라고 불린다.

웹사이트 및 앱 개발 등 많은 개발에서 보여지고 있다.

우선 글에 앞서, 편의상 진행바라고 표현하겠다.


예제 - (https://codepen.io/mygumi/pen/EQypKX)


진행바는 크게 3가지로 구현할 수 있다.


  • HTML tag (div, span, etc)
  • HTML5 progress tag
  • SVG


div 나 span 으로 구현하는 방식이 일반적인 방법이다.

HTML5 에서는 태그로 지원을 하는 것을 볼 수 있듯이, 웹 개발 시 많이 이용한다는 것을 알 수 있다.

SVG 태그를 통해 구현하는 방식 또한 존재한다.


3가지 구현 방법에 대한 구현 예제는 다음과 같다.


See the Pen progressbar by html, html5, svg by leejunghyun (@mygumi) on CodePen.


코드를 이해했다면, 아래 자세한 내용은 생략해도된다.

3가지 구현 예제에 있어, 보여지는 모습이 조금씩 다르다는 것을 알 수 있다.

구현 방식에 있어, 장단점을 이야기하기 위함이다.


우선 HTML tag 를 통한 구현을 보자.

구현 방식은 다양하지만, 여기서는 keyframes 를 이용한다.


.css-progressbar {
    width: 80%;
    animation: progressbar 2s ease-out;
}

// animation
@keyframes progressbar { 
  0%  { 
    width: 0%;
  } 
  100% { 
    width: 80%;
  }  
}


위와 같이 간단하게 진행바를 구현할 수 있다.

예제를 보다시피, after 가상 클래스를 통해 진행바를 조금 더 커스텀한 모습을 볼 수 있다.

간단하고, 확장 및 관리에 있어서는 유용한 방식이 된다.


두번째로 HTML5 에서 지원하는 progress 태그는 그 자체로 이미 완성되어있다.

그냥 다른 태그들과 같이 태그만 선언해주면 된다.


<progress value="22" max="100"></progress>


value, max 속성의 값을 통해 진행바의 애니메이션이 구현된다.

하지만 첫번째 구현 방식과 같은 커스텀은 다소 어렵다.

그로 인해, 구현과 관리는 간단하지만, 확장 측면에서는 효율적이지 못하다.


마지막으로 SVG 방식을 보자.


<svg height="150" width="150">
     .........
</svg>


svg의 line 태그를 사용하여, 가장 간단하게 구현한 방식이다.

크게 stroke-dashoffset, stroke-dasharray 속성을 사용한다.


stroke-dasharray 속성은 전체적인 규칙 또는 패턴이라고 볼 수 있다.

stroke-dashoffset 속성은 시작하는 시점의 패턴이라고 볼 수 있다. 

문서의 예제를 참고하면 쉽게 이해할 수 있기에, 링크로 대체하겠다.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset


하지만 보다시피, 테두리가 직선인 모습을 볼 수 있다.

line 태그를 통해서는 border-radius 와 같은 작업이 애매하기에, 다른 태그를 사용해야한다.

그로인해, 단점으로는 svg 태그 관련 속성들에 대한 학습이 필요하다.

하지만 학습만 된다면, 본인은 가장 좋은 방식이라고 생각한다.

그러한 생각에 관한 글은 다음 글을 참고 바란다.

SVG 왜 써야하는가? - http://mygumi.tistory.com/283

반응형