[강의내용]기초 1주차

강의노트 : https://teamsparta.notion.site/1-5a61ba03b75c4fd88c6d9dd66257d1f2

체계적으로 배우는 피그마 기초 완전 정복(1) | Notion

1-1. 이번에 배울것

피그마란?

• 제품을 만드는 모든 사람을 위한 디자인툴이자 협업도구
• 디자인 협업도구에서 점차 팀 전체가 쓸 수 있는 종합적인 협업 툴
• 기획자, 마케터, 개발자를 위한 기능도 선보이는 중

피그마 특징

• 웹에서도 사용할 수 있어 접근성이 좋고 맥 윈도우 모두 사용가능
• 디자인부터 개발까지 올인원
• 강력한 커뮤니티로 각종 플러그인 사용가능
• 쉬운 학습

1-2. 피그마 소개와 설치

환경에 맞는 피그마 설치 후 계정 생성, 로그인

1-3. 디스플레이와 배수 이해하기

디스플레이(display)와 픽셀(pixel)

• 디지털 화면이며 픽셀이라는 작은 칸들로 이루어져 있음

해상도

• 디스플레이의 선명한 정도
• 디스플레이 안에 들어가있는 픽셀의 개수(1920*1080)

해상도와 픽셀의 관계

• 해상도가 같다면 화면 크기가 클수록 필셀 한칸의 크기도 커진다.
• 화면의 크기가 같다면 해상도가 높아질 수록 픽셀 한칸의 크기도 작아진다.
• 화면 크기가 클수록 해상도도 높다.
• 면적당 픽셀개수가 더 많으면 세밀한 묘사 가능

1배수 디자인

모바일의 경우 같은 앱이라도 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 위치나 배치가 동일해야한다

• 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적(유의점: 내가 만들 앱을 쓸 사람들을 기준으로 하는 것이 좋음)
• 권장하는 1배수 사이즈
  • 예전 → 아이폰 : 320480 / 안드로이드 : 360640
  • 현재 → 아이폰 : 375812 / 안드로이드 : 360800

💡 디바이스별 픽셀 배율 및 해상도 확인하는 곳

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

위 url로 접속하면 볼수 있으며 pixel Ratio(픽셀배율)에서 2.0이라고 적혀있다면 ‘이 기기는 2배수 사이즈라는 뜻’으로 이해하면 된다

 

만약 정한 1배수 사이즈는 375812인데 아이폰 15프로의 기기 해상도는 11792256이라면 어떻게 해야할까?

1. 우선 1배수 사이즈를 디자인하고 개발한다(375*812)
2. 기기는 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 또는 축소한다 *이 과정을 렌더링이라고 함
3. 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄운다. *업스케일, 다운스케일을 통해

1-4. 이미지 표현방식, 벡터와 래스터

이미지가 깨진다는 것?

컴퓨터가 그림을 그리는 방식

• 래스터(Raster) 방식
  • 비트맵방식이라고도 하며 픽셀칸에 색깔 칩을 하나씩 담는 형식
  • 특징
    • 해상도가 높을수록 화질이 좋음
    • 해상도가 낮은 이미지를 크게만든다고 화질이 좋아지지 않음
    • 확대와 축소를 반복하면 색상정보가 사라짐(흔히 깨진다, 열화됐다라고 말함)
    • 단순한 방식이라 고해상도 이미지를 표현하기 좋음 → 크고 화려한 이미지도 벡터에 비해 파일 크기가 작음(일반적으로 jpg가 가장 가볍고 png가 가장 무거움)
• 벡터(Vector) 방식
  • 그림을 수식으로 표현하는 형식으로 일러스트와 피그마가 대표적인 툴
  • 이미지라기 보다는 코드에 가까움
  • 특징
    • 확대 축소 등 크기 변형에 자유로움
    • 이미지가 크고 복잡하면 수식이 복잡해짐(깨지지 않는다고 무조건 svg형식은 안됨 어떤 이미지를 어떻게 보여줄지 적합한 확장자를 선택하여 사용하는 것이 best!)

해상도가 큰데, 그래픽이 깨질 때

• 작업시 습관적으로 화면을 확대해서 보는경우
• 실제 구현될 사이즈로 확인하는걸 깜빡했을때
• 이미 열화된 이미지를 강제로 키워서 해상도만 늘려둔 경우(이미 색상정보가 사라진 이미지는 사용 지양할 것)

1-5. 8포인트 그리드는 무엇일까

💡 8배수로 만든다는 규칙이 있고 8포인트 그리드 디자인(8-point grid design)이라 함

8포인트 그리드 디자인 개념

• 일반적으로 가장 많이 사용하는 규칙
• ui 8의 배수에 맞춰 배치하는 레이아웃 규칙
• ui사이 간격, 요소 여백, 크기등을 8의 배수단위로 조정하여 사용

왜 사용하는지

• 일정한 규칙이 있다면 서로 물어보는 번거로움과 비효율을 줄일 수 있음.
• 규칙을 적용하기만 하면 수월해짐

왜 8의 배수인걸까

• 2를 3번쪼갤수있고 나눈 숫자도 다시짝수
• 디자인 축소시 망가지지 않고 축소 가능
• 다른 수에 비해 딱 떨어지게 만들기 휘움
• 업스케일, 다운스케일에 유연하게 대처 가능
• 10이나 5도 가능하지만, 매끄러운 모양에 지장 (홀수는 불편한 편인가 봄 / .5일때에는 흐릿하게 나옴)

1-6. 피그마 본격 둘러보기

Drafts : 연습파일

Starred : 즐겨찾기

파일생성 4가지

1. new design file
2. figjam board
3. slide deck
4. import

1-7. 이동 툴과 크기 조정 툴

1-8. 도형과 글자만들기

1-9. 패스 알아보기