프로덕트 디자인

피그마(Figma) 기본 개념

suhyun-record 2025. 2. 18. 13:09

오늘은 피그마에 대해서 알아보려고 한다.


프로덕트 디자이너에 대해서 알아보면서 피그마는 프로덕트 디자이너에게 필요한 필수 프로그램으로, 다양한 장점을 가지고 있어서 실무에서 피그마를 주로 사용한다는 내용을 읽었다.

 

물론 프로그램은 지속적으로 변화하고, 다른 프로그램으로 시대의 흐름이 넘어갈 수도 있지만 현재 가장 많이 사용되는 프로그램은 피그마인 듯하니 최대한 빠르게 습득하도록 노력하자!

 

1. 피그마 소개

1-1) 피그마란?

  • 클라우드 기반 디자인 툴
    • 인터넷이 연결된 환경에서 브라우저만 있으면 어디서든 사용 가능
    • 별도의 설치없이 협업이 가능하며, 실시간 저장 및 공유 기능 제공
  • UX/UI 및 프로토타입 제작 도구
    • 웹 및 앱 UI 디자인, 인터랙션 디자인, 아이콘 제작 등 다양한 디자인 작업에 활용
    • 개발자와 협업 시 코드 스펙을 쉽게 공유 가능(스펙 | Spec, Specification | 이란, 개발자와 협업할 때 디자인 요소에 대한 구체적인 설명서를 의미. 디자인 속성을 개발자가 쉽게 확인할 수 있도록 CSS 코드, 크기, 색상, 폰트 정보 등을 제공) 

1-2) 피그마의 주요 장점

  • 협업 기능
    • 여러 사용자가 같은 파일에서 동시에 작업 가능
    • 실시간 코멘트 기능을 통해 디자인 피드백 용이
  • 버전 관리
    • 자동 저장 및 과거 기록 조회 기능 제공
    • 특정 버전으로 복구 가능하여 안전한 작업 환경 조성
  • 플러그인 지원
    • 다양한 플러그인을 활용하여 작업 효율을 극대화 할 수 있음
    • 예: 아이콘 검색, 이미지 리소스 가져오기, Lorem Ipsum 텍스트 생성 등 (로렘 입숨은 출판이나 그래픽 디자인 분야에서 폰드, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 디자인 모형 채움 글로도 이용) 
  • 멀티 플랫폼 지원
    • Windows, macOS, Linux에서도 사용 가능하며, 모바일 앱으로 프로토타입 테스트 가능

 

2. 피그마 인터페이스의 주요 구성요소

2-1) 주요 패널 및 기능

  • 상단 툴바_주요 도구
    • Select Tool (V) – 개체 선택
    • Frame Tool (F) – 프레임(아트보드) 생성
    • Shape Tool (R, O 등) – 사각형, 원 등 기본 도형 생성
    • Pen Tool (P) – 벡터 그래픽 생성
    • Text Tool (T) – 텍스트 삽입 및 스타일 지정
  • 좌측 패널_레이어 패널
    • 개체(프레임, 그룹, 도형 등)의 계층적 구조를 보여줌
    • 오브젝트의 순서를 조정하거나 그룹화하여 정리 가능
  • 좌측 패널_에셋 패널
    • 프로젝트에서 사용할 컴포넌트(재사용 가능한 UI 요소) 관리
  • 우측 속성 패널_주요 속성
    • 선택한 개체의 세부 속성을 설정하는 영역
    • 주요 속성: 크기 및 위치 / 채우기 색상 / 테두리 / 그림자, 블러 등 / 오토레이아웃 - 컴포넌트 정렬 및 반응형 디자인
  • 기타 기능
    • 팀원 간 피드백을 남기고 수정 사항을 기록할 수 있는 기능
    • 실시간 협업 환경에서 중요한 의사소통 도구
    • 파일 및 버전 관리(이전 버전 확인 및 히스토리 관리)

3. 피그마 실습

실습 1) 피그마 계정 생성 및 새 프로젝트 시작

  • 실습 단계
    1. 피그마로 '내 첫 피그마 프로젝트' 파일 만들기
    2. 인터페이스 탐색: 툴바, 레이어 패널, 속성 패널의 기본 구성 등 확인

실습 2) 인터페이스 탐색 및 기본 도구 연습

  • 실습 단계
    1. 툴바 탐색 : Select (V), Frame (F), Shape (R, O), Text (T) 등 주요 도구 클릭 및 사용해보기
    2. 레이어 패널 탐색 : 새로운 Frame 추가 후, 내부에 도형과 텍스트를 추가하여 계층구조 이해
    3. 속성 패널 탐색 : 개체 선택 후 Fill, Stroke, Shadow 등의 속성을 변경하며 기능 학습

실습 3) 기본 도형 제작 및 스타일 적용

  • 실습 단계
    1. 도형 그리기 : Shape (R, O) 사용하여 생성 후 위치 크기 조정해보기
    2. 스타일 적용 : Fill 색상 변경(단색, 그라데이션 적용) / Stroke 추가 및 굵기 조정 / Shadow 및 Blur 효과 추가하여 입체감 연출
    3. 텍스트 삽입 및 스타일링 : Text tool(T)을 사용하여 텍스트 추가 / 글꼴, 크기, 정렬, 간격 조절 실습

3. 유용한 단축키 익숙해지기(Mac 기준)

  • 피그마 강의를 들으면서 알게 된 주요 단축키에 대해서 정리해보고자 한다.
    • Shift + control + ? : Keyboard Shortcuts, 피그마 키보드 단축키 확인 가능
    • command + / : Quick actions, 검색 기능
    • Shift + command + <,> : Font size, 폰트 크기 조절
    • option + command + <,> : Font weight, 폰트 두께 조절
    • Shift + option + <,> : Line height, 행간 조절
    • option + <,> : Letter spacing, 자간 조절
    • option + command + L, T, R : 텍스트 정렬 왼쪽, 가운데, 오른쪽
    • option + WSAD : 오브젝트 상하좌우 정렬
    • 오브젝트 정렬 중앙(option + H, V) : 오브젝트 중앙 가로, 세로 정렬
    • 서식 복사 붙여 넣기(option + command + C, V) : 한번에 서식 복사, 붙여넣기
    • Shift + command + V : 서식에 붙여넣기, 텍스트를 복사해서 붙여 넣고자 하는 텍스트 더블클릭 후 선택된 상태에서 단축키 사용해 붙이면 서식에 붙여넣기 가능
    • Shift + X : 면과 선을 전환할 때 사용하며, 텍스트도 적용 가능
    • command + D : 제자리에서 단축키 사용시 같은 위치에 복제됨. 원하는 위치로 이동 복사한 후 해당 단축키 사용시, 여러번 반복 복제할 수 있음
    • alt + L : 좌측 패널 열린 레이어를 닫을 수 있음
    • command + \ : 양옆 패널 숨기기 
    • Shift + command + \ : 좌측 패널 숨기기 
    • Shift + E : 프로토타입 전환
    • option + command + K : 컴포넌트 만들기
    • option + command + B : 컴포넌트 해지(Detach)
    • Shift + command + " : Snap to pixel grid, 정수 및 소수 기반 작업할 때 껐다 켰다 사용
    • command + Y : 아웃라인 보기 
    • command + 1,2,3... : 파일 탭 이동
    • / : 커서 위치에 메시지 입력가능. 실시간으로 소통할 때 사용하는 기능으로 커서를 가만히 두면 메시지 사라짐



오늘은 피그마의 기본 개념과 간단한 실습, 그리고 유용한 단축키 정리까지 알아보았다.

아직 피그마와 친해지는 중이라 단축키도 버벅거리면서 사용중이지만, 자주 눈에 익히고 사용하다보면 자연스럽게 사용하는 때가 오겠지!


프로그램은 결국 많이 사용해봐야 익숙해지는 것 같다. 부트 캠프 수강 전까지 최대한 익숙해지기 위해 노력하자.

저작자표시 비영리 변경금지