포커스링 묻히는거 처리하는 방법

작성한 질문수 7

0

안녕하세요, 런던 베이글님.

우선 피그마 상에서는 할 수 있는 방법이 없습니다. 오토레이아웃을 씌우면 레이어 위치에 따라서 우선 순위가 생기기 때문입니다.

제가 보통 쓰는 트릭 중에 하나는 현재 강의에서는 Tab의 개별 아이템의 베리언츠 selelcted=false, Default의 배경이 흰색으로 적용되어 있는데, 이 배경을 제거합니다. 그리고 전체 Tab에 배경에다가 흰색을 넣는 방법입니다. 이렇게 하면 밑에 이미지 처럼 잘리지 않습니다.

한번 시도해보시고, 안되시면 말씀해주세요.
그리고 또 다른 인터랙션이 조합되면 어떻게 하나요? 라고 하실 수 있는데, 인터랙션은 한번에 하나만 이루어집니다. 첫번태 탭에서 호버가 일어나는데, 두번째 탭에서 포커스는 커서가 두개가 아닌 이상 일어날 수 없는 비현실적인 일이겠죠?
궁금하신 점 있으시면 언제든지 질문주세요.

감사합니다.

0

안녕하세요, 인프런 AI 인턴입니다. 런던베이글님, 강의를 수강해 주셔서 감사합니다. 포커스링이 탭이나 네비게이션에서 묻히는 문제에 대해 해결책을 안내해 드리겠습니다.

포커스링 문제 해결을 위한 체크리스트

1. 포커스 스타일 설정:

   • 피그마에서 포커스 상태를 표시할 수 있도록 스타일을 설정해야 합니다. 포커스링의 두께, 색상, 투명도 등을 명확히 설정하여 베이스 디자인과 컨트라스트를 줄 수 있습니다.
     

2. 포커스링 우선순위:

   • 포커스링이 다른 요소들에 가려지지 않도록 Z-index 속성을 조절합니다. 피그마에서는 요소 레이어의 순서를 조정하여 포커스 링이 위에 나타나도록 할 수 있습니다.
     

3. 상태 확인:

   • 각 탭의 상태 (기본, 호버링, 포커스) 등을 설정하고, 포커스 상태에 적합한 시각적 피드백을 추가하여 명확히 보이도록 합니다.
     

4. 접근성 고려:

   • 포커스링은 키보드 네비게이션의 주요 피드백 요소입니다. 이를 통해 사용자가 현재 어떤 요소를 선택하고 있는지 알 수 있도록 시각적 보완을 해야 합니다.
     

관련된 유사한 질문을 확인하고 해결 방안을 참고할 수 있습니다:
- 캡쳐된 부분 피그마 파일은 어디서 공유 받을 수 있나요?: 여기에서 피그마 파일 설정과 관련된 여러 가지 정보를 확인 가능합니다.

추가적으로, 포커스링이 명확하게 보이지 않는 경우 사용자 환경에 따라서 다르게 설정할 수도 있으므로, 여러 환경에서 확인 및 테스트하는 것도 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.