개발자를 위한 피그마 사용법

디자인 테크

22일 전

조회수

586

UX/UI 디자인의 중요성이 높아짐에 따라, ‘피그마(Figma)의 중요성’ 또한 점점 더 높아지고 있습니다. 현재 UX/UI 디자인 툴 시장의 80% 이상을 차지하는 피그마는 IT 프로젝트를 개발하기 위한 ‘필수 도구’로 자리 잡았습니다.

프로젝트의 성공적인 개발을 위해 협업이 중요해지는 만큼, 피그마는 디자인뿐만 아니라 개발 영역에서도 중요한 도구로 자리 잡고 있습니다. 피그마의 뛰어난 협업 기능 때문에 기업들은 개발자를 채용할 때 피그마를 활용할 줄 아는 개발자를 더욱 선호하고 있는데요.

와이어프레임, 디자인, 프로토타이핑, 협업까지 모두 처리할 수 있는 올인원 UI 협업 툴인 피그마를 개발자 관점에서 어떻게 효과적으로 활용할 수 있는지 자세히 알려드리겠습니다. 경쟁이 치열한 IT 시장에서 성공을 꿈꾸는 개발자라면, 끝까지 집중하세요!

피그마(Figma) 알아보기 -

개발자에게 피그마가 필수 도구로 떠오른 이유

피그마는 UI 디자인 시장에서 높은 점유율을 기록하며, 원할한 프로젝트 진행을 위해 ‘개발자에게도 필수적인 도구’로 자리 잡았습니다.

개발자가 피그마를 다룰 줄 알아야 하는 이유는 단순히 디자인을 확인하는 데 그치지 않습니다. 디자인과 개발 간 원활한 협업을 위해, 디자인 요소를 실시간으로 공유하고 수정 사항을 즉시 반영하는 과정이 중요해졌기 때문입니다.

피그마는 이러한 협업을 가능하게 해주는 도구로, 개발자가 디자인 의도를 정확히 이해하고 작업을 효율적으로 진행할 수 있도록 지원합니다. 이를 통해 디자인과 개발의 경계를 허물고, 더 긴밀한 협업을 실현하는 데 중요한 역할을 합니다.

개발자가 피그마를 사용하면

‘이런 이점’을 얻을 수 있어요

개발과 디자인 간의 일관성 유지

과거에는 UI 디자인 작업에 주로 어도비 포토샵이 사용되었고, 디자인 핸드오프는 PPT 파일을 통해 이루어졌습니다.

이러한 작업 방식은 디자인 파일을 다시 공유하거나 수정사항을 반영하는 과정에서 번거로움이 많았고, 이로 인해 디자이너와 개발자 간의 미스커뮤니케이션이 빈번하게 발생해, 결국 디자인과 개발 간 불일치로 인해 프로젝트의 지연으로까지 이어지게 되었습니다.

하지만 피그마를 도입하면서 이러한 문제들이 크게 개선되었습니다. 디자인 파일을 실시간으로 확인할 수 있을 뿐만 아니라, 색상, 폰트, 크기 등 코드에 필요한 디자인 사양을 손쉽게 추출할 수 있게 되었습니다.

덕분에 수정사항이 생겨도 별도의 파일 공유 없이 실시간으로 업데이트된 정보를 개발자가 즉시 확인할 수 있어 디자이너와 개발자 간의 미스커뮤니케이션이 크게 줄어들었습니다.

결과적으로, 피그마는 디자인과 개발 간의 협업을 더욱 효율적이고 원활하게 진행할 수 있도록 지원하는 핵심 도구로 자리 잡았습니다.

디자인 시스템과 스타일 가이드 관리

개발자는 피그마를 통해 디자이너가 정의한 디자인 시스템을 기반으로 코드 구현 시 중복을 줄이고 효율성을 높일 수 있습니다.
디자인 시스템은 일관된 스타일(색상, 폰트, 버튼, 아이콘 등)을 정의하여 개발자가 이를 재사용할 수 있도록 지원합니다. 이를 통해, 매번 동일한 스타일을 새롭게 코드로 작성할 필요 없이, 이미 정의된 컴포넌트나 규칙을 활용해 코드 작성 속도를 크게 향상시킬 수 있습니다.

또한, 코드의 일관성을 유지할 수 있어 유지보수나 확장성 측면에서도 큰 장점을 제공합니다. 피그마를 활용하면 디자인과 개발 간의 협업이 한층 더 효율적으로 진행될 뿐만 아니라, 프로젝트의 완성도와 생산성도 함께 높아집니다.

팀원과의 실시간 상호작용

피그마는 클라우드 기반으로 실시간 피드백이 가능하다는 큰 장점을 제공합니다. 덕분에 여러 팀원이 동시에 디자인을 확인하고, 즉각적으로 수정하거나 의견을 교환할 수 있습니다.

피그마를 통해 디자이너가 디자인을 업데이트하면, 개발자가 이를 실시간으로 확인하고 필요한 코드 변경 사항을 바로 반영할 수 있습니다. 이러한 실시간 피드백 환경 덕분에 디자인에 대한 의견 교환과 수정 사항 반영이 신속하게 이루어져, 프로젝트 진행 속도가 크게 향상되고 개발 효율성이 높아집니다.

이렇게 개발자가 피그마를 활용할 줄 알면 프로젝트 진행 시 작업 효율성이 크게 향상되기 때문에, 많은 기업들이 피그마를 다룰 줄 아는 개발자를 선호하고 있습니다.

이제 IT 시장에서 경쟁력을 갖춘 커리어를 원한다면 개발자도 피그마를 다룰 줄 알아야 하는데요. 그렇다면 지금부터 개발자를 위한 피그마 활용법을 자세히 알아보겠습니다.

개발자를 위한 피그마 활용법

- 피그마 Figma 시작하기

(* 이미지 출처: 피그마 홈페이지)

피그마를 시작하기 위해 피그마의 공식 웹사이트에 접속합니다. 피그마는 구글 계정, GitHub 계정 또는 이메일을 통해 간편하게 가입할 수 있습니다.

- 디자인 파일 탐색하기

디자이너에게 넘겨받은 파일을 탐색하기 위해 피그마 에디터의 기본 인터페이스를 살펴보겠습니다.

1. 레이어 패널: 페이지별로 작업공간을 분리하고 파일의 레이어 구성을 확인할 수 있습니다.

2. 툴바: 디자인하고 협업하기 위한 여러가지 도구를 선택할 수 있습니다. 개발자는 특히 멘션과 Dev 모드 전환기능을 유용하게 사용할 수 있습니다.

3. 속성 패널: 위치, 마진, 패딩, 색상, 크기등 요소의 속성을 확인할 수 있습니다.

이외 공간은 모두 캔버스입니다. 그림을 그리는 캔버스처럼 화면을 그려넣을 수 있는 공간입니다.

- 피그마 멘션으로 소통하기

(이미지에 사용한 스크린은 Material 2 Design kit를 사용하여 제작했습니다.)

툴바의 말풍선 버튼을 클릭하면 디자인 파일에 코멘트를 추가할 수 있습니다. 이때, 팀원을 태그하여 직접 알림을 보내거나, 다른 팀원이 작성한 코멘트에 댓글을 달아 질문하거나 변경 사항을 요청하는 방식으로 소통할 수 있습니다.

이렇게 멘션 기능은 작업 파일에 직접 코멘트를 남길 수 있어 커뮤니케이션이 훨씬 직관적이고 명확해집니다.

또한 왼쪽 속성 패널에서는 코멘트 히스토리를 최신순으로 확인할 수 있고, ‘단축키 /’를 누르고 채팅을 입력하면, 피그마에 접속해 있는 팀원들과 실시간으로 소통할 수 있어 협업이 더욱 원활해집니다.

- 개발자 모드(Dev Mode)로 협업하기

피그마는 2023년 개발자 모드를 도입하며 큰 변화를 가져왔습니다. 개발자 모드가 도입되기 이전에도 피그마는 UI 디자인에 특화된 다양한 기능을 제공했지만, 디자이너와 개발자 간 툴과 작업 방식의 차이로 인해 디자인과 실제 코드 사이에 미세한 차이가 발생하는 경우가 많았습니다.

이러한 간극을 해소하기 위해 도입된 개발자 모드는, 개발자가 디자인 작업물을 실제 코드로 변환할 때 필요한 세부 정보를 빠르고 정확하게 제공하여 작업 효율성이 크게 높여졌는데요.
지금부터 개발자 모드를 활용해 코드와 에셋을 추출하는 방법을 자세히 알아보겠습니다.

a. 개발자 모드에서 코드 추출하기

개발자 모드에서는 화면의 코드를 자동으로 추출해 복사하여 사용할 수 있도록 제공합니다.

- CSS 코드: 버튼, 텍스트, 배경 등 디자인 요소에 대한 스타일의 CSS 코드

- iOS/Android 코드: Swift, Kotlin, Java 등을 위한 스타일 정보, 코드 스니펫

b. 개발자 모드에서 에셋 추출하기

개발자 모드에서는 디자이너가 화면 구성에 사용한 PNG,JPG,SVG,PDF등의 에셋을 바로 추출할 수 있습니다. 디자이너가 배율, 이름등 에셋의 export를 설정해놓으면, 개발자는 추출버튼을 통해 에셋을 간편하게 추출할 수 있습니다.

- 디자인 시스템 활용하기

디자인 시스템은 일관성 있고 효율적인 디자인 작업을 위해 UI 요소, 스타일, 컴포넌트, 패턴 등을 체계적으로 정리한 규칙의 모음입니다. 디자인 시스템은 주로 디자이너와 개발자가 협업할 때, 디자인과 개발 간의 일관성을 유지하고, 반복적인 작업을 줄이며, 제품의 사용 경험(UX)을 일관되게 제공하는 데 중요한 역할을 합니다.

피그마는 디자인 시스템을 구축하고 관리하는 데 매우 유용한 툴입니다. 실시간 협업 기능을 통해 디자이너와 개발자가 동시에 작업을 할 수 있어, 변경 사항을 즉시 반영하고 피드백을 빠르게 주고받을 수 있습니다.

또한, 피그마에서는 스타일 가이드와 컴포넌트를 쉽게 관리하고 재사용할 수 있어, 일관된 디자인을 유지하면서도 효율적인 작업이 가능합니다.

a. 스타일 기능

(이미지에 사용한 스크린은 Material 2 Design kit를 사용하여 제작했습니다.)

피그마는 디자이너가 디자인 시스템을 효율적으로 관리할 수 있도록 4가지 스타일 기능을 제공합니다.

- 컬러 스타일(Color Styles): 색상 팔레트 정의.

- 타이포그래피 스타일(Text Styles): 폰트, 크기, 간격 등의 텍스트 스타일 정의.

- 효과 스타일(Effect Styles): 그림자, 블러 등과 같은 시각적 효과 정의.

- 그라디언트 스타일(Gradient Styles): 그라디언트 색상 조합 정의.

위의 이미지는 그 중 타이포그래피와 컬러 팔레트에 스타일을 적용한 예시입니다. 개발자는 이렇게 스타일이 적용된 요소를 클릭하면, 해당 스타일이 무엇인지 쉽게 확인할 수 있어, 시스템에 등록한 해당 스타일의 코드를 재사용해 작업 시간을 단축할 수 있습니다.

b. 컴포넌트 기능

디자인 시스템에서 컴포넌트(Component)는 버튼, 입력창, 카드, 레이아웃 등과 같은 재사용 가능한 UI 요소를 의미합니다. 피그마는 이러한 컴포넌트를 여러 번 복제해 사용할 수 있는 기능을 제공합니다.

이때, 원본 컴포넌트를 ‘Main Component’, 복제된 컴포넌트를 ‘Instance’라고 부릅니다. 디자이너는 디자인 시스템을 Main Component로 구성하고, 이를 복제하여 화면에 Instance로 사용합니다. 위 이미지와 같이, 개발자는 화면에 배치된 컴포넌트를 클릭하여 어떤 컴포넌트인지 확인할 수 있습니다.

디자인 작업에서 매번 코드를 새로 작성해야 하는 점은 개발자에게 큰 부담이었습니다. 특히, 스타일이나 컴포넌트가 반복적으로 사용될 때마다 이를 코드로 일일이 작성해야 했기 때문에 비효율적이고 시간이 많이 소요되었습니다. 게다가 디자인 변경이 발생할 때마다 수정 사항을 일일이 반영해야 하는 번거로움도 있었습니다.

그러나 피그마의 스타일과 컴포넌트 기능 덕분에 이러한 불편함이 크게 줄어들었습니다. 디자이너가 정의한 스타일(예: 색상, 폰트, 버튼 스타일 등)과 컴포넌트를 재사용할 수 있어, 개발자는 매번 새로 코드를 작성하지 않고 이미 정의된 스타일을 활용해 효율적으로 작업할 수 있습니다.

이러한 기능은 디자인과 개발 간의 일관성을 유지하면서도 반복 작업을 최소화하고, 프로젝트 진행 속도를 크게 향상시키는 데 기여하고 있습니다.

* 10년 이상 경력의 디자이너들의 디자인 시스템 가이드 작성 방법이 궁금하다면?

▶ UX 디자인의 일관성을 높이는 디자인 시스템 가이드 작성 비법과 사례

개발에 도움이 되는 피그마 플러그인(Figma Plug-in)

- 피그마 플러그인 사용법

피그마 플러그인은 피그마를 더욱 더 다양한 기능으로써 활용하기 위한 확장프로그램이라고 이해하시면됩니다. 플러그인은 다음 3가지 경로를 통해 이용할 수 있습니다.

1. 피그마 커뮤니티에서 탐색

2. 툴바의 액션 버튼을 클릭(단축키 k)

3. 피그마 상단 메뉴에서 Plugins > Browse Plugins 클릭

- 개발자에게 유용한 플러그인 3가지

1. Figma to Code

(* 이미지 출처: Figma to Code 사이트)

Figma to Code는 위에서 언급 드린 개발자 모드에서 제공하는 요소에 대한 코드가 아닌 디자인을 직접 HTML, Tailwind, Flutter, SwiftUI 코드로 변환하여, 별도의 수작업 없이 웹 개발에 필요한 기초적인 코드를 즉시 생성합니다. 그렇기 때문에 코드를 작성하는 시간을 크게 줄일 수 있습니다.

2. FireJet

(* 이미지 출처: FireJet 사이트)

FireJet는 Figma에서 디자인을 코드로 변환할 수 있는 툴로, 주로 웹 애플리케이션 또는 모바일 애플리케이션 개발에 중점을 두고 있습니다. 디자인을 HTML, Tailwind, Flutter, SwiftUI로 변환하여 코드의 기본 구조를 자동으로 생성합니다. 그렇기 때문에 코드를 작성하는 시간을 크게 줄일 수 있습니다.

FireJet와 Figma to Code는 모두 Figma 디자인 파일을 코드로 변환하는 플러그인입니다. 그러나 각각 주요 기능과 초점이 다릅니다.

Figma to Code는 기본적인 디자인을 코드로 변환하는 데 중점을 두며, 다양한 코드 형식을 지원하지만, 코드 품질이나 커스터마이징 기능에서는 다소 단순할 수 있습니다. FireJet는 더 고급화된 코드 변환을 제공하며, 실시간 업데이트와 맞춤형 코드 생성 기능을 강조합니다.

3. Autoflow

(* 이미지 출처: Autoflow 사이트)

Autoflow는 디자인 간의 흐름을 자동으로 시각화하여, 프로토타입을 만드는 데 유용한 플러그인입니다.

프로토타입의 흐름을 명확히 하기 위해서는 각 화면(또는 프레임) 간의 관계를 시각적으로 잘 표현하는 것이 중요한데, Auto Flow는 이를 자동으로 처리해주어 간편하게 플로우를 표시할 수 있게 도와줍니다. 기획자나 디자이너없이 개발해야하는 경우 유용하게 사용할 수 있습니다.

"성공적인 커리어를 원한다면,

피그마는 필수입니다."

현재 UX/UI 디자인의 80% 이상이 피그마를 통해 이루어질 정도로, 피그마는 IT 프로젝트에서 없어서는 안 될 필수 툴이 되었습니다. 이제 피그마를 활용할 수 없는 개발자는 경쟁에서 뒤처질 수밖에 없습니다. 프로젝트 수주부터 디자이너와의 협업까지, 피그마의 활용 능력은 더 이상 선택이 아닌 필수 스킬입니다.

이제 피그마를 배우고, 개발자로서의 경쟁력을 높여보세요. 피그마 활용 능력은 여러분이 원하는 커리어를 쟁취하는 데 중요한 무기가 될 것입니다!

따라만해도 개발자 커리어 성장에 도움이 되는 커리어 성장 콘텐츠 TOP 3

▶ 코딩 테스트, 대기업 개발자는 '이렇게' 준비했습니다.

▶ 기술 블로그, 성공하고 싶은 개발자라면 이렇게 쓰세요

▶ 개발자 커뮤니티& 개발자 강의 Best 4, 커리어 성장을 원하는 개발자라면 꼭 확인하세요!

조기 퇴근을 도와는 최신 개발 트렌드 사용법 Best 3

▶ [Apache Kafka] 대용량 트래픽 처리를 위한 카프카 사용법

▶ Prisma란? 기업들의 사용 사례부터 적용 방법까지의 사용 종합 가이드

▶ GraphQL이란? 개념부터 사용법, 주의사항까지 종합 가이드

나에게 딱 맞는 개발 프로젝트 수주

“대한민국 No.1 IT 인재 매칭 플랫폼 이랜서”

이랜서는 25년간 축적된 노하우와 데이터를 바탕으로, IT 프리랜서에게 가장 적합한 프로젝트를 매칭하며 성공적인 기업의 프로젝트와 실력있는 IT 프리랜서를 연결하는 대한민국 No.1 IT 인재 매칭 플랫폼입니다.

41만 명 이상의 IT 프리랜서를 보유한 이랜서는 전문성과 협업 능력을 철저히 분석해, 약 80,000건의 성공적인 프로젝트 매칭을 이뤄내며, 기업에게는 실력 있는 IT 프리랜서를, 프리랜서에게는 가장 적합한 프로젝트를 연결하며 최적의 결과를 만들어 냈습니다.

덕분에 이랜서를 사용하는 기업들의 프로젝트 재의뢰율 98%을 달성하며 기업과 프리랜서에서 신뢰받는 매칭 플랫폼으로 자리잡고 있습니다.

프로젝트도 바쁜데, 새로운 프로젝트 찾기 쉽지 않죠?

이랜서가 ‘나’에게 딱 맞는 프로젝트를 추천해드립니다.

ㅡ 이랜서의 매칭 서비스를 이용한 IT 프리랜서들의 생생한 후기 ㅡ

프리랜서로 일하면서 새로운 프로젝트를 제때 수주하지 못하면 업무 공백이 생기고 일정이 엉켜 이후 프로젝트 수주에도 큰 영향을 미칠 수 있습니다.

그래서, 기존 프로젝트가 마무리될 즈음에는 새로운 프로젝트를 찾기 위해 정보를 수집하느라 많은 시간을 소비하게 되는데요. 이런 상황들은 프리랜서로써 큰 부담으로 느껴지곤 합니다.

“이랜서는 이런 부담을 덜어주기 위해 탄생한 플랫폼입니다.”

25년의 노하우와 방데한 데이터를 기반으로 제공되는

IT 프리랜서 맞춤형 프로젝트 매칭 서비스

* 25년의 데이터를 활용한 정밀한 데이터 분석

이랜서는 25년동안 축적한 약 1억 5천만 개의 사용자 데이터와 350만 건의 프리랜서 평가 데이터를 바탕으로 기업과 IT 프리랜서의 성향을 정밀하게 매칭합니다.

* 25년의 노하우를 바탕으로 제공되는 최적의 프로젝트 추천

이랜서에 등록된 IT 프리랜서들에게 가장 적합한 프로젝트를 매칭해 업무 공백을 줄이고 수주의 효율성을 극대화합니다. 덕분에 약 41만 명의 IT 프리랜서들은 이랜서를 통해 필요할 때 가장 잘맞는 프로젝트를 매칭 받고 있습니다.

수백 개의 프로젝트 정리, 오토폴리오가 자동으로 관리해 드립니다.

이제 더 이상 ‘경력 관리’에 시간 낭비하지 마세요.

새로운 프로젝트에 지원할 때마다 경력 기술서와 이력서를 일일이 정리하고 수정하는 것도 상당한 부담입니다. 프로젝트마다 요구사항이 다르다 보니, 이에 맞춰 내용을 변경하는 것도 시간과 노력이 많이 들었죠. 이제, 이랜서의 ‘오토폴리오’를 통해 이 모든 번거로움을 날려버리세요.

초기 1회 업데이트로 자동관리

경력 기술서와 이력서가 자동으로 업데이트되는

자동 경력 관리 서비스 ‘오토폴리오’

이랜서는 경력 기술서 작성이 번거로운 IT 프리랜서를 위해 자동 경력 관리 서비스인 ‘오토폴리오’를 개발했습니다. 오토폴리오를 사용하면 경력 기술서와 이력서를 번거럽게 정리할 필요가 없습니다!

이랜서의 오토폴리오는 초기 1회 업데이트로 프로젝트 이력이 자동으로 정리되며, 새로운 프로젝트 지원 시 이랜서의 상주 매니저가 프로젝트 성향에 맞는 최적의 경력 기술서를 추천해 경력 & 이력 관리에 시간을 아끼고 프로젝트 지원 효율을 극대화 합니다.

덕분에 약 41만의 이랜서 회원들은 경력 기술서와 이력서를 직접 정리하는 번거로움 없이, 보다 효율적으로 프로젝트에만 집중할 수 있습니다.

※ 오토폴리오의 자동 업데이트는 이랜서를 통해 진행한 프로젝트에 한해 제공됩니다.