※ 본 게시글은 필자의 개인 경험을 토대로 작성된 것으로, 잘못된 정보를 포함하고 있을 수 있습니다. ※
우리가 흔히 어떠한 웹 사이트를 개발하거나 서비스를 기획 중이라면, 해당 서비스의 대략적인 기능을 나타내는 UI/UX를 그려 볼 필요가 있다. 예를 들어 SNS와 같은 서비스를 개발한다고 가정해 보자. 전반적인 SNS 웹 사이트 화면이 있을 것이고 메시지 전달 화면(메시지를 주고 받는 메신저 기능), 회원가입/로그인 화면 등이 존재할 것이다.
일반적으로 우리가 특정한 서비스를 개발하기 전에는 그 서비스에 대하여 스토리보드를 그려서 서비스에 대한 대략적인 기능이 한 눈에 들어오도록 표현하곤 한다. 이러한 스토리 보드가 없다면, 개발자 입장에서는 서비스의 기획이 매우 추상적이고, 구체적이지 않게 느껴지곤 한다.
그렇다면 어떤 기능을 사용하여 스토리보드를 그리게 될까? 많은 기업에서는 PPT를 이용하여 웹 사이트 디자인 초안(스토리보드)를 전달하곤 한다. 다만, 다소 정해진 틀에 맞게 슬라이드에 화면 UI 및 동작 과정(플로우)를 나타내야 하기 때문에 이는 불편함을 줄 수 있다.
그래서 피그마(Figma)를 사용할 수 있다. Figma는 실시간으로 동료와 함께 디자인 작업을 할 수 있는 도구다. 우리가 흔히 Google Docs를 사용하여 실시간으로 다른 사람과 함께 문서를 작성할 수 있는데, 피그마는 실시간으로 다른 사람과 함께 디자인 작업을 할 수 있도록 해준다.
피그마 웹 사이트에 접속해 보자.
▶ 피그마(Figma): https://www.figma.com/
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
※ 회원가입 및 로그인 방법 ※
피그마(Figma) 웹 사이트에 접속한 뒤에, 다음과 같이 [Log in] 버튼을 클릭하면 피그마를 시작할 수 있다.
필자의 경우, 계정이 없어서 다음과 같이 [Creat account] 버튼을 클릭하여 회원가입을 진행할 수 있다.
이후에 다음과 같이 메일이 전송되는 것을 확인할 수 있다. 이메일 인증을 마치고 나면, 다음과 같이 Figma에 접속하여 이후에 [Verify email]를 클릭하면 된다.
이메일 인증을 완료한 뒤에는 (1) 사용자 이름, (2) 자신의 역할(개발자 등), (3) 사용 목적에 대하여 명시한 뒤에 [Next] 버튼을 누른다. 필자의 경우 "Software development"와 "For personal use"를 선택하였다. 이후에 함께 작업하고 있는 사람을 초대하여 진행할 수 있는데, 일단 [Skip this step] 버튼을 눌러 빠져 나올 수 있다.
이후에 플랜(plan)을 선택하여 어떤 방식으로 사용할 것인지 명시할 수 있다. 필자의 경우 [Start for free] 버튼을 눌러 무료로 사용할 수 있도록 하였다.
다음과 같이 [Design with Figma] 버튼을 누르면 피그마(Figma)를 이용하여 실질적으로 디자인 작업을 진행 할 수 있다.
이어서 원하는 템플릿을 선택할 수 있는데, 필자는 다음과 같이 [Desktop]를 클릭했다.
※ 피그마를 이용해 디자인 해보기 ※
피그마에서 프로젝트를 실행하면 다음과 같은 전체 화면을 확인할 수 있다. 이제 그림판에 그림을 그리듯이, 이러한 화면에 (1) 다양한 도형, (2) 텍스트, (3) 코멘트(comment) 등을 삽입하여 화면 디자인을 꾸밀 수 있다. 처음에는 익숙하지 않을 수 있는데, 필자의 경우 몇 번 사용해 보니까 상당히 익숙하게 사용할 수 있었다.
다음과 같이 텍스트를 삽입하는 것도 가능하다.
다음과 같이 다양한 도형을 추가할 수도 있다.
※ 다른 사람과 함께 작업하기: 상태(Status) 인증하기(Verification) ※
원한다면, 다른 사람과 함께 동시에 피그마(Figma)에서 작업하는 것도 가능하다. 디자인 작업을 공유할 수 있다는 것인데, 이것은 매우 강력한 협업 도구가 된다. 참고로 다른 사람과 함께 작업할 때, [Verify status]를 클릭할 수 있다.
필자는 다음과 같은 명령어를 입력하여 간단하게 인증을 완료했다.
I want to teach how to design application (website) mock-ups for my students.
결과적으로 다음과 같이 교육(education) 목적으로 Figma를 시작할 수 있게 되었다.
※ 다른 사람과 함께 작업하기 ※
실제로 하나의 프로젝트를 만들어서 다른 사람과 함께 동시에 작업할 수 있는데, 다음과 같은 화면을 확인할 수 있다.
