Figma 기본 기능 익힘을 위한 샘플 '로그인' 페이지 실습하기 - 1부

이전 포스팅에서 피그마의 기본 화면의 요소들인 상단(툴바), 좌측(레이어 패널), 우측(속성 패널)에 대해 알아보았는데요.

오늘 이 시간엔 실제로 UI를 그려보는 실습을 하겠습니다.

회원가입을 하는 앱이나 웹사이트라면 어디에나 존재하는 '로그인(Log In)' 페이지를 샘플로 피그마의 기본 기능에 대해 알아보도록 하겠습니다.:)

1) 에디터 사용하기

Canvas & Frame

① Canvas: 그림을 그릴 영토로 이해하면 좋습니다. 그림을 그릴 공간이 있어야 도형, 텍스트 등을 그려 넣을 수 있으니까요.

② Frame: 그림을 그릴 영토 내에 그림을 걸 액자 영역으로 이해하면 좋습니다.

③ 도형/텍스트: 영토 위에 액자 그리고 그 액자 내에 도형/텍스트 등으로 액자를 채우게 됩니다. App 서비스를 기획할 땐 모바일 화면 사이즈의 액자(Frame)를 생성하고, 도형/텍스트 등을 삽입해서 UI를 구성합니다.

* 참고로 Figma에서 Frame 위가 아닌 그냥 Canvas에 도형/텍스트를 프로토타이핑 선 연결이 불가능합니다. Figma에서 작업 시엔 꼭 Frame을 그리고 그 위에 도형과 텍스트를 적용해주세요.

그럼, 본격적으로 샘플이 되는 '로그인' 페이지를 그려보겠습니다.

1) 프레임 생성하기

로그인 페이지 (360*640px Frame을 생성한 모습)

① Frame: 상단 툴바에서 프레임 메뉴를 클릭하면

② 우측 속성 패널이 Frame 유형을 선택할 수 있도록 항목이 변경됩니다.

③ 저희는 모바일 앱 UI를 실습할 예정이기 때문에 Android 360 x 640 사이즈를 선택해 주시면 됩니다. 이렇게 하면 모바일 UI Frame이 Canvas 내에 생성됩니다.

Tip. 360×640px 사이즈는 모바일앱 UI 최소 단위 화면 사이즈로 이 사이즈의 Frame에서 UI를 기획하면 해당 사이즈 이상의 해상도도 대응할 수 있는 디자인이 가능합니다.

2) 로그인 버튼 생성하기

샘플 로그인 페이지 (도형 만들기)

① 상단 툴바의 도형 아이콘을 클릭하면 + 모양 커서가 나타납니다.

② Canvas 내 생성한 360px Frame 위에서 마우스로 + 모양 커서를 우측으로 드래그하여 버튼 모양의 사각형을 그려 줍니다.

③ 높이값(Height) 크기의 정확한 수치로 맞추고 싶을 땐 H 영역의 수치를 '55'로 변경하고

④ Frame 하단에 여백 없이 가지런히 정렬되게 하기 위해 '하단 정렬 맞춤' 아이콘을 클릭해 주세요.

로그인 페이지 (도형 편집)

① 이제 도형의 컬러를 변경해보겠습니다. 우측 속성 패널의 Fill 영역의 컬러 박스 영역을 클릭하면 컬러 패널이 확장됩니다.

② 스포이드 아이콘을 클릭해서

③ 캔버스 내에 이미 있는 컬러를 복제하고 싶을 경우, 복제를 원하는 영역을 클릭하면

④ 해당 컬러로 변경됩니다.

⑤ 또는 정확한 컬러 RGB 값 등을 입력해 변경하고 싶을 때는 수치를 입력(B134BA)하고, 우측의 100% 수치를 낮추면 투명도가 반영됩니다. 눈 모양 아이콘을 클릭하면 편집 중인 요소에 대해 숨김/노출 처리가 가능하고, - 버튼을 클릭하면 방금 반영한 컬러를 삭제할 수 있습니다.

⑥ 이외에도 Document colors(캔버스 내 반영되어 있는 컬러 모음) 영역에 있는 컬러 중 선택하여 컬러를 반영할 수도 있습니다.

로그인 페이지 (텍스트 입력)

① 상단 툴바의 'T(Text)' 아이콘을 클릭해서 Frame 내 도형 위에서

② 마우스 클릭하면 텍스트 입력 아이콘(|)이 깜빡 거리게 됩니다. ‘로그인’ 텍스트를 타이핑하여 입력하고

③ ‘Noto Sans KR’로 폰트명을 직접 입력해 폰트를 변경하거나

④ Select Box를 클릭해서 폰트를 선택합니다.

그리고 폰트의 각종 요소를 수정해보겠습니다.

로그인 페이지 (텍스트 설정)

① 텍스트 두께(Bold)를 설정하고

② 텍스트 크기는 '16'으로 설정

③ 행간(행 간격)은 'Auto'로 설정하고 (때로는 % 또는 px 수치를 입력합니다. 150% 정도의 행간을 주셔도 좋습니다.)

④ 자간(텍스트 사이의 간격)은 '0'으로 설정합니다. 디자인 시 자간을 좁히기 위해 -로 설정하는 경우가 있으나 기획 가독성을 위해 0으로 설정하겠습니다.

⑤ 텍스트 편집 영역 크기 설정 중 '☐' 모양으로 설정합니다.

⑥ 텍스트 가로 정렬(좌, 중, 우) '중앙'으로 설정하고

⑦ 텍스트 세로 정렬(상, 중, 하) '중앙'으로 설정

⑧ 텍스트 컬러는 'FFFFFF' 화이트 컬러로 설정

⑨ 텍스트 테두리 추가를 위해 +버튼을 클릭해 설정할 수 있지만 현재 실습 중인 버튼 내 텍스트에선 Stroke 처리를 하지 않도록 하겠습니다.

지금까지 '로그인(Log In)' 페이지를 샘플로 UI기획을 해보기 위해 360*640px 사이즈의 Frame을 생성하고, 사각형 버튼 도형을 그리고, 텍스트르 입력하는 가운데 두께, 크기 등의 편집을 실습해보았습니다. 다음 시간에도 로그인 페이지 UI 기획을 위해 사용하는 기본 기능들에 대해서 이어서 확인해보도록 하겠습니다.:)

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의