Button, FAB, Snackbar, Card 만들기 실습

[사전캠프_9/5]

• 퀘스트_컴포넌트 만들기_Action: 버튼(Button), 플로팅 액션 버튼(FAB)
• 퀘스트_컴포넌트 만들기_Communication: 스낵바(Snackbar), 토스트 메시지
• 퀘스트_컴포넌트 만들기_Containment: 카드(Card), 다이얼로그(Dialog)

​

​

컴포넌트 만들기_Action: 버튼(Button), 플로팅 액션 버튼(FAB)

출처) Material Design

https://m3.material.io/components/buttons/overview

Buttons – Material Design 3

https://m3.material.io/components/extended-fab/overview

Extended FAB – Material Design 3

 

• Action : 버튼(Butto) 만들기 실습
  • 오토 레이아웃을 켜야 리사이징 지정이 가능하다.
    • '별모양 리딩 엘리먼트 + 라벨'을 '컨테이너'의 자식 개체로 넣은 후에도 오토 레이아웃 적용해야 함.

​

• • 버튼의 크기를 늘리거나 줄일 수 있기 때문에 컨테이너(부모 개체) 크기에 따라 리딩 엘리먼트와 라벨(자식 개체)도 따라 움직여야 한다. 그러므로 컨테이너는 Fixed. 리딩 엘리먼트와 라벨 프레임은 Fill로 리사이징을 설정하였다.
    • 버튼 사이즈를 변경해도 라벨이 컨테이너 가운데에 위치하는 것을 확인할 수 있다.

​

• • Auto layout의 Cilp content을 체크하면 프레임 바깥으로 넘어서는 오브젝트를 보이지 않게 해준다.

 

 

• 플로팅 액선 버튼(FAB)
  • 사용자가 주요 작업을 수행하는데 도움을 주는 버튼
  • 컨텐츠가 스크롤 될 때에도 FAB는 화면에 계속 표시된다.
  • 모든 컨텐츠보다 앞에 표시되어야 한다.(내 눈에 가깝게)

​

• Extendid FAB(확장된 FAB)
  • 아이콘과 라벨로 이루어짐

 

* Button과 FAB 실습 완료

​

​

컴포넌트 만들기_Communication: 스낵바(Snackbar), 토스트 메시지

출처) Material Design

https://m3.material.io/components/snackbar/overview

Snackbar - Material Design 3

 

• 스낵바(Snackbar)
  • 화면 하단에 앱 프로세스에 대한 짧은 업데이트를 표시하는 바
  • 스낵바는 사용자의 경험을 방해하지 않는다.
  • 일반적으로 UI 하단에 나타난다.
  • 사용자가 조치를 취할 때까지 화면에 그대로 남아 있거나 스스로 사라질 수 있다.

​

• • 구성
    • 1 : 컨테이너 / 2 : 지원 텍스트 / 3 : 작업(선택 사항) / 4 : 아이콘(선택적 닫기 가능)

​

• • 베리에이션

​

• • 스낵바 내부에 아이콘이나 인라인 링크 사용은 지양한다.

​

• • 텍스트 레이블과 텍스트 버튼에 같은 색상을 쓰지 않는다.
  • 스낵바는 이미 주의를 끌기 떄문에 버튼을 쓰지 않는다.

​

• • 스낵바는 FAB 위에 배치한다.(FAB 앞에 두지 않는다.)

​

• Snackbar 만들기 실습
  • 텍스트 박스를 프레임으로 만들어(단축키 shift+A) 컴포넌트로 만들기
    • 텍스트는 왼쪽 상단에 얼라인먼트. 컨테이너 리사이징 Fixed, 텍스트 리사이징 Fill

​

• • 액션 버튼이 포함된 Snackbar일 땐, 텍스트와 버튼 프레임을 각각 만들어 배치했다.
  • 텍스트는 왼쪽 상단 얼라인먼트, 좌우 라사이징을 Fill로 설정. 버튼은 오른쪽 하단에 얼라인먼트, 좌우 리사이징 Fill, 상하 리사이징 Fill로 설정하여 크기 변화에 대응하게 했다.

​

* Snackbar 실습 완료

​

​

컴포넌트 만들기_Containment: 카드(Card), 다이얼로그(Dialog)

출처)

https://m3.material.io/components/cards/overview

Cards – Material Design 3

 

• 카드(Card)
  • 단일 주제에 대한 컨텐츠와 작업을 표시

• • 구성
    • 1 : 컨테이너 / 2 : 제목 / 3 : 부제목 / 4 : 지원 텍스트 / 5 : 사진 / 6 : 버튼

​

• • 예시

​

* Card 실습 완료

​

​

[회고]

직접 컴포넌트를 제작해보니 신경 써서 제작해야 할 부분들이 많이 있었다.

맨 처음 파운데이션을 만들 때부터 어떻게 오토레이아웃을 적용할건지 미리 생각해야 하고, 그에 따라 적합한 도형이나 텍스트, 프레임을 골라야 해서 간단해 보이는 컴포넌트도 고려해야 할 부분들이 많았다.

예시 컴포넌트에서 보여지는 형태를 만드는 것은 어렵지 않으나 그 속의 오토 레이아웃이나 얼라이먼트, 리사이징을 부여하는게 어려움이 있었다.

복잡한 컴포넌트들을 많이 실습해보여 익숙해지도록 해야겠다.