# data[].attributes.body
2025년 중소기업 1팀 1기업 프로젝트는 고등학교 3학년 학생들을 대상으로 하며, 지역 중소기업과 협력하여 실제 프로젝트를 수행하는 실무형 교육 과정입니다.

# data[].attributes.body
웹 퍼블리셔는 웹사이트 제작 과정에서 디자인, 코딩, 콘텐츠 배치 등을 총괄하며 사용자의 편리한 경험을 제공하기 위한 직업입니다. 이 과정을 통해 전문 웹 퍼블리셔로 성장할 수 있습니다.

# data[].attributes.body
학생들은 HTML과 CSS의 기초를 익혀 웹페이지의 구조와 스타일 적용 방법을 배웁니다.

# data[].attributes.body
JavaScript를 활용하여 웹사이트에 동적 기능을 추가하는 방법을 학습합니다.

# data[].attributes.attachment_link.title
웹에플리케이션 만들기 - JS, PHP 프로그래밍 5 : JavaScript 실습

# data[].attributes.headline
3단계: 실무 프로젝트

# data[].attributes.subject
3단계: 실무 프로젝트

# data[].attributes.body
실제 중소기업의 요구사항을 기반으로 팀 프로젝트를 수행하며 배운 기술을 실전에서 활용합니다.

# data[].attributes.attachment_link.title
중학교 수학 수업에 '팀 프로젝트' 방식 도입 / YTN 사이언스

# data[].attributes.body
코드 관련 학습을 위해 추천하는 웹 플랫폼: W3Schools, MDN Web Docs.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
Figma와 Adobe XD는 사용자 인터페이스 디자인에 매우 유용한 도구입니다.

# data[].attributes.attachment_link.readable_text
피그마(Figma)는 현재 UX/UI 분야에서 가장 인기 있는 디자인 툴 중 하나 입니다.

실제로 2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 피그마가 선정됐습니다. 이 설문에는 4,260명에 달하는 프로덕트 디자이너, UX/UI 디자이너, UX 리서처 등이 참여했는데요. 아래와 같이 피그마가 압도적으로 1위를 차지했습니다.

UX/UI 분야에서 커리어를 쌓고 싶다면 피그마는 필수로 알아야 할 툴이 되었는데요. 이번 글에서는 피그마 소개와 피그마를 많은 사람들이 사용하는 이유, 그리고 피그마 단축키와 유용한 기능 등 기본적인 사용 방법에 대해서도 알아보도록 하겠습니다.

피그마(Figma)란

피그마는 온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공합니다. 웹・앱・인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원합니다.

피그마가 주목받는 이유

피그마의 장점은 다른 디자인 툴과 비교해 '협업 기능'이 특히 강화되어 있다는 점입니다. 피그마를 사용하면 디자이너, 마케터, 개발자 간에 더욱 원활한 소통이 가능합니다. 따라서 디자인 작업을 더욱 빠르고 효율적으로 수행할 수 있죠. 피그마가 주목받는 이유, 주요 협업 기능 4가지 를 소개해 드릴게요.

개발자 핸드오프(Hand-off) 기능

피그마는 개발자 핸드오프 기능을 강화했습니다. 디자인 단계에서 개발 단계로 전달하는 과정을 핸드오프라고 하는데요. 기존 디자인 툴은 핸드오프 과정에서 많은 파일과 내용, 정보 등을 별도로 준비하고 공유해야 했습니다.

하지만 피그마는 피그마 하나로 디자인, 이미지 파일, 폰트, 간격, 사용자 인터렉션 등 모든 것을 전달할 수 있습니다. 디자이너도, 개발자도 디자인 외에 추가로 정보를 전달하고 수집할 필요가 없게 된 것이죠. 이런 장점 덕분에 디자이너와 개발자 간의 소통 시간이 단축되고, 오류도 줄어 더욱 빠르게 웹사이트 또는 앱을 출시 할 수 있습니다.

실시간 공동 편집(Collaboration) 기능

피그마는 멀티 플랫폼을 지원합니다. 동시에 여러 사용자가 협업하여 디자인 작업 을 할 수 있죠. 디자이너와 클라이언트, 또는 디자이너와 개발자가 함께 작업할 때 유용하며, 실시간 채팅과 주석 기능을 통해 실시간 피드백을 주고받을 수 있습니다.

디자인 시스템(Design System) 구축 기능

피그마는 디자인 시스템을 쉽게 구축 할 수 있게 도와줍니다. 디자인 시스템을 구축하면, 일관된 디자인 및 브랜드 이미지를 유지할 수 있으며, 재사용 가능한 디자인 요소와 UI 컴포넌트를 제작할 수 있습니다.

편리한 라이브러리(Library) 관리 기능

피그마는 라이브러리 관리 기능을 제공하기 때문에 자주 쓰는 디자인 요소를 쉽게 관리할 수 있습니다. 팀 라이브러리에 다른 멤버가 새로운 디자인 요소를 업데이트하면 자동으로 동기화하여 사용할 수 있기 때문에 팀 라이브러리 관리도 쉽고 빠르게 가능 합니다.

이외에도 피그마는 누구나 무료로 사용할 수 있다는 특징을 갖고 있습니다. 무료 버전에서 제공하는 기본적인 기능만으로도 대부분의 디자인 작업이 가능합니다. 또한, 웹 브라우저에서 작동하기 때문에 별도의 프로그램 설치없이 공유 링크 URL 하나로 어디서든 파일을 열람하고 작업 할 수 있죠.

이러한 독보적인 장점과 여러 편리한 특징 덕분에, 피그마는 현재 UX/UI 분야에서 가장 많이 사용하는 필수 디자인 툴 중 하나가 됐습니다.

피그마 사용법

피그마를 사용하는 방법은 매우 간단합니다. 공식 사이트( https://www.figma.com/)에서 계정을 만들고 로그인 해주세요.

로그인 후, 새로운 파일을 만들거나 기존 파일을 열 수 있습니다.

피그마 단축키

본격적으로 피그마를 사용하기 앞서, 기본적으로 알아두면 좋을 단축키를 몇 가지 소개해 드릴게요. 단축키를 활용하면 빠르고 효율적인 작업이 가능 합니다.

파일 생성

Figma에서 새로운 프로젝트 파일을 만들려면 'New design file' 버튼을 클릭하면 됩니다.

파일 생성 후, '# 모양의 아이콘'을 누르면 디바이스 옵션(예: 모바일, 태블릿, 데스크탑)을 선택할 수 있습니다. 원하는 디바이스 해상도를 선택하면 작업할 수 있는 프레임이 자동 생성됩니다.

파일 내보내기

작업을 완료했다면 저장할 레이어를 선택하고 'Export'를 클릭해 주세요.

원하는 파일 형식(PNG, JPG, SVG, PDF)을 지정하고, 'Export' 버튼을 눌러 파일을 저장합니다.

코멘트 달기

Figma는 팀원들 간의 소통을 원활하게 할 수 있도록, 파일에 댓글을 추가할 수 있는 기능을 제공합니다. 이를 통해 팀원들과 의견을 공유하고, 작업에 대한 피드백을 주고받을 수 있습니다.

파일에 댓글을 추가하려면, '말풍선 모양의 아이콘'을 클릭한 후 원하는 위치에 댓글을 입력하면 됩니다.

유용한 기능

오토 레이아웃 (Auto Layout)

피그마는 디자인 요소의 크기와 위치를 자동으로 조절해 주는 오토 레이아웃 기능을 제공합니다. 이 기능으로 디자인의 일관성과 효율성을 높일 수 있습니다.

오토 레이아웃을 사용할 레이어를 선택하고 Shift+A 단축키를 눌러주세요. 그러면 우측에 Auto layout 패널이 생성되며 해당 기능을 사용할 수 있게 됩니다.

플러그인 (Plugin)

피그마는 다양한 플러그인을 지원하여 디자인 작업을 보다 효율적으로 수행할 수 있습니다. 예를 들어, 자동 레이아웃 플러그인을 사용하여 레이아웃 작업을 자동화하거나, 아이콘 라이브러리 플러그인을 사용하여 아이콘 작업을 쉽게 수행할 수 있습니다.

새로운 플러그인을 추가하고 싶다면 상단의 '리소스 툴'을 선택하세요. 원하는 플러그인을 검색하고 설치할 수 있습니다.

UX/UI 필수 업무 툴 피그마,
PM이 꼭 알아야 하나요? 🎨

디자인인데, PM이 알아야하는 이유가 궁금했죠? PM은 협업이 핵심입니다. 기획한 내용을 디자이너/개발자/동료들에게 효과적으로 전달하고 협업을 원활하게 해야하는데요, 피그마는 시각적으로 전달하고 업무 관리가 유용한 툴로, 다양한 면에서 효율적으로 업무를 수행할 수 있습니다.

코드스테이츠 PM 부트캠프에서는 피그마를 학습하고 다양한 실습을 진행하며 실제 현업에서 필요한 기술과 지식을 습득 할 수 있도록 합니다.

피그마를 학습하고 PM 취업 시장에서 경쟁력을 갖추고 싶다면, 코드스테이츠 PM 부트캠프 에 합류하세요. 탄탄한 기초부터 현장에서 요구하는 필수 역량까지 모두 갖춘 서비스 기획자 커리어를 시작할 수 있습니다.

# data[].attributes.attachment_link.title
피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지 - 코드스테이츠 공식 블로그

# data[].attributes.attachment_link.description
PM 커리어를 쌓고 싶다면 피그마는 필수로 알아야 할 툴이 되었는데요. 이번 글에서는 피그마 소개와 피그마가 주목받는 이유 그리고 피그마 단축키, 유용한 기능 등 기본적인 사용 방법을 알아보겠습니다.

# data[].attributes.body
Stack Overflow와 GitHub를 사용하여 개발자 커뮤니티와 소통하세요.

# data[].attributes.body
이 과정을 통해 학생들은 실제 직무 경험을 쌓고 중소기업 채용의 기회를 높일 수 있습니다.

# data[].attributes.body
실제 프로젝트를 수행하며 완성도 높은 포트폴리오를 제작할 수 있습니다.