무료

디자인에 배치 규칙을 담으면 개발자에게 무엇이 넘어갈까

Flex와 Grid로 정한 배치 규칙은 개발자에게 어떤 정보로 전달될까. Penpot 공식 화면과 문서로 Inspect, 디자인 토큰, MCP와 운영 조건을 살펴봤다.

ZDL 제작 · AI 생성 개념 일러스트. 실제 제품·서비스 화면이 아닙니다.

Penpot의 공식 소개에는 디자인 도구에서 익숙한 화면과 웹 개발에서 쓰는 이름이 함께 나온다. 캔버스에서 요소를 배치하지만, 그 배치를 정하는 방식은 CSS Grid와 Flex다. 개발자는 Inspect에서 디자인의 속성과 코드를 확인한다.

이 글은 화면을 그린 뒤 개발자가 무엇을 다시 판단해야 하는지에 초점을 맞춘다. 버튼 사이 간격은 일정한가. 내용이 길어지면 상자는 늘어나는가. 화면 폭이 줄면 요소는 어떻게 배치되는가. Penpot은 이런 질문을 디자인 단계의 설정으로 다루고, 그 설정을 코드와 연결한다.

Penpot 공식 홈페이지에서 소개하는 앱 프로젝트 편집 화면 — Penpot 공식 홈페이지의 제품 화면. 실제로 이 프로젝트를 편집한 기록은 아니다. 이미지: Penpot · 원문

발견 경로는 Exploding Topics의 2026년 8월 24일 미국 트렌드 목록이다. 목록의 검색 관심을 팀 도입률이나 개발 시간 절감의 근거로 쓰지는 않았다. 아래 설명은 공식 사용자 가이드와 제품 안내를 대조한 결과다.

상자의 위치와 상자가 움직이는 규칙

Flexible Layouts 가이드는 Flex Layout을 CSS Flexbox에 기반한 기능으로 설명한다. 방향, 정렬, 요소 사이 간격, 안쪽 여백과 크기를 설정할 수 있다. 내용과 컨테이너에 맞춰 크기를 조절하는 방식도 다룬다.

예를 들어 ‘확인’이라는 짧은 버튼 문구를 ‘신청 내용 확인’으로 바꾸는 상황을 생각해보자. 이때 궁금한 것은 처음 버튼의 폭뿐 아니라, 글자가 길어졌을 때의 처리다. 이는 기능 설명을 위한 가상 예시다. Penpot 가이드 역시 내용에 따라 커지는 버튼을 Flex의 기본 예제로 제시한다.

Penpot Flex Layout의 방향, 정렬, 간격과 크기 설정을 표시한 공식 문서 화면 — Flex Layout의 속성 패널. 방향과 간격을 수치·규칙으로 설정한다. 이미지: Penpot 공식 문서 · 설명

Grid Layout은 행과 열을 함께 다룬다. 가이드는 셀과 영역, 간격, 행·열의 크기를 설명한다. 요소를 순서대로 배치하거나 특정 셀·영역에 놓는 방식도 구분한다. Flex와 Grid를 고를 때 살펴볼 것은 이름보다 어떤 관계로 요소를 배치하려는가다.

배치에서 정할 것	공식 가이드의 관련 기능
방향·정렬·사이 간격	Flex Layout 속성
행·열과 여러 셀을 차지하는 영역	Grid Layout 속성
일반 배치 흐름에서 벗어난 요소	절대 위치 설정

폭이 바뀌어도 비율은 남는다

Grid 가이드는 남은 공간을 나누는 단위인 fr도 설명한다. 아래는 이를 이해하기 위해 만든 별도 예시다. 두 열의 비율을 1:3으로 두고 전체 폭만 바꿨다. 글 안에서 ‘좁게’를 선택하면 두 영역이 함께 줄어든다.

넓게 좁게

1fr

3fr

ZDL이 CSS로 만든 개념 예시. Penpot에서 내보낸 코드나 앱 실행 화면이 아니다. 칸 사이 간격이 없는 단순한 두 열이다.

여기서 바뀌는 것은 전체 폭이고, 유지되는 것은 두 열의 비율이다. 화면을 설명할 때 ‘왼쪽 영역이 지금 몇 픽셀인가’와 ‘폭이 달라지면 어떻게 나눌 것인가’는 서로 다른 정보다. 디자인 도구에 배치 규칙이 있으면 후자의 질문도 디자인 안에서 다룰 수 있다.

넓은 영역과 좁은 영역 모두에서 왼쪽 1fr, 오른쪽 3fr 비율을 유지한 ZDL 설명 도식 — 같은 비율을 두 가지 폭에 적용한 정적 도식. 위 조작 예시를 사용하지 않아도 비교할 수 있도록 함께 실었다.

Inspect에서 실제로 가져가는 것

Dev tools 가이드에 따르면 Inspect에서는 레이어 간 거리, 보드 가장자리까지의 거리, 스타일과 콘텐츠 속성을 확인한다. 속성을 하나씩 또는 묶어서 복사할 수 있고, 레이어의 CSS를 복사하는 기능도 있다.

Code 탭이 제공하는 항목은 구체적이다. 선택한 레이어의 SVG·HTML 마크업과 CSS 스타일을 확인한다. 에셋 내보내기도 가능하다. 디자인 화면을 보고 수치를 다시 옮기는 과정에 이 정보를 사용할 수 있다.

Penpot Grid 디자인에서 Inspect 코드 화면으로 전환하는 공식 시연 — Grid와 코드 확인을 연결한 공식 문서의 움직이는 예시. 이미지: Penpot · 원문

코드 조각을 얻는 것과 앱이 완성되는 것은 구분해야 한다.
이 문서가 설명하는 범위는 선택한 디자인의 마크업·스타일·에셋이다. 로그인 처리, 데이터 저장, 오류 상태까지 완성된다는 근거로 읽을 수는 없다. 이번 조사에서는 내보낸 코드를 실제 서비스에 통합하지 않았다.

따라서 Penpot을 평가할 때는 ‘코드가 나오나’에서 한 걸음 더 들어가야 한다. 디자인에서 정한 배치와 속성이 어떤 형태로 전달되는지, 기존 프로젝트에서 그 결과를 어떻게 사용할지 확인할 문제다. 공식 문서만으로 통합 품질이나 절감 시간을 수치화할 수는 없다.

여러 화면이 같은 값을 쓰게 하는 방법

배치 규칙과 별개로, 여러 화면이 공유하는 색이나 크기 값도 관리해야 한다. Design Tokens 가이드는 토큰을 세트와 테마로 관리하고 JSON으로 가져오거나 내보내는 기능을 설명한다. 하나의 파일 또는 세트별로 나눈 여러 파일을 사용할 수 있다.

값을 파일로 주고받을 수 있다는 점은 팀의 연결 방식에 선택지를 준다. 다만 JSON을 내보냈다는 사실만으로 제품 코드와 항상 동기화된 것은 아니다. 어떤 파일을 기준으로 삼을지, 변경 내용을 언제 적용할지는 실제 작업 흐름에서 정할 일이다.

옆으로 넘겨보기 · 배치 / 검사 / 공유 값

배치: Flex와 Grid로 방향, 간격, 행과 열을 정한다 — 1 / 3 · 요소의 관계를 정한다.

검사: Inspect에서 거리와 속성, HTML SVG CSS를 확인한다 — 2 / 3 · 확인하고 가져갈 정보를 정한다.

공유 값: 디자인 토큰을 JSON으로 주고받으며 코드 반영 과정은 별도로 정한다 — 3 / 3 · 공유 값의 이동과 반영을 구분한다.

AI 연결도 디자인 파일을 다룬다

공식 MCP Server 소개는 AI 에이전트를 Penpot의 플러그인 API와 연결하는 경로를 안내한다. Codex·Cursor·Claude 등의 연결 예시를 제시하며, 디자인 파일을 읽고 상호작용하는 작업을 설명한다.

이 연결은 앞서 본 기능 위에서 이해할 수 있다. 화면의 요소와 속성을 다루는 작업에 AI를 참여시키는 것이다. 여기서는 MCP를 설치하거나 디자인을 생성하지 않았다. 연결 안내가 있다는 것과 원하는 디자인이 정확히 만들어진다는 것은 각각 검증할 항목이다.

무료 플랜과 직접 운영의 조건

2026년 9월 7일 확인한 요금 안내에서 Cloud Professional은 사용자당 월 0달러로 표시된다. 팀 구성원 최대 8명, 무제한 뷰어, 최대 10GB 저장공간, 자동 저장 버전과 삭제 파일 복구 기간 각각 7일을 안내한다. 파일 수 제한이 없다는 문구에도 저장공간 범위라는 조건이 붙는다.

Self-host 안내는 자체 서버나 사설 클라우드에 설치하는 경로를 제공한다. 이 경우 저장 위치와 운영 환경을 직접 선택할 수 있다. 운영에 필요한 서버·백업·업데이트 비용까지 사라진다고 해석할 수는 없다.

이 글은 팀을 이주시켜 본 후기가 아니다. 공식 자료에서 확인한 Penpot의 제안은 배치 규칙을 디자인에 담고, 개발자가 그 속성과 코드를 확인하고, 공유 값을 파일로 주고받는 데 있다. 도입을 검토한다면 자기 팀의 화면 하나로 이 과정을 따라가며 실제로 가져갈 수 있는 정보부터 확인하는 편이 구체적이다.

자료 확인: 2026년 9월 7일. 공식 제품 화면·사용자 가이드에 대한 해설이다. ZDL 개념 예시를 제외한 화면은 Penpot 제공 자료이며 직접 사용한 결과로 제시하지 않았다. 설명 카드와 비율 도식은 ZDL 제작이다.