피그마 시작하기 완벽 가이드

 

디자인을 시작하고 싶지만 어디서부터 시작해야 할지 막막하신가요? 피그마는 전문 디자이너뿐만 아니라 누구나 쉽게 사용할 수 있는 디자인 도구입니다. 웹 브라우저에서 바로 사용할 수 있어 별도의 프로그램 설치 없이도 시작할 수 있으며, 무료로 사용할 수 있는 기능만으로도 충분히 멋진 디자인을 만들 수 있습니다. 이 가이드에서는 피그마를 처음 사용하는 분들을 위해 가장 기본적인 내용부터 실전 팁까지 단계별로 설명하겠습니다. 피그마는 전 세계 수백만 명이 사용하는 디자인 도구로, 웹사이트, 모바일 앱, 아이콘, 로고, 프레젠테이션 등 다양한 디자인을 만들 수 있습니다. 특히 실시간 협업 기능이 뛰어나 팀 프로젝트에서 매우 유용하며, 모든 작업 내용이 자동으로 클라우드에 저장되어 어디서든 이어서 작업할 수 있습니다. 피그마의 가장 큰 장점은 접근성입니다. 어디서든 인터넷만 연결되면 작업할 수 있으며, Mac이나 Windows, 심지어 크롬북에서도 동일한 경험을 제공합니다. 또한 모든 파일이 클라우드에 저장되므로 컴퓨터가 고장 나거나 다른 기기에서 작업하더라도 언제든지 이어서 작업할 수 있습니다. 이는 기존의 디자인 도구들과는 차별화되는 큰 장점입니다. 피그마는 또한 무료로 시작할 수 있어 부담 없이 사용할 수 있습니다. 무료 플랜만으로도 개인 프로젝트나 소규모 팀에게는 충분한 기능을 제공하며, 유료 플랜으로 업그레이드하면 더 많은 협업 기능과 고급 기능을 사용할 수 있습니다. 이 글을 읽고 나면 피그마의 기본 기능을 완전히 이해하고, 나만의 첫 번째 디자인을 자신 있게 만들 수 있게 됩니다. 디자인에 대한 전문 지식이 없어도 걱정하지 마세요. 피그마는 직관적인 인터페이스로 설계되어 있어 처음 사용하는 분들도 쉽게 적응할 수 있으며, 다양한 튜토리얼과 커뮤니티 리소스를 통해 빠르게 배울 수 있습니다. 피그마 커뮤니티에서는 수많은 무료 템플릿과 디자인 리소스를 찾을 수 있으며, 이를 활용하면 더 빠르게 배울 수 있습니다. 이제 함께 피그마의 세계로 들어가 봅시다.

피그마 계정 만들기와 첫 화면 이해하기

피그마를 시작하려면 먼저 계정을 만들어야 합니다. figma.com에 접속하여 화면 오른쪽 상단의 "Sign up" 버튼을 클릭하면 가입 페이지로 이동합니다. 이메일 주소를 입력하거나 Google 계정, Apple ID를 사용하여 간단하게 가입할 수 있으며, 가입 과정은 매우 간단하고 빠르게 완료할 수 있습니다. 가입 시 이메일 인증이 필요할 수 있으니 이메일을 확인하여 인증을 완료하세요. 가입 후에는 무료 플랜으로 자동 시작되며, 개인 프로젝트나 소규모 팀에게는 충분한 기능을 제공합니다. 무료 플랜에서는 개인 파일을 무제한으로 만들 수 있고, 최대 3개의 팀 프로젝트를 만들 수 있으며, 기본적인 협업 기능도 모두 사용할 수 있습니다. 또한 무료 플랜에서도 플러그인을 사용할 수 있고, 프로토타입 기능도 사용할 수 있어 충분히 전문적인 디자인을 만들 수 있습니다. 계정을 만든 후에는 피그마의 메인 화면인 "Figma Desktop"에 접속하게 됩니다. 이 화면에서는 새 파일을 만들거나, 기존 파일을 열거나, 템플릿을 사용할 수 있습니다. 처음 시작하는 분들은 화면 중앙의 "New design file" 버튼을 클릭하여 빈 캔버스에서 시작하는 것을 추천합니다. 빈 캔버스는 마치 백지와 같아서 자유롭게 디자인을 그릴 수 있으며, 여기서부터 여러분의 창의성이 발휘될 수 있습니다. 템플릿을 사용하고 싶다면 "Browse templates"를 클릭하여 다양한 템플릿을 확인할 수 있으며, 웹사이트 디자인, 모바일 앱 디자인, 프레젠테이션 등 다양한 카테고리의 템플릿을 찾을 수 있습니다. 피그마의 인터페이스는 크게 세 부분으로 나뉩니다. 왼쪽에는 레이어 패널(Layers Panel)이 있어 작업 중인 모든 요소들을 계층적으로 확인할 수 있습니다. 이 패널에서는 각 요소의 이름을 변경하거나, 순서를 바꾸거나, 그룹화할 수 있으며, 눈 아이콘을 클릭하면 요소를 숨기거나 보이게 할 수 있습니다. 레이어는 폴더처럼 그룹화할 수 있어 복잡한 디자인도 체계적으로 관리할 수 있으며, 검색 기능을 사용하면 많은 레이어 중에서도 원하는 요소를 빠르게 찾을 수 있습니다. 중앙에는 캔버스(Canvas)가 있어 실제 디자인 작업을 하는 공간입니다. 이 공간에 도형을 그리고, 텍스트를 입력하고, 이미지를 배치하여 디자인을 만들어갑니다. 캔버스는 무한대로 확장할 수 있어 원하는 만큼 넓게 작업할 수 있으며, 줌 인/아웃 기능을 사용하여 세밀한 작업이나 전체적인 레이아웃을 확인할 수 있습니다. 마우스 휠을 사용하거나 Ctrl+마우스 휠로 줌을 조절할 수 있으며, 스페이스 바를 누른 채로 드래그하면 캔버스를 이동할 수 있습니다. 오른쪽에는 속성 패널(Properties Panel)이 있어 선택한 요소의 색상, 크기, 위치, 효과 등을 조정할 수 있습니다. 이 패널은 선택한 요소에 따라 자동으로 내용이 바뀌므로 직관적으로 사용할 수 있으며, 각 속성에 대한 설명도 마우스를 올리면 확인할 수 있습니다. 이 구조는 직관적이어서 처음 사용하는 분들도 쉽게 적응할 수 있으며, 각 패널의 기능을 하나씩 익혀가다 보면 자연스럽게 숙달될 수 있습니다.

기본 도구 사용법과 첫 디자인 만들기

피그마에서 디자인을 만들기 위해서는 기본 도구들의 사용법을 익혀야 합니다. 화면 상단의 툴바에는 자주 사용하는 도구들이 있으며, 각 도구는 단축키로 빠르게 접근할 수 있습니다. 프레임(Frame) 도구는 웹사이트나 앱의 화면을 만들 때 사용하며, 단축키는 F입니다. 프레임을 선택한 후 오른쪽 패널에서 아이폰, 아이패드, 데스크톱 등 다양한 기기의 화면 크기를 선택할 수 있으며, 사용자 정의 크기도 설정할 수 있습니다. 프레임 안에 요소들을 배치하면 실제 화면에서 어떻게 보일지 미리 볼 수 있어 매우 유용하며, 프레임은 여러 개를 만들어 다양한 화면 크기를 동시에 디자인할 수 있습니다. 사각형(Rectangle) 도구는 단축키 R로, 원(Ellipse) 도구는 단축키 O로, 텍스트(Text) 도구는 단축키 T로 사용할 수 있습니다. 또한 펜(Pen) 도구는 단축키 P로 자유로운 형태의 도형을 그릴 때 사용하며, 선(Line) 도구는 단축키 L로 직선을 그릴 때 사용합니다. 이제 실제로 간단한 버튼을 만들어보겠습니다. 먼저 사각형 도구를 선택하고 캔버스에 드래그하여 사각형을 그립니다. Shift 키를 누른 채로 드래그하면 정사각형을 만들 수 있으며, Alt 키를 누른 채로 드래그하면 중심에서부터 사각형이 그려집니다. 사각형을 선택한 상태에서 오른쪽 패널의 Fill 섹션에서 색상을 선택합니다. 색상 선택기는 다양한 방법으로 색상을 선택할 수 있으며, HEX 코드를 직접 입력하거나, 색상 팔레트에서 선택하거나, 화면의 어느 곳이든 색상을 추출할 수 있습니다. 예를 들어 파란색을 선택하면 버튼 배경이 파란색으로 바뀝니다. 이제 텍스트 도구를 선택하고 사각형 위에 클릭하여 "클릭하세요"와 같은 텍스트를 입력합니다. 텍스트를 선택한 후 오른쪽 패널에서 폰트 종류, 크기, 굵기, 색상 등을 조정할 수 있습니다. 텍스트 색상을 흰색으로 변경하면 버튼이 더 보기 좋아집니다. 버튼을 더 예쁘게 만들려면 사각형을 선택한 후 오른쪽 패널에서 Corner radius를 조정하여 모서리를 둥글게 만들 수 있으며, 각 모서리를 개별적으로 조정할 수도 있습니다. 또한 Effects 섹션에서 Drop shadow를 추가하면 그림자 효과를 줄 수 있어 버튼이 더 입체적으로 보입니다. 그림자의 색상, 투명도, 블러 정도, 위치 등을 세밀하게 조정할 수 있어 원하는 효과를 만들 수 있습니다. 이렇게 간단한 버튼을 만드는 과정을 통해 피그마의 기본 작업 흐름을 이해할 수 있으며, 이 과정에서 배운 것들을 활용하면 더 복잡한 디자인도 만들 수 있습니다. 각 도구의 기능을 하나씩 익혀가다 보면 자연스럽게 다양한 디자인 기법을 습득할 수 있으며, 실습을 통해 배운 내용을 확실히 내 것으로 만들 수 있습니다. 다양한 도구들을 조합하여 사용하면 더욱 창의적인 디자인을 만들 수 있으며, 피그마의 강력한 기능들을 활용하여 전문적인 결과물을 만들어낼 수 있습니다.

컴포넌트와 스타일로 효율적인 디자인하기

피그마에서 효율적으로 디자인을 만들기 위해서는 컴포넌트(Component)와 스타일(Style) 기능을 활용해야 합니다. 컴포넌트는 재사용 가능한 디자인 요소로, 한 번 만들면 여러 곳에서 사용할 수 있으며, 한 곳에서 수정하면 모든 곳에 자동으로 반영됩니다. 예를 들어, 버튼을 컴포넌트로 만들면 같은 버튼을 여러 곳에서 사용할 수 있고, 나중에 버튼의 색상이나 스타일을 변경하고 싶을 때 한 번만 수정하면 모든 버튼이 자동으로 업데이트됩니다. 이는 특히 대규모 프로젝트에서 매우 유용하며, 디자인 시스템을 구축할 때 핵심이 됩니다. 컴포넌트를 만들려면 요소를 선택한 후 오른쪽 상단의 "Create component" 버튼을 클릭하거나 단축키 Ctrl+Alt+K(Windows) 또는 Cmd+Option+K(Mac)를 누르면 됩니다. 컴포넌트로 만든 요소는 보라색 아이콘이 표시되며, 이 컴포넌트를 복사하여 사용하면 인스턴스(Instance)가 생성됩니다. 인스턴스는 원본 컴포넌트와 연결되어 있어 원본을 수정하면 모든 인스턴스가 자동으로 업데이트되지만, 일부 속성은 개별적으로 수정할 수 있어 유연하게 사용할 수 있습니다. 예를 들어, 버튼 컴포넌트의 텍스트는 각 인스턴스에서 다르게 설정할 수 있지만, 색상이나 스타일은 원본을 수정하면 모든 인스턴스에 반영됩니다. 또한 컴포넌트는 변형(Variant)을 가질 수 있어, 같은 컴포넌트의 여러 상태를 관리할 수 있습니다. 예를 들어, 버튼 컴포넌트에 기본 상태, 호버 상태, 비활성화 상태를 모두 포함시킬 수 있으며, 이를 통해 더 체계적으로 디자인을 관리할 수 있습니다. 스타일은 색상, 텍스트 스타일, 효과 등을 재사용할 수 있게 해주는 기능입니다. 예를 들어, 브랜드의 주요 색상을 스타일로 저장하면 나중에 같은 색상을 쉽게 사용할 수 있으며, 여러 디자이너가 작업할 때도 일관된 색상을 유지할 수 있습니다. 스타일을 만들려면 색상이나 텍스트를 선택한 후 오른쪽 패널에서 스타일 아이콘을 클릭하고 "Create style"을 선택하면 됩니다. 만들어진 스타일은 왼쪽 상단의 Assets 패널에서 확인할 수 있으며, 언제든지 재사용할 수 있습니다. 스타일은 이름을 명확하게 지어야 하며, 예를 들어 "Primary Blue"나 "Heading 1"과 같이 의미 있는 이름을 사용하면 나중에 찾기 쉽습니다. 컴포넌트와 스타일을 활용하면 디자인 작업이 훨씬 효율적이 됩니다. 특히 여러 페이지를 디자인할 때 같은 요소를 반복해서 만들 필요가 없어 시간을 크게 절약할 수 있으며, 일관된 디자인을 유지할 수 있어 더 전문적인 결과물을 만들 수 있습니다. 또한 디자인 시스템을 구축할 때도 컴포넌트와 스타일이 핵심이 되며, 이를 통해 팀 전체가 일관된 디자인을 만들 수 있습니다. 디자인 시스템은 재사용 가능한 컴포넌트, 스타일, 가이드라인의 모음으로, 팀 전체가 같은 디자인 언어를 사용할 수 있게 해줍니다.

실전 팁과 협업 기능으로 전문가 되기

피그마를 더 효율적으로 사용하기 위해서는 단축키와 실전 팁을 익혀야 합니다. 단축키를 활용하면 마우스 없이도 빠르게 작업할 수 있어 작업 속도가 크게 향상됩니다. 가장 자주 사용하는 단축키들을 알아보겠습니다. V는 선택 도구, F는 프레임 도구, R은 사각형 도구, O는 원 도구, T는 텍스트 도구, P는 펜 도구입니다. Ctrl+G(Windows) 또는 Cmd+G(Mac)는 선택한 요소들을 그룹화하고, Ctrl+Shift+G는 그룹을 해제합니다. Ctrl+D는 선택한 요소를 복제하며, Ctrl+/를 누르면 모든 단축키 목록을 확인할 수 있어 언제든지 새로운 단축키를 배울 수 있습니다. 정렬과 간격 조정도 단축키로 빠르게 할 수 있으며, Ctrl+Alt+H는 수평 정렬, Ctrl+Alt+V는 수직 정렬입니다. 그리드와 가이드를 활용하면 요소들을 일관된 간격으로 배치할 수 있으며, View 메뉴에서 Show Grid를 선택하면 그리드가 표시됩니다. 오토 레이아웃(Auto Layout)은 요소들 사이의 간격과 정렬을 자동으로 관리해주는 강력한 기능으로, 반응형 디자인을 만들 때 매우 유용합니다. 프레임을 선택한 후 오른쪽 패널에서 Auto Layout을 활성화하면, 프레임 안의 요소들이 자동으로 정렬되고 간격이 유지되며, 요소를 추가하거나 제거해도 자동으로 레이아웃이 조정됩니다. 피그마의 가장 큰 장점 중 하나는 실시간 협업 기능입니다. 파일을 공유하려면 오른쪽 상단의 "Share" 버튼을 클릭하고, 팀원의 이메일 주소를 입력하거나 링크를 생성하여 공유할 수 있습니다. 공유할 때는 권한을 설정할 수 있으며, 편집 권한, 댓글 권한, 보기 권한 등을 선택할 수 있습니다. 여러 사람이 동시에 같은 파일을 편집할 수 있으며, 화면에 다른 사람의 커서가 보여 실시간으로 작업 내용을 확인할 수 있습니다. 이는 Google Docs와 유사한 경험을 제공하며, 팀원들과 함께 디자인을 개선해나갈 수 있게 해줍니다. 댓글 기능을 사용하면 특정 요소에 피드백을 남길 수 있으며, 팀원들은 댓글에 답변하거나 해결 표시를 할 수 있습니다. 프로토타입 기능을 사용하면 디자인을 클릭 가능한 프로토타입으로 만들어 사용자 경험을 미리 테스트할 수 있으며, 프레임 간 연결을 설정하여 버튼을 클릭하면 다른 화면으로 이동하는 것처럼 동작하도록 만들 수 있습니다. 프로토타입은 클라이언트나 팀원들에게 디자인을 보여줄 때 매우 유용하며, 실제 앱이나 웹사이트처럼 동작하는 것을 보여줄 수 있습니다. 이러한 기능들을 활용하면 피그마를 훨씬 더 효율적으로 사용할 수 있으며, 전문 디자이너처럼 빠르고 정확하게 작업할 수 있습니다. 플러그인을 활용하면 작업을 더욱 효율적으로 만들 수 있으며, 피그마 커뮤니티에서 다양한 무료 플러그인을 찾을 수 있습니다.