[Sketch] 디자인 공유 방법

Design Deliverables

 

디자인 가이드 (Design Guide) *UI

각 화면에 사용되는 컴포넌트의 색상, 폰트, 컴포넌트 사이 간격 등을 정의한 것으로 개발자들이 직접 적용할때 참조하는 가이드

 

에셋 (Assets) *UI

개발에 사용될 이미지 파일

개발자들이 프로그래밍 언어로 만드는 것이 아닌 화면 안에 이미지를 바로 삽입할 때 쓰는 파일

 

와이어프레임 (Wireframes) *UX

각 화면의 레이아웃과 각 컴포넌트의 기능, 화면과 화면 간의 유기적인 관계와 인터랙션 등을 정의하는 문서

심미적인 디자인 문서가 아니므로 그레이스케일로 표현될 수도 있고 각 기능간의 구조를 표현하기 위해 화살표와 플로우차트 등을 활용함

 

프로토타입 (Protorypes) *UX/UX

화면 안에 있는 컴포넌트를 선택하면 이동하는 화면 및 화면 간의 전환 효과 등을 인터랙티브하게 표현 한 것

실제 클릭하거나 드래그할 때 화면에 나타나는 변화를 직접 볼 수 있어서 실제 개발에 들어가기 전에 디자인의 효과를 공유하는 검증하는데 유용하게 사용 

 

 

 

 

출처 : UX/UI 디자이너를 위한 스케치 완전 정복