첫 번째 버튼 디자인

이 프로젝트에서는 라벨의 길이에 따라 자동으로 크기가 조정되는 간단한 버튼을 디자인해 보겠습니다. 버튼은 UI 디자인에서 흔히 사용되는 요소로, 이 프로젝트에서는 텍스트 도구와 오토레이아웃을 직접 사용해 볼 수 있습니다.

버튼을 만들려면 다음을 수행합니다.

1. 텍스트 레이어 추가
2. 텍스트 레이어를 오토레이아웃 프레임으로 변환
3. 버튼 스타일 지정
4. 버튼을 컴포넌트로 전환

단계별로 따라하면 최종 버튼은 다음과 비슷하게 표시됩니다.

텍스트 레이어 추가

텍스트 레이어를 추가하는 것부터 시작하겠습니다.

1. 도구 모음에서 텍스트 도구를 클릭하거나 키보드 바로가기 키 T 키를 눌러서 텍스트 도구를 활성화합니다.
2. 캔버스를 클릭하고 버튼을 입력하여 텍스트 레이어를 만듭니다.

왼쪽 사이드바의 레이어 패널에 '버튼'이라는 이름의 새 텍스트 레이어가 있는 것을 볼 수 있습니다. 레이어를 두 번 클릭하고 이름을 라벨로 바꿉니다.

여기까지 했으니 텍스트 레이어의 글꼴 크기를 늘려 보겠습니다. 텍스트 레이어를 선택한 상태에서 오른쪽 사이드바의 텍스트 섹션에 있는 설정을 사용하여 글꼴 크기를 16으로 변경합니다. 설명에서는 기본 Inter 글꼴을 사용하겠지만, 다른 글꼴 스타일을 선택해도 좋습니다.

텍스트 레이어를 오토레이아웃 프레임으로 변환

아직 이 버튼은 별로 매력적이지 않지만 오토레이아웃을 사용하여 좀 더 흥미진진해 보이게 만들어 보려고 합니다.

오토레이아웃은 기존 프레임에 적용하거나 레이어를 프레임으로 바꾸는 데 사용할 수 있습니다. 여기에서는 두 번째 옵션을 사용하겠습니다. 라벨 레이어를 선택하고 바로가기 Shift A를 사용합니다.

오른쪽 사이드바의 오토레이아웃 섹션에서 가로 크기 조정 및 세로 크기 조정 설정이 모두 허그로 설정되어 있는지 확인합니다. 왼쪽 사이드바에서 새 프레임을 두 번 클릭하고 이름을 버튼으로 바꿉니다.

버튼 스타일 지정

색상 추가

1. 버튼 레이어를 선택하고 오른쪽 사이드바의 채우기 섹션에서 더하기 아이콘을 클릭하여 채우기 색상을 추가합니다.
2. 색상 선택기를 사용하여 색상을 변경합니다. 여기에서는 색상 코드 #33B249를 사용합니다.
3. 프레임 레이어 내에 중첩된 라벨 레이어를 선택하고 채우기를 #FFFFFF로 조정합니다.

모서리 굴리기

1. 버튼 레이어를 선택합니다.
2. 오른쪽 사이드바에서 모서리 반경을 6으로 설정하세요.

패딩 수정

마지막으로 프레임의 패딩을 수정해 보겠습니다. 텍스트 레이어를 오토레이아웃 프레임으로 변환했을 때 프레임 경계와 내부 텍스트 사이에 패딩이 자동으로 추가되었습니다. 현재 패딩은 모든 면이 동일합니다. 여기에서는 상단과 하단 패딩이 왼쪽과 오른쪽 패딩보다 작게 만들고자 합니다.

1. 버튼 레이어를 선택합니다.
2. 선택한 프레임 위로 커서를 가져갑니다. 표시되는 핸들을 사용하여 패딩을 변경할 수 있습니다. 핸들을 클릭하고 드래그하여 패딩을 수정하거나 핸들을 한 번 클릭하고 표시되는 상자에 숫자를 입력할 수 있습니다.
3. 두 가지 방법 중 하나를 사용하여 패딩을 다음과 같이 업데이트합니다.
   • 상단 및 하단 패딩:8
   • 왼쪽 및 오른쪽 패딩: 16

버튼을 컴포넌트로 전환

버튼 디자인이 완성되었습니다! 프로젝트를 마무리하기 전에 향후 디자인에 다시 사용할 수 있도록 컴포넌트로 전환해 보겠습니다.

1. 버튼 레이어를 선택합니다.
2. 오른쪽 사이드바에서 컴포넌트 생성을 클릭합니다.

이제 왼쪽 사이드바의 에셋 탭에서 버튼 인스턴스를 추가할 수 있어서 다시는 버튼을 처음부터 디자인할 필요가 없습니다.
컴포넌트 사용에 관해 자세히 알아보기 →

다음은 무엇일까요?

축하합니다! Figma Design에서 오토레이아웃을 사용하여 반응형 버튼을 설계했습니다. 다른 작업에도 도전해 보고 싶으신가요? 인터랙티브 버튼 디자인 프로젝트를 확인하여 실전 경험을 쌓으세요.