Figma 기본 화면 확인 1부

오늘은 UX/UI 툴의 대세, Figma!에 대해서 배워보도록 하겠습니다.

​앱/웹 서비스를 기획할 때 현재 업계에서 가장 많이 사용하는 툴은 MS의 파워포인트입니다.

그러나 파워포인트는 본래 프레젠테이션 도구로 앱/웹 서비스를 기획하는데 있어서 한계가 많았습니다.

A4 가로 형태로 화면을 제공하는 PPT의 틀이 긴 화면이 있는 PC와 모바일의 화면을 제대로 남아낼 수 없게 되었기 때문입니다.

PC 웹사이트의 롱스크롤로 표현하는 긴화면과 스마트폰의 긴 페이지를 PPT에서 표현하려면 A4 가로 사이즈에 맞게 PC화면을 분할해서 PPT에 한 장 한 장 얹어서 기획하는 형태로 진행하게 됩니다.​

이럴 경우 이 자료를 보는 관계자들은 ppt의 1페이지와 2페이지가 같은 화면인가요? 라고 질문하게 되고, 결과적으로 수백장의 PPT화면과 PC, Mobile앱 화면과의 상이한 포맷으로 인해 보는 사람으로 하여금 이해도가 떨어지게 됩니다.

그래서 기획 단계에선 해당 자료를 보는 클라이언트가 약 50% 정도로 이해를 하고, 컨펌을 내리게 됩니다.

그리고 디자인을 진행하고 난 뒤 세로 타입의 화면 UI를 실제로 보고 이해도를 높인 뒤 수정 의견을 말하게 됩니다.

이렇게 디자인 단계에서 많은 수정 사항이 발생하는 이유는 PPT로 기획을 진행해서라고 말할 수 있겠습니다.

제가 PPT로 기획을 했을 때 그리고 지금 Figma로 기획을 수년간 진행해오며 클라이언트로부터 받는 피드백을 통해 PPT는 정말 쓸 수 없구나라고 생각해오고 있습니다. 특히나 이런 수정 사항 절감 효과로 인해 담당 디자이너가, 개발자가 아주 환영하고 있기도 합니다.

그럼, PPT가 아닌 Figma로 기획을 한다고? Figma가 뭐야?라고 하시는 분들이 계실 겁니다.

Figma는 UX/UI 전물툴입니다.

Figma에서는 앱 서비스 아이데이션부터 와이어프레임, 프로토타입, 목업 기획, 디자인까지 하나의 툴 안에서 작업할 수 있습니다. 또한, 벡터 디자인툴이어서 이미지 에셋(jpg, gif 등)을 추출할 때도 2배, 3배수 등으로 크기 제약 없이 이미지를 추출할 수 있습니다.

개발자가 포토샵 PSD 파일을 확인해서 작업할 때는 디자이너가 작업해 놓은 각종 좌표값을 확인해서 코딩했는데, 개발 코드 탭을 제공해 각종 요소를 일일이 확인하지 않아도 쉽게 빠르게 해당 코드를 구현해 낼 수 있어서 개발자가 사랑하는 툴이기도 합니다.

그리고 다른 UX툴인 스케치와 달리 단독 모드만 제공하지 않고, 프로젝트 팀원인 기획자, 디자이너, 개발자 모두가 해당 UI Canvas에 접근해 함께 화면을 보고 수정도 가능해 인기 협업툴로 인지도를 높여가고 있습니다. 스케치는 맥에서만 이용 가능해서 프로젝트 팀원 모두가 맥을 사용해야 하지만 피그마는 윈도우, 맥, 웹브라우저에서 모두 사용할 수 있어서 디바이스 제약 없이 사용할 수 있는 것도 장점 중에 하나입니다.

그럼, 피그마 기본 화면부터 확인해서 Figma에 대해 배워보도록 하겠습니다.

피그마는 웹 기반으로 만들어진 프로그램이기 때문에, OS의 영향을 받지 않고 어느 환경이든지 실행이 가능합니다. 그럼 피그마에 접속해 보겠습니다.

피그마 회원가입 및 로그인

1) 회원가입 및 로그인

피그마 웹사이트에 접속 후 오른쪽 상단의 Sign Up 버튼을 클릭해서 회원가입해 주시면 됩니다. 가입 후 입력한 이메일로 이메일 인증(Verify you email) 메일이 오고, 해당 메일을 확인해 이메일 인증 뒤 로그인(Log In) 해주시면 됩니다.

로그인 후 최초 설정

2) 로그인 후 최초 설정

계정 생성 후 팀 프로젝트용 피그마를 사용한다면 피그마에서 먼저 팀을 만들어야 합니다. 팀명 또는 회사명을 입력한 뒤 프로젝트에 참여할 팀원을 초대합니다. 처음 사용 시 요금 플랜은 Free로 하시면 됩니다. Free는 기본적으로 2명까지 협업할 수 있는 Edit 권한을 부여할 수 있도록 하고 있습니다. 따라서 무료로 먼저 사용해 보신 후 피그마의 효용성을 느끼신 뒤 유료플랜으로 업그레이드하시는 것을 추천해 드립니다.

3) 에디터 살펴보기

에디터는 툴바, 레이어 패널, 캔버스, 속성 패널 4가지로 구성되어 있습니다. 각 패널의 기능을 살펴보겠습니다.

- 툴바

툴바(최상단 위치)

툴바(Toolbar)에서는 파일의 환경을 설정할 수 있고, 요소를 만드는 다양한 도구와 기능들이 담겨 있습니다. 캔버스에서 어떤 것을 선택했느냐에 따라 그 구성이 달라지기도 합니다.

툴바 메뉴 ( 피그마 로고 클릭 시 오픈)

툴바 메뉴는 피그마 로고 클릭 시 열립니다. 메뉴를 보면 많은 기능들을 확인할 수 있는데요 대표적인 기능 몇 가지만 신경 쓰시면 됩니다.

File을 클릭해서 새로운 캔버스를 열 수 있고, Sketch 파일 또는 이미지 파일을 불러올 수 있습니다. 또한, Figma에서 작업 후 해당 작업본을 백업하시고자 할 경우 .fig 파일 또는 pdf 파일로 저장할 수 있습니다.

기본 툴 - 1(좌측)

요소를 만들 때 쓰이는 기본툴입니다. 상단에 있는 기본 툴 6가지에 대해 간단히 설명드리도록 하겠습니다.​

① Move: 기본 상태 툴로 요소 선택 이동 시 사용됩니다.

② Frame: 프레임 생성 후 그 위에 도형 등을 적용할 수 있습니다.

③ 도형툴: 사각형이 기본 상태입니다. 선, 세모, 별들로 타입을 변경해서 사용할 수 있습니다.

④ 펜툴: 펜툴을 선택해 정형화된 네모, 세모가 아닌 직접 원하는 모양을 그릴 수 있습니다.

⑤ Text: 글자박스 생성새 글자를 입력할 수 있습니다.

⑥ Hand Tool: 편집 모드에서 벗어나 큰 캔버스를 둘러볼 수 있도록 해줍니다.

기본 툴 - 2(우측)

① Multiplayer: 이 파일에 접속한 유저들의 프로필이 표출됩니다. 디자이너, 개발자가 이 캔버스를 함께 보고 있을 때 프로필이 여러 개 나타납니다.

② Share: 이메일을 입력하거나 URL을 공유해 View, Edit 권한 부여 및 초대할 수 있습니다.

③ Commnets : 캔버스 내에 모바일 목업이나 도형이 그린 뒤 코멘트를 등록해 등록해서 클라이언트나 타 작업자들과 소통할 수 있습니다.

④ Present: 프레젠테이션 뷰로 연결 화면들을 볼 수 있습니다.

⑤ View Setting: 캔버스를 확대 및 축소할 수 있고 Multiplayer들의 커서를 히든 처리할 수 있습니다. 디자이너, 개발자 등이 함께 화면을 볼 때 커서도 그 만큼 함께 늘어나게 됩니다. 이럴 경우 내 커서만을 보고자 할 경우 뷰 셋팅 옵션에서 커서 히든 처리를 해 주시면 됩니다.

이번에는 캔버스의 왼쪽에 위치한 레이어 패널에 대해 알아보겠습니다.

레이어 패널

레이어 패널 - 1

좌측을 보면 레이어(Layer) 탭, 에셋(Assets) 탭, 현재의 페이지를 나타내고 있는 페이지명, 하단에 페이지 리스트, 레이어 리스트가 있습니다.

① Pages: 페이지 리스트 (페이지들의 순서와 이름 변경이 가능합니다.)

② 페이지명 : 현재 보고 있는 페이지명이 표출됩니다. 01_Front, 02_Admin 등과 같이 페이지를 여러 개 생성했을 때 그 중 현재 어떤 페이지를 볼 지 선택하면 해당 페이지가 나타나게 됩니다. 보통 page1으로 표시됩니다.

③ 레이어 리스트: 탑을 쌓듯, 요소들(프레임, 도형, 텍스트 등)의 레이어층들의 순서 확인이 가능합니다.

④ 페이지 영역에서 우측 마우스를 클릭 후 Copy link to page를 클릭하면 해당 페이지 url이 복사됩니다. 페이지가 여러 개일 때 특정 페이지의 URL을 공유할 때 사용해주시면 됩니다.

에셋(assets) 탭

에셋 탭에서는 라이브러리 관리가 가능합니다. 즉, 컴포넌트를 관리하는 영역인데요. 지금은 기본 기능에 대해 살펴보고 있기 때문에 간단히 살펴보고 뒷부분의 고급 기능 사용에서 자세히 알려드리도록 하겠습니다.

① 검색: 키워드를 입려해 컴포넌트들을 검색할 수 있습니다.

② 보기: 그리드 보기 또는 리스트 보기 중 선택할 수 있습니다.

③ 팀 라이브러리: 현재의 컴포넌트를 다른 프로젝트에도 함께 사용할 수 있도록 팀 라이브러리에 등록할 수 있습니다.

④ 로컬 컴포넌트: 현재 파일에서 만든 컴포넌트 리스트를 볼 수 있습니다.

⑤ 라이브러리 컴포넌트: 팀 라이브러리에서 가져온 컴포넌트의 리스트를 볼 수 있습니다.

이렇게 피그마의 장점과 기본 화면 중 에셋 부분까지 살펴 보았는데요. 다음 시간엔 우측 '속성 패널'부터 확인해보도록 하겠습니다.:)

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

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

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