[심층분석] 피그마만 답일까? 디자인을 '코드'로 다루는 오픈소스 툴, Penpot 이야기

디자이너와 개발자가 같은 언어로 말할 수 있다면

혹시 이런 경험 있으세요? 디자이너가 예쁘게 만든 화면을 받아서 개발로 옮기는데, 버튼 간격이 16px인지 18px인지 매번 자로 재듯 확인하고, 색상 코드는 일일이 복사하고, "이거 반응형으로 어떻게 줄어드는 거예요?"라고 물어보다 하루가 다 가는 그런 경험이요. 디자인과 개발 사이엔 보이지 않는 벽이 늘 있었거든요. 디자이너는 '그림'을 그리고, 개발자는 그 그림을 '코드'로 다시 번역하는 식이었죠.

오늘 소개할 Penpot(펜팟)은 바로 이 벽을 허물겠다고 나선 도구예요. 한 줄로 요약하면 "디자인과 코드 협업을 위한 오픈소스 디자인 툴"인데요. 디자인 툴이라고 하면 대부분 피그마(Figma)를 먼저 떠올리실 거예요. 맞아요, Penpot은 그 피그마와 정면으로 경쟁하는 오픈소스 대안이에요. 그런데 단순히 "피그마를 공짜로 따라 만든 것" 정도가 아니라, 철학 자체가 좀 달라요. 오늘은 이 도구가 왜 만들어졌고, 기술적으로 뭐가 특별한지, 그리고 우리 한국 개발자들이 실무에서 어떻게 써먹을 수 있는지를 차근차근 풀어볼게요.

Penpot이 등장한 배경: '소유권'이라는 키워드

먼저 왜 이런 도구가 필요했는지부터 이야기해볼게요. 몇 년 전 어도비(Adobe)가 피그마를 약 200억 달러에 인수하려고 했던 사건, 기억하시나요? 결국 규제 문제로 무산되긴 했지만, 그때 디자인 업계가 한바탕 술렁였어요. 이유는 간단해요. "우리가 매일 쓰는 핵심 도구를 한 회사가 통째로 쥐고 있으면, 그 회사 마음대로 가격을 올리거나 정책을 바꿔도 우리는 끌려갈 수밖에 없다"는 불안감이었죠.

특히 회사 입장에서는 더 민감한 문제가 하나 더 있어요. 바로 데이터 주권이에요. 이게 뭐냐면, 우리 회사의 디자인 자산(시안, 디자인 시스템, 기획 화면 등)이 전부 외부 회사의 서버에 올라가 있다는 거예요. 은행, 정부기관, 의료 같은 곳은 보안 규정상 "우리 데이터는 우리 서버 안에 둬야 한다"는 요구가 강하거든요. 이런 곳에서는 클라우드에만 존재하는 도구를 쓰기가 곤란해요.

Penpot의 핵심 강점이 바로 여기예요. Penpot은 오픈소스라서 코드가 전부 공개돼 있고, 셀프 호스팅(self-hosting)이 가능해요. 셀프 호스팅이라는 건, 쉽게 말해 "남의 집(클라우드)에 세 들어 사는 대신, 우리 집(우리 회사 서버)에 직접 설치해서 쓴다"는 뜻이에요. 그래서 디자인 환경 전체를 회사가 완전히 통제할 수 있고, 까다로운 규제나 보안 요구사항도 맞출 수 있어요. "우리 데이터를 우리가 쥐고 있다"는 안심, 이게 Penpot이 내세우는 가장 큰 무기예요.

기술 분석: 디자인을 '코드'로 표현한다는 것

Penpot의 진짜 차별점은 기술 철학에 있어요. 슬로건처럼 반복되는 말이 "design is expressed as code(디자인이 코드로 표현된다)"인데, 이게 무슨 뜻인지 풀어볼게요.

웹 표준 위에 지어진 집

보통의 디자인 툴은 자기들만의 독자적인 방식으로 그림을 그려요. 그래서 디자이너가 만든 사각형이 개발자가 쓰는 <div> 박스와는 전혀 다른 세계의 물건이었죠. 번역이 필요했던 이유예요.

Penpot은 처음부터 웹 표준(SVG, CSS, HTML) 위에서 디자인을 그려요. 이게 왜 중요하냐면요, 디자이너가 화면에 올린 요소가 사실상 브라우저가 이해하는 형식 그대로라는 거예요. 비유하자면, 다른 툴이 '그림을 그린 뒤 외국어로 번역해서 건네주는' 방식이라면, Penpot은 '처음부터 개발자와 같은 모국어로 그림을 그리는' 셈이에요. 그래서 디자인을 코드로 바꾸는 과정에서 정보가 새거나 어긋나는 일이 줄어들어요.

CSS Grid와 Flexbox를 디자인 단계에서

특히 인상적인 건 CSS Grid와 Flex Layout을 디자인 도구 안에 그대로 가져왔다는 점이에요. Flexbox와 Grid가 뭐냐면, 웹에서 요소들을 가로/세로로 정렬하고 화면 크기에 따라 알아서 늘었다 줄었다 하게 만드는 CSS의 핵심 배치 기술이에요. 개발자라면 매일 쓰는 그거 맞아요.

기존 도구에서는 디자이너가 "이 카드들은 화면이 좁아지면 세로로 쌓이게 해주세요" 같은 의도를 '말'로 설명해야 했어요. 그런데 Penpot에서는 디자이너가 직접 Flex나 Grid로 레이아웃을 짜기 때문에, 만든 시안이 처음부터 진짜 코드처럼 반응형으로 동작해요. 개발자가 받아서 "아, 이건 flex-direction을 바꾸는 거구나" 하고 바로 이해할 수 있는 거죠. 디자인과 구현 사이의 추측이 줄어드는 거예요.

Design Tokens: 단 하나의 진실의 원천

또 하나 핵심은 Design Tokens(디자인 토큰)예요. 이게 뭐냐면, 색상·간격·폰트 크기 같은 디자인의 기본 값들을 이름표를 붙여서 변수처럼 관리하는 거예요. 예를 들어 메인 색상을 color-primary라는 이름으로 정해두면, 디자인에서도 개발에서도 똑같이 이 이름을 참조해요.

왜 좋냐면요, 나중에 브랜드 색이 파란색에서 초록색으로 바뀌어도 color-primary 값 하나만 고치면 디자인과 코드가 동시에 따라 바뀌거든요. 일일이 모든 화면을 손볼 필요가 없어요. 이걸 "single source of truth(단일 진실 공급원)"라고 부르는데, 쉽게 말해 "진짜 정답은 딱 한 군데에만 적어두고 모두가 거길 본다"는 원칙이에요. 디자인 시스템이 커질수록 이 일관성이 정말 중요해져요.

MCP 서버와 플러그인: 자동화로 가는 길

요즘 AI 흐름과 맞닿은 부분도 있어요. Penpot은 MCP 서버를 제공하는데요. MCP(Model Context Protocol)는 쉽게 말해 AI 모델이 외부 도구와 대화할 수 있게 해주는 표준 통로예요. 이걸 통해 "AI에게 디자인 정보를 읽게 하고, 반대로 코드를 디자인에 반영하는" 양방향 작업이 가능해져요.

거기다 공개 API와 플러그인 시스템까지 있어서, 작업 공간 자체를 프로그래밍할 수 있어요. 예를 들어 "엑셀에 정리된 100개의 상품 카드를 자동으로 디자인에 찍어내기" 같은 반복 작업을 스크립트로 돌릴 수 있는 거죠. 단순히 그림 그리는 도구를 넘어, 자동화와 AI 워크플로의 무대가 되는 셈이에요.

업계 맥락: 피그마, 그리고 다른 대안들과 비교하면

그럼 이쯤에서 다른 도구들과 비교해볼게요.

• 피그마(Figma): 현재 업계 표준이에요. 부드러운 사용성, 풍부한 플러그인 생태계, 안정적인 실시간 협업이 강점이죠. 비유하자면 '모든 게 잘 갖춰진 대형 프랜차이즈 카페' 같아요. 편하지만, 가게 운영 방침은 본사가 정하고 내 데이터는 본사 서버에 있어요.
• Penpot: '내가 직접 운영하는 동네 카페'예요. 셀프 호스팅으로 모든 걸 내 손에 둘 수 있고, 오픈소스라 원하면 내부를 뜯어고칠 수도 있어요. 대신 직접 서버를 관리해야 하니 손이 좀 더 가요. 웹 표준 기반이라 개발자 친화성은 오히려 더 높을 수 있고요.
• 스케치(Sketch): 맥(Mac) 전용 데스크톱 도구로 오랜 팬층이 있지만, 플랫폼 제약과 협업 면에서 웹 기반 도구들에 점점 밀리는 추세예요.

한국 개발자에게 주는 시사점

그럼 우리 입장에서 어떻게 활용할 수 있을까요? 몇 가지 구체적인 시나리오로 풀어볼게요.

1. 보안이 빡센 조직이라면. 금융·공공·헬스케어처럼 "외부 클라우드에 디자인 자료를 못 올린다"는 곳, 한국에 의외로 많아요. 이런 환경이라면 Penpot 셀프 호스팅이 거의 유일한 현대적 선택지가 될 수 있어요. 사내 서버에 도커(Docker)로 띄워두면, 망 안에서 안전하게 협업할 수 있거든요.

2. 스타트업의 비용 관리. 팀원이 늘어날수록 디자인 툴의 인당 구독료가 부담될 때가 있어요. Penpot은 오픈소스라 자체 운영 시 라이선스 비용 부담이 없어요. 물론 서버 운영 인력이라는 '숨은 비용'은 따져봐야 하지만, 규모가 커질수록 셈법이 달라질 수 있어요.

3. 디자인 시스템을 코드와 일치시키고 싶을 때. 프론트엔드 팀이 디자인 토큰을 코드의 CSS 변수와 연결해두면, 디자이너의 색상 변경이 곧바로 개발 토큰에 반영되는 파이프라인을 만들 수 있어요. 디자인-개발 핸드오프(인수인계)의 고질적인 마찰을 크게 줄일 수 있죠.

학습 로드맵 제안: 처음이라면 굳이 서버부터 깔 필요 없어요. ① 먼저 Penpot 클라우드 무료 계정으로 간단한 화면 하나를 Flex/Grid 레이아웃으로 그려보며 "디자인이 코드처럼 동작한다"는 감을 잡으세요. ② 그다음 디자인 토큰으로 색상·간격을 변수화해보고요. ③ 마지막으로 도커로 로컬에 셀프 호스팅을 한번 띄워보면, 실제 도입 시 무엇을 고려해야 하는지 몸으로 알게 돼요. 평소 CSS를 다뤄본 개발자라면 적응이 빠를 거예요.

마무리: 디자인 도구의 '오픈소스 시대'는 올까

Penpot이 던지는 질문은 결국 이거예요. "우리가 매일 쓰는 핵심 도구를, 우리가 직접 소유하고 통제할 수 있어야 하지 않을까?" 개발 세계에서는 리눅스, 깃(Git)처럼 오픈소스가 표준이 된 사례가 많은데, 디자인 도구 영역만큼은 아직 상용 제품이 꽉 잡고 있었거든요. Penpot은 그 흐름에 균열을 내려는 시도예요.

물론 당장 피그마를 완전히 대체하긴 어려울 거예요. 생태계의 성숙도, 익숙함, 협업 안정성에서 아직 따라잡을 부분이 있으니까요. 하지만 '디자인을 코드로 표현한다'는 방향성은 분명 디자이너와 개발자의 거리를 좁히는 미래와 맞닿아 있어요. AI가 코드와 디자인을 넘나드는 시대가 오면, 웹 표준 기반이라는 Penpot의 선택이 빛을 발할 수도 있고요.

여러분은 어떠세요? 지금 쓰는 디자인 툴에서 가장 답답했던 순간은 언제였나요? 데이터 소유권과 편리함 사이에서 하나를 골라야 한다면, 여러분의 팀은 어느 쪽을 택할 것 같으세요? 혹시 이미 Penpot을 써본 분이 있다면, 실전 후기를 댓글로 나눠주시면 모두에게 큰 도움이 될 거예요. 함께 이야기해봐요!