안녕하세요. 오늘은 UI/UX의 기본 개념과 디자인 툴로 많이 쓰이는 피그마를 소개하는 글을 작성해보려고 합니다. IT 기업에 다니거나, 서비스를 기획하는 분들이 강조하는 개념으로 UX/UI가 있습니다. UX는 User Experience의 줄임말로 사용자가 어떤 시스템이나 제품, 서비스를 직접적으로, 혹은 간접적으로 느끼고 생각하게 되는 총체적 경험을 의미합니다. 그렇다면 UI는 무엇의 줄임말일까요? 하단에서 함께 살펴보겠습니다.
1. UI (User Interface)란 무엇인가요?
UI는 User Interface의 줄임입니다. 사용자가 무언가를 하기 위한 도구라고 생각하시면 됩니다. 다시 말해서, 사용자가 컴퓨터를 사용하기 위한 도구입니다. 폴더를 만드는 방법은 명령어를 통해 폴더를 만들거나, 그래픽 인터페이스를 활용해서 폴더를 만들 수도 있습니다. 여기서 디자인이 입혀진 방식으로 컴퓨터에게 명령을 입력하는 것이 그래픽 유저 인터페이스입니다. 모든 명령어를 외우지 않고도, 전문지식이 없이도 편하게 컴퓨터에게 명령을 내리고 사용자가 원하는 결과를 얻을 수 있습니다. 유저 인터페이스는 단순히 예쁘다고 좋은 것은 아니며, 예쁘면서도 편리하고 쉽게 기획해야 합니다.
2. UI 디자인 도구, 피그마 살펴보기
UI 디자인과 관련하여 다양한 도구가 존재합니다. 2017년 UX tools의 조사에 따르면, sketch, photoshop, illustrator의 순서로 디자이너들이 UX 도구를 많이 사용했습니다. 하지만, 2021년 이후로 figma(피그마)를 이용하는 유저가 67% 응답을 보이며, 사실상 피그마가 디자인 도구 시장을 독점하게 되었습니다.
먼저 피그마의 장점을 알아보겠습니다. 피그마는 웹 환경에서 작동합니다. 기존 프로그램은 컴퓨터에 다시 개별 프로그램을 설치하고, 만일 컴퓨터의 저장 디스크가 망가지면 데이터 복구에 어려움이 있었습니다. 하지만 피그마는 인터넷을 통해 작업한 내용이 실시간으로 저장되고, 사람들과 같은 작업물을 공유하면서 협업할 수 있습니다.
이뿐만이 아닙니다. figma는 실시간 협업, 버전 히스토리, 오토 레이아웃, 디자인 시스템, 다양한 폰트 스타일, 외부 플러그인 설치를 통한 다양한 기능을 제공하고 있습니다. 이 많은 기능을 거의 다 무료로 제공한다는 점에서 피그마는 아주 매력적입니다.
3. 피그마의 주요 기능 4가지
피그마는 크게 툴바, 레이어 패널, 프로퍼티 패널, 캔버스로 기능이 나뉩니다. 툴바는 새로운 요소를 생성하거나, 편집할 때 사용합니다. 레이어 패널은 현재 페이지에 있는 요소를 목록으로 보여주는 기능입니다. 프로퍼티 패널은 현재 선택된 속성을 편집하는 기능입니다. 마지막으로 캔버스는 툴바에 있는 모든 요소를 그릴 수 있는 도화지입니다.
툴바에서 기능 선택, 캔버스에서 모양을 그려주고, 프로퍼티 패널에서 크기나 색상을 넣으며 속성을 조절할 수 있습니다. 또한, 하나의 문서 안에서도 여러 개의 페이지를 만들 수 있습니다. 만일 캔버스에서 모양을 그릴 때 shift 키를 누른다면 정방향의 도형을 그릴 수 있고, 회전을 할 때 shift 키를 활용하면 15도씩 사물을 회전시킬 수 있습니다. 각 요소를 정렬시킬 때도 shift 키를 누른다면 일정한 간격으로 요소를 정렬할 수 있습니다. 요소 간의 간격을 확인하려면 윈도우는 alt, 맥으로는 option 키를 사용하면 됩니다.
4. 피그마 단축키
디자인은 시간과의 싸움이 많습니다. 예쁘면서도 신속한 작업을 위해서는 단축키를 최대한 활용하는 것이 작업의 효율성을 높여줍니다.
피그마의 단축키는 화면 우측 하단에 ? 버튼을 클릭하면 나오는 목록에서 Keyword shortcuts 버튼을 누르면 모든 단축키를 확인할 수 있는 탭이 나타납니다. 이번 글에서는 자주 쓰이는 단축키 몇 가지만 소개해보겠습니다.
| 기본 툴 | Windows | Mac |
| 선택/이동하기 | V | V |
| 텍스트 | T | T |
| 원 | O | O |
| 사각형 | R | R |
| 프레임 | F | F |
| 편집 | Windows | Mac |
| 복사하기 | Ctrl + C | Cmd + C |
| 오려두기 | Ctrl + X | Cmd + X |
| 붙여넣기 | Ctrl + V | Cmd + V |
| 복사 & 붙여넣기 | Ctrl + D | Cmd + D |
| 이름 변경 | Ctrl + R | Cmd + R |
| 속성 복사하기 | Alt + Ctrl + C | Option + Cmd + C |
| 속성 붙여넣기 | Alt + Ctrl + V | Option + Cmd + V |
5. 무료 이미지를 활용한 피그마 사용
저작권을 무료로 사용할 수 있는 좋은 사이트가 몇개 있습니다. 그 중 하나는 Unsplash.com 입니다. 사이트에 접속해서 좋은 퀄리티의 사진을 저작권 걱정없이 사용할 수 있습니다. 원하는 사진의 단어를 검색하여 사용하면 됩니다. 간혹 어떤 사진은 저작권 명시가 필요한 경우가 있습니다. 그 경우에는 Unsplash 저작권 설명에 따라 활용하시면 됩니다.
※ 해당 글은 코드잇(codeit)의 [UI 디자인 기초] 강의 내용에서 참고하여 작성하였습니다.