focus 스타일 다듬어보기
#Design, #Polishing· 2024. 11. 15
focus 스타일 다듬어보기
#Design, #Polishing· 2024. 11. 15
*디자이너 입장에서 작성하는거라 틀린 내용이 있을 수 있습니다. 감안하고 봐주세요.
*디자이너 입장에서 작성하는거라 틀린 내용이 있을 수 있습니다. 감안하고 봐주세요.
Framer는 시맨틱한 HTML 태그, <image/> 대체 텍스트, Tab 순서, Aria label 같은 기본적인 접근성을 챙길 수 있는 기능을 제공합니다. 다만 아주 기초적인 형태로만 제공하고 살짝 아쉬운 부분이 있어서, 디자이너가 제일 쉽게 접근할 수 있는 focus 스타일에 대해서 다뤄보려고 합니다. 기본적인 CSS 지식만 있어도 쉽게 적용할 수 있습니다.
Framer는 시맨틱한 HTML 태그, <image/> 대체 텍스트, Tab 순서, Aria label 같은 기본적인 접근성을 챙길 수 있는 기능을 제공합니다. 다만 아주 기초적인 형태로만 제공하고 살짝 아쉬운 부분이 있어서, 디자이너가 제일 쉽게 접근할 수 있는 focus 스타일에 대해서 다뤄보려고 합니다. 기본적인 CSS 지식만 있어도 쉽게 적용할 수 있습니다.
Framer의 focus 스타일은 웹 기본 스타일이 사용됩니다. 나쁘지 않지만 개인적으로 약간 투박한 느낌이 들어서 마음에 들지 않았습니다. 좀 더 UI 톤에 맞는 스타일로 구성해보고 싶었습니다.
Framer의 focus 스타일은 웹 기본 스타일이 사용됩니다. 나쁘지 않지만 개인적으로 약간 투박한 느낌이 들어서 마음에 들지 않았습니다. 좀 더 UI 톤에 맞는 스타일로 구성해보고 싶었습니다.
Button XM
Button PQ
Button XJ
Tab 또는 Shift + Tab을 눌러서 focus를 확인하세요.
Tab 또는 Shift + Tab을 눌러서 focus를 확인하세요.
우선 어떤 형태로 스타일이 적용되어있는지 이해할 필요가 있습니다. 사용하는 브라우저의 DevTools를 열어서 <a/> <button/> 같은 상호작용 가능한 요소를 선택한 뒤 스타일을 확인합니다.
우선 어떤 형태로 스타일이 적용되어있는지 이해할 필요가 있습니다. 사용하는 브라우저의 DevTools를 열어서 <a/> <button/> 같은 상호작용 가능한 요소를 선택한 뒤 스타일을 확인합니다.
&:focus-visible {
outline: -webkit-focus-ring-color auto 1px; /* 포커스시 외각선 색상과 굵기입니다. */
outline-offset: 1px; /* 요소의 바깥 외각으로 1px 간격을 갖게 됩니다. */
} outline이 사용되었다고 해서 반드시 동일하게 스타일링할 필요는 없습니다. 개인적으로 요소 외각선을 만들때 섬세한 표현을 위해서 box-shadow 사용을 선호합니다.
outline이 사용되었다고 해서 반드시 동일하게 스타일링할 필요는 없습니다. 개인적으로 요소 외각선을 만들때 섬세한 표현을 위해서 box-shadow 사용을 선호합니다.
보통 outline border box-shadow 가 자주 비교되는데 디자이너로서 보면 차이가 있습니다. outline 요소를 강조하기 위한 속성입니다. focus 같은 표현을 하는데 적합하고, outline-width 가 실제 레이아웃에 영향을 주지 않습니다. 반면 border 는 상하좌우, 점선 같은 스타일링이 가능하지만 border-width가 레이아웃에 영향을 주기 때문에 외각선으로 사용하기에는 적합하지 않습니다.
보통 outline border box-shadow 가 자주 비교되는데 디자이너로서 보면 차이가 있습니다. outline 요소를 강조하기 위한 속성입니다. focus 같은 표현을 하는데 적합하고, outline-width 가 실제 레이아웃에 영향을 주지 않습니다. 반면 border 는 상하좌우, 점선 같은 스타일링이 가능하지만 border-width가 레이아웃에 영향을 주기 때문에 외각선으로 사용하기에는 적합하지 않습니다.
그런면에서 box-shadow는 사이즈와 x, y offset이 레이아웃에 영향을 주지 않고, 표현에 중첩이 가능해서 조금 더 섬세하게 UI를 다듬어볼 수 있습니다.
그런면에서 box-shadow는 사이즈와 x, y offset이 레이아웃에 영향을 주지 않고, 표현에 중첩이 가능해서 조금 더 섬세하게 UI를 다듬어볼 수 있습니다.
&:focus-visible {
outline: none;
border-radius: 3px;
box-shadow: 0 0 0 2px rgba(255, 255, 255), 0 0 0 4px rgba(26, 26, 26), 0 0 0 6px rgba(26, 26, 26, .06);
}outline-offset 처럼 요소와 focus 외각선에 약간의 간격을 주기 위해서 box-shadow로 흰색 영역을 잡아준 뒤 외각선 표현을 위한 스타일을 그려줍니다.
outline-offset 처럼 요소와 focus 외각선에 약간의 간격을 주기 위해서 box-shadow로 흰색 영역을 잡아준 뒤 외각선 표현을 위한 스타일을 그려줍니다.
Tab 또는 Shift + Tab을 눌러서 focus를 확인하세요.
Tab 또는 Shift + Tab을 눌러서 focus를 확인하세요.
Framer는 상호작용 가능한 요소를 알아서 추적해 적용해주지만, 튜닝을 하거나 외부 컴포넌트를 Remix해서 사용하는 경우 제대로 focus가 되지 않는 경우가 있습니다. 이런 경우 focus-within 같은 속성을 사용해서 자식 요소의 focus 상태를 추적하거나, Component className을 직접 지정해서 focus 스타일을 강제로 주입할 수 있습니다.
Framer는 상호작용 가능한 요소를 알아서 추적해 적용해주지만, 튜닝을 하거나 외부 컴포넌트를 Remix해서 사용하는 경우 제대로 focus가 되지 않는 경우가 있습니다. 이런 경우 focus-within 같은 속성을 사용해서 자식 요소의 focus 상태를 추적하거나, Component className을 직접 지정해서 focus 스타일을 강제로 주입할 수 있습니다.
/* 부모 요소에 focus 스타일이 표현됩니다. */
&:focus-within {
/* focusStyle */
}Framer에서 직접 className을 직접 지정할 수 있는 방법은 아래와 같습니다.
Framer에서 직접 className을 직접 지정할 수 있는 방법은 아래와 같습니다.
// className이 있는 경우 앞에 띄어쓰기를 해야 선택자를 정확하게 줄 수 있음
import type { ComponentType } from "react";
export function withClass(Component): ComponentType {
return (props) => {
props.className += " addClassName";
return <Component {...props} />;
};
}