Pencil Project 3.1.1은 도형과 UI Shape Collection을 끌어 배치해 앱·웹 화면과 흐름도를 만드는 무료 오픈소스 와이어프레임 도구입니다.
Windows·macOS·Linux 설치 파일 선택부터 Shapes, Properties, 페이지 링크와 PDF·PNG 내보내기, 문서·글꼴·실행 오류 해결까지 실제 메뉴 기준으로 설명합니다.
Pencil Project는 어떤 프로그램인가요?
Common Shapes, Flowchart, Bootstrap과 모바일 UI 컬렉션으로 여러 페이지의 화면을 설계합니다.
요소의 Link To로 페이지를 연결하고 PNG, PDF, SVG, 단일 웹페이지와 ODT로 결과를 내보낼 수 있습니다.
Pencil Project 실제 Shapes·캔버스·Properties 편집 UI
공식 저장소의 실제 3.x 화면에서 왼쪽 Shape Collections, 가운데 다중 페이지 캔버스, 오른쪽 Properties, 아래 페이지 미리보기와 Link To 우클릭 메뉴를 확인할 수 있습니다.
| Windows | EXE |
|---|---|
| macOS | Universal DMG |
| Linux | DEB·RPM |
| 요소 | Shape Collections |
| 화면 연결 | Link To |
| 내보내기 | Document Export Wizard |
Pencil Project 3.1.1 설치 후 첫 와이어프레임 만들기
Windows PC는 Pencil-3.1.1.ga.exe를 실행합니다. macOS는 Pencil-3.1.1.ga-universal.dmg, Ubuntu·Debian 64비트는 Pencil_3.1.1.ga_amd64.deb를 선택합니다. 설치 뒤 Pencil을 열고 새 문서를 만든 다음 아래 페이지 막대에서 첫 화면 이름을 정합니다.
왼쪽 Shapes에서 Common Shapes 또는 Bootstrap 컬렉션을 펼치고 Rectangle, Text, Button 같은 요소를 가운데 캔버스로 끌어놓습니다. 오른쪽 Properties에서 크기, 위치, 색, 글꼴과 정렬을 바꾸고 다음 페이지를 추가해 화면 사이에 Link To를 지정합니다. 완성하면 Export에서 PDF나 PNG를 선택해 결과를 확인합니다.
- 운영체제와 CPU에 맞는 3.1.1 설치 파일을 고릅니다.
- Pencil을 실행하고 새 문서를 만든 뒤 첫 페이지 이름을 정합니다.
- 왼쪽 Shapes에서 화면에 필요한 도형과 UI 요소를 캔버스로 끌어놓습니다.
- 오른쪽 Properties와 상단 도구 모음에서 크기·색·글꼴을 조정합니다.
- 두 번째 페이지를 만들고 버튼을 선택해 Link To로 이동 대상을 연결합니다.
- Document Export Wizard에서 PDF 또는 PNG를 선택합니다.
- 내보낸 파일을 열어 페이지 크기, 글자와 링크 순서를 확인합니다.
Pencil Project는 어떤 프로그램인가요?
Pencil Project는 앱·웹사이트 화면, 흐름도와 다이어그램을 만드는 무료 오픈소스 데스크톱 프로토타이핑 도구입니다. Common Shapes, Flowchart, Bootstrap, 모바일 UI 같은 Shape Collection에서 요소를 캔버스로 끌어 배치합니다.
여러 페이지를 한 문서에 만들고 요소 사이에 링크를 지정해 클릭 흐름을 표현할 수 있습니다. 완성된 문서는 PNG, 단일 웹페이지, PDF, 다중 페이지 SVG, OpenDocument Text 등으로 내보낼 수 있어 기획 검토와 화면 설계 공유에 적합합니다.
현재 버전과 무료 배포 확인
공식 다운로드 페이지의 현재 버전은 3.1.1이며 Windows EXE, macOS Universal DMG, Linux amd64·i386 DEB와 x86_64·i686 RPM을 제공합니다. 공식 GitHub 릴리스 태그 v3.1.1은 2023년 1월 1일 공개됐습니다.
공식 저장소의 LICENSE.md는 GNU GPL Version 2를 명시합니다. 설치 파일과 기능은 구독 없이 사용할 수 있으며 별도로 가져온 이미지, 글꼴과 클립아트의 이용 조건은 해당 자료의 라이선스를 확인해야 합니다.
Windows와 macOS 설치 파일 선택
일반 Windows 10·11의 Intel·AMD 64비트 PC에서도 공식 Windows 설치 파일 Pencil-3.1.1.ga.exe를 사용합니다. 설치 관리자를 실행하고 시작 메뉴에서 Pencil을 열어 새 문서와 파일 저장이 되는지 확인합니다.
macOS는 Intel과 Apple Silicon 구분 없이 공식 페이지의 Pencil-3.1.1.ga-universal.dmg를 제공합니다. DMG를 열어 Pencil을 Applications에 복사하고 처음 실행할 때 macOS가 표시하는 앱 확인 절차를 거칩니다.
Linux DEB와 RPM 선택
Ubuntu·Debian 64비트 환경은 Pencil_3.1.1.ga_amd64.deb, 32비트 x86 환경은 i386.deb를 선택합니다. Fedora·RHEL 계열 64비트는 Pencil-3.1.1.ga.x86_64.rpm, 32비트는 i686.rpm을 사용합니다.
패키지 설치에서 의존성 오류가 나면 배포판의 패키지 관리자로 누락된 라이브러리를 확인합니다. 다른 배포판용 패키지를 억지로 설치하기보다 현재 배포판 계열과 CPU에 맞는 DEB 또는 RPM인지 파일 이름부터 다시 확인합니다.
실제 편집기 화면 살펴보기
공식 저장소의 실제 3.x 화면에는 왼쪽 Shapes와 My Shapes, Clipart 탭, 가운데 캔버스, 오른쪽 Properties, 아래 페이지 미리보기 막대가 함께 표시됩니다. 상단 도구 모음에는 복사·잘라내기·붙여넣기, 확대·축소, 정렬, 글꼴·크기·색, 위치·크기·회전 값이 있습니다.
왼쪽에는 Bootstrap, Common Shapes, Ext JS Neptune, Common Design Elements 같은 컬렉션이 보이고, 가운데 선택 요소에는 파란 조절점이 나타납니다. 오른쪽 Properties에서 Background, Border, Text와 Shadow 값을 바꿔 선택한 요소의 모양을 조정합니다.
새 문서와 페이지 만들기
Pencil을 열고 새 문서를 만든 뒤 아래 페이지 영역에서 첫 페이지 제목을 더블클릭하거나 페이지 속성을 열어 Home처럼 알아보기 쉬운 이름으로 바꿉니다. 로그인, 목록, 상세처럼 화면 단위로 페이지를 나눕니다.
새 페이지를 추가한 뒤 페이지 크기와 배경을 설계 대상에 맞춥니다. 같은 헤더가 반복되면 기존 페이지를 복제하고 내용만 바꾸면 요소 위치와 스타일을 유지할 수 있습니다. 저장할 때 문서 이름과 폴더를 정해 Pencil 원본을 보관합니다.
Shapes에서 요소를 캔버스에 배치
왼쪽 검색 상자에 button, text, rectangle 같은 이름을 입력하거나 컬렉션을 펼쳐 요소를 찾습니다. 원하는 요소를 가운데 캔버스로 끌어놓고 모서리 조절점으로 크기를 바꿉니다.
여러 요소를 Shift와 클릭으로 선택한 뒤 상단 Alignment 도구로 왼쪽·가운데 정렬과 간격을 맞춥니다. 눈대중으로 반복 배치하기보다 복제와 정렬을 사용하면 표, 메뉴와 카드의 크기가 일정해집니다.
텍스트·색·테두리 수정
텍스트 요소나 버튼을 선택하고 상단의 글꼴, 크기, 굵게, 기울임, 글자색을 바꿉니다. 오른쪽 Properties의 Background Color와 Border Color·Style에서 배경과 테두리를 조정하고 Text Alignment로 가로·세로 정렬을 맞춥니다.
선택한 요소의 W·H와 X·Y 값을 직접 입력하면 같은 크기와 위치를 정확하게 재현할 수 있습니다. 브랜드 색은 같은 HEX 값을 사용하고, 설명용 와이어프레임에서는 색보다 제목·버튼·입력칸의 정보 구조가 먼저 읽히는지 확인합니다.
여러 요소 묶기와 배치 순서
아이콘과 텍스트처럼 함께 움직일 요소를 모두 선택하고 그룹 기능을 사용합니다. 요소가 다른 도형 뒤에 숨으면 우클릭 메뉴의 Arrangement에서 앞으로 보내기 또는 뒤로 보내기를 선택해 겹침 순서를 바꿉니다.
그룹을 해제하기 전에는 전체 크기와 위치를 조정하고, 잠금이 필요한 배경은 우클릭 메뉴의 Locked를 켭니다. 편집해야 할 요소까지 잠겼다면 같은 메뉴에서 잠금을 풀고 선택 가능한지 확인합니다.
페이지 사이 Link To 연결
클릭 가능한 버튼이나 메뉴 요소를 선택하고 우클릭 메뉴의 Link To에서 이동할 페이지를 선택합니다. 공식 화면처럼 Mockup, Patient Search, Session Background, Session Overview 같은 문서 페이지가 대상 목록에 표시됩니다.
모든 주요 이동 버튼에 링크를 지정한 뒤 시작 페이지에서 흐름을 따라가며 빠진 화면과 잘못된 대상을 확인합니다. 페이지 이름이 비슷하면 먼저 기능 중심으로 이름을 정리한 후 링크를 연결해야 검토 때 혼동이 줄어듭니다.
Flowchart와 커넥터 만들기
Flowchart 컬렉션에서 Process, Decision, Document, Terminator 같은 도형을 끌어놓고 Straight Connector, Multi-segment Connector 또는 Curvy Connector로 연결합니다. 커넥터 끝을 도형의 연결 지점에 붙여 도형을 옮겨도 선이 따라오게 합니다.
분기선에는 예·아니오 같은 조건을 텍스트로 적고, 선이 겹치면 Multi-segment Connector로 경로를 꺾습니다. 도형 크기와 간격을 맞춘 뒤 전체 흐름이 한 방향으로 읽히는지 확인합니다.
My Shapes에 반복 요소 저장
자주 쓰는 버튼, 카드나 입력 묶음을 선택하고 우클릭 메뉴의 Add to My Collections를 사용해 개인 컬렉션에 저장합니다. 프로젝트 이름과 기능을 알 수 있는 이름으로 등록하면 다음 페이지와 다른 문서에서 다시 끌어 쓸 수 있습니다.
원본 묶음의 텍스트와 색을 바꾼 버전을 여러 개 만들기보다 기본 컴포넌트를 정하고 페이지에서 필요한 내용만 수정합니다. 팀 공유가 필요하면 사용한 컬렉션과 글꼴 파일을 문서와 함께 정리합니다.
Clipart 검색과 이미지 사용
왼쪽 Clipart에서 키워드를 검색하고 필요한 그림을 캔버스로 가져옵니다. 인터넷 검색 결과나 외부 SVG·PNG를 사용할 때는 화면 해상도와 투명 배경을 확인하고, 확대했을 때 흐려지는 작은 비트맵은 교체합니다.
클립아트의 사용 권한은 Pencil 자체의 GPL 라이선스와 별개입니다. 외부 공개물에 쓸 설계라면 출처와 라이선스를 기록하고, 단순 와이어프레임 단계에서는 의미가 분명한 기본 아이콘과 도형을 우선합니다.
Document Export Wizard로 PDF·PNG 만들기
내보내기 메뉴를 열면 Document Export Wizard에 Rasterized graphics (PNG files), Single web page, Export to PDF, Send to printer, Multi-page SVG file, OpenOffice.org document (ODT file)이 표시됩니다. 공유 목적에 맞는 형식을 선택하고 Next를 누릅니다.
PNG는 페이지별 이미지 확인, PDF는 여러 화면을 한 파일로 검토할 때 편합니다. 출력 폴더와 페이지 범위를 정해 내보낸 뒤 실제 파일을 열어 글자 잘림, 배경 이미지, 페이지 순서와 해상도를 확인합니다.
선택 영역만 PNG로 저장
특정 컴포넌트나 화면 일부만 필요하면 요소를 선택하고 우클릭 메뉴의 Export selection as PNG를 실행합니다. 선택 범위에 불필요한 배경이나 숨은 요소가 포함되지 않았는지 먼저 확인합니다.
내보낸 PNG의 투명 배경과 여백을 확인하고 문서에 삽입합니다. 선택 요소의 그림자가 잘리면 캔버스에서 주변 여백을 확보하거나 전체 페이지 PNG로 내보낸 뒤 필요한 범위를 자릅니다.
문서가 열리지 않거나 깨질 때
파일이 열리지 않으면 원본을 복사해 보관하고 Pencil 3.1.1에서 새 문서를 만든 뒤 프로그램 자체가 정상 저장되는지 먼저 확인합니다. 이전 Pencil 버전이나 브라우저 확장판에서 만든 파일은 사용한 Shape Collection과 기능 차이가 있을 수 있습니다.
외부 이미지와 글꼴이 빠져 보이면 원본 경로, 파일 권한과 설치된 글꼴을 확인합니다. 손상된 파일에 계속 덮어쓰지 말고 자동 저장본이나 백업을 복사해 열어 페이지가 정상 표시되는 가장 최근 사본을 찾습니다.
Linux에서 실행되지 않을 때
DEB와 RPM이 현재 배포판·CPU와 맞는지 확인하고 터미널의 패키지 설치 오류에서 누락된 의존성을 봅니다. amd64와 x86_64는 64비트, i386과 i686은 32비트 파일이므로 운영체제 아키텍처와 다르면 실행되지 않습니다.
바로 관리자 권한으로 실행하기보다 사용자 설정 폴더와 문서 저장 위치의 쓰기 권한을 확인합니다. 그래픽 화면이 비거나 충돌하면 데스크톱 세션, Electron 관련 로그와 GPU 가속 문제를 구분해 작은 새 문서로 재현합니다.
PDF·PNG 출력이 다르게 보일 때
내보낸 문서에서 글꼴이 바뀌면 사용한 글꼴이 해당 PC에 설치됐는지, PDF에 표현 가능한 글꼴인지 확인합니다. 다른 PC에 전달할 자료는 범용 글꼴을 사용하거나 PNG로 함께 내보내 모양을 비교합니다.
배경 이미지와 선이 흐리면 페이지 크기와 출력 해상도를 확인하고 지나치게 작은 원본 이미지를 교체합니다. PDF와 PNG를 각각 한 페이지로 시험한 뒤 문제가 없는 형식으로 전체 문서를 내보냅니다.
와이어프레임 검토와 원본 보관
페이지 이름을 사용자 행동 순서로 정리하고 모든 Link To를 시작 화면에서 눌러 봅니다. 버튼 문구, 입력값 예시, 오류 화면과 완료 화면이 빠지지 않았는지 확인한 뒤 PDF를 만들어 검토자에게 공유합니다.
수정 가능한 Pencil 원본과 내보낸 PDF·PNG를 함께 보관하고 파일 이름에 버전과 날짜를 넣습니다. 외부 이미지, 글꼴과 사용자 Shape Collection도 별도 폴더에 정리하면 다른 PC에서 다시 열 때 누락을 줄일 수 있습니다.
자주 묻는 질문
Pencil Project 3.1.1은 무료인가요?
네. 공식 저장소의 LICENSE.md는 GNU GPL Version 2를 명시합니다.
Windows에서는 어떤 파일을 받나요?
공식 Windows 설치 파일 Pencil-3.1.1.ga.exe를 선택합니다.
Apple Silicon Mac에서도 설치할 수 있나요?
공식 페이지는 Intel과 Apple Silicon을 함께 지원하는 Universal DMG를 제공합니다.
페이지 사이 이동은 어떻게 연결하나요?
버튼이나 요소를 선택하고 우클릭 메뉴의 Link To에서 대상 페이지를 고릅니다.
PDF나 PNG로 저장할 수 있나요?
Document Export Wizard에서 Export to PDF 또는 Rasterized graphics (PNG files)를 선택합니다.
첫 화면을 만들고 페이지 링크와 PDF 출력까지 확인하세요
운영체제에 맞는 Pencil Project 3.1.1을 설치하고 Shapes를 캔버스에 배치합니다. Properties로 스타일을 맞춘 뒤 Link To로 화면을 연결하고 PDF나 PNG를 열어 페이지 순서와 글자 표시를 확인하세요.
공식 자료와 확인일
Pencil Project 공식 홈페이지 · Pencil Project 공식 다운로드 · Pencil Project 공식 저장소·GPL-2.0 라이선스 · Pencil Project 공식 기능 안내 | 2026-10-02T04:08:48.634784+00:00
