티스토리 뷰
📌 도형 저장 방법
Design 패널에 Export 들어가서 배수와, 제목, 확장자 선택 후 → 밑에 버튼을 누른다. (Export Polygon 5)
📌 프레임 VS 그룹
◾ 프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체예요.
◾ 그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능이에요.
◾ 프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없어요.
📌 레이어와 정렬
◾ 레이어를 쌓은 구조가 곧 코드 구조
◾ 레이어는 화면 상단에서 하단으로 쌓이지만, 화면 앞에서부터 뒤라는 방향도 존재
◾ 더 앞에 있는 개체는 제트값이 높다, 나한테 가까이 있다.
◾ 여러개체 정렬 시 프레임에 가장 가까이 있는 개체를 기준으로 정렬된다.
📌 오토레이 아웃
◾ 프레임 구조 ⭐ 중요하다.
- 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
- 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
- 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
◾ 오토레이 아웃 : 패딩으로 감싸 컨테이너를 만들 때 사용, 순서가 앞에 있으면 밑으로 간다.(레이어 순서와 다름)
📌 컨스트레인트 : Constraint 제약, 제한
◾ 어디를 기준으로 고정할 것인가, 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한
◾ 프레임 리사이징
📌 디스플레이와 픽셀
◾ 해상도 : 디스플레이의 선명한 정도, 디스플레이 안에 들어가 있는 픽셀의 개수
◾ 픽셀의 갯수 : 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수 (1920*1080 디스플레이는 총 2,073,600개의 픽셀)
◾ 1배수 디자인 : 1배(100%), 즉 원본 사이즈, 디자인을 할 때는 기준이 되는 사이즈
◾ 아이폰 권장사이즈 : 375 * 812 / 안드로이드 권장사이즈 : 360 * 800
- 375*812에서 비율을 그대로 유지한 채 375를 360으로 축소하면 812는 얼마가 되는지 한 번 보세요!
◾ 사이즈 참조 사이트 : https://yesviz.com/viewport/
Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com
An Authentic Guide of Viewport Sizes for devices including Apple iPhone, Samsung, Tablets, Smart Watches and Android Phones. A detailed comparison list of Phone Dimensions, Screen Sizes and Device Resolution.
yesviz.com
- 렌더링 : 기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소
- 줄이는 건 다운스케일, 키우는 건 업스케일이라고 해요.
📌 분기점
◾ 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점(경우의 수를 나누어서 보여준다.)
- 데스크탑 화면 : 가로가 1024px 이상
- 태블릿 화면 : 로가 768px 이상, 1024px 미만
- 모바일 화면 : 가로가 768px 미만
→ 더 이상 작아지지 않는 지점이 있어야 레이아웃이 깨지는 걸 막을 수 있다.
📌 그리드 : 격자
◾ 반응형 웹이 분기점마다 디자인을 바꿀 때, 그리드를 따라 정렬
◾ 균형감과 완성도, 일관성 위해 사용
◾ 일반적으로 12개 칼럼 사용 : 모바일 웹디자인에서는 기둥 4개 배치하기 시작, 디자인을 반응형으로 확장하기 위해서
태블릿에선 2배인 8개, 데스크톱에선 3배인 12개로 사용하면서 12개 칼럼이 일반적인 기둥 수로 자리 잡음.
◾ 그리드 구조
- 거터, 유닛
◾ 대표적인 그리드
- 960 12 Column Grid : 유닛너비 60 / 거터 너비 20
- 1200 12 Column Grid : 유닛너비 76 / 거터 너비 24
- 1440 12 Column Grid : 유닛너비 76 / 거터 너비 24
📌 8포인트-그리드 디자인
◾ 간격이나 크기 등을 8, 16, 24, 32, …로 맞추는 방법
- 디자인을 8의 배수만 기억하면 되기 때문에 빠른 커뮤니케이션과 빠른 작업가능
- 홀수는 확대 또는 축소할 때 소수점이 생기는데, 만약 소수점이 생기면 픽셀 한칸을 미처 못 채운 불완전한 디자인이 생기고, 결국 디자인이 깨져 보이는 현상이 발생
📌 반응형(Responsive)과 적응형(Adaptive)
📌 디자인 시스템
- UI키트는 재료 목록만 있는 상태, 디자인 시스템은 UI만 있는게 아니고 규칙도 있는 것
- 아토믹 디자인 시스템 : 원자, 즉 디자인의 가장 작은 요소
✅ 파운데이션 :
◾ 색상(Color) :
- RGB: 빛의 3원색으로 구현되는 화면, 빨강, 초록, 파랑, 감산혼합, 256가지 색상 보여준다.
- Hex Code : 각각의 숫자를 컴퓨터가 16진수(Hexadecimal)로 변환해서 읽는것
◾ 서체(Font, Typography)
◾ -아이콘(Icon)
◾ 레이아웃(Layout)
- 간격, 여백(Spacing, Gap)
- 곡률(Radius)
- 그리드(Grid)
- 고도(Elevation)
📌 컬러 스타일
- 기본적으로 2~3개 : 포인트컬러(핵심부분), 메인컬러(백그라운드), 세컨더리컬리(포인트컬러 뒷받침)
- 색 정한 뒤 밝기를 10단계 만든다.
- 1(포인트):3(세컨더리):6(메인컬러) 법칙 : 빠르게 밸런스 잡는데 좋다.
'피그마 활용법' 카테고리의 다른 글
피그마활용(2) 2주차 숙제 (0) | 2024.01.15 |
---|---|
피그마활용(2) 1주차 숙제 (0) | 2024.01.11 |
피그마활용 과제 제출 (1) | 2024.01.11 |
피그마활용(1) 4주차숙제 _버튼과 텍스트필드 배리언츠 (0) | 2024.01.09 |
피그마활용(1) 3주차숙제 _색상 팔레트와 폰트스타일 추가 (0) | 2024.01.04 |