스케치 #15
스케치 #15스케치 강좌 열 네 번째입니다. 이번에는 스케치 플러그인 중 가장 추천하는 ‘Anima’를 알려드릴게요. 이건 절대 모르면 안되는 스케치 필수 플러그인이에요!! 애니마는 오토레이아웃으로 유명해진 플러그인입니다.
Layout, Prototype, Export 이렇게 세 종류의 기능들을 제공합니다.
강좌를 통해 애니마 플러그인 설치부터 사용법을 익혀볼게요.
짧은 시간안에 중점적으로 배워볼 핵심 기능은 Layout – Stack, Padding, Pin과Prototype – Links, Breakpoints 입니다.
Spec은 인비전 기능과 거의 흡사해서 영상에서 소개하진 않았습니다.
나머지 Smart layers, Export – Code, Spec, hosting에 대해서는 관심 있는 분들은 더 깊이 있게 배워보세요. 나머지에서 Spec을 제외하고 유료 기능입니다.
Anima 플러그인 : https://www.animaapp.com/
핵심 요약
애니마 툴킷의 주요 기능은 크게 3가지로 나뉩니다. 레이아웃 관련 기능, 프로토타입 관련 기능, 내보내기 관련 기능입니다. 그중, 짧은 시간 안에 중점적으로 배워볼 핵심 기능은 Layout – Stack, Padding, Pin과 Prototype – Links, Breakpoints입니다.
내보내기의 Spec은 인비전 기능과 거의 흡사해서 영상에서 소개하진 않았습니다.
나머지 Smart layers, Export – Code, Spec, hosting에 대해서는 관심 있는 분들은 더 깊이 있게 배워보세요. 나머지에서 Spec을 제외하고 유료 기능입니다.
애니마 사이트 홈에서 직접 구현된 프로토 타이핑을 테스트해볼 수 있습니다.
설명에 의하면 Hi-Fi 프로토타입을 만들 수 있다고 되어있죠. 프로토파이, 프린서플처럼 잘 되진 않겠지만..
다른 프로토 타이핑 툴과 같이 링크를 걸 수 있습니다. Edit Transition 버튼을 통해 모션을 바꿀 수도 있는데요. 재밌는 건 트랜지션을 css로 조절이 가능합니다.
프로토 타이핑 강좌가 아니기 때문에, 가볍게 넘어가고 자세히 배워보고 싶은 분들은 해당 사이트에서 다양한 기능들을 보고 배울 수 있습니다.
https://www.animaapp.com/learn
코드 변환은 말 그대로 스케치에 있는 디자인을 웹 코드로 변환해 주는 기능입니다. 하지만 유료라는 점..! 관심 있는 분들은 트라이얼 7일을 잘 활용해보세요ㅎㅎ
그리고 박스 모델에 대해서 가볍게 알려드릴게요! 콘텐츠의 넓이는 가로폭x세로폭인건 누구나 아시죠. 정확히 그 콘텐츠의 넓이의 기준은 바로 Border입니다. Border의 기본값은 0px입니다. 콘텐츠의 패딩을 적용시키면 콘텐츠의 넓이가 넓어지는 것이고, 마진을 적용시키면 주변 콘텐츠들 간의 간격을 조절하는 것입니다.
이것으로 스케치 핵심 플러그인인 애니마 툴킷에 대해 배워봤습니다. 자세한 내용은 영상을 참고해주세요ㅎㅎ
