🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • topBtn
  • rollingBanner
  • menu
  • stickyMenu
  • accordion
  • swiper
  • activeMenu
  • slide
  • tab
  • scrollEffect
  • ajax
  • tabSlide
  • adaption
  • 좋은-디자인을-위한-요소
  • 논리적vs물리적해상도
  • 게슈탈트이론
  • 색채심리학
  • 황금비율
  • 컬러모드
  • 디자인실무용어
  • 이미지파일의특징
  • 폰트와사이즈
  • 레이아웃기초
  • 10가지법칙
  • 아이트래킹
  • 색상을성공적으로고르는방법
  • 타이포그래피10가지팁
  • 스타일가이드만들기
  • 모바일디자인버튼
  • 조형요소
  • 6가지비주얼체계규칙
  • 아이콘디자인이론
  • 해상도와그리드시스템
  • 피그마란
  • 작업환경세팅
  • 인터페이스예제
  • 기능심화
  • 인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트
  5. 작업환경세팅

작업환경세팅

피그마 프로그램 설치, 미러링 설정, 개인 문서 생성, 프로젝트 만들기 등 작업환경을 세팅하는 방법을 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

피그마 작업환경 세팅


1. 프로그램 설치

1-1. 온라인 회원가입

피그마(Figma) 공식사이트에서 회원가입을 합니다.

피그마 공식사이트


1-2. 로컬 프로그램 설치

피그마는 브라우저에서도 사용 가능하지만, 로컬 프로그램(데스크톱 앱)을 설치하면 더 안정적으로 사용할 수 있습니다.

로컬 프로그램 설치


1-3. 피그마 미러링

OS에 맞는 앱을 다운로드합니다.

피그마 다운로드 페이지

피그마 미러링 앱

Warning: 앱 설치 후 로그인 시 웹에서 로그인한 계정정보와 같아야 프로토타입 문서의 시뮬레이션이 됩니다.


2. 시작하기

2-1. 개인 문서 생성하기

무료 계정의 경우 draft(초안) 폴더에 파일들이 저장됩니다. 별도의 폴더 기능은 없으며 즐겨찾기 기능을 활용할 수 있습니다. 초안 생성 이후 프로젝트를 만들고 이동할 수 있으며 무료 플랜은 1개의 프로젝트만 생성이 가능합니다.

<li>

표시된 부분을 클릭하면 초안 폴더에 새 파일을 만들 수 있습니다.

새 파일 만들기

</li> <li>

생성된 초안 파일을 이동할 수 있습니다.

파일 이동 1

파일 이동 2

파일 이동 3

</li>


2-2. 프로젝트 만들어보기

피그마는 협업 툴로 초안이 완료된 프로젝트는 팀 단위로 작업을 하는 시스템입니다. 프로젝트를 생성하려면 팀을 먼저 생성해야 합니다.

<li>

그림의 단계를 진행합니다.

팀 프로젝트 생성

</li> <li>

TeamProject가 생성되었습니다. TeamProject의 이름을 변경해봅시다.

팀 프로젝트 이름 변경

</li> <li>

그 후 다시 전 단계로 이동하여 draft 폴더의 파일을 나의 프로젝트 폴더로 옮겨봅시다.

</li>

Info: 무료 계정은 프로젝트 폴더에 3개의 파일을 보관할 수 있습니다.

목차

  • 구문