클러스터 C4: CSS 및 디자인
CSS 보더 라디우스와 도형 시각 가이드
모서리와 도형 언어는 위계, 클릭 가능성, 브랜드 톤에 직접 영향을 줍니다. 즉흥적인 값보다 시스템이 더 오래 갑니다.
라디우스는 토큰으로 고정하세요
카드, 입력창, 버튼, 다이얼로그가 제각각 다른 라디우스를 쓰면 화면이 조립식처럼 보입니다.
반경 스케일을 먼저 정하고 컴포넌트 역할별로 매핑하면 리뷰 기준도 훨씬 명확해집니다.
도형은 의미 있는 신호에만 사용
- 삼각형, 노치, clip-path 는 콜아웃, 포인터, 온보딩 강조에 적합합니다.
- 복잡한 clip-path 는 제한된 영역에만 쓰고 직사각형 fallback 을 준비합니다.
- 배경 패턴, 모서리 변화, 형태 언어를 한 시스템에서 관리합니다.
실무 입력/출력 예시
입력
컴포넌트: 프로모 카드 요구사항: 16px 부드러운 모서리 + 우상단 노치
출력
border-radius: 16px clip-path: polygon(...) 저사양 환경에서는 라디우스만 유지