Flutter How to use each button 플러터 상황별 버튼 사용법

버튼을 사용할 때 주의해야할 점은 바로 버튼의 내용이 1줄을 넘어서는 안 된다는 점입니다. 버튼은 사용자로 하여금 행동을 유도하기 위해 사용하는데요. 말은 길게 할 수록 전달력이 떨어지게 됩니다. 짧고 직관적인 멘트를 고안해봅시다. 

 

 

<구글 매터리얼 디자인 가이드> 출처 : https://material.io/components/buttons#anatomy

 

 

또 한 가지, 버튼은 많을 수록 인지과부하 때문에 오히려 선택을 못하는 '선택의 역설'을 불러일으키게 됩니다. 한 화면에 너무 많은 버튼이 있는 것은 좋지 않습니다. 예를 들어 여러분이 여러 상급자에게 동시에 업무를 지시받았을 때 도대체 뭐부터 해야할지, 그때 기분이 어떨지를 생각해보시면 됩니다.

 

 

Flutter에서도 구현할 수 있는 아래 4가지 버튼을 알아보겠습니다.

 

 

1. 배경색이 그려진 텍스트 버튼

2. 배경색 없이 외곽선이 그려진 텍스트 버튼

3. 텍스트만 있는 버튼

4. 아이콘만 있는 버튼

 

---

ElevatedButton

 

 

배경색이 있는 기본적인 버튼입니다. 사용자에게 강하게 행동을 요구할 때 사용합니다. Flutter는 기본적으로 모서리가 둥근 버튼 디자인을 제공합니다. 왜 그럴까요?

 

시각 인지 권위자 Jürg Nänni 교수는 인간은 동그라미보다 사각형을 인지하는 데에 더 많은 노력이 필요하다고 말합니다. 사각형의 한 변을 따라 시선이 가다보면 각진 모서리 끝에서 인지 멈춤현상이 발생하기 때문에 인접한 다른 변을 다시 인지하는 작업이 필요합니다. 쉽게 말해 인지 비용이 듭니다.

 

인간이 인지하는 것에 굳이 노력을 들이는 이유는 날카로운 것에 부딪혀 다치지 않기 위해 진화했기 때문입니다. 날카로운 모서리는 '날 만지면 다칠 수 있으니 조심해!'라는 시각적 언어를 담고 있다고 볼 수 있습니다. 반대로 둥근 모서리는 '나는 안전하니 안심해!'라는 편안한 느낌을 전달하게 됩니다.

 

그렇다고 무조건 둥근 버튼을 써야할까요? 그렇지 않습니다. 날카로운 모서리는 우리에게 인지 비용을 발생시키는 반면 긴장감을 주어 집중하게 만듭니다. 따라서 강하게 말해야 하는 부분에서 예외로 모서리가 각진 버튼을 사용할 수 있겠습니다.

 

 

아래 주석을 참고하여 수정이 필요한 부분을 고쳐서 사용하시면 되겠습니다.

 

ElevatedButton(
  onPressed: () {
    // 버튼을 탭 했을 때 실행할 코드 작성
  },
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.all(24), // 버튼 내부 여백
    primary: Colors.brown, // 버튼 컬러
    elevation: 1, // 그림자 세기
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0), // 모서리 둥근 정도
    ),
  ),
  child: const Text(
    "Touch Here!", // 버튼 글자 내용
    style: TextStyle(
      fontSize: 24, // 버튼 글자 크기
      color: Colors.white, // 버튼 글자 색깔
      fontFamily: "SpectralSC", // 폰트 종류
    ),
  ),
),

---

OutlinedButton

 

 

두번째로 많이 사용되는 버튼은 배경색은 없지만 외곽선이 있는 버튼입니다. 배경색이 있는 버튼보다 중요하지는 않지만 텍스트 버튼보다는 강조하고 싶을 때 사용합니다. ElevatedButton과 코드 상 차이점은 shape가 아니라 [side: BorderSide > color]를 변경해야 외곽선 색깔이 바뀝니다.

 

OutlinedButton(
  onPressed: () {
    // 버튼을 탭 했을 때 실행할 코드 작성
  },
  style: OutlinedButton.styleFrom(
    padding: const EdgeInsets.all(24), // 버튼 내부 여백
    elevation: 0, // 그림자 세기
    side: const BorderSide(
      width: 1,
      color: Colors.brown,
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0), // 모서리 둥근 정도
    ),
  ),
  child: const Text(
    "Touch Here!", // 버튼 글자 내용
    style: TextStyle(
      fontSize: 24, // 버튼 글자 크기
      color: Colors.brown, // 버튼 글자 색깔
      fontFamily: "SpectralSC", // 폰트 종류
    ),
  ),
),

---

TextButton

 

 

iOS에서 많이 사용하는 텍스트 버튼입니다. 1)일반 본문 텍스트 컬러와는 대조되는 컬러를 사용하거나, 2)밑줄을 표시하여 버튼이라는 사실을 인지시키는데요. 위에서 다뤘던 ElevatedButton과 OutlinedButton은 강조되기 위해 화면의 공간을 많이 차지하고자 버튼 내부에 여백을 필요로 합니다. 텍스트 버튼은 위 2가지 버튼보다 덜 중요해서 최소한의 공간만 차지하며 행동을 요구할 수 있는 버튼입니다. 

 

배경색이라거나 외곽선이라거나 많은 스타일을 필요로 하지 않기 때문에 코드 또한 짧습니다.

 

TextButton(
  onPressed: () {
    // 버튼을 탭 했을 때 실행할 코드 작성
  },
  style: OutlinedButton.styleFrom(
    padding: const EdgeInsets.all(24), // 버튼 내부 여백
  ),
  child: const Text(
    "Touch Here!", // 버튼 글자 내용
    style: TextStyle(
      fontSize: 24, // 버튼 글자 크기
      color: Colors.brown, // 버튼 글자 색깔
      fontFamily: "SpectralSC", // 폰트 종류
    ),
  ),
),

 

---

IconButton

 

 

일반적으로 정방형 아이콘만을 사용하기 때문에 화면의 많은 공간을 절약하며 사용자가 앱과 상호작용할 수 있게 됩니다. 아이콘 옆에 바로 아이콘을 넣는 등의 레이아웃도 설계할 수 있습니다. 단, 아이콘 버튼을 사용할 때 주의점은 바로 타겟입니다. 

 

컴퓨터 활용 능력이 떨어지는 사람들이 타겟인 경우 아이콘이 무엇을 의미하는지 모를 수 있습니다. 기술이 발전하여 같은 사물에 대해 세대별로 이미지가 다른 경우에도 혼란을 일으킬 수 있습니다. 대표적인 예가 '전화 아이콘' 입니다.

 

 

 

 

아이패드와 휴대폰에 익숙한 Z세대 이하는 종종 위 아이콘이 왜 전화 아이콘인지, 전화를 받을 때 손 모습을 왜 엄지와 새끼손가락으로 표현하는지 이해하지 못합니다. 따라서 서비스의 주 사용 고객이 이해할 수 있는 아이콘을 사용해야 하며, 타겟 스펙트럼이 넓은 경우 아이콘 옆에 텍스트 레이블을 표시해주는 것이 좋습니다.

 

IconButton(
  onPressed: () {
    // 버튼을 탭 했을 때 실행할 코드 작성
  },
  color: Colors.red, // 아이콘 컬러
  iconSize: 32, // 아이콘 사이즈
  icon: const Icon(
    Icons.add, // 아이콘 종류
  ),
),

---

 

4가지 버튼에 대해 알아봤습니다. 구현하는 것도 좋지만 어떤 상황에서 어떤 버튼을 사용하는 것이 적합한지 알아두는 것도 꽤 중요하다고 생각합니다. 프로페셔널한 개발자라면 서비스나 기획이 잘못된 방향으로 가고 있을 때 보고만 있으면 안 됩니다. '내 인생에서 일어나는 모든 일은 전부 내 책임이다.'라고 생각하기 시작하면 엄청난 성장을 하시게 될 겁니다.

 

 

다음 강의에서는 서비스에 대한 사용자 경험(UX)에 긍정적 영향을 주는 Shimmer에 대해 알아보겠습니다. 아래 링크를 누르세요!