8주차
PART 5. 컴포넌트 & 배리언츠 적용하기
01 컴포넌트로 동일한 형태를 반복해서 사용하기
컴포넌트 : 디자인 전체에서 재사용할 수 있는 요소. 작은 요소인 버튼이나 아이콘부터 레이아웃 전체에 이르기까지 다양한 범위에서 사용 가능
반복해서 사용되는 요소는 컴포넌트로 만들어 관리하면 효율적이고, 모든 요소를 한번에 편집할 수 있어 유지보수가 쉬움
1) 메인 컴포넌트와 인스턴스 컴포넌트 생성하기
메인 컴포넌트: 가장 먼저 생성한 컴포넌트. 인스턴스 컴포넌트의 기본 속성을 정의하는 역할을 하며, 디자인에 직접 사용하지 않고 별도 페이지에서 관리하는 것이 일반적임
인스턴스 컴포넌트: 메인 컴포넌트의 복제본. 디자인에 직접 사용되며, 메인 컴포넌트와 속성이 동기화되어 있음
2) 인스턴스 컴포넌트의 속성 변경하기
3) 독립된 속성 초기화하기
인스턴스 컴포넌트 선택 - Instance Options에서 Reset all changes
-> 독립적으로 수정된 모든 변경값 초기화
Reset fill: 개별 속성 각각 초기화
컴포넌트 안쪽 요소 선택하고 Reset - 선택된 개별 속성 초기화
4) 독립된 속성을 메인 컴포넌트로 이전하기
선택한 인스턴스 컴포넌트의 속성을 메인 컴포넌트로 이전
5) 메인 컴포넌트 찾기
사용 중인 인스턴스 컴포넌트의 메인 컴포넌트로 이동
6) 삭제된 메인 컴포넌트 복구하기
메인 컴포넌트 삭제 시 모든 인스턴스 컴포넌트의 동기화가 끊김
메인 컴포넌트 자동 복구 가능
7) 인스턴스 컴포넌트 해ㅔㅈ하기
해제 시 일반 프레임으로 되돌아감
8) 다수의 컴포넌트 동시에 생성하기
선택된 오브젝트들이 각각 별도의 메인 컴포넌트로 생성됨
02 컴포넌트로 아이콘 관리하고 사용하기
1) 아이콘 컴포넌트 만들기
2) 컴포넌트 스왑하기
인스턴스 컴포넌트의 컴포넌트 패널에서 다른 컴포넌트 확인 가능
다른 컴포넌트로 변경(swap)도 가능
3) 컴포넌트를 그룹으로 구분하기
Preview: 현재 레이어 이름
Match: 입력된 문자열을 Rename to에 쓰인 문자열로 대체
Rename to: 모든 레이어 이름을 동일하게 변경
Current name: 현재 레이어 이름을 불러옴
Number : 오름차순 / 내림차순 숫자 입력
레이어 이름에 ' / ' 를 추가하면 컴포넌트 그룹화 가능 ex) Icon/...
메인 컴포넌트를 프레임으로 감싸는 방식으로도 컴포넌트 그룹화 가능
03 컴포넌트 프로퍼티를 활용한 체크리스트 만들기
컴포넌트 프로퍼티: 컴포넌트의 구성 요소들에게 개별 속성을 부여해 디자인 과정에서 컴포넌트를 더 쉽게 사용할 수 있도록 만드는 기능
1) 체크박스 컴포넌트 만들기
2) 체크리스트 컴포넌트 만들기
3) 불리언(Boolean) 프로퍼티 설정하기
불리언 프로퍼티 설정 후 인스턴스 컴포넌트 만들 시 설정한 불리언 프로퍼티가 토글 형태로 추가됨
비활성화 시 '상세 내용' 텍스트가 사라짐
4) 텍스트(Text) 프로퍼티 설정하기
텍스트 프로퍼티 생성 시 마찬가지로 인스턴스 컴포넌트에서 프로퍼티 확인 가능
수정 시 적용됨
5) 인스턴스 스왑(instance swap) 프로퍼티 설정하기
- 컴포넌트 프로퍼티는 메인 컴포넌트에서만 설정 가능
- 세 가지 프로퍼티는 각각 다른 위치에서만 설정할 수 있음
(불리언: layer 패널/텍스트: Text 패널/인스턴스 스왑: Component 패널)
04 메인 컴포넌트의 묶음, 배리언츠 활용하기
배리언츠 : 메인 컴포넌트들로 이루어진 컴포넌트 세트. 각각의 컴포넌트에 프로퍼티를 설정해 컴포넌트의 관리 및 활용을 손쉽게 만들어주는 역할
* 프로퍼티: 컴포넌트 상태를 구분할 수 있도록 임의로 지정하는 상태값 ex) 높이에 따라 s, m, l로 나누거나, 색상에 따라 빨강 파랑 초록 등으로 나눌 때, '크기' 와 '컬러' 처럼 컴포넌트 상태를 정의할 수 있는 개념
1) 배리언츠 생성 및 준비하기
2) 배리언츠 만들기
모든 프레임 선택 후 create multiple components -> combine as variants
or 모든 프레임 선택 후 create component set 선택
배리언츠 생성 시 메인 컴포넌트들이 보라색 점선의 배리언츠 프레임으로 감싸짐
배리언츠 프레임은 일반 프레임과 같은 성질을 가지며, 크기를 조정하거나 오토 레이아웃 생성 가능
인스턴스에서 프로퍼티 확인 가능
다른 컴포넌트로 변경 가능
3) 프로퍼티 설정하기
빨간거 모두 선택 후 color 프로퍼티의 이름을 red로 변경
나머지도 마찬가지로 blue/yellow 설정해주면
인스턴스에서 color 프로퍼티의 red / blue / yellow 확인 가능
6) 배리언츠 해제하기
배리언츠 프레임에서 내부 컴포넌트들을 배리언츠 프레임 밖으로 이동하면 배리언츠 해제됨
모든 메인 컴포넌트가 프레임 밖으로 나가면 배리언츠 프레임은 자동으로 삭제됨
배리언츠를 해제해도 밸류값은 남아있어서 다시 배리언츠로 묶으면 밸류값들은 살아있게 됨
05 배리언츠 프로퍼티를 토글 형태로 만들기
칩(Chip) : 사용자가 정보 입력, 선택, 내용 필터링 등에 사용할 수 있는 디자인 컴포넌트
선택됨/선택안됨과 같이 두가지 상태를 토글 제어할 때 편리
1) 칩 배리언츠 만들기
-> 인스턴스의 프로퍼티가 토글 형태로 설정됨
프로퍼티 밸류를 True/False, On/Off, Yes/No로 지정 시 프로퍼티를 토글 형태로 사용할 수 있음
2) 칩을 활용한 카테고리 목록 만들기
06 버튼 배리언츠 구성하기
1) 버튼 아이콘 준비하기
2) 기본 버튼 만들기
왼쪽줄: Primary - 중요도가 높은 곳에서 사용 / 오른쪽줄: Secondary - 취소나 닫기 등 중요도가 낮은 위치에서 사용
첫줄: Default. 기본 형태
둘째줄: Hover: 마우스 올림
셋째줄: Active: 클릭하거나 탭했을 때
마지막줄: Disabled: 비활성화
3) 배리언츠 구성하기
위 내용대로 클래스별로 프로퍼티 설정 (type / state)
4) 왼쪽 아이콘 프로퍼티 추가하기
버튼 안의 아이콘 클릭 - select matching later
배리언츠 내부에서 같은 오브젝트 한번에 선택 가능
UI 디자인 2강
OS-운영 체제
운영체제(OS)는 컴퓨터나 디바이스의 하드웨어, 소프트웨어 자원을 관리하고 프로그램에 공통 서비스를 제공함. CPU, 메모리, 저장장치 등 하드웨어를 포함해서 프로세스 관리, 저장 및 불러오기, 주변장치 연결 같은 작업을 처리함.
운영체제가 하는 일
프로그램 간 정보 공유: 클립보드를 통해 복사, 붙이기 같은 작업 가능하게 했음.
멀티태스킹: 여러 작업을 동시에 처리하도록 지원했음. Fire-and-Forget 같은 방식으로 사용자가 작업 전환해도 계속 유지됨.
사용자 인터페이스 제공: 메뉴, 대화상자, 포인터 등 GUI를 통해 사용자 경험을 개선함.
WIMP 기반 GUI
Windows: 독립된 창으로 작업을 분리하고 이동이나 크기 조정 쉽게 가능하게 했음.
Icons: 실물 비유(메타포)를 활용해 직관적으로 디자인했음.
Menus: 명령어를 직접 입력하지 않고 선택 가능하게 만들어 작업 효율 높였음.
Pointer: 화면 상에서 움직임을 바로 표현해 상호작용을 직관적으로 만듦.
OS별 특징
Apple의 iOS: 폐쇄적인 생태계로 하드웨어와 소프트웨어를 최적화했지만, 자유도는 낮음.
Google의 Android: 오픈소스로 개방적이며 다양한 기기에서 사용 가능하게 설계됨.
Material Design: Google이 제시한 디자인 시스템으로 현실 세계의 질감과 그림자를 활용해 직관적인 사용자 경험 제공함.
HIG: Apple의 가이드라인으로 일관성 있고 직관적인 인터페이스를 강조했음.