CSS로 커스터마이징 가능한 차트와 그래프 만들기 - 데이터 시각화에 CSS 활용

데이터 시각화는 정보를 쉽게 이해할 수 있도록 도와주는 중요한 도구입니다. CSS만으로도 간단한 차트와 그래프를 만들어 커스터마이징할 수 있습니다. JavaScript 라이브러리 없이 순수 CSS로 구현할 수 있는 기본적인 막대 그래프, 원형 그래프 등을 예시로 소개하겠습니다.

1. 막대 그래프(Bar Chart) 만들기

막대 그래프는 데이터를 시각화하는 가장 기본적인 방법 중 하나입니다. CSS의 flexbox와 background 속성을 활용하여 간단한 막대 그래프를 만들 수 있습니다.

1.1 HTML 구조:

<div class="bar-chart">
    <div class="bar" style="--value: 70%;" data-label="Item 1"></div>
    <div class="bar" style="--value: 50%;" data-label="Item 2"></div>
    <div class="bar" style="--value: 90%;" data-label="Item 3"></div>
    <div class="bar" style="--value: 30%;" data-label="Item 4"></div>
</div>

1.2 CSS 스타일링:

.bar-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
}

.bar {
    width: 50px;
    background-color: #3498db;
    border-radius: 4px;
    position: relative;
    height: var(--value);
    transition: height 0.3s ease;
}

.bar::after {
    content: attr(data-label);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 14px;
}

.bar:hover {
    background-color: #2980b9;
}

설명:

• --value: CSS 변수를 사용하여 각 막대의 높이를 설정합니다.
• bar-chart: 막대 그래프 컨테이너를 정의하고, 막대들을 수평으로 나란히 배치합니다.
• bar: 각 막대의 높이를 설정하고, 마우스 오버 시 색상이 변경되도록 합니다.
• ::after: 각 막대 아래에 레이블을 표시합니다.

2. 원형 그래프(Pie Chart) 만들기

원형 그래프는 데이터의 비율을 시각적으로 표현하는 데 적합한 방법입니다. CSS의 conic-gradient를 사용하여 원형 그래프를 만들 수 있습니다.

2.1 HTML 구조:

<div class="pie-chart">
    <div class="slice" style="--percentage: 40%; --color: #3498db;"></div>
    <div class="slice" style="--percentage: 30%; --color: #2ecc71;"></div>
    <div class="slice" style="--percentage: 20%; --color: #e74c3c;"></div>
    <div class="slice" style="--percentage: 10%; --color: #f1c40f;"></div>
</div>

2.2 CSS 스타일링:

.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--color-1) var(--percentage-1),
        var(--color-2) var(--percentage-2),
        var(--color-3) var(--percentage-3),
        var(--color-4) var(--percentage-4)
    );
    position: relative;
}

.slice {
    --start: 0;
    --end: calc(var(--start) + var(--percentage));
    background: conic-gradient(
        from calc(var(--start) * 1deg),
        var(--color) calc(var(--start) * 1deg),
        var(--color) calc(var(--end) * 1deg),
        transparent calc(var(--end) * 1deg)
    );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(50%);
    transform: rotate(calc(var(--start) * 1deg));
    z-index: 2;
    border-radius: 50%;
}

.slice:nth-child(2) {
    --start: 40;
}
.slice:nth-child(3) {
    --start: 70;
}
.slice:nth-child(4) {
    --start: 90;
}

설명:

• conic-gradient: 각 색상 부분이 원을 이루는 각도에 맞춰 설정됩니다.
• slice: 각각의 슬라이스가 conic-gradient로 설정되며, 시작과 끝 각도를 계산하여 적절하게 배치합니다.

3. 도넛 차트(Donut Chart) 만들기

도넛 차트는 원형 차트의 변형으로, 중앙에 빈 공간이 있는 그래프입니다. 이 역시 CSS의 conic-gradient를 활용하여 만들 수 있습니다.

3.1 HTML 구조:

<div class="donut-chart">
    <div class="circle"></div>
    <div class="label">70%</div>
</div>

3.2 CSS 스타일링:

.donut-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#3498db 0% 70%, #ecf0f1 70% 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.label {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

설명:

• conic-gradient: 차트를 구성하는 색상 비율에 따라 중앙에 빈 공간을 둔 원형 그래프를 만듭니다.
• circle: 중앙의 빈 공간을 만듭니다.
• label: 중앙에 비율을 표시하는 레이블을 추가합니다.

4. 라인 차트(Line Chart) 만들기

라인 차트는 데이터의 변화를 선으로 연결하여 시각화하는 방법입니다. CSS linear-gradient와 transform 속성을 활용해 간단한 라인 차트를 구현할 수 있습니다.

4.1 HTML 구조:

<div class="line-chart">
    <div class="line"></div>
</div>

4.2 CSS 스타일링:

.line-chart {
    width: 100%;
    height: 200px;
    position: relative;
    background-color: #f4f4f4;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

.line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #3498db 25%, #2ecc71 50%, #e74c3c 75%);
    transform-origin: left;
    transform: rotate(45deg); /* 선의 각도 */
}

설명:

• linear-gradient: 선의 색상이 위치에 따라 변하는 효과를 줍니다.
• transform: 선을 기울여 데이터의 변화를 시각적으로 나타냅니다.

5. CSS를 사용한 데이터 시각화의 한계

CSS만으로 차트와 그래프를 만들 수 있지만, 복잡한 데이터 시각화나 동적 업데이트를 처리하는 데는 한계가 있습니다. 이러한 한계는 JavaScript와 함께 사용하는 데이터 시각화 라이브러리(예: D3.js, Chart.js 등)를 활용해 보완할 수 있습니다.

결론

CSS만으로도 간단한 데이터 시각화를 구현할 수 있으며, 막대 그래프, 원형 그래프, 도넛 차트, 라인 차트 등 다양한 형태의 그래프를 만들 수 있습니다. 이러한 기법을 통해 사용자 정의가 가능한 시각적 요소를 쉽게 만들 수 있으며, 필요에 따라 JavaScript와 결합해 동적 데이터를 처리할 수도 있습니다.

이 글에서 소개한 방법을 바탕으로 데이터를 시각적으로 표현하는 데 CSS를 활용해보세요. 이를 통해 사용자 경험을 향상시키고, 웹 페이지에 더욱 직관적이고 매력적인 데이터를 제공할 수 있을 것입니다.