데브허브 | DEVHUB | 13 바람직하지 않은 방법으로 아이콘 버튼 추가하기13 바람직하지 않은 방법으로 아이콘 버튼 추가하기
- 비효율적인 아이콘 버튼 생성 방식 시연: 개별적으로 버튼을 만드는 '바람직하지 않은' 방법을 소개하며, 다음 시간에 개선될 것임을 예고합니다. 👎
- 아이콘 및 버튼 크기 규격: 24x24 크기의 아이콘을 48x48 고정 크기의 버튼 박스 안에 배치하는 목표를 설명합니다. 📏
- 플러그인을 통한 아이콘 추가: 대시보드, 카페, 카테고리 등 필요한 아이콘을 플러그인을 사용하여 검색하고 추가하는 과정을 보여줍니다. 🔌
- 아이콘 추가 시 주의사항: 기존 선택된 아이콘이 있을 경우, 새로운 아이콘이 추가되는 대신 기존 아이콘이 교체될 수 있으므로 선택 해제가 중요함을 강조합니다. 👆
- 프레임(박스)으로 아이콘 감싸기: 아이콘을 감싸는 더 큰 프레임을 생성하여 버튼 형태로 만들고, 이 프레임의 크기를 조절합니다. 🖼️
- 레이아웃 설정의 중요성: 프레임을 단순히 크기 조절하면 아이콘이 찌그러질 수 있으므로, 자동 레이아웃(오른쪽 방향, 가운데 정렬)을 먼저 적용해야 함을 설명합니다. 📐
- 고정 크기 및 배경 설정: 자동 레이아웃 적용 후 '허그' 형태로 바뀐 프레임 크기를 48x48로 고정하고, 배경색을 흰색으로 설정하는 과정을 시연합니다. 🔢
- 개별 생성 방식의 한계점: 여러 개의 유사한 버튼을 개별적으로 만드는 것은 비효율적이며, 버튼 수가 늘어날수록 작업량이 기하급수적으로 증가하는 문제점을 지적합니다. 🚫
- 컴포넌트 활용을 통한 개선 예고: 다음 시간에는 이 비효율적인 방법을 컴포넌트와 인스턴스 스왑 기능을 활용하여 개선할 것임을 밝힙니다. ♻️