피그마는 왜 브라우저에서 디자인하게 만들었을까

피그마(Figma)는 브라우저에서 바로 열리는 UI/UX 디자인 도구예요. 설치 없이 링크 하나로 여러 사람이 같은 파일에서 동시에 작업할 수 있죠. 디자인 툴을 알아보다가 '왜 하필 브라우저에서, 왜 지금은 다들 이걸 쓰지'가 궁금해졌다면, 그 답은 이 도구가 등장한 시점과 그때 사람들이 겪던 불편함에 있어요.

피그마는 한마디로 뭐예요

피그마는 브라우저 기반의 클라우드 UI/UX 디자인 툴이에요. UI는 앱이나 웹에서 눈에 보이는 화면을 말하고, UX는 그 화면을 쓰는 사람이 겪는 경험을 말해요. 그러니까 피그마는 '앱이나 웹 화면을 설계하고, 그 화면이 어떻게 움직일지까지 미리 만들어 보는 도구'라고 보시면 돼요.

처음 접하면 이 세 가지가 낯설 수 있어요.

• 브라우저에서 실행돼요. 별도 프로그램을 설치하지 않아도 되고, 주소창에 figma.com을 치면 바로 작업 화면이 열려요.
• 클라우드에 저장돼요. 버전 관리가 자동으로 이뤄져서 '최종_진짜최종_2' 같은 파일 이름을 만들 이유가 없어요.
• 여러 사람이 동시에 같은 파일에서 작업해요. 구글 독스처럼 한 파일에 같이 들어가서 서로 고치는 게 실시간으로 보이죠.

여기서 짚어둘 게 하나 있어요. 피그마는 디자이너만 쓰는 도구가 아니에요. 기획자, 개발자, 마케터까지 같은 파일을 열고 협업하는 구조로 자리 잡았어요. 왜 그렇게 됐는지는 이어지는 이야기에서 하나씩 풀려요.

기본 정보 한눈에 보기

먼저 숫자와 조건부터 정리해둘게요. 이걸 모르고 시작하면 나중에 '무료인 줄 알았는데 왜 막히지' 같은 상황이 생기거든요.

피그마는 2016년에 나왔어요. 그때부터 지금까지 한 번도 '설치 프로그램'이 중심이 된 적이 없어요. 이게 이 도구의 성격을 거의 다 설명해줘요.

2026년 3월 기준으로 확인된 내용이에요

왜 나왔나 — 파일을 주고받던 시절의 문제

피그마가 등장하기 전의 디자인 작업은 파일을 주고받는 방식이 기본이었어요. 포토샵 같은 도구로 작업한 결과물을 저장해서, 메신저나 메일로 넘기는 거죠. 지금 생각하면 별것 아닌 것 같지만, 이 과정에서 실제로는 꽤 많은 게 새어 나갔어요.

가장 크게 새는 건 디자인에서 개발로 넘어가는 단계, 이른바 핸드오프(hand-off)였어요. 기존 도구에서는 이 단계를 위해 파일과 내용, 정보를 별도로 준비해서 공유해야 했어요. 화면 이미지는 넘겼는데 폰트 이름은 따로 적어 보내야 하고, 간격은 눈대중으로 재서 숫자로 적어 보내야 하고, 클릭하면 어디로 가는지는 말로 설명해야 했죠.

제가 처음 이 얘기를 들었을 때는 '디자인 파일을 왜 굳이 주고받지?' 싶었어요. 그런데 폰트와 간격과 화면 전환을 각각 따로 정리해서 보내던 시절이 있었다는 걸 알고 나면, 왜 피그마가 '하나로 합치는 것'을 목표로 나왔는지가 이해돼요.

피그마가 하려던 건 이거였어요. 디자인, 이미지 파일, 폰트, 간격, 사용자 인터랙션까지 전부 피그마 하나로 전달되게 만들자. 그러면 디자이너도 개발자도 디자인 외에 추가로 정보를 준비하고 모을 필요가 없어져요. 그만큼 소통 시간이 줄고, 사람이 옮겨 적는 과정에서 생기는 오류도 줄어들죠.

또 하나, 클라우드 저장 방식이라 버전 관리가 자동으로 이뤄진다는 것도 이때 같이 따라온 변화예요. 누가 언제 무엇을 바꿨는지 파일 자체가 기억하니까, 과거 버전을 따로 쟁여둘 필요가 없어졌어요.

무엇이 달랐나 — 브라우저와 동시 편집

피그마를 이해할 때 가장 중요한 두 가지는 브라우저에서 돌아간다와 여러 명이 동시에 편집한다예요. 이 둘은 따로 떨어진 기능이 아니라 한 덩어리예요. 브라우저에서 돌아가니까 설치 없이 링크만 있으면 열리고, 클라우드에 있으니까 여러 사람이 같은 파일에 동시에 들어올 수 있죠.

이 차이를 예전 방식과 나란히 놓으면 이렇게 돼요.

표에서 보시면 아시겠지만, 달라진 건 '더 예쁘게 그릴 수 있게 됐다'가 아니에요. 파일이 사람을 거치지 않고 직접 오간다는 게 핵심이에요. 링크 하나만 있으면 디자이너, 기획자, 개발자가 같은 화면을 보면서 이야기할 수 있게 된 거죠. 피그마가 주목받는 이유로 협업 기능이 꼽히는 건 이 구조 때문이에요.

덧붙이면, 피그마는 여러 플랫폼에서 열려요. 윈도우든 맥이든 브라우저만 있으면 같은 파일을 볼 수 있어요. 팀원들이 각자 다른 장비를 쓰는 상황에서 이건 생각보다 큰 차이예요.

파일을 주고받던 방식과 피그마 방식

자리 잡은 걸 어떻게 알 수 있나

이 도구가 실제로 어느 정도 자리를 잡았는지는 설문 수치로 확인할 수 있어요.

2022 Design Tools Survey에는 프로덕트 디자이너, UX/UI 디자이너, UX 리서처 등 4,260명이 참여했는데, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 쓰는 툴로 피그마가 선정됐어요. 1위를 차지한 게 눈에 띄는 정도가 아니라 압도적인 차이였다는 게 당시 결과의 특징이었죠.

2025년 UXtools 설문에서는 전 세계 디자이너의 83%가 피그마를 쓴다는 결과도 나왔어요. 2016년에 나온 도구가 10년 가까이 지나면서 이 정도 점유율을 갖게 된 거예요.

숫자가 중요한 이유는 따로 있어요. 이런 도구는 '혼자 잘 쓰는 사람이 많은 것'과 '팀이 같이 쓰는 것'이 완전히 다른 문제거든요. 피그마가 1위라는 건, 개인이 편해서 쓴다는 뜻을 넘어서 회사 단위로 이 파일을 주고받는 관행이 자리 잡았다는 뜻이에요. 디자인 파일을 넘길 때 어떤 형식으로 넘기는지가 사실상 이 도구 기준으로 정해진 셈이죠.

그래서 UX/UI 쪽에서 커리어를 쌓으려는 사람에게 피그마가 사실상 필수로 꼽히게 됐어요. 도구 하나를 배우는 문제가 아니라, 팀이 일하는 방식을 같이 배우는 문제가 된 거예요.

지금 피그마가 노리는 것 — 디자인 툴에서 제품 개발 플랫폼으로

2026년 현재 피그마는 단순한 디자인 툴을 넘어 종합 제품 개발 플랫폼으로 자리를 옮기는 중이에요. 이 방향을 보여주는 게 AI 기능이에요.

Figma Make는 프롬프트를 입력하면 AI가 디자인을 만들어주는 기능이에요. 원하는 화면을 문장으로 적으면 입력 필드, 버튼, 로고 배치까지 자동으로 채워지는 식이죠. Claude Sonnet/Opus 모델이 연동돼 있어서 한국어 프롬프트도 꽤 알아들어요. 공식 도움말에도 Figma agent를 통해 아이디어를 탐색하고 작업 속도를 높이는 흐름이 안내돼 있어요.

개발 쪽으로도 방향이 뚜렷해요. Dev Mode를 켜면 개발자가 요소를 클릭했을 때 CSS 코드, 간격, 색상 코드가 자동으로 표시돼요. 여기서 한 걸음 더 나아가, Cursor AI 같은 AI 코딩 에이전트와 피그마를 MCP(Model Context Protocol, AI가 외부 도구의 정보를 읽어 쓸 수 있게 해주는 연결 규약)로 연결하면 피그마의 디자인 컴포넌트를 직접 참조해 코드를 자동 생성하는 작업 방식도 실무에서 퍼지고 있어요.

디자인한 것을 웹으로 내보내는 쪽도 생겼어요. 2025년 이후 추가된 Figma Sites는 Webflow나 Framer와 비슷한 노코드 웹 퍼블리싱 기능이에요. 피그마 안에서 디자인하고 반응형 설정과 도메인 연결까지 할 수 있죠.

커뮤니티도 이 흐름의 일부예요. 전 세계 디자이너들이 공유한 UI 키트와 템플릿을 복제해서 바로 쓸 수 있어서, 처음부터 다 그릴 필요가 없어요. 아래 검색어를 커뮤니티에 넣으면 바로 쓸 수 있는 시안이 나와요.

정리하면, 피그마가 노리는 건 '화면을 잘 그리는 도구'가 아니라 기획하고, 만들고, 개발로 넘기고, 배포하는 전 과정을 한 곳에 모으는 것이에요. 2016년에 '파일을 주고받지 말자'로 시작한 도구가 10년 만에 '제품을 만드는 흐름 전체'로 영역을 넓힌 거죠.

커뮤니티에서 바로 쓸 템플릿을 찾을 때 검색어

dashboard
mobile app

아직 정해지지 않은 것들

새로 넓어진 영역만큼 아직 규칙이 굳지 않은 부분도 있어요. 지금 시점에서 확인되는 것들은 이래요.

가장 최근에 바뀐 건 AI 크레딧이에요. 2026년 3월 18일부터 플랜별 크레딧 제한이 본격 적용돼요. 무료 플랜에도 월별 크레딧이 제공되지만, 한도를 넘으면 해당 기능이 멈춰요. AI 기능을 자주 쓸 계획이라면 어느 시점에 유료로 넘어가야 하는지가 달라지는 거죠.

Figma Sites도 아직 조건이 붙어요. 피그마 서버에서 호스팅되는 방식이라 유연한 커스터마이징에는 한계가 있어요. 자체 서버나 도메인, 확장성이 필요한 비즈니스 홈페이지라면 다른 전문 플랫폼과 병행하는 쪽이 현실적이에요.

여기서 가장 많이 생기는 오해가 하나 있어요. 피그마는 디자인 도구이고, 배포 도구가 아니에요. 아무리 완성도 높은 시안을 만들어도 그 자체로 브라우저에서 열리는 홈페이지가 되지는 않아요. 실제 홈페이지로 만들려면 구현 단계가 따로 필요하죠. Figma Sites가 생기면서 가능해진 부분도 있지만, 이 구분은 여전히 유효해요.

아직 조건이 붙어 있는 부분

이런 사람에게 맞아요

돌아보면 피그마가 퍼진 건 '디자인을 예쁘게 하고 싶어서'가 아니라 여러 직군이 같은 화면을 놓고 이야기해야 해서였어요. 그래서 맞는 사람과 안 맞는 사람이 꽤 뚜렷하게 갈려요.

이런 사람에게 맞아요.

• 디자이너, 기획자, 개발자, 마케터가 한 파일에서 협업해야 하는 팀
• 별도 설치 없이 브라우저만 있는 환경에서 바로 시작하고 싶은 사람
• 무료 플랜으로 핵심 기능을 먼저 경험해보고 싶은 입문자
• 개발자에게 디자인을 넘기는 과정에서 설명이 자꾸 새는 게 답답했던 사람

이런 사람에게는 안 맞아요.

• 사진 보정이나 합성이 주 목적인 사람 (이쪽은 픽셀 기반 도구가 여전히 낫습니다)
• 시안 단계를 건너뛰고 완성된 홈페이지를 바로 배포하고 싶은 사람
• 파일을 여러 개 만들어 두고 오래 관리해야 하는데 무료 플랜만 쓰려는 사람 (파일 3개 제한이 금방 걸려요)

정리하면, 피그마는 '혼자 잘 그리는 도구'보다 '같이 일하는 도구'로 봐야 이해가 쉬워요. 혼자 그림만 그릴 거라면 굳이 이걸 고를 이유가 크지 않아요.

설치하고 화면을 만지는 방법은 다음 편에서 이어서 볼게요. 이 편에서는 왜 나왔고 무엇을 바꿨는지까지가 핵심이에요.

오늘 해볼 건 하나예요. figma.com을 열어서 로그인 없이 둘러보기만 해보세요.

시작 전 확인할 것

• 피그마가 브라우저에서 실행되고 별도 설치가 필요 없다는 점
• 여러 사람이 같은 파일에서 동시에 작업할 수 있다는 점
• 무료 플랜은 디자인 파일 3개, 파일당 페이지 3개까지라는 점
• 2026년 3월 18일부터 AI 크레딧이 플랜별로 제한된다는 점
• 피그마는 디자인 도구이고 배포 도구가 아니라는 점

참고 링크

• 공식 Figma Learn - Help Center — help.figma.com
• 처음 시작하는 사람을 위한 피그마 사용법 완벽 정리! | 기술정보 블로그 | 디자인키트 — designkits.co.kr
• 2026년 초보자를 위한 피그마 사용법 소개 — pixso.net
• 피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지 - 코드스테이츠 공식 블로그 — codestates.com
• 피그마 사용법 — 비전공자도 따라 하는 5단계 입문 가이드 (2026) — 똑똑한 테크 노트 — smarttechnote.com
• 피그마 사용법 핵심 총정리 — 기초·웹사이트 만들기·무료 유료 차이·UI 디자인·개발자 활용 한눈에 : 전문 칼럼 | 홈페이지 템플릿 | 웹… — temkit.kr