UX UI 서비스 기획자를 위한 Figma interface 알아보기

Figma의 전반적인 기능에 대해 알아보기

Figma 사이드바 기능에 대해 알아보자.

Figma 왼쪽에는 현재 화면에 있는 정보를 오른쪽에는 현재 화면을 제어하는 상태 값의 정보를 알려준다. 즉 Figma의 왼쪽 사이드바는 layer를 편집하고 오른쪽 사이드바에서는 디자인적인 요소를 수정하는 역할을 한다. 프로토타입 패널은 화면이 완성되었을 때, 어떤 형상으로 보일지 미리 구현해 볼 수 있는 패널로 동적인 효과를 부여할 수 있다. 피그마는 공유가 편하고 여러 사용자가 동시 접속하여 작업을 함께 할 수 있고 의견을 공유할 수 있는 굉장한 장점을 갖고 있다. share 버튼을 선택하면 다른 뷰어나 편집자를 초대할 수 있고, 링크로 파일 공유가 가능하다. 또한 파일 owner를 변경할 수 있고, 파일 권한을 설정할 수 있다. 초대한 참여자의 접근을 제한 할 수 있고 파일의 저장도 제한 할 수 있다.

UX 기획자가 알아야 하는 UI 기술지식에 대해 알아보자.

screen size는 화면의 대각선 길이이고, 단위는 인치이다. 해상도는 화면의 픽셀 수 이다. 화소 밀도는 1인치에 들어가는 픽셀 수이며 PPI 단위로 나타낸다. 화소 밀도가 높을수록, 즉 픽셀 수가 높을수록 화면이 선명해진다. 스크린 크기와 해상도, 화소 밀도는 정비례하지 않고 단말마다 다르다. 안드로이드 단말에서 기본 크기가 있고, 텍스트에서 사용하는 단위가 있고 IOS 단말에서 사용하는 단위가 있다. 8px 그리드는 모든 디바이스에서 픽셀이 깨지지 않고 개발 친화적인 디자인을 할 수 있다. 그러므로 디자인 요소들의 크기는 8의 배수로 결정하는 게 좋고, 이미지가 깨지지 않고 깔끔하게 반영된다. Figma에서 모든 요소인 도형, 글자, 이미지, 내비게이션은 이미 만들어 놓은 UI 컴포넌트들을 포함하여 모두 박스 영역 안에 들어 있는 요소이다. 이들 콘텐츠와 선 사이의 간격은 패딩, UI 요소 사이의 간격은 margin이라고 부른다. 예를 들어서 도형과 도형 양옆 간격은 margin, 버튼에서 텍스트와 버튼이 눌리는 여백은 패딩이다.

Figma를 활용하면 좋은 점에 대해 알아보자.

피그마는 21년에 실시한 UX tool 중에서 거의 모든 항목에서 1위를 차지했다. 피그마에서는 파일을 별도 저장할 필요 없이 웹에서 바로 디자인할 수 있다. 모든 개발 환경에서 지원이 가능하며, 계정에 접속만 하면 가장 최신 버전의 디자인에 접근하여 이미지를 다운받거나 수정할 수 있다. UX 기획자는 피그마를 활용하여 기획할 수 있다. 신규 변경될 기능을 flow 차트로 작업을 한다. 피그마 커뮤니티에서 다운받은 컴포넌트를 활용하여 auto flow 플러그인으로 연결하여 흐름도를 그린다. flow 차트를 토대로 상세 시나리오 보드를 작성한다. 피그마에는 여러 템플릿이 있는데, 기획 템플릿을 활용하여 시나리오 보드를 작성한다. 이미 디자이너가 그려놓은 와이어 프레임이 있기 때문에 크게 시간이 소요되지 않는다. 혹시 다른 기능과 연결되어 있는 페이지가 있으면 frame link를 활용하여 상세 설명을 삽입한다. 완성된 기획안을 비밀번호로 설정하여 팀원들한테 링크로 공유한다. 또한 변경 사항에 대하여 커버 페이지 옆에 change log 위젯을 사용하여 기록할 수 있다.