[디자인] #3 디자인 시스템
·
공부기록/디자인
1. 디자인 시스템이란? 디자인 시스템은 반복적인 디자인 요소를 조직적이고 효율적으로 관리하는 것을 말한다. 이를 통해 회사나 조직의 디자인을 체계화할 수 있다. 디자인 시스템을 어떻게 구성할 수 있을까? #2에서 다뤘던 컴포넌트와 인스턴스를 이용하면 된다.반복되는 요소를 컴포넌트로 만들고, 이를 복제한 인스턴스로 UI를 구성한다. 즉, 디자인 시스템은 프랜차이즈화와 같다고 생각하면 된다! 디자인 시스템은 파운데이션과 컴포넌트로 나눌 수 있다. 2. 파운데이션 파운데이션은 상수값, 고정값이라는 뜻을 가지고 있다. 컬러와 폰트(사이즈, 굵기, 자간, 행간 등)에서 많은 경우의 수 중, 우리 팀에서 사용할 것을 딱 정해놓고 그걸 정리해놓는 것이다. 일반적으로 시안 작업 → 디자인 픽스 → 컴포넌트 모으기(디..
[디자인] #2 Figma 심화
·
공부기록/디자인
1. 피그마 피그마는 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업툴이다.자체 클라우드에 저장되는 방식으로, 오프라인으로 파일 저장 없이 실시간으로 저장하면서 사용한다.디자이너와 PM 뿐만 아니라 개발자들도 필수적으로 알아야하는 협업툴 중 하나이다..! 2. 피그마 심화 피그마는 직관적인 편이라 기본 기능들은 생각보다 다루기 쉬운 편이다.몇 가지 고급 기능들에 대해 알아보도록 하자. • Constraint 기능 오브젝트 제작을 유연하게 사용하는 기능이다.프레임 + 오브젝트의 축을 어디에 둘지 정할 수 있다. 이를 잘 활용하면 다양한 화면의 디바이스에 대응하게 작업하는 것이 가능하다.(특히 반응형 웹)특정 요소를 해당 위치에 고정시켜야 할 때 사용한다. • Auto Layout 기능 오브젝트 수정에 있..
[디자인] #1 디자인의 이해
·
공부기록/디자인
난 올해부터 웹서비스 개발 연합동아리 멋쟁이사자처럼 12기 디자인 파트로 활동하고 있다. 작년부터 PM으로 활동하면서 디자인을 제대로 배워보고 싶다는 마음을 항상 가지고 있었는데 좋은 기회인만큼 열심히 해보자! 디자인 세션에서 배운 내용을 공유해보려고 한다. 1. UX/UI에 대한 이해 UI = User InterfaceUI는 사용자가 사용하는 서비스나 제품의 화면 안에 있는 모든 것을 의미한다.UI는 껍데기다. UX = User ExperienceUX는 사용자가 제품이나 서비스와 상호작용할 때 전반적으로 느끼는 경험과 이를 개선하는 디자인 및 전략을 의미한다.즉, UX는 UI라는 껍데기를 맛있게 만들어주는 것이다. 따라서 UX와 UI는 반드시 함께 고려되어야 하는 소울메이트 같은 존재로, UX에 기반하..