와이어프레임 툴

사용 방법

1. 오른쪽 ‘캔버스 설정’에서 데스크톱·노트북·태블릿·휴대폰 크기를 고른 뒤, 왼쪽 컴포넌트 목록을 클릭하면 화면 가운데에 추가돼요. 캔버스로 바로 끌어다 놓을 수도 있어요.
2. 개체를 선택하면 오른쪽 속성 패널에서 채우기, 테두리, 텍스트, 글자 크기, 위치와 크기를 바꿀 수 있어요. 여러 개를 선택해 ‘⋯ 더보기’의 ‘정렬’, ‘그룹’으로 정리하고, 잘못했을 때는 Ctrl+Z로 실행 취소하세요.
3. 완성되면 ‘PNG 내보내기’로 이미지(1~3배 해상도)를 저장하거나 ‘JSON 내보내기’로 편집 가능한 파일을 저장한 뒤, 나중에 ‘JSON 가져오기’로 이어서 작업하세요.

사용 예시

800×600 편집 영역에서 1440×900 데스크톱 캔버스를 열고 ‘화면에 맞춤’을 누르면 배율은 min((800 − 80) ÷ 1440, (600 − 80) ÷ 900) = min(0.5, 0.58) = 50%가 되고, 좌우 40px, 위아래 75px 여백으로 가운데에 놓여요. 375×812 휴대폰 캔버스라면 (600 − 80) ÷ 812 ≈ 64%예요.

개체 A(X 100, Y 50, 너비 200, 높이 40)와 B(X 400, Y 120, 100×100)를 함께 선택하고 ‘왼쪽 맞춤’을 고르면 B가 왼쪽으로 300 이동해 X 100이 돼요. ‘아래쪽 맞춤’을 고르면 두 개체의 아래 가장자리가 220에 맞춰지고 A가 아래로 130 이동해요. A만 선택하고 ‘오른쪽 맞춤’을 하면 캔버스 오른쪽 끝에 맞춰져 오른쪽으로 1140 이동해 X 1240이 돼요.

‘격자에 맞춤’을 켜면 X 14로 끌어 놓은 개체는 10에, X 15라면 20에 붙어요. 2026년 10월 14일 15:30에 내보낸 이미지의 파일 이름은 wireframe-20261014-1530.png이고, 같은 분에 내보낸 JSON은 wireframe-20261014-1530.json이에요.

결과 해석

• 위쪽의 배율은 화면 표시에만 영향을 주며 개체의 실제 크기나 내보내기 결과는 바뀌지 않아요. 속성 패널의 X, Y, 너비, 높이는 항상 100% 기준 픽셀이고, X와 Y는 캔버스 대지 왼쪽 위 모서리로부터의 위치예요.
• 버튼, 카드, 표 같은 컴포넌트는 여러 도형을 묶은 그룹이에요. 채우기와 테두리는 본체(예: 버튼 배경)를, 텍스트 칸은 주 라벨을 바꿔요. 안쪽의 작은 부품을 따로 고치려면 먼저 ‘그룹 해제’를 누르세요.
• 상태 줄에 ‘이 브라우저에 자동 저장됨’이 보이면 저장된 거예요. 저장할 수 없다는 빨간 메시지가 나오면(시크릿 창 또는 저장 공간 부족) 바로 ‘JSON 내보내기’로 백업하세요.

원리와 계산 방법

• 캔버스는 오픈소스 Fabric.js 6으로 HTML canvas에 그려요. 각 컴포넌트는 사각형, 원, 선, 텍스트 같은 벡터 도형의 묶음이라 확대해도 흐려지지 않아요.
• 정렬은 개체를 하나만 선택하면 캔버스 대지를, 여러 개를 선택하면 모든 개체 경계 상자의 합집합을 기준으로 하며, 각 개체의 경계 상자(회전한 범위 포함)를 가로 또는 세로로 이동해요.
• 실행 취소와 다시 실행은 수정할 때마다 캔버스 전체를 JSON 스냅샷으로 기록하며 최대 100개까지 보관해요. 내용이 같으면 기록하지 않고, 실행 취소 후 새로 수정하면 다시 실행할 기록은 버려져요.
• 초안과 내보낸 파일은 같은 {app, version, canvas} 형식의 JSON이에요. 가져올 때 형식 버전과 각 개체의 종류를 확인해 이 툴이 만드는 도형과 텍스트만 받아들이고, 이미지나 패턴처럼 외부 리소스를 불러오는 내용은 거부해요.
• PNG 내보내기는 화면을 잠시 100%로 되돌리고 캔버스 대지 범위만 선택한 배율로 그린 뒤 브라우저의 canvas.toBlob으로 PNG를 만들어요. 서버는 전혀 거치지 않아요.

한계와 주의점

• 레이아웃과 정보 구조를 기획하는 용도이며, 클릭으로 동작하는 프로토타입, 여러 페이지 전환, 공용 컴포넌트, 실시간 공동 작업은 없어요.
• 실제 이미지나 아이콘은 넣을 수 없고 SVG·PDF 내보내기도 없어요. 선명한 이미지가 필요하면 PNG 3배를 고르세요.
• 초안은 한 브라우저의 localStorage(보통 약 5MB)에 저장되므로 내용이 아주 많으면 저장되지 않을 수 있어요. 가져오기 파일은 10MB, 캔버스는 한 변 5000px까지이며, 아주 큰 캔버스를 3배로 내보내면 브라우저의 canvas 크기 제한을 넘어 실패할 수 있어요.
• 텍스트는 기기의 시스템 글꼴로 표시되므로 같은 JSON이라도 다른 컴퓨터나 언어 설정에서는 글자 폭과 줄바꿈이 조금 달라질 수 있어요.

자주 묻는 질문

💬 답을 찾지 못했나요? 이 도구의 문제를 신고하거나 의견을 보내 주세요