[sketch] 반응형 디자인 하기

스케치의 초초초 강점중 하나! 바로 반응형 디자인이다. 

테스트해본 결과 어도비의 XD도 동일한 기능이 있으므로

윈도우 유저라면 XD를 사용해도 아무런~ 무리 없겠다. XD유저가 봐도 상관 없는 강좌임.

(마지막에 참고 스크린샷 첨부)

 

*테스트해본 결과 Zeplin App에서는 css를 픽셀단위로 읽어버리기 때문에

개발자와의 협업을 하게된다면, 제플린으로 공유해봐야 percent랑

좌우 기준이 공유가 안되기 때문에 소용없다..

때문에 완벽히 공유하기 위해서는 개발자와 디자이너가 양쪽에서 

Sketch(Mac) 또는 XD(Windows,Mac)앱을 이해하고 있어야 한다.

 

기존에 작업하던 반응형 디자인이다. 대충 이런걸 만들 예정이다 (만들다 말았다..-_-)

 

오늘의 실험용(?) 디자인 화면.

본래는 그냥 디자인을 하고 늘리면 이렇게 여백만 늘어난다. ㅎㅎ

 

아트보드를 선택하고 우측 메뉴를 보면 Adjust content on resize가 있다.

XD에서는 비슷한 위치에 반응형이라고 써진 버튼이 있을것이다. 똑같이 선택해 주면 된다.

 

그런다음에 늘려주면 대략 이렇게 대책없이 늘어나는것을 볼 수 있다 ㅋㅋ

여백도 제멋대로에 아이콘 이미지 늘어나고 난리 났다

 

가운데 헤더에 로고부분을 클릭하면

우측에 RESIZING이라는 메뉴가 나오는데 저 두개의 기능이 전부다.

감이 왔다면 사실 강좌는 더 안봐도 된다 ㅋㅋㅋ

 

여기서 Pin to Edge는 '기준점을 고정하고 늘어난다' 라는 뜻이고

Fix Size는 로고 아이콘 등 이미지들은 크기가 늘어나면 안되기 때문에

이미지 크기를 고정시키는 역할을 한다.

 

여기서는 일단 로고이미지부터 가로세로 사이즈만 고정해 본다.

 

쭈욱~

헤더부분의 메뉴아이콘과 가운데 로고아이콘만 fix 처리해준 화면이다.

다른놈들도 하나하나 정리해 보자 -ㅅ-

 

위치도 Pin to Edge로 좌측 고정 시켜주고..(나는 메뉴아이콘의 좌측 여백을 20px줬는데, 20px준 여백을 고정한다는 뜻임)

 

메뉴(햄버거 아이콘)의 좌측 여백이 20px기준으로 잘 붙어있는것을 볼 수 있다.

 

본 컨텐츠 부분들도 하나씩 정리해 주자...

이 스크린샷을 찍은이유는 텍스트같은 경우 여백 처리고 자시고

Alignment Center, width Auto처리를 해줘야 가운데 붙더라는.. -ㅅ-

 

우측에 고정되어 붙어야되는 놈들은 Pin to Edge를 우측에 붙여주도록 하고..

 

이렇게 좌우의 여백이 둘다 고정되야되는 경우는 Pin to Edge를 양옆에 찍어주면 된다.

 

지정된 부분들이 알맞게 늘어난 모습이다.

그안의 컨텐츠도 일일히 정리하면 강좌가 넘 길어지니 여기까지 하도록 하고..ㅋㅋ

(하악 스크린샷 왜이렇게 많아 별것도 아닌 건데..)

Adjust content on resize(반응형 처리)를 한 상태에서 세로로 늘려버리면....또 이렇게 대책없이 늘어나 버린다..갸아악...

그럴때는 반응형에 체크를 해제하고 원하는 만큼 늘려주면 된다.

 

adobe XD는 받아만 놓고 딱히 안 써봤는데 (UI 프로토타이핑 툴을 스케치만 써버릇 해서 그렇삼..)

보다시피 Sketch와 기능이 거의 동일하다고 보면 된다. 우측에 반응형 크기조정, 자동 수동 Pin Fix 다있다.