Frog 디자인 시스템은 “코드가 아니라 언어로 스타일을 말하는 것”을 목표로 설계되었습니다. 개발자가 UI를 구현할 때, 약어나 암호 같은 토큰 대신 자연스러운 문장으로 그림 그리듯 스타일을 적용할 수 있도록 구현되었습니다.
이 시스템에서는 클래스 네이밍을 컴포넌트의 시각적 특성을 그대로 묘사하는 방식으로 구성합니다. 예를 들어 “둥근 모서리에 왼쪽 아이콘이 포함된 작은 주요 색상 버튼”이라는 문장을 그대로 쪼개서 button, primary, round, icon, left, small 같은 클래스로 표현하도록 설계했습니다. 이렇게 하면 개발자는 별도의 약어 규칙을 외우지 않고도, 머릿속에 떠올린 UI 이미지를 자연어에 가깝게 코드에 옮길 수 있습니다.
Semantic CSS 방식은 “무엇을 보이게 할 것인가”에 집중하게 만들어, 구현 과정이 마치 스케치를 하듯 직관적입니다. 버튼을 만들 때도 색, 크기, 형태, 아이콘 위치 등 시각적 요소를 단어 단위로 쌓아 올리며 조합하므로, 디자인 의도와 코드가 1:1로 대응됩니다. 그 결과 디자이너와 개발자 모두가 같은 언어로 컴포넌트를 이야기할 수 있고, 새로운 팀원이 들어와도 클래스 이름만 보고 구성과 역할을 빠르게 이해할 수 있게 됩니다.
이 접근법은 복잡한 유틸리티 약어나 프레임워크 전용 축약어를 외울 필요를 줄여 학습 비용을 줄여 줍니다. 동시에 button, primary, round처럼 의미가 분명한 단어들을 기준으로 공통 어휘를 정해 두기 때문에, 프로젝트 전반에서 스타일 사용이 자연스럽게 일관성을 갖게 됩니다. 이런 일관성은 곧 유지보수성과 확장성으로 이어지며, 시스템이 커질수록 semantic CSS의 장점이 더 뚜렷해집니다.