CSS 보더·라디우스 생성기: 테두리, 모서리, outline을 일관되게 만드는 방법
이 문서는 UI에서 가장 많이 만지는 스타일인 border, border-radius, outline을 “일관된 규칙”으로 만들기 위한 가이드입니다. 상단 생성기에서는 굵기, 스타일, 색상, 개별 코너 라디우스, 아웃라인(포커스 링)을 조절하고, 결과 CSS를 바로 복사해 사용할 수 있습니다. 작은 요소처럼 보이지만, 보더와 라디우스는 전체 UI 톤을 결정하는 핵심이기 때문에 ‘규칙’이 있으면 유지보수와 확장성이 크게 좋아집니다.
border와 radius가 중요한 이유
보더는 컴포넌트의 “경계”를 정의합니다. 같은 배경 위에서도 카드, 입력창, 버튼이 서로 다른 레이어로 인식되는 이유는 대부분 border + shadow + 배경 조합 때문입니다. 라디우스는 경계의 성격을 바꿉니다. 작은 라디우스는 단정하고 타이트한 인상을 주고, 큰 라디우스는 부드럽고 친근한 인상을 줍니다.
- 일관성: 버튼은 둥글고 카드가 각지면 UI가 들쭉날쭉해 보일 수 있습니다.
- 구분: 보더가 약하면 섹션이 뭉개져 가독성이 떨어집니다.
- 접근성: 포커스가 보이지 않으면 키보드 사용자에게는 “작동하지 않는 UI”가 됩니다.
- 브랜딩: 라디우스 스케일과 보더 톤은 브랜드의 ‘촉감’을 만들 수 있습니다.
추천: UI 전체에 라디우스/보더 규칙이 없다면 “자유롭게 만들기”보다 먼저 스케일(예: sm/md/lg/xl)을 정의하고, 필요한 경우에만 예외를 허용하는 편이 유지보수에 유리합니다.
생성기 사용 방법(권장 흐름)
- 대상 선택: 버튼/카드/입력창 중 무엇에 적용할지 먼저 정합니다.
- border 두께: 1px부터 시작해, 배경 대비에 따라 2px로 강화합니다.
- radius: 프로젝트 토큰(`--radius-*`)과 맞춰 적용합니다.
- 개별 코너: 필요할 때만 사용합니다(예: 상단만 둥근 시트, 툴팁).
- outline: focus-visible 기준으로 보이도록 설정해 접근성을 확보합니다.
- 복사/저장: CSS를 복사하고, 자주 쓰면 프리셋으로 저장합니다.
보더가 어색하게 느껴질 때는 색상을 먼저 의심해 보는 것이 좋습니다. 너무 밝거나 어두운 테두리는 “경계”가 아니라 “자국”처럼 보일 수 있습니다. 이럴 때는 섀도우와 함께 조절하면 자연스럽습니다. 섀도우 프리셋과 함께 사용해 보세요.
라디우스 시스템 만들기(토큰/스케일)
라디우스를 컴포넌트마다 즉흥적으로 정하면, 페이지가 늘어날수록 조합이 깨지기 쉽습니다. 그래서 실무에서는 보통 몇 개의 값만 정의해 반복 사용합니다. 이 프로젝트도 `common.css`의 토큰으로 `--radius-sm/md/lg/xl/full`을 제공합니다.
- sm: 입력 필드, 작은 배지, 얇은 카드
- md: 일반 버튼, 기본 카드
- lg: 큰 카드, 섹션 블록
- xl: 모달/드로어, 강조 섹션
- full: 칩, 토글, 라운드 버튼
“토큰 기반”으로 만들면 SEO 측면에서도 이점이 있습니다. 코드를 공개하는 경우, 문서/예제 페이지에서 동일한 값을 반복 사용하면 검색 로봇이 페이지의 구조를 더 안정적으로 인식하고, 유지보수도 단순해집니다.
outline과 포커스 링 접근성
outline은 키보드 사용자에게 현재 포커스가 어디인지 알려 주는 핵심 신호입니다. “디자인 때문에 outline을 없애는” 관행은 접근성을 크게 떨어뜨립니다. 대신 outline을 브랜드 색과 적절한 두께로 다듬어 “보기 좋은 포커스 링”으로 만드는 것이 정석입니다.
- focus-visible 사용: 마우스 클릭과 키보드 탭을 구분해 불필요한 링을 줄입니다.
- 대비 확보: 배경과 링 색 대비가 충분해야 합니다.
- outline-offset: 테두리 밖으로 살짝 띄우면 더 선명하고 고급스럽습니다.
- 일관성: 버튼/링크/입력창이 동일한 포커스 규칙을 가지도록 합니다.
추천: 보더/라디우스와 함께 대비 체크를 사용해 포커스 링이 충분히 보이는지 확인하세요. 특히 라이트 테마에서는 테두리/링이 흐려지기 쉬워 주의가 필요합니다.
실전 패턴: 컴포넌트별 추천값
1) 버튼(Button)
- border: 1px, subtle한 톤
- radius: md 또는 full(칩/필) 타입
- outline: 2px + offset 2px(키보드 탐색)
2) 카드(Card)
- border: 1px + hover에서 강하게
- radius: lg~xl
- 포인트: 섀도우와 같이 조절하면 “레이어”가 자연스럽습니다.
3) 입력창(Input)
- border: 기본은 subtle, focus에서는 accent
- radius: sm~md
- 포인트: placeholder 대비/포커스 링 가시성을 같이 확인합니다.
위 추천값은 시작점일 뿐이며, 제품의 스타일 가이드에 따라 달라질 수 있습니다. 핵심은 “규칙을 만들고 반복 적용”하는 것입니다. 규칙이 생기면 새로운 컴포넌트를 만들 때도 빠르고, 디자인 QA도 쉬워집니다.
자주 묻는 질문(FAQ)
- Q. outline을 제거하면 안 되나요? A. 권장하지 않습니다. 대신 focus-visible로 제어하고, 색/두께/offset을 디자인에 맞게 다듬는 방식이 접근성과 디자인을 동시에 만족시킵니다.
- Q. radius를 크게 주면 더 예쁜가요? A. 상황에 따라 다릅니다. 전체 시스템에서 md/lg/xl을 구분해 “의미 있는 크기 차이”로 사용하면 과하지 않게 고급스럽게 정리됩니다.
- Q. border 색을 어떻게 고르나요? A. 배경 대비에 따라 subtle/strong 두 단계를 두고 hover/focus에서만 강하게 만드는 방식이 무난합니다.