데스크탑 웹 와이어프레임 가이드
웹 페이지 와이어프레임은 1440px(데스크탑 표준)이나 1920px(FHD)을 기준으로 작성하는 것이 일반적입니다. 본 도구는 Chrome·Safari·Firefox 세 가지 브라우저 프레임(주소창·탭·창 컨트롤)과 macOS·Windows 두 가지 OS 스타일을 지원해, 실제 브라우저에서 보이는 모습 그대로 와이어프레임을 작성할 수 있게 해 줍니다.
좌측 팔레트에서 상단 내비·히어로·3컬럼 카드·4컬럼 카드·피처·CTA 섹션·테이블·폼·후기·푸터 등 10가지 표준 컴포넌트를 클릭으로 추가하면, 우측 캔버스에 자동으로 세로 스택 형태로 쌓입니다. 각 컴포넌트는 흑백 또는 회색 톤의 단순한 박스로 표현되어 색상·디테일에 휘둘리지 않고 정보 구조만 검토할 수 있습니다.
와이어프레임 ↔ 목업 ↔ 프로토타입
1) 와이어프레임: 정보 구조와 레이아웃만. 흑백·박스 위주
2) 목업: 색상·이미지·폰트가 모두 적용된 정적 디자인
3) 프로토타입: 클릭·전환 동작까지 적용된 시뮬레이션
본 도구는 와이어프레임 단계에 특화되어 있으며, 목업·프로토타입은 Figma 등으로 이관해 작업하세요.
자주 묻는 질문 (FAQ)
Q. 컴포넌트 순서를 바꾸려면?
A. 현재 도구는 추가 순서대로 자동 배치합니다. 삭제 후 다시 추가해 순서를 조정하세요.
Q. 12 컬럼 그리드는 표시되나요?
A. 카드·피처 등 컬럼형 컴포넌트는 내부적으로 12컬럼 기준으로 정렬해 표시합니다.
Q. 반응형 와이어프레임도 만들 수 있나요?
A. 본 도구는 데스크탑 전용입니다. 모바일은 동일 사이트의 모바일 와이어프레임 빌더를 사용하세요.