[멋쟁이사자처럼] Pure CSS Drawing

---

목차

1. Pure CSS Drawing

2. Basic Shape

3. GUI Icons

4. Speech Bubbles

---

1. Pure CSS Drawing

CSS(Cascading Style Sheets)는 웹 페이지의 뼈대인 HTML 에 캐스케이딩(폭포수) 방식으로 스타일을 적용시킨다.

웹 페이지 상의 시각적인 디자인 요소들이 대부분 CSS 를 통해서 구현된 것이라 보면 된다.

CSS 본문의 내용 전달을 더 효과적으로 만들어주고, 심미적으로 컨텐츠의 완성도를 높일 수 있다.

 

CSS 속성을 적극적으로 활용하면 이미지를 파일을 붙여 넣지 않고도 도형이나 아이콘 등 다양한 디자인 요소를 구현할 수 있다. HTML/CSS 한계를 보완하기 위해 JavaScript 를 사용할 수도 있지만, 순수한 CSS 그리기를 통해서 CSS 의 가능성을 극대화 할 수 있다.

 

아래의 이미지는 CSS 만을 사용해서 그린 기본 도형과 아이콘 들이다.

CSS로 그린 기본 도형들

CSS 그린 아이콘

CSS로 그린 말풍선

2. CSS Drawing 의 장단점

'굳이 불편하게 CSS 로 그림을 그려야 하나?'

의문이 들 수 있다.

CSS 만을 이용해서 도형과 디자인 요소를 구현했을 때 장단점에 대해서 정리하면 아래와 같다. (참고자료1)

 

Pure CSS Drawing 장점

 (1) 프로젝트 용량 감소 및 로딩 속도 개선

     - 일반적인 이미지 파일(git, png, jpg) 에서 사용되는 래스터 방식에 대비되는 벡터방식으로 그림을 그린다.

     - 래트터 방식은 그림의 크기가 커질수록 픽셀 개수도 늘어나 용량이 비례해서 커진다. 하지만 벡터방식은 그림의

        크기와 관계 없이 용량이 일정하다. 결과적으로 절감된 용량은 페이지 로딩속도 개선으로 이어진다.

 (2) 디자인 요소의 변형이 가능

     - 백터방식이기 때문에 사이즈, 형태, 색상, 투명도, 이동, 회전 등의 디자인 요소 변경이 자유롭다.

 (3) 애니메이션 효과

     - transition 을 활용해서 형태나 색상, 투명도 등이 자연스럽게 변하는 트위닝 애니메이션을 적용할 수 있다.

(4) 실무 적용

      - 간단한 Bullet 의 경우 이미지 대신 CSS로 추가할 수 있다. 또 SVG(Scalable Vector Graphics) 그래프를 대체할

        수 있다. SVG 를 공부하고 JavaScript 를 통해 제어하는 것은 쉽지 않다. 복잡한 그래프가 아니라면 SVG 대신 CSS

        Drawing 을 사용하여 그래프를 그려도 충분히 표현이 가능하다.

 

Pure CSS Drawing 단점

 (1) 작업자 숙련도와 비용 문제

     - CSS 에 능숙하지 않다면 CSS 만을 이용해 그리는 것에 쉽지 않다. 국내와 같이 디자이너와 프론트엔드 개발자가

       서로 역할을 나누어 협업하는 경우 디자인 비용과 마크업 개발 비용으로 총 작업 비용이 증가할 수 있다.

 (2) 브라우저 지원 문제

     - IE(Internet Explorer) 지원이 끝남으로써 대부분의 브라우저에서 온전하게 결과를 볼 수 있겠지만, 하위 버전의

      브라우저에서는 그렇지 못할 수 있다. 그렇기 때문에 CSS Drawing 을 할 때는 사용하는 속성의 브라우저 지원 범위

      를 정확하게 파악하고 각 브라우저와 버전에서 어떤 형태로 보여질 지를 머리속으로 그리며 작업해야 한다.

 (3) 성능 최적화 문제

     - 일부 CSS 속성은 성능 저하의 원인이 될 수 있다. 특히 그림자가 추가되는 속성 (box-shadow, text-shadow)은 

       모바일 기기에서 성능 저하의 원인이 된다. 그림자 퍼짐 정도를 결정하는 blur 값이 클수록 그 효과는 더 커진다.

3. 기본도형

CSS 요소만을 사용해 기본도형을 구현할 수 있다. (참고자료2)

See the Pen CSS-basic shape by redcontroller (@redcontroller) on CodePen.

4. 아이콘

CSS 요소만을 사용해 GUI 아이콘을 구현할 수 있다. (참고자료4)

See the Pen Pure CCS GUI Icons by redcontroller (@redcontroller) on CodePen.

5. 말풍선

css 요소만을 사용해 말풍선을 구현할 수 있다. (참고자료5)

See the Pen Pure CSS Speech Bubbles by redcontroller (@redcontroller) on CodePen.

 

 

 

 

 

 

 

참고자료1: https://nuli.navercorp.com/community/article/1132695

참고자료2: https://css-tricks.com/the-shapes-of-css/

참고자료3: https://bingbingba.tistory.com/entry/border-radius-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0css%EB%A1%9C-%EC%9B%90%EA%B8%B0%EB%91%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0

참고자료4: https://nicolasgallagher.com/pure-css-gui-icons/

참고자료5: https://nicolasgallagher.com/pure-css-speech-bubbles/demo/