인프런 커뮤니티 질문&답변

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

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

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

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

감사합니다.

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

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

1. 포커스 스타일 설정:

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

2. 포커스링 우선순위:

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

3. 상태 확인:

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

4. 접근성 고려:

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

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

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

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