피그마 처음 배울 때, 프레임과 오토 레이아웃부터 컴포넌트와 프로토타입, 협업과 개발 전달까지

앱이나 웹 화면을 디자인해 보려고 피그마를 켰는데, 상자를 하나씩 옮기다 보니 간격이 다 틀어지고 수정할 때마다 처음부터 다시 했던 적 있죠.

피그마는 웹 브라우저나 데스크톱 앱에서 화면 디자인, 프로토타입, 협업을 한 번에 할 수 있는 디자인 도구예요. 여러 사람이 같은 파일을 동시에 보고 댓글을 남길 수 있어서 팀 프로젝트에 많이 쓰여요. 요금제와 학생·교육용 혜택, 기능 범위는 바뀔 수 있으니 공식 누리집에서 확인하세요. 이 글은 처음 배우는 사람이 과제나 포트폴리오 화면을 완성할 수 있도록 기본 흐름을 정리했어요. 메뉴 이름은 업데이트에 따라 달라질 수 있어요.

📷 사진 1 피그마 작업 화면이 열린 노트북

Alt: 피그마 사용법

(이 상자를 내 사진으로 바꿔 주세요)

프레임과 레이어 구조

처음엔 누구나 손으로 하나하나 맞추다 지쳐요. 그 마음 충분히 이해해요. 핵심 기능 두세 개만 알면 작업 방식이 완전히 달라져요.

피그마 작업의 기본 단위는 프레임이에요. 휴대폰이나 데스크톱 크기 프레임을 만들고, 그 안에 버튼, 글자, 이미지 같은 요소를 넣어요. 레이어 패널에서 요소 이름을 정리하고 관련된 것끼리 묶어 두면 화면이 복잡해져도 찾기 쉬워요. 이미지 편집이 필요하다면 포토샵 글에서, 아이콘 같은 벡터 그래픽은 일러스트레이터 글에서 다룬 도구와 함께 쓰는 경우도 있지만, 간단한 도형과 아이콘은 피그마에서도 충분히 만들 수 있어요.

📷 사진 2 레이어 패널을 정리한 화면

Alt: 피그마 레이어 구조

(이 상자를 내 사진으로 바꿔 주세요)

오토 레이아웃 익히기

오토 레이아웃은 요소 사이의 간격과 정렬, 여백을 규칙으로 정해 주는 기능이에요. 버튼에 적용하면 글자 길이가 바뀌어도 버튼 크기가 자동으로 맞춰지고, 목록에 적용하면 항목을 추가해도 간격이 유지돼요. 처음에는 버튼 하나, 카드 하나에 적용해 보며 방향, 간격, 여백 설정이 어떻게 바뀌는지 확인하세요. 오토 레이아웃을 쓰면 반응형 화면을 만들 때도 수정이 훨씬 쉬워져요. 오토 레이아웃 안에 또 다른 오토 레이아웃을 넣는 방식으로 카드와 목록 같은 복잡한 구조도 만들 수 있어요.

📷 사진 3 오토 레이아웃이 적용된 버튼

Alt: 피그마 오토 레이아웃

(이 상자를 내 사진으로 바꿔 주세요)

컴포넌트와 스타일

버튼, 입력창, 내비게이션처럼 반복되는 요소는 컴포넌트로 만들어 두세요. 원본 컴포넌트를 고치면 복사해 둔 모든 곳이 함께 바뀌어서 일관성을 지키기 쉬워요. 상태가 여러 개인 버튼은 변형 기능으로 기본, 눌림, 비활성 상태를 한 곳에서 관리할 수 있어요. 색과 글자 크기는 스타일이나 변수로 등록해 두면 전체 화면의 톤을 한 번에 바꿀 수 있어요. 이것이 디자인 시스템의 출발점이에요.

프로토타입 만들기

화면을 다 만들었다면 프로토타입 모드에서 버튼과 다음 화면을 연결해 실제 앱처럼 눌러 볼 수 있어요. 화면 전환 효과와 스크롤 같은 동작도 설정할 수 있어요. 프로토타입을 친구나 팀원에게 보여 주고 어디서 헷갈리는지 관찰하면 UIUX 글에서 다룬 사용성 테스트를 간단히 해 볼 수 있어요. 처음부터 화려한 애니메이션보다 사용 흐름이 자연스러운지 확인하는 데 집중하세요.

📷 사진 4 버튼 컴포넌트 변형 모음

Alt: 피그마 컴포넌트

(이 상자를 내 사진으로 바꿔 주세요)

협업과 공유

피그마 파일은 링크로 공유하고 보기, 편집 같은 권한을 정할 수 있어요. 팀원은 댓글로 의견을 남기고, 작업자는 댓글을 해결 처리하며 수정 이력을 관리할 수 있어요. 공유 범위를 잘못 설정하면 외부에 노출될 수 있으니 링크 권한을 꼭 확인하세요. 페이지를 시안, 확정, 아카이브처럼 나눠 두면 여러 사람이 작업해도 최종본을 헷갈리지 않아요.

📷 사진 5 화면을 연결한 프로토타입 흐름

Alt: 피그마 프로토타입

(이 상자를 내 사진으로 바꿔 주세요)

개발자에게 전달하기

개발 단계에서는 개발자가 요소의 크기, 간격, 색 값, 글꼴 정보를 확인하고 이미지와 아이콘을 내보낼 수 있어요. 앱개발 글이나 프론트엔드 글에서 다룬 개발 과정과 맞추려면 컴포넌트 이름과 색 이름을 일관되게 짓고, 화면별 동작 설명을 댓글이나 메모로 남겨 두세요. 디자인과 실제 구현이 다를 수 있으니 개발 결과를 함께 확인하는 시간을 정해 두는 것이 좋아요.

연습 과제와 포트폴리오

기본 기능을 익혔다면 자주 쓰는 앱 화면 하나를 따라 만들고, 그다음 나만의 작은 서비스 화면 세 개를 기획부터 프로토타입까지 완성해 보세요. 따라 만든 작업은 연습용으로만 쓰고 포트폴리오에는 직접 기획한 작업을 중심으로 담는 것이 좋아요. 포트폴리오 글에서 다룬 방식으로 문제 정의, 스케치, 시안, 최종 화면, 개선 과정을 함께 정리하면 생각의 흐름이 잘 보여요.

피그마, 처음 켰을 때

버튼 하나를 만들어 오토 레이아웃을 적용하고 글자를 바꿔 보세요. 크기가 저절로 맞춰지는 순간 피그마의 핵심이 보여요.

피그마, 수정이 끝없을 때

반복되는 요소를 컴포넌트로 바꾸고 색을 스타일로 등록해 보세요. 한 곳만 고쳐도 전체가 바뀌어요.

피그마 체크리스트

피그마 감정 카드: 피그마 앞에서 이런 마음이라면

읽다가 마음이 머문 대목이 있었다면, 지금 내 상태와 가장 가까운 카드를 골라 보세요.

📷 사진 6 댓글이 달린 공유 디자인 파일

Alt: 피그마 협업

(이 상자를 내 사진으로 바꿔 주세요)

자주 묻는 질문

피그마는 무료인가요?

무료 요금제와 유료 요금제가 있으며 기능과 학생 혜택은 공식 누리집에서 확인하세요.

무엇부터 배워야 하나요?

프레임, 오토 레이아웃, 컴포넌트 순서로 익히는 것을 추천해요.

오토 레이아웃은 왜 중요한가요?

간격과 정렬을 규칙으로 정해 수정과 반응형 작업을 쉽게 만들어 주기 때문이에요.

프로토타입은 어디에 쓰나요?

화면 흐름을 실제처럼 눌러 보며 사용성을 확인하고 발표하는 데 써요.

포트폴리오에 따라 만든 작업을 넣어도 되나요?

연습용으로 쓰고 포트폴리오는 직접 기획한 작업 중심으로 담는 것이 좋아요.

마무리

피그마는 규칙을 한 번 만들어 두면 작업이 계속 가벼워지는 도구예요. 오늘은 버튼 하나에 오토 레이아웃을 적용하고 컴포넌트로 만들어 세 군데에 써 보세요. 그 작은 규칙이 다음 화면을 훨씬 빠르게 만들어 줄 거예요.

함께 읽으면 좋은 글

• UIUX 디자인 입문 가이드, UI와 UX 차이·디자인 과정·도구와 포트폴리오 준비법
• 포토샵 처음 배울 때, 레이어와 선택 도구부터 보정과 누끼, 저장 형식과 연습 순서까지
• 일러스트레이터 처음 배울 때, 벡터와 아트보드 개념부터 펜 도구와 도형, 로고와 인쇄용 저장까지
• 포트폴리오 만드는 법, 학생이 작업물을 고르고 구성해 한 파일로 정리하는 순서
• 앱개발 시작 가이드, 네이티브·크로스플랫폼·노코드 비교와 개발 단계·비용 구조
• 프론트엔드 개발자 로드맵, HTML·CSS·자바스크립트부터 프레임워크·포트폴리오까지