쓰리래빗츠 비주얼로 와이어프레임 뿐만 아니라 디자인 가이드도 작성할 수 있습니다. 디자이너가 UI 디자인을 완료하면 개발자가 이를 구현할 수 있도록 디자인 가이드를 작성하는데, 쓰리래빗츠 비주얼을 사용하면 빠르고 정확하게 디자이너의 생각을 개발자에게 전달할 수 있습니다.

디자인 가이드 만들기

디자인 가이드를 작성하는 방법은 다음과 같습니다.

1. 포토샵과 같은 그래픽 도구로 작업한 디자인을 그림 파일로 만들어 비주얼 페이지에 추가합니다.

   • 그림을 추가한 후 도형 옵션 패널에서 객체 잠그기를 선택하면 가이드 작업 중에 그림 위치나 크기가 바뀌지 않아서 편리합니다.

2. 도형 패널 디자인 가이드 영역에 있는 도형으로 가이드 작업을 합니다.

   • 필요에 따라 다른 도형을 추가할 수도 있습니다.

디자인 가이드 도형

디자인 가이드 도형은 다음과 같습니다.

수직선 가이드와 수평선 가이드

높이와 너비를 측정하는 도형입니다. 노란 점()을 상하 또는 좌우로 끌어다 놓아 끝선 크기를 바꿀 수 있습니다.

디자인 그림 크기를 확대 또는 축소했을 때는 도형 옵션 패널에서 1백분율을 설정해서 크기를 맞출 수 있습니다.

도형 옵션 패널에서 ${value} 대신에 임의의 값을 넣을 수 있습니다.

• 높이: ${value}

• ${value}px

• 23px

상자 가이드

높이와 너비를 한 번에 측정하는 도형입니다.

디자인 그림 크기를 확대 또는 축소했을 때는 도형 옵션 패널에서 백분율을 설정해서 크기를 맞출 수 있습니다.

텍스트 상자 가이드

임의의 가이드를 작성할 때 사용하는 도형입니다.

색상 가이드

비주얼 페이지 특정 위치의 색상을 알아내는 도형입니다.

색상 가이드 도형을 선택한 후 왼쪽 위에 있는 1버튼을 누르면 색상 값을 클립보드에 복사할 수 있습니다.

RGB 형식으로 값을 표시하는데 16진수로 표시하려면 설정에서 1RGB 형식으로 색상 표시 선택을 해제합니다.

도형 옵션 패널에서 ${value} 대신에 임의의 값을 넣을 수 있습니다.

• 배경 색: ${value}

• border: 2px solid ${value}

• rgb(233, 233, 233)

줄자

너비와 높이를 한눈에 알 수 있는 줄자를 제공합니다. 도형 크기에 따라서 줄자 방향을 결정합니다.