Campfire는 최신 웹 플랫폼의 CSS 기능을 적극 활용하여 효율적이고 강력한 UI를 구축한 모범 사례입니다. 컴파일러나 전처리기 없이 바닐라 CSS로 `CSS Nesting`, `:has()`, `View Transitions` 등 현대적 기능을 통합했습니다. 본 요약은 Campfire가 이러한 혁신적인 CSS 기능들을 어떻게 적용했는지 설명합니다.
Campfire UI는 최신 CSS 기능을 기반으로 합니다.
첫째, 색상 관리에 oklch() 함수를 도입하여 개발자 편의성과 넓은 색 공간 접근성을 확보했습니다. 명도, 채도, 색조를 분리하여 직관적인 색상 정의 및 조정을 가능하게 하며, oklch(var(--lch-gray)) 형태 변수를 통해 일관된 색상 팔레트 유지와 투명도 변형 추가를 용이하게 합니다.
둘째, 커스텀 속성(CSS 변수)은 DRY 원칙과 유연한 스타일 관리를 위한 ‘미니 API’ 역할을 합니다. Campfire는 color: var(--btn-color, var(--color-text));처럼 인라인으로 기본값과 폴백(fallback) 값을 지정하여 코드 간결성을 높입니다. --btn-size 같은 전역 변수로 일관된 크기를 부여하고, 커스텀 속성 값만 변경하여 요소 변형을 효율적으로 생성합니다.
셋째, CSS :has() 선택자의 활용은 Campfire 개발에 혁신을 가져왔습니다. :has()는 요소 내 자식 요소 유무를 질의하여, 기존 JS/서버 사이드 로직을 순수 CSS로 대체합니다. 예시로 .btn 클래스는 내부에 img나 스크린 리더용 텍스트가 있을 때 자동으로 스타일을 조정합니다. 서버 사이드 로직 대체 사례로는, 사이드바 닫힘/읽지 않은 메시지 유무에 따른 메뉴 버튼 알림 점 표시, Turbo Frame 내 토글 버튼 상태에 따른 채팅방 목록 항목 흐리게 처리 기능이 있습니다. 또한, :has()로 아바타 개수를 ‘카운트’하여 레이아웃을 동적으로 조정하며 CSS 기능을 로직 처리 영역으로 확장했습니다.
넷째, 반응형 디자인에서 Campfire는 독특한 접근 방식을 취합니다. 뷰포트 기반 @media 쿼리 대신 max-width: 100ch (문자 단위) 단일 기준점을 사용하여 텍스트 길이에 따라 레이아웃을 유연하게 조정합니다. any-hover와 pointer 미디어 쿼리를 통해 입력 장치 유형을 감지하고 UI 동작을 최적화합니다. 이는 메시지 줄의 ••• 버튼이 마우스 사용 시 호버 시에만 나타나고, 터치 장치에서는 항상 표시되도록 하여 각 장치에 맞는 최적의 사용자 경험을 제공하며, iPad Pro처럼 입력 방식이 동적으로 변하는 장치에서 특히 효과적입니다.
결론적으로, Campfire는 `oklch()`, 커스텀 속성, `:has()`와 같은 최신 CSS 기능을 능숙하게 활용하여, 웹 플랫폼의 발전이 JS나 서버 사이드 코드 의존도를 줄이고 순수 CSS만으로 복잡하고 동적인 UI를 구현할 수 있음을 입증했습니다. 이 사례는 CSS가 강력한 로직 처리 도구로 진화하고 있음을 보여주며, Campfire는 웹 개발의 미래를 선도할 것입니다.