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

지난 시간에 앱 모바일 서비스의 샘플 로그인 페이지 UI를 약 95% 그려보았습니다.

오늘은 나머지 5%를 완성해서 전체 UI를 작성 완료해보도록 하겠습니다.

로그인 페이지는 회원일 경우에만 접근할 수 있는 페이지로 가기 전 비회원일 경우에 회원 여부를 확인하는 페이지로 다시 돌아갈 이전(←) 버튼 또는 창을 닫을 수 있는 (X) 버튼이 있어야 합니다.

로그인 페이지 (좌측 상단 화살표 아이콘 적용)

① 예시와 같은 화살표 도형을 Figma에서 직접 펜툴로 그릴 수도 있지만 Figma 디자인이 아닌 기획이기 때문에 좀 간편하게 도형을 적용해보겠습니다.

② 아이콘 다운로드 사이트로 유명한 icons8.com에서 ‘left arrow’로 검색하고 사용할 아이콘을 선택합니다.

③ 좌측의 Recolor 메뉴 클릭 후

④ Custom Colors ‘#222222’으로 입력한 뒤 Done을 클릭합니다.

⑤ 그리고 ios 등 아이콘 스타일을 선택할 수 있습니다.

⑥ 이렇게 설정이 끝나면 Download 버튼을 클릭해 파일 타입은 png, size는 90~100px 으로 설정해서 다운로드 후 Figma에 불러 들이면 사용 가능합니다.

* icons8 유료 계정은 SVG 및 100px 이상 사이즈로 다운로드 가능합니다.

로그인 페이지 (아이콘 위치, 크기 등 수정)

① icons에서 다운로드하고 Figma로 불러들인 '좌측 방향 아이콘'을 360px Frame 좌측 상단에 놓고

② 시프트(Shift) 키를 누른 상태에서 우측 하단 모서리를 마우스를 잡고 위아래로 움직이면 크기 조정할 수 있습니다.

③ 도형 넓이(W-Width) 수치를 ‘24’ 입력하고 [Tab]키를 누르면

④ 도형 높이(H-Height) 수치도 동일 비율로 자동 변경됩니다. 다시 크기를 돌리면 싶으면 [윈 Ctrl+Z][맥 Command+Z]를 누르시면 됩니다.

⑤ 그리고 위치를 '로그인' 텍스트 위로 이동시켜 주시면 로그인 페이지 UI 기획이 완료됩니다.

짝짝짝! 이렇게 모바일 UI 1p를 만들어보았습니다. 다른 페이지도 이와 같다고 할 수 있습니다. 로그인 페이지 1페이지를 따라 그려보며 Figma의 기본 화면 구성도 알게 되었고, 상단 툴바, 좌측 레이어 패널, 우측 속성 패널도 눈에 익혔습니다. 그리고 텍스트와 도형, icons8을 활용한 Frame 위 UI 완성. Figma를 열어놓고 텅 빈 Canvas를 바라보면 막막해하던 이전과 달리 이렇게 1페이지를 기획해보며 피그마의 기본 기능을 빠르게 익혀 보았습니다.

이제 앱 서비스를 구성하기 위해선 1페이지가 아닌 여러 페이지를 기획해야 하기 때문에 프레임명(Frame)명을 변경해보도록 하겠습니다.

로그인 페이지 (프레임명 변경)

① UI 화면 단위인 Frame명을 식별하기 쉽도록 좌측 레이어 패널 아래 Frame 영역에서 마우스를 더블 클릭해서 영문 또는 국문으로 화면명을 입력하면

② Frame명이 변경됩니다.

홈페이지, 회원가입, 로그인, 마이페이지 등 여러 페이지로 앱 서비스가 구성되는데요. 이렇게 단일 페이지가 아닌 여러 페이지를 기획해야 할 때 알아보기 쉽도록 정리가 필요합니다.

그리고 프레임명은 영문으로 작성하는 것을 추천해 드립니다. 이유는 모바일웹 등 서비스의 URL 주소가 모두 영문으로 되어 있는데요. 기획 단계부터 영문 프레임명일 정해놓으면 해당 이름으로 디자인 파일, 퍼블리싱 파일이 이어서 동일하게 생성되게 됩니다.

그래서 최초에 국문으로 프레임명을 쉽게 작성하더라도 디자인팀에 피그마 UI를 공유할 때는 영문으로 중복되지 않게 이름을 변경해 전달해주시면 됩니다.

이렇게 로그인 페이지 UI기획을 통해 Figma의 기본 기능을 배웠습니다.

다음 포스팅에서는 피그마 고급 기능에 대해서 배워보도록 하겠습니다.

피그마가 이렇게 유명해진 이유는 텍스트와 도형 편집 정도의 단순 기능만을 제공해서가 아닙니다.

UI기획의 생산성을 확 끌어올릴 수 있는 피그마의 오토 레이아웃, 컴포넌트 등의 고급 기능을 배워보도록 하겠습니다.:)

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

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

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