웹 또는 앱 화면을 디자인하고 싶다면, 개발자보다 먼저 손에 쥐어야 할 도구는 UI/UX 디자인 툴입니다. 오늘은 전 세계 디자이너들이 사랑하는 Figma(피그마)를 이용해 초보자도 쉽게 UI/UX 디자인을 시작할 수 있는 방법을 소개합니다.
1. Figma란 무엇인가요?
Figma는 브라우저 기반의 디자인 협업 툴입니다. 설치 없이 웹에서 바로 사용 가능하며, 실시간 협업이 가능해 디자이너와 개발자, 기획자가 함께 프로젝트를 진행하기 좋습니다.
2. Figma 시작하기
- Figma 공식 웹사이트 접속
- 무료 계정 생성 (Google 계정 연동 가능)
- ‘New Design File’ 클릭하여 새 디자인 시작
3. 기본 용어와 구성 요소
- Frame: 디자인의 작업 공간 (화면 단위)
- Component: 반복해서 쓰는 UI 요소
- Prototype: 페이지 간의 인터랙션 연결
- Assets: 아이콘, 버튼 등 재사용 가능한 요소
4. 간단한 와이어프레임 만들기
- 좌측 도구 메뉴에서 ‘Frame’ 클릭 → iPhone 또는 Desktop 사이즈 선택
- Rectangle, Text, Button 요소를 배치
- 색상, 글꼴, 여백 조절하여 기본 구조 설계
5. 프로토타입 연결
- 오른쪽 상단 ‘Prototype’ 탭 클릭
- 버튼 → 다음 화면으로 드래그하여 연결
- ‘Present’ 클릭하면 실제 앱처럼 미리보기 가능
6. 공동작업 및 공유
Figma는 실시간 협업이 가능합니다. 상단 ‘Share’ 버튼 클릭 후 링크를 복사하면, 팀원과 함께 편집하거나 보기 전용으로 공유할 수 있습니다.
7. 피그마의 장점
- 설치 없이 웹 기반으로 실행
- 무료 요금제도 대부분의 기능 제공
- 실시간 협업 및 댓글 기능 내장
- 디자인 → 개발 연동 (코드 추출 기능)
8. 마무리
Figma는 초보자도 접근하기 쉬우면서도, 실무에서도 널리 사용되는 강력한 UI/UX 디자인 도구입니다. 이제 첫 화면을 설계해보며 사용자 중심의 사고를 디자인으로 표현해보세요.
다음 글에서는 Adobe Express를 활용해 SNS 콘텐츠를 제작하는 방법을 소개합니다.