설계 도면과 마지막 페이지 사이의 거리는 대개 둘이 같은 배치 규칙을 쓰는지에 숨어 있다.

브라우저를 열면 작업이 시작된다

Penpot 은 공개된 설계 기반이다. 공식은 첫 화면에서 함께 작업해야 하는 팀을 위한 공개 설계 도구로 자리매김하고, 소개 화면에서는 설계하는 쪽과 만드는 쪽을 잇는 웹 기반 설계 도구라고 덧붙인다. 실제로 쓸 때 가장 직접적인 차이는 브라우저를 열면 프로젝트 안으로 들어간다는 점이다. 무거운 클라이언트를 먼저 설치할 필요가 없고, 다른 기계로 옮겨도 환경을 다시 짜지 않아도 된다.

공식은 사명을 분명히 적는다. 공개되어 열린 표준을 따르는 기반을 제공하고 설계와 개발 사이의 협업을 다음 단계로 밀어 올린다는 것이다. 이 한 문장이 파일 형식과 배치 규칙에 대한 선택을 설명한다. 설계 결과가 다음 단계로 매끄럽게 넘어가야 협업이 의미를 가진다.

브라우저 안에서 도는 데는 값도 있다. 짚어 둘 만하다. 수백 개의 프레임과 이미지, 구성 요소가 올라간 화면은 기계와 회선에 기댄다. 하루 종일 열어 둔 프로젝트와 검토할 때만 여는 프로젝트는 다르게 움직인다. 큰 파일을 다루는 팀은 나누는 법을 익히게 되고, 그 습관은 기술이라기보다 설계 판단에 가깝다.

웹 자체의 규칙으로 배치하기

배치 모형이 이 도구의 다른 점이다. 첫 화면은 CSS 격자와 늘어나는 배치로 화면을 설계할 수 있다고 밝힌다. 앞단이 실제로 쓰는 그 규칙이다. 설계 도면 안의 여백과 정렬이 마지막 코드와 맞출 수 있어, 넘길 때 손으로 환산하던 층이 하나 줄어든다.

설계 체계로는 구성 요소와 본래의 설계 변수, 공유 보관함을 준다. 설계 변수는 색과 글자 크기 같은 기초 값을 다시 쓸 수 있는 항목으로 빼내어, 한 곳을 고치면 전체에 닿는다. 구성 요소와 공유 보관함은 여러 화면 사이의 일관을 지킨다. 오래 손보는 화면 작업에서는 이 조합이 화면마다 고치는 것보다 훨씬 수월하다. 뼈대 그림과 움직이는 시제품이 구조에서 시연까지 양 끝을 덮는다.

데이터를 어디에 둘지는 쓰는 쪽이 정한다

배치 방식은 공식이 거듭 강조하는 또 하나의 점이다. 직접 돌리는 화면은 사설 구름, 손안의 환경, 심지어 떨어져 있는 네트워크에서도 돌릴 수 있고, 설계 데이터의 위치와 접근 권한은 쓰는 쪽이 온전히 쥔다고 적는다. 데이터를 안쪽 네트워크 밖으로 내보내고 싶지 않은 팀에게 이 한 줄은 기능 목록보다 무거운 경우가 많고, 공개된 형태에서만 가능하다.

가격 화면도 공식의 말 그대로다. 무료 단계는 기능이 완전하고 수 제한도 없으며 빠진 기능도 없다. 큰 조직을 위한 유료 단계를 따로 두어 통제와 절차 요구에 응한다. 코드는 Mozilla 공공 허락 제2판으로 공개 저장소에 올라가 있어, 원본을 받아 직접 만들고 배치할 수 있다. 설계 결과도 자기 것이다.

이 조합에서 두 가지가 따라온다. 하나는 좋은 것이고, 하나는 미리 정해 둘 것이다. 조건이 바뀌어도 이사를 강요받지 않고, 갱신도 강요받지 않는다. 즉 한 인스턴스가 어느 판에서 도는지는 누군가 책임질 결정이 된다. 직접 돌리는 일은 시작이 싸지만 손질이 필요한 서비스이기도 하니, 누가 맡을지 일찍 정하는 편이 좋다.

파일과 배치의 표준을 쓰는 쪽 손에 쥐여 주는 것이 협업에 단단한 바탕을 준다.

쓰는 요령. 먼저 설계 변수와 구성 요소 보관함의 기초 항목을 정해 두면 나중에 더하는 화면이 훨씬 매끄럽다. 옛 프로젝트를 옮길 때는 배치 규칙이 앞단과 맞는지 먼저 확인해, 넘기는 단계에서 다시 만들지 않게 한다. 데이터를 안쪽 네트워크에 두어야 한다면 직접 돌리는 배치를 일찍 한 번 시도하고, 계정과 권한도 함께 정한다.