[TIL] AI 디자이너 베이스 캠프 D-1

AI 디자이너 베이스 캠프 첫 수업

 

1. 오늘의 학습 키워드

피그마와 디자인의 기본 개념

 

2. 오늘 학습한 내용 

 

[피그마1-1~1-6강]

 

* 피그마란?

[아이데이션]-[와이어프레임 플로우차트]-[UI설계 디자인 시스템]-[프로토타이핑]-[개발 핸드오프]

전 과정에 활용 가능하며,  실시간 소통이 가능한 디자인 툴, 

UX/UI 디자인에 최척화

 

피그마 계정 생성

https://www.figma.com/

Figma: The Collaborative Interface Design Tool

데스크톱 앱을 설치해서 사용하는 것을 추천

https://www.figma.com/ko-kr/downloads

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱

 

디스플레이와 픽셀 

- 디지털 화면 = Display

- 디스플레이는 '픽셀' 이라는 칸의 모음 

- 해상도 : 디스플레이의 선명도 = 디스플레이 안의 픽셀의 개수

- 1920*1080 (가로줄*세로줄) = 2,073,600 

*면적당 픽셀의 개수가 더 많다면 더 선명하다. 

 

1배수 디자인의 개념

- 1배수의 뜻은 1배(100%), 즉 원본 사이즈라는 뜻!

- 1배수 디자인의 사이즈는 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적이지만, 실사용자의 환경을 고려해야한다. 

ex) 아이폰 375*812 / 안드로이드 360*800 사이즈 권장

 

*픽셀 배율 확인하는 곳

https://yesviz.com/viewport/

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

 

아이폰 기본 디자인 사이즈는 아이폰 375*812

but, 아이폰 15pro의 해상도는 1179*2556  (3배수)

디자인은 1배수로 하고, 기기는 코드를 읽고 디자인으로 바꾼 다음 자기 배율만큼 확대 또는 축소한다. --> 렌더링 과정

 

3배수를 하면 1125*2436 이 되는데 이걸 1179*2556으로 미세조정 한다. --> 업스케일 / 다운스케일 

 

이미지 표현방식 [ 래스터,벡터 ]

* 래스터 : 픽셀에 컬러를 채우는 비트맵 형식 ex) 포토샵 

  - 확대한다고 해서 해상도가 좋아지지 x 

  - 확대 / 축소 반복하면 색상정보가 사라진다. (원본크기로 만들어도 복구x)

  - 일반적으로 확장자에 따라 파일크기가 달라짐  jpg < png

 

* 벡터 : 그림을 수식으로 표현, 대표적으로 svg형식  ex) 일러스트레이터, 피그마 

  - 수식의 개념이다 보니 이미지가 크고 복잡하면 파일 크기가 많이 커짐.

 

8포인트 그리드? = 디자이너와 개발자의 약속!

ex)

 

Large 버튼	Midium 버튼	Small 버튼
폰트 18 / 여백 16	폰트 16 / 여백12	폰트 14 / 여백 8

폰트 +-2 / 여백 +-4 라는 규칙성을 갖고 움직인다. 

 

* 규칙이 있어야 디자이너와 개발자 사이의 업무 효율성이 높아지고 번거로움이 사라진다.

* 디자인에서 8의 배수만 기억하자 !

but. 실무에서는 디테일한 디자인을 위해 4배수를 더 많이 쓰기도 한다. 제한적으로 2배수도 사용한다.

 

피그마의 기본적인 툴 탐색 완료!

 

3. 느낀점 

지금까지 사용하던 포토샵이나 일러스트 화면과는 다른 느낌이라 적응하는데 시간이 조금 걸릴 것 같다.