IT/DESIGN 썸네일형 리스트형 [UI][web] 웹 접근성 중 색상 사용 기준 배경 버튼 디자인을 하다가 생긴 의문점이었다. default와 hover 상태의 버튼을 만들고 보니, 아예 버튼이 활성화되지 않는 disabled 상태도 있어야 할 것 같았다. 찾아보니 버튼은 기본적으로 'normal(default), hover, active, disabled' 상황에 맞는 디자인이 필요하다고 한다. 그래서 옅은 회색으로 disabled 버튼을 만들었는데, 너무 안 보였다! 웹 디자인 강의에서 조금 들어 본 '웹 접근성' 기준에 어긋날 것 같았다. 그래서 웹 접근성에서 색상과 관련된 내용을 몇 가지 찾아봤다. 글 개요 웹 접근성의 의미와 포함된 내용을 간단히 알아보고, 색상에 관한 항목을 구체적으로 정리해봤다. 1. 웹 접근성이란 모든 사람이 받아들이고 이해하고 상호작용할 수 있도록 애.. 더보기 [Figma][Auto Layout] Navigation Bar Hover Effect (underbar ver.) 개요 Navigation Bar의 메뉴에 마우스를 호버했을 때, 해당 카테고리 텍스트 아래에 언더바 형태로 이펙트가 생성되는 기능을 피그마의 오토 레이아웃을 활용해 디자인했다. 결과물 호버한 메뉴는 색깔 변화 + Underbar 로 활성화된다. Text의 내용이 바뀌면 그 길이에 맞게 Underbar 길이가 자동으로 조절된다. 카테고리 메뉴는 Auto Layout으로 묶여 활용된다. Step 1. 원하는 형태의 메뉴 텍스트 & 언더바 제작 원하는 크기의 Text를 작성한 뒤, 피그마 우측 [ Design > Text ] 패널에서 Auto Width(↔)로 설정한다. 설정된 Text 아래에 원하는 형태의 언더바 도형(ex. Rectangle)을 그려 넣는다. 도형을 우클릭하고 [ Frame selectio.. 더보기 이전 1 다음
