와이어프레임 도구이란?
페이지 레이아웃과 UI 목업을 몇 초 만에 스케치하세요. 버튼, 텍스트 블록, 이미지, 입력 필드 등 일반적인 UI 요소를 캔버스에 드래그 앤 드롭한 다음 PNG로 내보내거나 JSON으로 저장하여 나중에 편집을 이어갈 수 있습니다.
캔버스는 fabric.js로 만들어져 있고 사각형, 텍스트 블록, 버튼, 이미지 자리 표시자, 입력 필드, 네비게이션 바, 카드, 체크박스, 드롭다운, 라디오 그룹, 진행 막대, 슬라이더, 그리고 주석용 스티커 메모까지 전체 요소 세트를 지원합니다. 확대/축소와 화면 맞춤으로 복잡한 레이아웃도 잘 보이고, 캔버스를 모바일·태블릿·데스크톱 너비로 잡을 수 있습니다. 실행 취소, 다시 실행, 그룹, 그룹 해제, 정렬 변경 모두 키보드로 가능하고, 공유용 PNG나 SVG, 또는 다음에 같은 상태로 다시 열어 편집할 수 있는 JSON으로 내보낼 수 있습니다.
사용 방법
- 툴바에서 사각형, 텍스트 블록, 버튼, 이미지 플레이스홀더, 입력 필드 등 UI 요소를 선택한 후 캔버스를 클릭하여 배치하세요.
- 요소를 드래그하여 위치를 변경하고, 핸들을 당겨 크기를 조절하며, 더블클릭으로 텍스트를 편집하세요. 요소들을 그룹으로 묶으면 더 쉽게 이동할 수 있습니다.
- 와이어프레임을 공유용 PNG 이미지로 내보내거나, 나중에 다시 불러와 편집을 계속할 수 있도록 JSON으로 저장하세요.
사용 시기
- 이해관계자 리뷰 15분 전에 화면 세 가지 변형을 빠르게 그려보고 방향 잡을 때.
- 레이아웃을 말로 설명하는 대신 Slack에 그림 한 장을 던질 때.
- 신입 디자이너에게 저충실도와 고충실도 작업의 차이를 실제로 보여줄 때.
결과
프로덕트 매니저가 로고 플레이스홀더, 이메일 및 비밀번호 입력 필드, 로그인 버튼, 비밀번호 찾기 링크가 포함된 모바일 앱 로그인 화면을 스케치한 후 PNG를 내보내 Slack 채널에 공유합니다.
자주 묻는 질문
- 이 도구는 Figma와 어떻게 다른가요?
- Figma는 컴포넌트, 프로토타입, 협업까지 갖춘 고충실도 도구입니다. 이쪽은 일부러 저충실도에 머물러 있어 기본 도형 몇 가지로 이루어진 작은 세트만 있고 스타일 디테일 늪에 빠지지 않습니다. 화면 한 장을 몇 분 만에 정리할 수 있고, 산출물의 목적은 생각을 정리하는 것이지 개발 핸드오프가 아닙니다.
- 요소를 1픽셀씩 움직이려면 어떻게 하나요?
- 요소를 선택한 뒤 방향키를 누르면 1픽셀씩 이동하고, Shift와 방향키를 함께 누르면 10픽셀씩 점프합니다. 크기를 조정할 때는 모서리 핸들을 끌고, Shift를 누른 채로 끌면 비율이 유지됩니다.
- 한 와이어프레임의 요소를 다른 와이어프레임에 복사할 수 있나요?
- 두 파일을 모두 JSON으로 내보낸 뒤 텍스트 에디터로 열어, 원하는 elements 배열의 항목을 한 쪽에서 다른 쪽으로 옮기고 다시 import 하면 됩니다. 다만 보통은 같은 파일 안에서 Ctrl+D 복제로 끝내는 사람들이 많습니다.
- JSON이 PNG보다 큰 경우가 있는 이유는 뭔가요?
- JSON은 모든 도형의 위치, 채움, 선, 글꼴, 텍스트 같은 모든 속성을 사람이 읽을 수 있는 텍스트로 저장합니다. PNG는 평평한 래스터 이미지입니다. 텍스트가 많은 화면에서는 JSON이 PNG보다 커질 수 있지만, 이후에 다시 편집할 수 있는 형식은 JSON뿐입니다.
- 직접 만든 도형을 추가할 수 있나요?
- 도구 안에서 직접 추가하는 기능은 없지만, 기본 도형들을 Ctrl+G로 그룹화해 검색 바나 탭 바 같은 재사용 가능한 묶음을 만들 수 있습니다. JSON으로 저장한 뒤 그 그룹 부분만 떼어 새 파일에 붙여 넣으면 나만의 미니 라이브러리가 됩니다.