이번주 내내 약속과...육아와...심지어 책상, 책장 모두 부러져서..다 대공사를 해가지고...진짜 정신이 없긴하다..
그래서 블로그를...일요일에 몰아쓰는 중^^*
그나마 노션에 적어놔서 다행이지 참...에효...ㅎ
오늘의 수업요약
- 주요 UI 컴포넌트 요소를 알아보자
- Auto Layout 맛보기
- Constraints는 어떻게 쓰는게 좋을까?
피그마의 Component 구조
→ 재사용 가능한 디자인 요소를 관리하는 Master, Instance
- Master ◆
: 수정하면 모든 복사본 자동 변경
: 부품의 원조 - Instance ◇
: 기본 디자인은 따르되 개별 속성 수정 가능
: Master에서 만든 복사본
→ 디자인 시스템엔 마스터 컴포넌트로 올려놓기! (디자인 시스템에 마스터로 올려놔야 필요시 일괄 수정 가능)
주요 UI 컴포넌트 종류
| 버튼 | 사용자의 클릭 액션을 받아 특정 동작을 실행하는 인터페이스 |
| 입력 필드 | 사용자로부터 텍스트나 숫자 등의 데이터를 입력받는 영역 |
| 카드 | 관련된 정보를 그룹으로 묶어 하나의 컨테이너 표시 |
| 태그 | 카테고리, 상태, 속성을 표시하는 작고 간결한 라벨 |
| 체크박스 | 여러 옵션 중 하나 이상을 선택할 수 있는 입력 요소 |
| 라디오 버튼 | 여러 옵션 중 하나만 선택 가능한 입력 요소 |
| 토글 스위치 | ON/OFF 두가지 상태를 전환하는 인터페이스 |
| 드롭다운 | 클릭 시 여러 목록이 나타나는 선택 메뉴 |
| 탭 | 같은 화면에서 여러 콘텐츠 영역을 전환할 수 있는 네비게이션 |
| 아이콘 | 기능이나 개념을 시각적으로 간결하게 표현하는 그래픽 |
| 배지 | 숫자나 짥은 텍스트로 상태를 표시하는 작은 표시기 |
| 모달 | 현재 화면 위에 오버레이되어 사용자의 주목을 요구하는 대화 상자 |
Auto Layout 핵심 개념
3가지 핵심 기능
- 자동 크기 조절
: 콘텐츠의 크기가 변하면 프레임도 자동으로 조절 - 자동 간격 유지
: 요소들 사이의 간격 일정하게 유지 - 쉽고 빠른 수정
: 디자인 수정 시간을 50% 이상 단축
적용 3단계
| Hug Contents | 콘텐츠 크기에 맞춰 프레임이 자동으로 크기 조절 | 버튼, 태그, 라벨, 칩, 뱃지 |
| Fill Container | 부모 프레임 크기에 맞춰 내부 요소가 꽉 채워짐 | 전체 화면, 리스트 아이템, 헤더/푸터 |
방향설정
| Horizonal (가로배치) | 요소들을 좌우로 배열 | 네비게이션 메뉴, 버튼 그룹, 태그 목록, 상단바 |
| Vertical (세로배치) | 요소들을 위아래로 배열 | 카드 내부 구조, 폼 입력 필드, 설정 리스트 |
Constraints 제약조건
옵션 이해하기
→ 부모 Frame 내에서 요소의 위치와 크기를 효과적으로 제어하는 다양한 제약 옵션
용어 고정 위치 사용하는 부분
| ← Left | 왼쪽 가장자리 | 로고, 햄버거 메뉴, 앱 아이콘 |
| → Right | 오른쪽 가장자리 | 검색 아이콘, 프로필 아이콘, 설정 버튼 |
| ↔ Left & Right | 양쪽 모두 (가로 방향으로 늘어남) | 검색창, 콘텐츠 영역, 입력 필드 |
| + Center | 중앙 고정 | 제목, 로고, 메인 콘텐츠 |
| ↑Top | 위쪽 가장자리 | 헤더, 상단 바, 타이틀 영역 |
| ↓Bottom | 아래쪽 가장자리 | 하단 네비게이션 바, 확인 버튼, 푸터 |
| ↕︎Top & Bottom | 위아래 모두 (세로 방향으로 늘어남) | 스크롤 가능한 콘텐츠, 세로 리스트, 사이드바 |
오늘도 수업 중간중간 피그마를 다루면서 실습위주로 수업을 했다.
오히려 이렇게 중간중간 실습하면서 하는게 더 이해가 쉽긴하다!
그리고 피드백도 바로바로 해주시고 모르는 거 바로 여쭤봐도 되는게 실시간 강의의 장점이랄까!!
감사합니댜 강사님...ㅎㅎ 알라뷰...
오늘의 과제는
디자인시스템에 대해 알아보면서 배운 요소가 아닌 처음보는 요소를 찾고 따라그려보는 거였다.
찾다보니 디자인시스템 사이트를 모아놓은 곳을 찾아서! 매우 유용했다!
https://designsystemsrepo.com/design-systems/
Design Systems Repo
An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.
designsystemsrepo.com
그리고 찾은 디자인 컴포넌트를 직접 만들어보는거였는데, 오늘 아빠가 수상하는 자리에 축하하러 가야했기에 중간에 조퇴해야했다.
그래도 할 건 다 하고 감!
그냥 강의를 들으면서 느낀건
프로젝트할때 너무 어영부영 피그마를 써서 제대로 그룹핑도 못하고 그랬는데 오토레이아웃을 이렇게 썼더라면 좀 편하지 않았을까..하는 생각이 들었다.
생각보다 유용한 기능이군...ㅋㅋㅋㅋㅋㅋ
'OZ코딩스쿨_프로덕트 디자이너 부트캠프' 카테고리의 다른 글
| DAY11_피그마 심화고고링!222(사실 어제가 1이어따) (0) | 2025.12.15 |
|---|---|
| DAY10_위기의 피그마 수업...!? (0) | 2025.12.15 |
| DAY8_피그마 걸음마 응앵 (0) | 2025.12.10 |
| DAY7_서비스 디자인 기획이래..오모..!! (1) | 2025.12.10 |
| DAY6_프로덕트 디자이너는 무슨 일을 할까? (3) | 2025.12.08 |