[디자인 카타]
자동 확인 및 섹션 이동이 더 효율적이라고 생각한다. 여섯자리 숫자를 잘못 입력할 때 자동으로 넘어간다면 불편할 수도 있겠지만, 익숙한 번호를 입력하는 경우에는 입력 실수가 적기 때문에 괜찮다. 올바른 번호를 입력해 자동으로 넘어간다면, 과정을 진행하는 속도도 빨라지고 번거로움도 줄어든다. 혹시나 잘못 입력한다면 입력칸 밑에 작은 글씨로 잘못 입력했음을 알려주는 피드백을 주면 될 것이다.
보통 이런 UI는 앱에 처음 들어가서 이름, 주민등록번호, 휴대폰 번호, 인증 번호 등을 입력할 때 사용된다. 한 번에 여러 항목을 입력해야 해서 중간중간 확인을 눌러야 하는 번거로움이 있다. 게다가 번호를 입력하는 칸과 다음 칸의 위치가 동일하지 않아 왔다갔다 해야 한다. 이런 과정은 사용자가 앱을 이용하기도 전에 귀찮다는 인식을 심어주어 인증 과정을 포기하게 만들 수도 있다.
[피그마 기초 2주차 강의 정리]
- 웹과 앱 개발을 할 때 디자인을 코드로 변환
1. 프레임
프레임(컨테이너): 디자인을 개발이 가능한 코드 블록으로 만듦.
각각의 블록에 배경색이나 윤곽선을 따로 지정 가능. 크기 변경 시, 프레임만 커지고 안에 개체들은 영향받지 않음.
그룹: 디자인 정리 등 편의를 위해 여러 개체를 하나로 모으는 기능. 코드 블록으로 인식 x.
개체들의 윤곽선이나 배경색이 한꺼번에 변경. 크기 변경 시, 그룹 안 모든 개체가 영향받음
2. 프레임 정렬
- 단일 개체만 정렬하는 경우 부모 컨테이너를 기준으로 위치 정해
- 여러 개체를 정렬하는 경우, 기준점에 가장 가까이에 있는 개체를 기준으로 정렬
< 레이어 전부 정렬 단축키 > alt + L
- 부모 프레임 안 여러 개의 자식 프레임을 선택했을 때, 기존 정렬 메뉴 맨오른쪽에 새롭게 생성되는 <분배> 메뉴
3. 🌟오토레이아웃🌟
다양한 크기의 디스플레이. 따라서 앱&웹을 만들 때에는 이 크기에 유연하게 대응하도록 만들어야함.
레이아웃에 유연함을 만들어주는 것이 바로 오토레이아웃
간격에 맞게 컨테이너를 쌓을 수 있음
- 코드 블록의 구조
패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
구조: 내부에 들어있는 개체 + 개체를 둘러싼 패딩(내부 여백)
- 오토레이아웃 만드는 법
1) 프레임이 아닌 개체에 오토레이아웃을 적용하기: 기본 패딩값을 가진 오토레이아웃 프레임이 생김.
2) 이미 있는 프레임에 오토레이아웃을 적용하기: 프레임 자체가 오토레이아웃 속성으로 변환.
- 오토레이아웃 패널 둘러보기
1) 오토레이아웃의 정렬 방향: 오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지
a. 세로: 수직 방향으로 쌓기
b. 가로: 수평 방향으로 쌓기
c. 감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓기
2) 좌우 패딩: 오토레이아웃의 좌후 여백값
3) 정렬 위치: 오토레이아웃의 사이즈가 변할 때, 안에 있는 개체들이 어디를 기준으로 정렬되는 지
4) 상하 패딩: 오토레이아웃의 상하 여백값
5) 오토레이아웃 해제: 오토레아아웃 속성을 제거
6) 고급 옵션: 오토레이아웃의 고급 속성 설정
7) 패딩 개별 조정하기: 상하좌우 패딩을 각각 따로 설정
4. 🌟 프레임과 컨스트레인트 🌟
컨스트레인트: 오토라이아웃을 더 오토레이아웃처럼 만드는 기능. 오토레이아웃이 움직일 때의 규칙. 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변하는지를 정하는 것
이 파란색 점선이 컨스트레인트이다.
자식 컨테이너가 부모에 고정되어 움직이는 일종의 ‘핀’ 위치
위의 사진의 파란색 점선이 왼쪽, 위쪽에 있으므로 자식 컨테이너는 부모 컨테이너의 사이즈가 변할 때 왼쪽과 위쪽이 고정된 채 따라감
- 가로 방향의 컨스트레인트 조건
left: 부모의 왼쪽 기준으로 고정
right: 부모의 오른쪽 기준으로 고정
left and right: 부모의 왼쪽, 오른쪽 기준으로 고정
center: 부모의 길이의 중간을 기준으로 고정
scale: 부모의 길이에 비례
- 세로 방향의 컨스트레인트 조건
top: 부모의 위쪽 기준으로 고정
bottom: 부모의 아래쪽 기준으로 고정
top and bottom: 부모의 위쪽, 아래쪽 기준으로 고정
center: 부모의 높이의 중간을 기준으로 고정
scale: 부모 높이에 비례
5. 🌟 프레임 리사이징 🌟
- fixed: 프레임은 기본적으로 가로와 세로 길이가 고정되어있음
프레임을 오토레이아웃으로 감싸는 순간, 리사이징이 생김
부모 리사이징 -> 자식 값 영향
자식 리사이징 -> 부모 값 영향
- 종류: fixed / huged(부모만 사용 가능) / fill(자식만 사용 가능)
- 법칙 🌟 :
부모 hug 자식을 감쌈 - 자식 fixed
부모 fixed - 자식 fill 쭉 늘어남
부모 fixed - 자식 fixed
'UIUX 내일배움본캠프 > CH 1 온보딩 주차' 카테고리의 다른 글
| 본캠프 5일차_디자인 카타, WIL (3) | 2025.01.27 |
|---|---|
| 본캠프 4일차_디자인 카타, 강의 정리 (0) | 2025.01.24 |
| 본캠프 3일차_디자인 카타, 강의 정리 (0) | 2025.01.24 |
| 본캠프 시작~! 1일차_강의 정리(0120) (2) | 2025.01.20 |
