데스크톱과 모바일 화면의 와이어프레임으로 페이지를 계획하거나 스크린샷을 브라우저, 노트북, 휴대폰 프레임에 넣으세요. 브라우저에서 무료로 PNG를 내보내거나 PDF로 인쇄할 수 있습니다.
하나의 도구에서 두 가지 작업을 할 수 있습니다. 와이어프레임 모드에서는 페이지 섹션을 선택하고 순서를 정한 뒤 데스크톱과 모바일 레이아웃을 비교할 수 있습니다. 기기 프레임 모드에서는 완성된 디자인을 보여줍니다. 스크린샷을 업로드해 제안서나 소셜 게시물에 쓸 브라우저 창 또는 휴대폰 프레임에 배치하세요. 두 모드 모두 PNG를 내보내며 브라우저에서 실행됩니다. 스크린샷은 업로드되지 않습니다.
와이어프레임 모드: 페이지에 필요한 섹션을 선택하고 위아래로 이동한 뒤 데스크톱과 모바일 화면을 전환하세요. 모바일에서는 대부분의 반응형 사이트처럼 열이 위에서 아래로 쌓입니다.
와이어프레임을 PNG로 내보내거나 인쇄를 선택한 뒤 PDF로 저장하세요.
기기 프레임 모드: PNG, JPG 또는 WebP 스크린샷을 업로드하세요(최대 15 MB, 한 변당 8,000픽셀). 브라우저 창 또는 휴대폰 프레임, 배경색, 선택 사항인 주소 표시줄 레이블을 고릅니다.
이미지는 브라우저의 캔버스에 그려지고 화면 해상도의 2배인 PNG로 내보내집니다.
페이지 구조가 알맞으면 섹션 계획을 We.Inc 빌더로 보내 시작용 기획서로 사용하세요.
대표 영역부터 구성하세요. 어떤 일을 누구를 위해 하는지 한 줄로 말하세요.
고객이 신뢰할지 결정하는 첫 번째 버튼 근처에 후기, 로고, 사례 등 신뢰 증거를 배치하세요.
모바일 와이어프레임을 먼저 확인하세요. 소규모 사업자 사이트 방문자 대부분은 휴대폰으로 접속합니다.
기기 프레임에는 프레임에 맞는 너비로 스크린샷을 찍으세요. 브라우저는 약 1440픽셀, 휴대폰은 390픽셀입니다.
목업을 공유할 때는 실제 공개된 사이트로 오해하지 않도록 목업이라고 표시하세요.
자주 묻는 질문
와이어프레임과 목업은 어떻게 다른가요?
와이어프레임은 각 요소의 위치를 회색 상자로 표시한 계획입니다. 목업은 기기 프레임 안에 넣는 경우가 많은 완성 디자인을 보여줍니다. 이 도구는 별도 모드로 두 가지를 만들고 각 내보내기 결과에 종류를 표시합니다.
스크린샷이 업로드되나요?
아니요. 스크린샷은 브라우저에서 읽고 화면에 그립니다. We.Inc나 다른 곳으로 전송되지 않습니다.
여기서 공개된 사이트의 스크린샷을 찍을 수 있나요?
아니요. 다른 사이트를 캡처하려면 브라우저를 실행하는 서버가 필요하지만 이 무료 도구에는 없습니다. 직접 스크린샷을 찍으세요(브라우저 개발자 도구로 전체 페이지를 캡처할 수 있습니다). 그런 다음 업로드하세요.
PDF로 내보낼 수 있나요?
예. 인쇄를 사용하고 프린터로 PDF로 저장을 선택하세요. PNG 내보내기는 이미지 파일을 만듭니다.
웹사이트 목업 생성기는 무료인가요?
예. 가입, 워터마크, 사용 제한이 없습니다.
모바일에서 계획하고 데스크톱에서 보여주기
넓은 화면에서 균형 잡혀 보이는 레이아웃도 휴대폰에서는 긴 스크롤로 이어지는 경우가 많습니다. 기능 3개 열은 세로로 쌓이고 가격표 때문에 문의 양식이 아래로 밀릴 수 있습니다. 와이어프레임을 모바일 화면으로 전환하면 섹션 이동이 클릭 한 번일 때 이런 문제를 미리 확인할 수 있습니다.
기기 프레임은 작업의 다른 단계에서 사용합니다. 고객이나 소셜 미디어 사용자에게 완성된 페이지 모습을 보여주는 용도입니다. 깔끔한 프레임에 일반 스크린샷을 넣는 것만으로도 충분한 경우가 많습니다.