커스텀 체크박스 & 통계 UI 구조 분석

기능은 유지하면서 디자인을 자유롭게 만드는 방법!

 

웹 UI를 구현할 때, 기능 요소(checkbox) 와

디자인 요소(div) 를 분리해 사용하는 패턴은

가장 많이 쓰이는 구조다.

특히 투표 UI나 통계 UI처럼 시각적으로

강조해야 하는 구조에서 매우 효과적이다.

 

이번 글에서는 커스텀 체크박스 구조와 stats UI 구조를 통해,
"왜 기능과 디자인을 분리하는지",

"어떻게 확장성과 유지보수성을 높이는지"를 정리해본다.

---

1. 커스텀 체크박스 구조

"기본 체크박스를 숨기고, 디자인은 div로 만든다."

 

① 숨겨진 체크박스(input)

<input class="checkbox-hidden" type="checkbox">

• 이 요소가 진짜 기능을 수행한다.
• 사용자 클릭 여부는 여전히 input.checked로 감지한다.
• 그러나 실제 화면에서는 보이지 않는다.

숨기는 방식은 CSS로 적용된다:

.SingleChoice_at-question-entry__5HWTb input[type=checkbox] {
    display: none;
}

클래스 이름이 "checkbox-hidden"이라서 숨는 게 아니라,

CSS에서 display:none 처리했기 때문에 숨는다.

 

② 디자인 요소(div)

<div class="SingleChoice_main-checkmark__s1yy7"></div>

• 사용자가 실제로 보는 부분
• 체크 상태는 CSS로 변경된다:

input:checked + .SingleChoice_main-checkmark__s1yy7 {
    /* 체크 상태 디자인 */
}

 

즉, input은 기능 / div는 디자인
이 둘을 분리하면 디자인 자유도 + 유지보수성이 동시에 높아진다.

 

③ 접근성 문제(중요)

숨긴 input에는 label이 없다.
즉, 스크린리더는 이 체크박스가 무엇을 의미하는지 절대 알 수 없다.

• aria-label 없음
• label for="" 연결 없음
• 클릭 타겟 확장 없음

✔ 반드시 보완해야 할 요소

<input type="checkbox" aria-label="작품 A 투표">

현재 구조는 디자인 측면에서는 완성도가 높지만,
접근성 측면에서는 보완이 필요한 형태다.

---

2. 통계 UI(stats) 구조

"stats는 여러 개별 stat-entry를 묶는 컨테이너다."

<div class="stats">
    <div class="peak ..."><img ...><span>1</span></div>
    <div class="prev ..."><img ...><span>1</span></div>
    <div class="weeks ..."><img ...><span>5</span></div>
</div>

 

① stats 컨테이너

• peak, prev, weeks 등 여러 통계 항목을 하나로 묶는 역할
• 배열처럼 반복되는 stat-entry를 관리한다
• 전체 레이아웃 구조를 잡는 핵심 박스

② 각 stat-entry

• peak: 최고 순위
• prev: 지난 주 순위
• weeks: 차트 유지 주수

각 항목이 독립적으로 존재하지만,
stats가 이들을 하나의 덩어리로 묶어 UI를 완성한다.

---

3. 간단 요약

"기능은 단순하게 두고, 시각 디자인과 확장성은 별도 구조로 고도화한다."

• 체크박스는 input이 기능을 처리하고
• 디자인은 div가 대체
• 통계는 개별 stat을 stats 컨테이너로 묶어 관리
  → 유지보수성, 확장성, 시각적 일관성이 매우 좋아짐

즉,

“기능은 심플하게, 디자인은 자유롭게, 데이터는 한 번에 관리하는 구조”
이게 UI 구조의 핵심이다.

---