Sketch 프로토타입에 브레이크포인트를 추가하는 방법을 설명합니다 (How to Add Breakpoints to Your Sketch Prototype)

이 글은 Anima AppHow to Add Breakpoints to Your Sketch Prototype글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

Anima 팁 6개 중 2번째 프로토타이핑입니다.

presentation
👉 Live Preview Here
presentation
애니메이션, 상호 작용 및 고성능 프로토타입, 모든 내부 스케치를 만듭니다.

브레이크포인트란 무엇입니까?

Breakpoints are a way to make your design look great on every screen size — Mobile, Tablets, or Desktops. Breakpoints are the point in which your prototypes adapt to viewports of all screen sizes.
브레이크포인트는 모든 화면 크기(모바일, 태블릿 또는 데스크톱)에서 디자인을 멋지게 만들어 주는 방법입니다. 브레이크포인트는 시제품이 모든 화면 크기의 뷰포트에 적응하는 지점입니다.
간단히 말해, 두 개의 아트보드를 브레이크포인트과 연결하면 같은 화면이지만 화면 크기는 다르다는 뜻입니다.

왜 브레이크포인트가 필요하나요?

언제 당신이 고객들에게, 투자자, 또는 다른 이해 관계자들에게 당신의 프로토 타입을 보낸다면 당신은 그들이 어떤 디바이스에서 그것들을 열어보는지 모를 거에요. 브레이크포인트을 사용하여, 디바이스에 대해 조정된 경험을 제공해요.
Anima의 브레이크포인트와 Pins를 사용하면 스케치(Sketch)를 떠나지 않고 반응할 수 있는 프로토 타입을 만들 수 있어요.

브레이크포인트를 추가하는 방법은 다음과 같습니다.

아트보드 중 하나를 선택하고 Prototype tab 클릭 > Flow > Breakpoints > 두 번째 아트보드를 클릭합니다(링크처럼).
presentation
모바일 및 데스크톱 설계를 동일한 페이지로 연결합니다.

어떻게 작동하나요?

각 브레이크포인트에 대해 가장 작은 크기로 설계합니다. 예를 들어 모바일의 경우 320px, 데스크톱의 경우 1024px라고 가정해 보겠습니다. 즉, 화면 크기가 320~1023px인 경우 모바일 설계를 볼 수 있고, 1024px가 넘는 화면은 데스크톱 설계를 볼 수 있습니다.
원하는 만큼 브레이크포인트를 만들고 연결할 수 있습니다.

미리 보기 브라우저에서

미리 보기 가장 좋은 방법 설계 및 시험하는 당신의 브라우저에 당신의 프로토 타입을 볼 수 있어요. 그리고 브라우저 창에 작용하는 브레이크포인트를 확장할수 있구요. 아니면, 단순히 모바일 기기에 링크가 열려요.
presentation
👉 Live Preview Here

완전한 방응 경험을 만듭니다.

경험을 완료하고 중단점 사이에서 설계를 제어하려면 Pins(조건)과 브레이크포인트를 함께 사용합니다.
presentation
애니메이션, 상호 작용 및 고성능 프로토타입, 모든 내부 스케치를 만듭니다.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz