피그마를 사용하게 된 계기
2022년 1월 말쯤 아이디어 해커톤에 참여하게 되었었는데 아쉽게도 우리 팀원 중에 디자이너가 없었다. 그나마 나는 포토샵을 어느정도 할 줄 알았기에 프론트엔드 겸 디자인을 맡았었다. 하지만 디자인을 배워 본 적이 없기 때문에 막막하던 찰나 팀원 덕분에 피그마를 알게 되었고, ui/ux에 대하여 배워보는게 도움이 될 것이라 생각하여 사용하게 되었다.
UI란 user interface로 사용자가 앱을 사용 할 때 마주하는 디자인, 레이아웃, 기술적인 부분이다.
디자인의 구성 요소인 폰트, 색깔, 줄간격 등 상세한 요소가 포함되고, 기술적 부분은 반응형이나 애니메이션 등이 포함되며 사용자가 사용 할때 큰 불편함이 없이 만족도를 높여야한다.
UX는 User eXperience의 약자로 앱을 주로 사용하는 사용자들의 경험을 분석하여 더 편하고 효윻적인 방향으로 프로세스가 진행될 수 있도록 만드는 것이다. UX는 통계자료, 데이터를 기반으로 앱을 사용하는 유저들의 특성을 분석하여 상황과 시점에 맞도록 변화 시킬 수 있어야한다.
피그마란?
웹기반 UI/UX 디자인 및 프로토타이핑툴로 설치가 따로 필요하지 않아 인터넷이 가능한 곳이면 어떤 운영체제를 사용하던지 동일하게 작업 할 수 있다. 또한 따로 저장이 존재하지 않으며 작업을 하는 순간 순간 자동 저장이 된다는 특징이 있다.
기능
1. 다양한 프레임
좌측 상단 우물정자 표시의 아이콘을 누르면 폰, 태블릿, 데스크탑 등등의 프레임을 선택 할 수 있다.
*포토샵을 사용 할 때는 일일이 기기의 크기를 찾아보곤 했는데 그럴 필요가 없어졌다는게 너무 편했다.
2. 동시 작업
포토샵으로 작업을 할때에는 완성하고 파일을 보내면 수정할 사안을 따로 전달받아 다시 작업을 해야한다는게 너무 불편했다. 하지만 피그마를 사용하면 링크를 카카오톡으로 공유 받아 같이 작업을 진행하여 상대의 마우스 커서가 어디있는지, 어느 부분을 수정하는지를 실시간으로 볼 수 있다는 점이 가장 큰 이점인것 같다.
3. 폰트의 다양성
구글폰트(900여 개 이상의 무료폰트)를 다운받지 않고 활용할 수 있어 협업 과정에서도 별도로 설치하지 않아도 되고, 폰트 때문에 글씨가 깨지거나 사라지는 일이 없다. 또한 사용자가 별도로 보유하고 있는 폰트도 적용 할 수 있다.
4. 재사용이 가능한 컴포넌트
수정이 필요 할 때 마다 모든 페이지를 다 열어서 버튼의 색을 바꾸는 번거로움이 있었는데 피그마에서는 많이 사용하는 요소들을 컴포넌트로 묶어 메인 컴포넌트만 수정하면 되는 효율성을 가졌다.
5. 개발 툴바
개인적으로 개발 툴바 기능에 너무 놀랐었다.또한 마우스 툴바로도 수치 값을 확인 할 수 있다는 점이 디자이너 뿐만 아닌 개발자들의 관점에서도 신경을 되게 많이 쓴 페이지라고 생각이 들었다.
마무리
이외에도 직관적인 UI에 처음 피그마를 접하는 나도 이것 저것 만져보니 금세 익숙해졌었다. 디자인은 아직 나에게 너무 어렵지만 피그마를 경험함으로써 꼭 UI/UX가 디자이너에게만 한정되는 영역은 아닌것 같다는 생각이 들었다. 피그마를 통해 아직 경험해보지 못한 zeplin 기능이나 스크롤 기능 등 여러가지를 공부 할 예정이다.
