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

도형 내 텍스트 정렬 등 로그인 페이지 UI 기획을 위한 여러 기본 기능들을 이어서 해 보도록 하겠습니다.:)​

이전 포스팅에서 '로그인(Log In)' 페이지를 샘플로 UI기획을 해보기 위해

360*640px 사이즈의 Frame을 생성하고, 사각형 버튼 도형을 그리고, 텍스트를 입력하면서

두께, 크기 등의 편집을 실습해보았습니다.

오늘 이 시간에는 도형 내 텍스트 정렬 등 로그인 페이지 UI 기획을 위한 여러 기본 기능들을 이어서 해 보도록 하겠습니다.:)

먼저, 버튼 내에 위치한 텍스트를 도형 안 정중앙에 올 수 있도록 정렬시켜보겠습니다.

로그인 페이지 (도형 내 텍스트 정렬)

① 입력했던 '로그인' 텍스트를 마우스로 클릭하고

② 시프트 키를 누른 상태에서

③ 사각형 버튼 모양 도형을 클릭하면 요소들을 함께 복수 선택할 수 있고

④ 우측 속성 패널의 디자인 탭에서 '가로 중앙 정렬' 아이콘과

⑤ '세로 중앙 정렬' 아이콘을 클릭하면 가로세로 모두 중앙에 정렬 처리됩니다.

텍스트를 새로 입력할 때 매번 상단 툴바의 T 아이콘을 클릭하지 않고, 이미 캔버스에 있는 텍스트를 복사해서 사용할 수 있습니다.

로그인 페이지 (텍스트 복제/편집)

① 복제할 대상 '로그인' 텍스트를 마우스로 클릭해 선택하고

② 윈도우는 [Alt Key], 맥은 [option Key]를 누른 상태에서 위치를 이동하면 텍스트가 복제됩니다.

③ 이렇게 복제한 텍스트를 타이틀로 쓰기 위해 폰트 크기를 ‘28’로 변경하고

④ 폰트 컬러를 ‘222222’로 변경합니다.

⑤ ② 의 텍스트를 마우스를 클릭한 상태에서 상단 타이틀 영역으로 위치를 이동시킵니다.

자 이번엔 버튼 도형을 복제해 입력 필드(Input box)로 수정해 보겠습니다.

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

① 복제 대상인 버튼 모양 도형을 마우스로 클릭해 선택하고

② [윈 Alt Key][맥 option Key]를 누른 상태에서 위치를 이동하면 도형이 복제됩니다.

③ 도형 폭(Width)을 ‘330’으로 변경하고

④ 도형 높이(Height)를 ‘50’으로 변경합니다.

⑤ 도형 모서리 라운딩의 수치를 ‘4’로 변경합니다.

⑥ 면(Fill) 컬러를 ‘F’로 변경합니다. 이때 자동으로 FFFFFF 6자리가 같은 코드 F로 반복되어 설정됩니다.

⑦ 테두리(Stroke) 컬러는 ‘97’로 변경하면 979797로 반복되어 6자리 Hex 코드로 반영됩니다.

인풋박스 위의 '이메일 주소' 타이틀은 이미 배운 텍스트 복제 방법으로 만들어주세요.

이렇게 이메일 주소 타이틀과 입력 필드 도형을 복제해서 비밀번호 입력 필드를 만들어보겠습니다.

로그인 페이지 (요소 그룹핑 및 복제)

① 이메일 주소와 입력필드 요소를 그룹핑하기 위해선 시프트 키를 누른 상태에서

② 오른쪽 마우스를 클릭하면 설정 상자가 나타나고

③ Group selection을 클릭하면 그룹핑됩니다. 단축키 [윈 Ctrl+G][맥 Command+G]를 눌러주셔도 됩니다.

④ 해당 그룹을 마우스로 선택하고 [윈 Alt Key][맥 option Key]를 누른 상태에서 위치 이동하면 그룹이 복제됩니다.

이렇게 이메일 주소 입력 필드와 비밀번호 입력 필드는 스타일이 유사하기 때문에 그룹핑을 한 뒤 복제하고, 텍스트만 변경해주면 편집할 때 속도도 빨라지면 간편해집니다.

로그인 페이지 (복제한 그룹 내 텍스트 수정)

① 복제한 그룹의 타이틀인 이메일 주소 텍스트 영역에서 왼쪽 마우스로 더블 클릭하면 문구를 변경할 수 있습니다. ‘비밀번호’로 문구를 변경해주세요.

* 텍스트 영역 선택이 안 될 경우가 있습니다. 이런 경우엔 다른 레이어가 편집하려는 텍스트 레이어를 가리고 있기 때문에 여러 번 클릭하면 편집하려는 레이어에 내려갈 수 있습니다.

② 복제한 그룹을 마우스로 선택해서 방향키(←↑→↓) 눌러  위치를 조정할 수 있습니다.

이제 로그인 페이지가 거의 만들어지고 있습니다. 우측 하단에 아이디/비밀번호 찾기 텍스트를 생성해보겠습니다.

로그인 페이지 (복제한 텍스트 편집 2)

① 그룹내의 텍스트를 [윈 Ctrl+C][맥 Command+C]를 클릭해 복제하면 복제된 텍스트는 해당 그룹 내에 종속되어 있습니다. 그래서 독립적으로 요소를 분리해 내려면 [윈 Ctrl+X][맥 Command+X]를 눌러서 잘라내기하면 그룹내에서 분리되고 다시 [윈 Ctrl+V][맥 Command+V]를 누르면 독립 개체로 붙여넣기 되게 됩니다.

② 비밀번호 입력 필드 우측 하단에 텍스트는 붙여넣기 한 뒤 디자인탭 Text 속성 편집에서 우측 정렬 아이콘을 클릭하고

③ 컬러는 ‘B134BA’를 입력하거나 Document colors에서 보라색으로 선택하고,

④ 아이디/비밀번호 찾기의 중간에 슬래시(/)대신에 가운뎃점(·)을 입력하기 위해 [윈 Window Key + Key][맥 fn Key]를 입력하면 이모지 상자가 나타나고 가운뎃점(·)을 선택합니다.

오늘도 잘 실습해주셔서 로그인 페이지를 95% 정도 완성한 것 같습니다. 기본 기능을 익혀갈 때 부담 없이 실습해나가실 수 있도록 나머지 부분에 대해선 또 다음 포스팅에서 이어서 진행해보겠습니다.​

결국 Figma로 UI를 그려서 앱 서비스 1개의 기획을 완성해내는 일은 이와 같이 텍스트와 도형의 조합 편집해서 계속 UI들을 만들어 나가고,

CRUD(Creat, Read, Update, Delete) 관점에서 누락된 페이지는 없는지 체크하고, 보완하면 어느새 자신의 앱 서비스를 기획하게 되는 것입니다.

그럼, 다음 포스팅에서 또 뵙겠습니다.:)

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

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

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