ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#14 이건 진짜 모르면 안되는 플러그인 Anima - 스케치 강좌 | 디자인베이스
홈 스케치 #14 이건 진짜 모르면 안되는 플러그인 Anima – 스케치 강좌
스케치 강좌 열 네 번째입니다. 이번에는 스케치 플러그인 중 가장 추천하는 ‘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로 조절이 가능합니다.
프로토 타이핑 강좌가 아니기 때문에, 가볍게 넘어가고 자세히 배워보고 싶은 분들은 해당 사이트에서 다양한 기능들을 보고 배울 수 있습니다.
코드 변환은 말 그대로 스케치에 있는 디자인을 웹 코드로 변환해 주는 기능입니다. 하지만 유료라는 점..! 관심 있는 분들은 트라이얼 7일을 잘 활용해보세요ㅎㅎ
그리고 박스 모델에 대해서 가볍게 알려드릴게요! 콘텐츠의 넓이는 가로폭x세로폭인건 누구나 아시죠. 정확히 그 콘텐츠의 넓이의 기준은 바로 Border입니다. Border의 기본값은 0px입니다. 콘텐츠의 패딩을 적용시키면 콘텐츠의 넓이가 넓어지는 것이고, 마진을 적용시키면 주변 콘텐츠들 간의 간격을 조절하는 것입니다.
이것으로 스케치 핵심 플러그인인 애니마 툴킷에 대해 배워봤습니다. 자세한 내용은 영상을 참고해주세요ㅎㅎ
#2 XD 핵심 기능 반복 그리드 – 어도비 XD 강좌
#8 스케치에서 프로토타입 만드는 방법(Prototyping) – 스케치 강좌
#02 스케치 인터페이스 파악하기 – 스케치 강좌(멤버십 전용)
오너의 마음으로 프로젝트의 A부터 Z까지
디자인 입문자가 꼭 참고해야 할 사이트
인공지능이 채색을 대신 해준다?!
Macbook Pro 16 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.