피그마(Figma) 학습 정리

디자인 협업 도구인 피그마(Figma)를 학습하며, 기본 개념부터 실제 사용 사례까지 이해하게 되었다. 학습 과정에서 다룬 주요 항목과 그 내용을 정리해보려한다.

1. 피그마 개념과 인터페이스

피그마는 클라우드 기반의 디자인 및 프로토타이핑 도구로, 실시간 협업이 가능한 것이 가장 큰 특징이다. 기본적으로 웹 브라우저에서 실행되며, 로컬 애플리케이션으로도 사용 가능하다.
피그마의 인터페이스는 크게 왼쪽의 레이어 패널, 중앙의 작업 공간, 그리고 오른쪽의 속성 패널로 구성된다. 각 패널은 직관적으로 배치되어 있어 초보자도 쉽게 익힐 수 있었다.

2. 피그마 기본 기능과 단축키

피그마의 기본 기능으로는 프레임 생성, 도형 도구 사용, 텍스트 추가, 그리고 컴포넌트 생성이 있다.
단축키는 작업 속도를 크게 향상시켰으며, 자주 사용한 단축키는 다음과 같다.

F: 프레임 생성
T: 텍스트 추가
Shift + R: 눈금자 활성화
Alt + 드래그: 오브젝트 복제
이 외에도 자주 사용하는 단축키를 숙지하면서 효율적으로 디자인 작업을 진행할 수 있었다.

3. UI의 요소 이해하기

UI 디자인에서 각 요소의 역할을 이해하는 것이 중요했다.

프레임(Frame): 화면의 캔버스 역할을 하며, 특정 화면 크기를 설정하는 데 사용했다.
컴포넌트(Component): 재사용 가능한 요소를 정의할 수 있어 일관된 디자인을 유지하는 데 유용했다.
그룹(Group): 요소를 묶어 정리하고 관리하기 편리했다.
이러한 UI 요소를 활용하며 디자인의 구조와 일관성을 유지하는 방법을 배웠다.

4. 와이어프레임 그리기 01: 메인 페이지 (feat. 아이콘 플러그인)

메인 페이지의 와이어프레임을 설계하며, 아이콘 플러그인을 사용하여 효율적으로 작업했다.
아이콘 플러그인은 필요한 아이콘을 검색하고 삽입할 수 있어 시간을 절약해 주었다.
단순한 레이아웃 구성과 주요 메뉴 배치를 통해 초기 화면의 사용자 경험을 설계했다.

5. 와이어프레임 그리기 02: 상세 페이지 (feat. 오토레이아웃)

상세 페이지에서는 오토레이아웃(Auto Layout) 기능을 활용했다.
오토레이아웃을 사용하면 요소 간의 간격을 유지하며, 콘텐츠 크기가 변경되어도 레이아웃이 자동으로 조정되었다.
이를 통해 가독성이 높은 상세 페이지 디자인을 만들 수 있었다.

6. 와이어프레임 그리기 03: 검색탭

검색 탭의 와이어프레임에서는 사용자의 검색 경험을 최적화하는 데 초점을 맞췄다.
검색창과 검색 기록을 배치하며, 간결하면서 직관적인 인터페이스를 설계했다.
사용자의 검색 기록 요소하고 UI를 구성하는 방법을 학습할 수 있었다.

7. 피그마 활용하여 기획안 만들기

최종적으로 배운 내용을 바탕으로 피그마를 활용한 기획안을 제작했다.
프로젝트의 핵심 아이디어를 시각적으로 표현하고, 와이어프레임과 플로우를 포함한 완성도 높은 기획안을 만들 수 있었다.
피그마는 협업을 염두에 둔 도구로, 기획 단계에서도 팀원과 실시간으로 피드백을 주고받는 데 큰 장점을 제공했다.

마무리

이번 피그마 학습을 통해 디자인 도구로서의 피그마의 강력한 기능과 효율성을 체감할 수 있었다. 특히 오토레이아웃과 컴포넌트의 중요성을 깨달았다. 앞으로 실전 프로젝트에 이를 적용해 더 나은 결과물을 만들어낼 수 있을 것이라 확신한다.