인터페이스 개선 스킬은(는) 무엇을 하나요?
이 스킬은 작은 디자인 엔지니어링 디테일을 적용하여 더 정교한 인터페이스를 만드는 데 사용합니다.
출처: 커뮤니티 PR #1659 (linus707 님 기여)에서 발췌.
사용 시기
- 사용자가 UI가 어색하거나, 평범하거나, 비좁거나, 불안정하거나 미완성 같다고 말할 때.
- 컨트롤, 카드, 리스트, 대시보드, 네비게이션, 폼, 툴바를 개발 중일 때.
- 컴포넌트에 호버, 활성, 포커스, 진입, 종료, 로딩, 빈 상태가 필요할 때.
- 프론트엔드 리뷰에서 구체적인 before/after 권장 사항이 필요할 때.
핵심 원칙
동심원 반경
서로 가까운 중첩된 둥근 표면의 경우:
외부 반경 = 내부 반경 + 패딩
패딩이 큰 경우, 수식을 강제로 맞추기보다 레이어를 별도의 표면으로 취급하세요. 중요한 것은 수식이 아닌 시각적 일관성입니다.
광학적 정렬
기하학적 중앙 정렬이 항상 시각적 중앙 정렬과 일치하지 않습니다. 아이콘 버튼, 재생 삼각형, 화살표, 별, 비대칭 아이콘은 종종 약간의 오프셋이 필요합니다. 가능하면 SVG 자체를 수정하고, 그렇지 않으면 픽셀 단위의 마진이나 패딩 변경으로 조정하세요.
그림자와 테두리
구분과 포커스 링에는 테두리를 사용하세요. 카드, 버튼, 드롭다운, 팝오버에 깊이감이 필요할 때는 계층화된 그림자를 사용하세요. 그림자는 투명하고 충분히 미묘해서 다양한 배경에서 잘 동작해야 합니다.
텍스트 줄바꿈
- 제목과 짧은 제목에는
text-wrap: balance를 사용하세요. - 짧거나 중간 길이의 본문 텍스트, 캡션, 설명, 목록 항목에는
text-wrap: pretty를 사용하세요. - 긴 산문, 코드, 사전 서식 콘텐츠에는 둘 다 피하세요.
- 카운터, 타이머, 가격, 테이블 및 기타 업데이트되는 숫자에는
font-variant-numeric: tabular-nums를 사용하세요.
폰트 스무딩
macOS에서는 프로젝트에서 이미 설정하지 않은 경우 루트 레이아웃에 안티앨리어싱 폰트 스무딩을 적용하세요:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
이미지 아웃라인
이미지의 가장자리가 표면과 섞여 보이지 않도록 미묘한 내부 아웃라인이 필요한 경우가 많습니다.
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
중립적인 검정색 또는 흰색 알파 아웃라인을 사용하세요. 브랜드 팔레트로 이미지 아웃라인에 색조를 입히지 마세요.
모션
상호작용 상태 변경에는 CSS 전환을 사용하세요. 사용자가 동작 중에 의도를 바꾸더라도 다시 타겟팅할 수 있기 때문입니다. 단계별 일회성 진입이나 로딩 시퀀스에는 키프레임을 예약하세요.
좋은 모션 기본값:
- 진입: 불투명도, 작은
translateY, 선택적으로 블러를 결합하세요. - 종료: 진입보다 짧고 조용하게, 보통 150ms.
- 누름: 촉각 버튼에는
scale(0.96)을 사용하고, 움직임이 방해가 될 때 비활성화할 수 있는 방법을 제공하세요. - 아이콘 교체: 즉시 표시 여부를 전환하는 대신 불투명도, 스케일, 블러로 크로스페이드하세요.
전환 범위
transition: all은 절대 사용하지 마세요. 변경되는 속성을 명시하세요:
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
will-change는 transform, opacity, filter 같은 컴포지터 친화적인 속성의 첫 프레임 버벅임에만 사용하세요. will-change: all은 절대 사용하지 마세요.
터치 영역
상호작용 컨트롤은 최소 40x40px, 이상적으로는 레이아웃이 허용하는 경우 44x44px의 터치 영역을 가져야 합니다. 가시 아이콘이 더 작을 때는 의사 요소로 확장하되, 확장된 터치 영역이 겹치지 않도록 하세요.
리뷰 출력
UI 개선 패스를 검토할 때는 before/after 행으로 구체적인 변경 사항을 보고하세요:
| 원칙 | Before | After |
|---|---|---|
| 동심원 반경 | 부모와 자식에 동일한 반경 | 부모 반경이 패딩을 고려함 |
| 표 형식 숫자 | 카운터가 숫자가 바뀔 때 흔들림 | 카운터가 tabular-nums 사용 |
| 전환 범위 | transition: all | 명시적 전환 속성 |
스니펫만으로는 명확하지 않은 경우 파일 경로와 속성을 포함하세요. 확인했지만 변경하지 않은 원칙은 생략하세요.
체크리스트
- 중첩된 둥근 요소가 시각적으로 일관됩니까.
- 아이콘이 시각적으로 중앙에 정렬되었습니까.
- 버튼, 카드, 팝오버가 올바른 이유로 테두리나 그림자를 사용합니까.
- 제목과 짧은 텍스트가 어색하게 줄바꿈되지 않습니까.
- 동적 숫자가 표 형식 숫자를 사용합니까.
- 필요한 곳에 이미지가 중립적인 아웃라인을 가지고 있습니까.
- 진입 및 종료 애니메이션이 분할되고, 미묘하며, 적절히 중단 가능합니까.
- 버튼에 과장된 모션 없이 촉각적 활성 상태가 있습니까.
transition: all과will-change: all이 없습니까.- 작은 컨트롤에도 사용 가능한 터치 영역이 있습니까.