피그마 입문

1. 피그마 소개

디자인부터 개발 핸드오프까지 하나의 툴로 해결하는 강력한 UI/UX 디자인 협업 툴

• 핵심 특징
  • 실시간 협업: 동시에 여러 작업자가 한 화면에서 소통하며 작업 가능.
  • 올인원 워크플로우: 아이데이션, 와이어프레임, UI 설계, 프로토타이핑, 개발 핸드오프를 모두 지원.
• 주요 구성 및 설치
  • 데스크톱 앱/웹 가능
  • 폰트 인스톨러: 피그마 웹 브라우저 환경에서 로컬 폰트를 사용하기 위해서는 추가해야 함.(데스크톱 앱은 설치 불필요)

2. 디스플레이 해상도와 배수의 이해

• 픽셀(Pixel): 디스플레이를 구성하는 가장 작은 사각형 칸.
• 해상도(Resolution): 화면 내 가로 세로 픽셀의 개수 (선명도의 기준).
• 픽셀 배율(Device Pixel Ratio): 1배수 디자인을 기기 사양에 맞춰 확대해 주는 배율.

• 작업 표준 원리
  • 1배수 디자인: 실제 기기 해상도(예: 아이폰 15 프로 1179  2556) 대신, 1배수 기준인 뷰포트 사이즈를 기준으로 디자인한 뒤 배율을 적용해 개발에 전달.

3. 이미지 표현 방식: 벡터와 래스터

컴퓨터가 그림을 그리는 두 가지 데이터 처리 방식과 UI 디자인에서의 활용 차이

• 래스터 (Raster / 비트맵)
  • 원리: 픽셀 칸에 색상 정보를 하나씩 채우는 방식. (대표 툴: 포토샵 / 확장자: JPG, PNG, GIF)
  • 특징: 고해상도 및 화려한 이미지 표현에 유리하나, 확대/축소 시 색상 정보가 소실되어 이미지가 '깨지는(열화)' 현상 발생.
• 벡터 (Vector)
  • 원리: 그림을 수학적 함수와 코드로 표현하는 방식. (대표 툴: 피그마, 일러스트레이터 / 확장자: SVG)
  • 특징: 수식 기반이므로 확대/축소 등 크기 변형이 완전히 자유로움. 단, 이미지가 복잡해지면 수식이 무거워져 파일 용량이 커질 수 있음.

4. 8포인트 그리드 시스템

디자이너와 개발자 간의 빠른 소통과 일관성 있는 화면 배치를 위한 UI 레이아웃 규칙

• 핵심 원리
  • UI 요소의 크기(너비/높이), 간격, 여백 등을 설정할 때 수치를 8의 배수 단위로 제한하여 사용하는 규칙. 
• 8의 배수를 쓰는 이유
  • 디스플레이 배율 분기점(1.5, 2, 3, 4)을 곱하거나 나눌 때 소수점이 남지 않고 깔끔한 정수로 떨어짐.
    2*2*2이므로.. 아름다운 숫자
• 활용 효과
  • 임의의 수치 사용을 줄여 디자인 예측 가능성을 높이고, 화면 설계 및 개발 구현 속도를 극대화함.
  • 디자이너, 개발자 간 소통이 용이해짐. 실무에선 4배수 많이 활용. 2배수 함께 활용하기도.

5. 피그마 인터페이스 및 기본 제어 (이동과 크기 조정)

피그마 에디터 화면의 구조와 개체를 다루는 기초 도구의 올바른 사용법

• 인터페이스 구조
  1. 도구 메뉴(Toolbar): 이동, 도형, 텍스트 등 주요 도구 배치.
  2. 좌측 패널: 페이지(Pages) 및 레이어(Layers) 탐색.
  3. 우측 패널: 디자인 속성 정의 및 개발자 모드(Inspection) 지원.
• 핵심 도구 비교
  • 이동 툴 (Move / 단축키 V): 기본 커서 상태. 개체를 선택·이동하거나 가장자리를 잡아 늘릴 때 사용. (단, 프레임 크기를 늘리면 내부 요소가 찌그러질 수 있음)
    핸드 툴 = space + drag
  • 크기 조정 툴 (Scale / 단축키 K): 개체의 비율을 고정한 채 전체적인 크기 및 내부 속성(폰트 크기, 선 두께 등)까지 한꺼번에 비례하여 키우거나 줄일 때 사용. 다만 홀수가 만들어질 수 있어 잘 사용하지 않음. 

6. 도형, 글자 만들기 및 레이어 구조

UI 구성 요소를 생성하고 화면의 깊이감과 정렬을 제어하는 방법

• 개체 만들기
  • 도형 도구: 사각형(R), 다각형 등을 드래그하여 생성. Shift를 누른 채 드래그하면 정정사각형/정원형 생성 가능.
  • 텍스트 도구(T): 화면을 클릭하여 글자 입력창 생성. 텍스트 입력 안 하면 사라짐. 주의!
• 레이어(Layer)와 Z축 구조
  • 요소를 생성하면 좌측 레이어 패널에 쌓임. 패널의 위쪽에 있을수록 화면에서 사용자 눈과 가까운 앞쪽에 위치함.
  • 개발 협업 표현: 가로, 세로와 함께 화면의 앞뒤 겹침 순서를 정하는 수직 높이를 개발 용어와 통일하여 z-index(또는 Z값)라고 부름.

7. 패스(Path)와 파일 관리 (추출 및 백업)

벡터 개체의 편집 원리와 완성된 자산을 저장하고 내보내는 방법

• 패스와 펜 툴
  • 패스(Path): 벡터 형식으로 된 모든 개체라고 보면 됨.
  • 펜 툴 (Pen / 단축키 P): 시작점을 찍고 다음 점을 누른 채 드래그하여 곡선과 직선이 조합된 자유로운 형태의 벡터 모양을 편집할 수 있음
• Outline, Flatten
  • Outline: 도형의 선을 stroke가 아닌 하나의 면으로 바꿈.
  • Flatten: 도형의 각도,  conor radius 등 속성 편집 후 그것을 고정함.
• 패스파인더 비슷한 기능 
  • Union, Subtract, Intersect, Exclude, Flatten 
• 파일 백업 원리
  • 피그마는 클라우드 기반으로 실시간 자동 저장(서버 동기화)을 지원함.
  • 필요 시 로컬 백업 파일 생성을 위해 Save local copy 기능을 사용 .fig 확장자 파일로 내 컴퓨터에 안전하게 보관 가능.