캔버스

캔버스는 실시간으로 조작할 수 있는 인터랙티브 초안입니다. 실제 페이지처럼 클릭하고, 입력하고, 스크롤할 수 있습니다. 캔버스 위의 바에 이 페이지에서 설명하는 도구가 있습니다.

미리 보기와 코드

• 미리 보기는 작동하는 화면을 표시합니다.
• 코드는 캔버스에 있는 버전의 React 코드를 표시합니다. 읽기 전용이며, 복사하려면 코드 복사를 선택하세요.

데스크톱, 태블릿, 휴대폰 너비

세 개의 기기 버튼을 사용하면 초안을 전체 너비, 768픽셀(태블릿) 또는 390픽셀(휴대폰)로 볼 수 있습니다. 이 버튼은 캔버스에 공간이 충분할 때 표시됩니다.

휴대폰 다음에 있는 모든 크기 버튼을 누르면 초안을 휴대폰, 태블릿, 데스크톱 너비로 나란히 보여 줍니다. 각각 실제로 작동하는 페이지를 화면에 맞게 축소해 표시합니다. 라이트/다크 모드와 미리 보기 언어가 세 화면 모두에 적용되므로 한 언어를 모든 너비에서 한 번에 확인할 수 있습니다. 선택, 측정, 주석을 사용하려면 하나의 너비로 돌아가세요.

간격 측정

간격 측정(자 아이콘)을 선택하면 디자인 도구에서처럼 간격을 확인할 수 있습니다. 기능을 켜지 않고 캔버스 위에서 Alt(Mac에서는 Option) 키를 누르고 있어도 됩니다.

• 요소에 마우스를 올리면 상하좌우 네 방향에 빨간 자가 픽셀 단위 거리와 함께 표시됩니다. 각 자는 그 방향으로 나란히 있는 가장 가까운 요소까지, 사이에 아무것도 없으면 그 요소를 감싼 컨테이너의 가장자리까지 이어집니다. 요소의 너비와 높이도 표시됩니다.
• 요소를 클릭하면 그 요소부터 측정하고, 다른 요소에 마우스를 올리면 두 요소 사이의 간격이 표시됩니다. 컨테이너에 마우스를 올리면 네 방향의 안쪽 여백이 모두 표시됩니다.
• 터치스크린에서는 요소 하나를 탭한 다음 다른 요소를 탭합니다.
• Esc 키를 누르면 클릭한 요소가 해제되고, 한 번 더 누르면 측정이 끝납니다.

거리는 테두리를 포함한 초안의 CSS 픽셀이므로 캔버스 크기에 따라 달라지지 않습니다. 측정하는 동안에는 클릭해도 버튼이 눌리거나 링크로 이동하지 않습니다.

새로 고침

초안을 클릭하며 둘러본 뒤 캔버스 새로 고침을 선택하면 첫 화면으로 돌아갑니다. 초안을 조작하기 전까지는 비활성화되어 있습니다.

버전

세션의 모든 초안은 버전으로 보관됩니다. 버전이 두 개 이상이면 바에 2/2 같은 카운터와 실행 취소 및 다시 실행 버튼이 표시됩니다.

• 실행 취소는 이전 버전을, 다시 실행은 다음 버전을 표시합니다. 입력란에 입력 중이 아닐 때는 ⌘+Z 및 ⌘+Shift+Z(Windows에서는 Ctrl)를 눌러도 됩니다. 작업 공간을 다시 불러오지 않고 버전이 바뀝니다.
• 다음 요청은 캔버스에 있는 버전을 수정하므로, 이전 버전으로 돌아가 다른 방향으로 진행할 수 있습니다.
• 저장된 프로토타입에는 최근 버전이 최대 20개까지 보관됩니다.

버전 비교

버전 비교를 선택하면 두 버전을 슬라이더를 사이에 두고 나란히 볼 수 있습니다. 양쪽이 함께 스크롤됩니다.

• 이전 및 이후 목록에서 원하는 두 버전을 선택하세요.
• 구분선을 드래그하거나, 구분선에 포커스를 두고 화살표 키를 사용하세요(Shift를 누르고 있으면 더 크게 이동하고, Home과 End는 양 끝으로 이동).
• 이전 버전으로 돌아가기는 이전 버전을 캔버스에 표시하므로, 다음 요청은 해당 버전을 수정합니다.
• 비교를 마치려면 완료를 선택하거나 Esc를 누르세요.

라이트 및 다크 미리 보기

초안에서 색상 테마를 사용하면 다크 모드 버튼이 나타나 두 모드를 모두 확인할 수 있습니다. 이 설정은 Vibr가 아닌 초안에만 적용됩니다.

다른 언어로 미리 보기

미리 보기 언어 버튼(번역 아이콘)을 사용하면 초안을 다른 언어로 볼 수 있으므로, 실제로 번역하기 전에 디자인이 잘 견디는지 확인할 수 있습니다. 오른쪽에서 왼쪽으로 읽는 아랍어와 히브리어를 포함해 40개가 넘는 언어 중에서 선택할 수 있습니다. 초안의 텍스트, 자리 표시자, 레이블이 바뀌고, 페이지의 언어와 방향도 그에 맞게 설정됩니다. 코드는 바뀌지 않으며, 빌드하는 동안에도 언어 설정이 유지됩니다.

• 선택한 모델이 번역합니다. Vibr는 사용자의 키로 초안에 보이는 텍스트를 선택한 모델에 수십 개씩 보냅니다. 숫자가 늘어나는 카운트처럼 새로 나타나는 텍스트는 나타나는 대로 번역됩니다. 각 문자열은 세션당 한 번 번역됩니다.
• 오른쪽에서 왼쪽. 새 초안은 marginInlineStart 같은 논리 속성을 사용하므로 저절로 반전됩니다. 아랍어나 히브리어가 켜져 있으면 디자인 검토에서 left 또는 right를 사용하는 스타일과 반전되지 않는 화살표도 찾아내며, 초안을 표시하기 전에 수정 단계에서 이를 고칩니다. 언어를 전환하기 전에 만든 초안에는 대신 오른쪽에서 왼쪽에 맞게 수정 버튼과 함께 알림이 표시됩니다.
• 의사는 모델이 필요하지 않습니다. 모든 글자에 악센트를 붙이고 텍스트를 약 40% 길게 만들어, 독일어나 핀란드어처럼 길어지는 경우를 재현하므로 잘린 레이블이나 고정 너비 문제가 바로 드러납니다.
• 샘플은 키가 필요 없습니다. 샘플은 Vibr의 모든 언어로 제공되므로, 아랍어와 히브리어를 포함한 이 언어들로 미리 보기는 키 없이 작동합니다. 다른 언어와 샘플에 추가한 텍스트는 사용자의 모델이 번역합니다.
• 해당 언어로 내보내기. 언어가 켜져 있으면 내보내기 메뉴에 해당 언어의 앱이 추가됩니다. 내보낸 페이지는 해당 언어와 방향으로 열리며, 다른 탭이나 대화 상자 같은 초안의 나머지 텍스트도 번역합니다. 다른 내보내기 형식에는 초안의 원래 텍스트가 유지됩니다.
• 글꼴. 가져온 글꼴에 해당 언어의 글자가 없으면 없는 글자 몇 개와 그 글자가 있는 비슷한 Google Fonts가 알림에 표시됩니다. … 사용을 선택하면 그 글꼴이 타입 램프의 대체 글꼴로 추가되어 캔버스와 내보낸 앱에서 불러옵니다.
• 원래대로 돌아가려면 초안의 원래 텍스트를 선택하세요.

캔버스 안의 링크

링크를 클릭해도 캔버스를 벗어나지 않으므로 실수로 초안을 잃을 일이 없습니다. 대신 Vibr가 링크가 연결되는 곳을 알려 줍니다. 내보낸 앱에서는 링크를 따라갑니다. 다른 저장된 화면을 여는 버튼은 재생에서 작동합니다. 플로를 참조하세요.

휴대폰에서

작은 화면에서는 Vibr가 채팅과 미리 보기를 탭으로 표시합니다. 미리 보기에 점이 표시되면 아직 보지 않은 새 초안이 있다는 뜻입니다. 캔버스 위에 들어가지 않는 도구는 작업 메뉴로 이동합니다. 캔버스 위의 도구가 모두 들어가지 않으면 옆으로 밀어서 보세요.