Figma 기본 기능으로 Toss 앱 만들기
기획자의 피그마 figma
지난 시간까지는 Figma 앱의 기본 기능에 대한 사항을 알아보았습니다.
이번 시간부터는 드디어 피그마를 사용하여 UI를 만들고, 디자인을 할 수 있는 도구에 대해서 알아보도록 할게요.
* 동영상으로도 이 포스팅의 내용을 볼 수 있답니다 :)
Figma 에게 .....프레임(Frame)이란...?
피그마에서 프레임(Frame)은 UI, 디자인 작업을 위한 기본 개념이라고 할 수 있습니다.
음... 포토샵으로 치면 캔버스 정도일까요?
필요에 따라서는 여러 화면을 하나의 프레임으로 묶어서 그룹핑을 할 수도 있습니다.
자, 이제부터는 Figma 의 기본 기능을 익히면서 단축키도 함께 외워야하는 타이밍입니다. :)
세상 모든 툴이 그렇듯 자주 사용하는 단축 키를 숙지하고 있어야 신속한 작업이 가능하겠죠? 각 메뉴, 기능 옆에 단축 키가 모두 표시되어 있으니 참고해주세요. (몇몇 기능은 단축 키가 없는 경우도 있습니다.)
프레임(Frame)을 만들기 위해서는 앱 좌측 상단의 #메뉴를 클릭합니다. (단축 키 F)
프레임 민들기아주 친절하게도 피그마는 필요한 프레임의 크기를 고민할 필요도 없이 디바이스/미디어별, 해상도별 프레임을 클릭 한번으로 선택할 수 있습니다.
물론 이 목록에서 선택하지 않고도 바로 프레임을 만들 수 있습니다.
오른쪽 패널에서 내가 필요한 크기의 프레임이 없다면, 바로 작업 영역에서 드레그하여 프레임을 만들어보세요.
이것이 내 프레임이다.프레임은 기본적으로 사각형 형태로 만들어집니다.
생성된 프레임을 클릭한 상태(위 화면처럼 파란색으로 표시된 상태)에서는 우측의 디자인 패널이 활성화 되어 보여집니다.
프레임을 클릭한 상태가 아니라면 우측 패널은 아래 화면처럼 Back ground 색상을 바꾸거나 전체 파일을 추출할 수 있는 Export 기능이 보여집니다.
기본 기능을 활용해서 실습하기 - Toss 앱 메인 화면
Figma 에서 제공하는 기본 기능만으로 만들 수 있는 실습을 하면서 기능에 대해 하나씩 알아볼까요?
실습해볼 화면은 토스(Toss) 화면입니다. figma 학습을 하는 많은 분들에게 추천하는 앱이 바로 이 Toss 이죠.
UI가 심플하기도 하지만 무엇보다도 기본적인 기능을 활용해서 만들어 볼 수 있어요 :)
출처 Toss 웹사이트 https://toss.im/우리가 실습할 화면은 위의 이미지 중에서 오른쪽에 위치한 이미지, 토스 회원에게 제공되는 메인 화면입니다.
1. 첫번째로 프레임을 생성해줍니다.
F를 클릭해서 프레임을 생성해줍니다. 저는 iPhone 11pro Max 를 선택했습니다.
디자인이 들어가기 위한 가이드 선을 별도로 만들지 않아도 프레임을 선택한 상태에서 우측 디자인 패널을 보면 Layout gird 기능을 사용할 수 있어요. Layout grid 타이틀 옆의 + 버튼을 클릭하시면 그리드가 생깁니다. 생성된 그리드의 앞 부분의 아이콘 영역을 클릭해주면, 가이드 선의 간격과 색상, 투명도를 조정할 수 있어요.
2. 이제 상단에 있는 사용자의 프로필 사진 영역을 만들어줄게요.
기능 버튼이 위치한 좌측 상단에서 / 버튼을 클릭하면 다양한 도형을 만들 수 있습니다.
여기서 원형을 선택합니다.
** 사각형, 원형, 라인은 화면을 만들때 빈번하게 사용되는 도형이죠? 단축 키를 꼭 외워두세요.
사각형 R 원형 O 라인 L
단축 키를 입력하고 작업 화면에서 드레그를 하면 해당 도형을 바로 그릴 수 있습니다.
이때 Shift 키를 누른 채로 드레그하면 정비율의 도형을 그릴 수 있어요.
3. 이제 사용자 이름을 입력합니다.
역시 좌측 상단의 T 버튼을 클릭하면 텍스트 입력 기능을 사용할 수 있습니다. (단축키 T)
이제 원하는 영역에 텍스트를 입력해줍니다.
텍스트 입력 영역이 선택된 상태라면 우측 디자인 패널 하단에 Text 기능이 보여집니다.
여기서 폰트, 스타일, 크기, 정렬 등을 조정할 수 있습니다. 색상을 바꾸고 싶다면 Fill 영역에서 색상이 표시된 영역을 클릭하면 컬러 패널이 제공됩니다.
4. 이제 송금 버튼을 만들어 줄거에요.
버튼 역시 아주 간단하게 만들어 줄 수 있답니다. 우선 사각형을 하나 만들어주시고, Fill 에서 색상을 파란색으로 바꿔주세요.
송금 버튼은 둥근 모서리를 가진 버튼으로 되어있네요.
그렇다면 사각형을 선택한 상태로 디자인 패널을 보면 위의 화면과 같은 기능이 보일거에요.
X, Y 현재 선택된 요소의 위치 값을 숫자로 설정할 수 있어요.
W, H 현재 선택된 요소의 가로/세로 크기를 숫자로 설정할 수 있어요.
각도를 조정할 수 있는 Rotation, 도형의 모서리 굴곡을 설정할 수 있는 Coner Radius 기능입니다.
우리는 버튼의 모서리를 둥글게 해주기 위해서 Coner Radius 를 10으로 설정해주겠습니다.
그리고 이제 버튼 안에 들어갈 '송금' 이라는 글씨를 써줘야겠죠? T 버튼을 누른 후 텍스트를 입력합니다.
5. 버튼은 항상 배경이 되는 사각형과 텍스트가 함께 다녀야 하니, 이 두 개체를 그룹으로 묶어줄게요.
드레그나 좌측 레이어 패널에서 두 녀석을 선택한 후에 마우스 오른쪽 버튼을 클릭합니다.
Group selection 이 보이시나요?
이 버튼을 클릭하면 우리가 선택한 사각형 + 텍스트가 하나의 그룹이 됩니다.
그룹 셀렉션 역시 자주 사용하는 기능이니 단축키를 꼭 외워주세요. MAC의 경우, Command + G 입니다.
그룹으로 묶은 후에는 그룹 이름을 변경해줄게요.
좌측의 레이어 패널에서 해당 그룹을 더블클릭하면 이름을 변경할 수 있습니다.
자, 여기까지 했으니 그리드를 끄고 완성한 화면을 볼까요?
프레임 만들고, 기본 도형을 그리고, 텍스트를 입력해보았으니 Figma 기본 기능의 위치와 사용 방법까지 익히셨답니다.
어떤가요? 별로 어렵진 않았죠?
이제 쭉 이어서 아래 부분의 화면도 만들 수 있으실 겁니다.
그런데요......
계속되는 아랫 부분의 화면을 보니 우리가 오늘 만든 원형, 텍스트, 버튼이 계속해서 등장하네요?
그럼 또 하나씩 그리고, 쓰면서 만들어서 채워넣어야 할까요?
좀 더 편하고 빠르게 제작하는 방법은 없을까요?
다음 편에서는 좀 더 빠르고 쉽게 제작하는 방법을 알아볼게요 :)
기대해주세요.
