Figma (2) 썸네일형 리스트형 피그마를 실무 흐름으로 이해하기 : UI 설계 → 프로토타입 → 핸드오프 기능 자체에 집중하기보다 디자인을 어떤 구조로 설계하고, 어떻게 검증하고, 어떻게 개발자에게 전달할 것인가를 중점으로 봐야 한다 UI 패턴 1. 홈 → 목록 → 상세 → 액션ex1. 쇼핑앱 : 홈 화면에서 상품을 발견한다 → 목록 화면에서 여러 상품을 비교한다 → 상세 화면에서 상품 정보를 확인한다 → 구매하기 버튼을 누른다ex2. 배달앱 : 홈에서 음식 카테고리를 본다→ 가게 목록을 본다→ 메뉴 상세를 본다→ 주문 버튼을 누른다→ UI 설계는 단순히 화면을 채우는 일이 아니라, 사용자의 다음 행동을 자연스럽게 이어주는 구조를 만드는 일이 화면에서 사용자는 무엇을 해야 하는가?어떤 정보가 의사결정에 필요한가?가장 중요한 행동은 무엇인가?→ 위 조건을 만족해야 UI 설계가 명확해진다 2. UI 6가지 분류.. 피그마 구조 설계 : Auto Layout → Component → Design System 피그마 구조 설계의 본질 실무에서 중요한 것은 디자인을 재사용 가능하고, 수정하기 쉽고, 팀원들이 같은 기준으로 이해할 수 있는 구조로 설계하는 것이다이 흐름을 이해하려면 다음 세 가지 개념을 순서대로 봐야 한다Auto Layout → Component → Design SystemAuto Layout : 화면 안의 요소를 구조적으로 배치하는 기능Component : 반복되는 UI를 재사용 가능하게 만드는 기능Design System : 이 컴포넌트들을 어떤 기준으로 사용할지 정리한 규칙과 문서잘 배치하고 → 반복 가능한 단위로 만들고 → 팀 전체가 같은 규칙으로 사용하게 만든다 1. 왜 이 흐름이 중요한가?요리를 예시로 들자면,파운데이션 : 재료(소금, 채소, 고기)컴포넌트 : 요리(파스타, 샐러드)화.. 이전 1 다음
