PART 4. 피그마의 꽃, 오토 레이아웃 살펴보기
01 오토 레이아웃 구성요소 알아보기
1) 오토 레이아웃 생성
- 오브젝트 선택한 상태에서 shift + a
ctrl + d로 복제하면 프레임도 같이 따라 늘어남
새 오브젝트를 끼워넣거나 기존 오브젝트를 빼는 것도 가능
방향키로 오브젝트끼리의 순서 변경도 가능
2) 방향에 따라 오브젝트 배열하기
수직 / 수평 / Wrap으로 정렬 가능
wrap은 수평방향만 적용됨. 상위 컨테이너 크기에 따라 내부 오브젝트 자동 줄바꿈
3) 간격 설정하기
오브젝트 간 간격 조절 가능
하나의 프레임 안에 있는 모든 오브젝트는 같은 간격을 가짐
wrap에서는 가로/세로 간격 따로 설정 가능
4) 패딩 - 오브젝트와 프레임 사이 크기 조절하기
상하좌우 방향 설정 가능. Ctrl을 누르고 패딩을 클릭하면 모든 방향 한번에 설정도 가능
5) Auto layout 패널을 사용하지 않고 간격과 패딩 제어하기
오브젝트 사이에 커서를 두면 분홍색 빗금 영역이 나타나는데, 이 영역을 드래그하거나 클릭해 직접 간격 및 패딩 조절 가능
* 단축키
alt + 드래그 : 반대 방향 패딩 동시변경
shift + 드래그: big nudge에 설정된 값만크 변경
alt shift 드래그 : 모든 방향 동시에 변경
6) 정렬 - 프레임 내부 오브젝트 정렬하기
9가지 방향으로 정렬상자 선택 가능
7) 분배 - 오브젝트 분배하기
간격 auto 시 space between으로 설정
8) 레이아웃 외곽선 설정하기
기본 excluded : 프레임 크기 계산에 선두께 고려 x
include로 설정시 stroke 두께를 고려해서 계산
9) 캔버스 레이어 순서 조정하기
오브젝트 간 순서조정 - 겹칠 때 뭐가 front에 올지 결정
10) 텍스트 기준선 정렬하기
텍스트 기준선을 기준으로 오브젝트를 정렬함: 텍스트가 폰트의 기준선을 기준으로 정렬. 서로 다른 종류의 폰트를 사용하는 경우에도 텍스트 정렬을 깔끔하게 할 수 있도록 해줌
11) Absolute position - 오토 레이아웃 옵션에 영향 받지 않기
Ignore auto layout 선택 시 레이아웃에 무관하게 절대위치로 움직임
12) 오토 레이아웃 해제하기
오토 레이아웃 생성된 프레임 선택하고 shift + alt + a
or remove auto layout 버튼 누르기
02 반응형 디자인을 위한 크기 조절 옵션 알아보기
1) Hug contents - 하위 오브젝트 감싸기
상위 프레임에서 설정 가능. 하위 오브젝트를 감싸는 역할. 하위 요소의 크기와 패딩에 따라 크기가 결정됨
하위요소 (노란색 사각형) 크기 조절 시 상위요소 (파란색 사각형) 가 그에 맞춰 늘어나거나 줄어듦
2) Fixed size - 오브젝트 크기 고정하기
- 오토 레이아웃 프레임과 내부 오브젝트 모두 설정 가능. 오브젝트 크기를 고정함. 드래그해서 변경 가능
레이아웃의 가로 크기를 직접 변경하면 hug에서 fixed로 설정됨 - 내부 오브젝트 크기를 변경해도 따라 늘어나지 않음
3) Fill Container - 상위 프레임에 따라 크기 조절하기
- 프레임 내부 오브젝트에서 설정 가능. 상위 프레임 크기에 맞춰 늘어나며, 상위 프레임 크기와 패딩에 따라 크기 결정
상위요소(파란색) 의 크기에 따라 노란색(fill container) 크기 결정
4) 중첩된 오토 레이아웃 리사이징하기
중첩된 오토레이아웃에서 최하위 요소를 반응형으로 만들려면 중간 프레임과 최하위 오브젝트 모두 Fill container로 지정되어야 함
03 버튼과 텍스트 필드 만들기
1) 버튼 만들기
텍스트에 오토 레이아웃 적용 - 텍스트 길이에 따라 자동으로 크기 변경됨
2) 텍스트 필드 만들기
04 여러 가지 형태의 알림창 만들기
1) 기본형 알림창 만들기
* 단축키
enter : 하위요소 전체선택
\ : 상위요소로 이동
2) 단일 버튼 알림창 만들기
3) 수직형 버튼 알림창 만들기
4) 시스템형 알림창 만들기
05 프로필 카드 디자인하기
1) 디자인 요소 생성하기
프레임에 이미지를 넣어 만들면 프레임 크기에 따라 이미지 크기도 함께 변경됨
2) 오토 레이아웃 설정하기
3) 크기 조절하기
4) 말줄임표 처리하기
1주차: UI 디자인의 이해
1. UI 디자인의 개념
UI: User Interface
사용자 인터페이스 디자인
- 인터페이스 디자인의 범위를 명확히 함
- HCI : Human Computer Interaction
* 노멀 유징 시스템: 사용자 하나와 시스템 하나의 인터페이스
* 인트라넷: 사용자 여럿과 하나의 시스템
- CMC(Computer-Mediated-Communication) : 각각의 사용자와 각각의 노멀 유징 시스템. 컴퓨터를 가운데 두고 사람과 사람이 커뮤니케이션
- 서버 클라이언트 시스템 : 사람이 시스템을 사용할 때, 그 시스템이 다른 시스템에서 무언가를 가져오는 경우. 단말기가 서버에서 무엇을 불러와 가져오는 것
Interaction(상호작용)
- 사용자: 필요와 목적에 따라 인지적 시스템이나 제품 사용
- 인터페이스는 사용자와 시스템, 제품 사이에 위치
- 인터랙션은 인터페이스를 통해 이루어짐
* 사용자의 심성모형(멘탈 모델)
- 사람들이 특정 맥락에 갖고 있는 인지모형. 사람, 제품, 서비스, 환경 등
- 경험이나 교육 등에 의해 습득
- 사람마다 다름 ex) 화면을 봐도 마우스를 쓰는 게 편한 사람과 터치가 편한 사람...
- 사용자 집단의 멘탈모델을 고려한 디자인 필요
HCI
- 인간과 상호작용하는 컴퓨터 시스템의 설계, 평가와 관련된 실무부분 및 현상들에 대해 연구하는 분야
- 인간과 상호작용하는 시스템이 주어진 목표를 달성할 수 있도록 둘 사이의 상호작용 방법과 절차를 설계/평가하며 연구
인터페이스 디자인의 영역
사용자 단
- 전통적인 제품 디자인
- 피지컬 유저 인터페이스, 물리적인 유저 인터페이스가 위치
- GUI 그래픽 유저 인터페이스: 물리적 인터페이스와 대칭적. 스크린에 디자인되는 것 - 그래픽적인 요소
- 햅틱과 사운드 유저 인터페이스: 피지컬과 그래픽 유저 인터페이스 사이에서 제 역할을 함
심층부
- 계층적 메뉴구조
- 인포메이션 아키텍처를 가짐
- 눈, 귀, 진동, 피부 등으로 시스템은 정보/서비스/콘텐츠를 전달
UI design, HCI design을 이해하기 위한 것
- OS : 컴퓨터화된 디바이스의 하드웨어나 소프트웨어 리소스를 관리. 프로그램에 대한 공통적인 서비스를 제공하는 시스템sw. 특징에 맞는 인터페이스 디자인을 요구함
- 인터랙션 : 터치, 음성, 제스처 등을 이용하는 인터랙션 사례
- 사용성 : 사용자가 목표달성을 위한 제품, 서비스 ,시스템 등 사용 시, 유효성/효율성 그리고 만족여부를 이야기함
- 접근성
- 유니버셜 디자인
- 표준 제정 : 기업이나 단체들이 표준을 지정하고, 준수함
- IA (Intformation Architecture): 정보구조와 워크플로우
- UI 디자인의 패턴
- UI 디자인의 시스템
- UI 프로토타이핑
- 사용성 테스트
2. UI 프로젝트의 이해
UI 디자인의 성공사례
1. 팀 버너스리의 웹 페이지
- 월드 와이드 웹을 처음으로 주창함
2. 구글 검색엔진의 인터페이스 디자인
- 구글의 핵심은 검색 알고리즘 -> 검색에만 초점을 맞춘 디자인
- 기능성에만 초점을 둔 디자인
- I'm feeling lucky 버튼: 검색엔진을 강조하는 인터페이스 디자인. 광고비가 안들어와서 손해라고 함... 그래서 없어졌나?
- 일관성과 기준이 있고 깔끔한 디자인
3. 삼성페이의 인터페이스
- 사용자 중심 인터페이스
- 기존 마그네틱 스트립 전용 결제 단말기도 지원함
- MST의 성공 포인트: 편리함 / 보안성 / 범용성(NFC뿐만 아니라 마그네틱 포스기 결제 가능)
- 좋은 인터페이스 디자인의 원칙:
1) 익숙한 표현 방식을 활용해 시스템과 현실을 매치
2) 사용자가 직접 조작할 수 있도록 자유롭게 함
3) 일관성과 기준이 있음
4) 유연하고 효율적으로 사용하게 함
5) 아름다우며 최소한으로 디자인
4. 신한은행 ATM 기기 디자인
- 시니어 고객 맞춤형 ATM 서비스 : 큰 글씨, 쉬운 금융용어, 색상대비, 느린 말 안내 서비스
- 빅데이터 분석 결과 ATM 창구에서 입출금 등 단순 업무 비중이 높음을 알게 됨 -> 창구 사이에 스마트 키오스크 설치
ex) 입금출금송금... -> 돈넣기. 돈찾기. 돈보내기...