피그마2 Figma로 GNB 만들기(인터랙션, 호버 효과, 클릭 효과) 이번주 내내 나를 괴롭힌 피그마로 GNB 만들기. 클릭(or 터치)했을 때 선택된 아이콘의 컬러를 변경하면서 페이지 이동이 되게 만들고 싶었는데, 딱 원하는 방법을 알려준 곳이 없었다. 이것저것 시도해보다가 내가 찾은 방법을 공유해보고자 한다. Tab하면 컬러가 바뀌는 GNB 만들기 1. GNB에 사용될 아이콘을 모두 가져와 componet로 만든다. 이렇게하면 아이콘이 들어가는 다른 컴포넌트에서 쉽게 아이콘 교체를 할 수 있어서 편하다. 2. text와 icon을 사용하여 메뉴에 들어갈 메뉴 아이콘 컴포넌트를 만든다. text와 icon은 오토레이아웃(shift+A)을 사용해 프레임으로 만들어줬다. 3. 메뉴 아이콘 컴포넌트를 메뉴의 갯수만큼 복사한 후, 오토레이아웃으로 정렬을 맞춰 GNB를 만든다. .. 2023. 12. 17. [코드스테이츠 PMB 17기_W4D4] 한섬 EQL, 'EQUAL'페이지 개선하기(스토리보드) EQL은 한섬이 만든 온라인 패션 플랫폼으로, 구글 플레이스토어에서는 다음과 같이 앱을 소개하고 있다. "EQL은 EQUAL의 철자를 축약한 신조어로, 어떠한 편견이나 선입견 없이 자유롭게 표현할 수 있는 패션을 지지하는 편집숍입니다" 이런 EQL의 소개만큼 EQL에서는 유니크하면서도 트렌디한 브랜드와 상품이 다수 입점되어있다. 그래서 개인적으로 EQL에 접속해 자주 제품들을 구경하곤 했는데, 자꾸만 앱을 이탈하는 나를 발견하게 되었다. 앱 스토어 리뷰에서도 상품은 예쁜데 앱 사용이 불편하다는 부정적인 리뷰를 많이 찾아볼 수 있었다. 그래서 오늘은 EQL의 한 가지 서비스를 골라 UX을 개선해보고자 한다. ᅵEQUAL? 그래서 EQUAL이 뭐하는 건데? EQL앱 GNB의 네번째에는 'EQUAL'이라는 아.. 2023. 3. 3. 이전 1 다음
