2024년 10월 24일 (Thursday )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊
[개인]
🩶 피그마 기초 강의 듣기
🩶 튜터세션 듣기
🩶 퀘스트하기
[팀플]
🩶 저녁 팀 스크럼(회고)
피그마
피그마는 제품을 만드는 모든 사람을 위한 디자인 툴이자 협업도구 ( 현재 가장 뛰어난 디자인 협업툴)->디자이너를 중심으로, 개발자, 기획자, 마케터 등 모든 직군들이 같은 화면을 보면서 작업 가능!
디스플레이와 배수 이해
1. 디스플레이와 픽셀
- 디스플레이(Display)란 디지털 화면들(웹사이트, 앱, 키오스크, 전광판, TV 등)을 말함
- 디스플레이는 픽셀(Pixel)이라는 정말 작은 칸들로 이루어짐 (크기는 정해지지 않음)
- 해상도(Resolution)는 디스플레이의 선명한 정도를 나타냄 -> 디스플레이 안에 들어가 있는 픽셀의 수
- 픽셀의 갯수는 가로 줄의 픽셀 개수* 세로 줄의 픽셀 개수로 나타냄
2. 해상도와 픽셀의 관계
- 해상도가 같다면 화면 크기가 클수록! 픽셀도 up!
- 화면 크기가 같다면, 해상도 높은 쪽이 픽셀 한 칸이 더 작음!
- 일반적으로 화면 크기가 클수록 해상도가 높음! (큰 모니터 사면 더 선명하다고 볼 수 있음 예외도 존재!)
- 면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사 가능!
3. 1배수 디자인
- 같은 앱이라면 어떤 폰으로도 항상 화면에 보이는 디자인의 위치나 배치가 동일 -> 1배수로 만들기 때문!
- 1배수란 1배(100%)로 원본 사이즈를 뜻함
- 가장 많이 사용하는 사이즈
- 유의 상황은 내가 만들 앱을 쓸 사람 기준으로 만들기! -> 안도로이드 기기를 더 많이 사용하면 안드로이드 기준 아이폰을 더 많이 사용하면 아이폰 기준으로 디자인하기
- 권장하는 1배수 사이즈 -> 배수=픽셀 배율 (Pixel Ratio(픽셀 배율)를 볼 때 2.0이면 2배수 사이즈!
- 아이폰 320*480 / 안드로이드 360*640 -> 375*812 / 360*800 으로 변함
*1 배수 예시
* 업스케일, 다운스케일
디자인을 배율만큼 확대하거나 축소하면 실제 해상도와 차이가 조금씩 생김 이때 실제 해상도가 더 크다면 조금 더 키우고, 해상도가 더 작다면 더 줄임 이걸 다운 스케일, 업스케일이라고 함 ( 줄이는건 다운 / 키우는 건 업)
이미지 표현 방식
1. 백터와 래스터
- 컴퓨터가 그림을 그리는 방식은 래스터와 벡터임 (데이터를 채운다는 개념)
1) 래스터(Raster) 방식
- 비트맵(Bitmap) 형식이라고도 부름, 픽셀 칸에 색깔 칩을 하나씩 담는 형식
- ex) 포토샵
- 파일 형식: jpg, bmp, gif, png 등 이미지 형식 -> 확장자
- 특징
1) 해상도가 높을 수록 화질 ⬆ (픽셀 갯수가 많다는 건 해상도가 높다)
2) 해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 ☓
3) 확대와 축소를 반복하면 색상 정보가 사라짐 -> 깨진다, 열화됐다라고 표현함
4) 단순한 방식이라 고해상도 이미지를 표현하기 좋음
-> 모자이크 칸을 단순히 칠하면 되기 때문에 벡터에 비해 파일이 크기가 작음
* 파일 크기를 결정하는 속성으로는 압축률이나 색상 표현 범위 등이 있음
* 일반적으로 jpg 가 가장 가볍고, png가 가장 무거움
2) 래스터(Raster) 방식
- 그림을 수식으로 표현하는 형식
- 이미지보다는 코드 파일에 더 가까움
- ex) 일러스트레이터, 피그마
- 파일 형식: svg
- 특징
1) 확대 및 축소 등 크기 변형이 자유로움
2) 이미지가 크고 복잡하면 수식도 복잡해져 파일 큼 ( ex) 고해상도의 많은 색을 표현하는 경우 수식이 매우 복잡, 크기 ⬆
* 깨지지 않는다고 무조건 svg로 만들면 ✘ -> 적합한 확장자를 선택해야 함
* 벡터가 깨져 보이는 이유는 디지털 화면은 픽셀 기반이기 때문
* 이미 래스터 형식으로 만들어진 이미지를 벡터 툴에서 작업해도 벡터 개체로 변하는게 아니라서 깨질 수 있음
8포인트 그리드
디자인 요소를 8의 배수로 만드는 것을 8포인트 그리드라고 함
- 디자인이라는 것은 약속임 특히 UI/UX 디자인은 8포인트 그리드 약속이 중요⛧
* UI/UX 디자인은 이쁨보다 논리적으로 만들어야 함
* 8포인드 그리드 약속: 여백, 간격, 높이, 너비 등 UI 수치를 키우거나 줄일 때 최대한 8의 배수로 하는 것
- 8의 배수를 기억하면 개발도 디자인도 더 빠르게 할 수 있음
- 8인 이유: 8은 1, 2, 4, 8로 나눌 수 있음 -> 즉 짝수를 계속 만들 수 있음
* 짝수를 계속 만들면 좋은 점! -> 디자인 확대, 축소할 때 디자인이 최대한으로 망가지지 ☓
* 홀수는 안되는 이유: 홀수는 소수점이 생기기 때문!
* 소수점이 생기면 픽셀 1칸을 못채우는 일이 생겨 흐려짐 -> 매끄러운 모양 ☓
- 최근에는 해상도가 좋아져서 8대신 4배수(실제로 실무 많이 사용)나 2배수도 사용함
* 10배수가 안되는 이유: 10배수인 경우 1.25배를 ㅎ라게 되면 12.5가 나와 불안정 픽셀이 생김
* 8배수 인 이유: 8은 1.25배를 하더라도 10이 되면서 딱 떨어지기 때문
∴ 단위가 너무 커서 디자인을 줄이거나 키울 때 그 차이가 너무 커서 10배수는 힘듦
- 8인 이유: 8은 1, 2, 4, 8로 나눌 수 있음 -> 즉 짝수를 계속 만들 수 있음
프레임
- 프레임(Frame)을 만드는 것부터 모든 피그마 디자인이 시작됨 -> 피그마 디자인의 기본 단위
오토레이아웃과 리사이징
1. 오토레이아웃
- UI 구조 설계에서 아주 핵심적인 역할을 담당
- 레이아웃을 조금 더 편하고 빠르게 쌓아 올리도록 도와줌 (간격에 맞게)
- 이 오토레이아웃 간의 규칙이 리사이징
- 즉 레이아웃을 자동으로 조정할 수 있는 기능 ( auto-layout)
- 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만듦
* 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
* 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
* 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
* 컨테이너가 만들어지는 원리: 개체를 패딩으로 감싸 컨테이너를 만들 때 사용
* 우리가 만드는 UI의 크기는 개체의 크기 + 패딩
* 컨테이너를 하나의 개체라고 본다면, 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있음
2. 리사이징
- 리사이징(Re-sizing)은 사이즈가 변경된다는 뜻 -> 프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생김
- 오토레이아웃 간의 규칙이 리사이징
- 부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받음 (반대도 동일)
* 프레임은 기본적으로 가로와 세로 길이가 고정 -> Fixed(픽스드;고정된)라고 부름
* 리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있음
| 값 | 설명 | 유형 |
| Fixed | 고정값 | 공통 |
| Hug | 자식 컨테이너의 크기에 맞춰 조정 | 부모만 쓸 수 있음 |
| Fill | 부모 컨테이너의 크기에 맞춰 조정 | 자식만 쓸 수 있음 |
프레임과 그룹
1. 코드
- 코드는 기본적으로 네모난 박스 영역을 만듦
- 코드 다른 말로 박스 모델이라고도 함
- 디자인이 코드로 바뀌는 과정: 디자인을 코드로 -> 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여줌
* 디자인을 코드로 바꿀 때 코드는 디자인을 레고처럼 쌓아올림 (위에 사진 처럼)
∴ UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 함 -> 구조를 위한 기능이 프레임임
2. 프레임(Frame)
- 프레임의 개념 : 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체!
- 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐
- 박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되어 있는 셈
- 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불림
3. 그룹(Group)
- 그룹의 개념 : 여러 개체를 하나로 묶어주는 기능
- 다양한 경우에 사용할 수 있음
- 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능
- 코드 블록으로 인식 ☓ -> svg 이미지로 인식
포지션
- 포지(Position)은 실제 개발에서도 사용하는 개념 (디자인과 레이아웃을 위한 코드인 CSS에서 사용)
- 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정함
- Static(스태틱): 일반적인 요소들이 가지고 있는 포지션 -> 기본 값이자 스크롤을 하면 따라 움직임
- Fixed(픽스드;고정된): 화면전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있음 (화면 전체 기준)
- Absolute(앱솔루트): Fixed 와 유사하지만, 고정되는 기준이 컨테이너 안 (본인이 담겨 있는 부모 컨테이너를 기준)
- Sticky(스티키): 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션 -> 스크롤을 따라 움직이다가, 특정 위치에서 상단 고정
💭내일 계획
🤍3주차 강의 듣기
🤍튜터세션듣기
🤍 진행 못한 퀘스트 진행하기
'스파르타_내일배움캠프 > 일지' 카테고리의 다른 글
| [02주_2024_10_31] 강의 복습하기 (3) | 2024.10.31 |
|---|---|
| [02주_2024_10_30] UI 차이점 & 프로토타입 (3) | 2024.10.30 |
| [02주_2024_10_29] 랜딩페이지 & 버튼 (5) | 2024.10.29 |
| [02주_2024_10_28] 피그마 기초 2 (4) | 2024.10.28 |
| [01주차_2024_10_23] 캠프 시작 + 팀 배정 (0) | 2024.10.23 |
