[TIL] #10 피그마 강의 무한~복습

오늘의 학습내용📖

 1.피그마 활용법(1) 복습 

 

매니저님이 데일리 스케줄에 위 이미지처럼 복습 체크 포인트를 같이 올려주셨는데 정말 큰 도움이 되었다!

강의를 이미 몇 번이나 반복 수강해서 대강 다 알고 있다고 생각했는데

체크 포인트를 봤을 때 대답을 하기 어려운 부분들도 있어서 다시 복습...😇

체크 포인트 없었다면 안일한 생각으로 복습 안했을 나... 구해주셔서 감사합니다(_ _)

 

복습한 덕분에 지나쳤던 부분까지 머리 속에 주워담을 수 있었다.

 

💡픽셀과 배수

1.픽셀

모니터를 엄청 가까이에서 봤을 때 보이는 작은 네모네모를 픽셀이라고 한다.

픽셀의 사이즈는 정해져 있지 않고 픽셀이 많을 수록 해상도가 높다.

일반적으로 화면 크기가 클수록 해상도가 높은데 예외도 있다.

내 모니터는 맥북보다 훨씬 큰데... 맥북 화질이 훨씬 좋다ㅎㅎ이것이 그 예시이다.

 

2.배수

모바일 앱의 사이즈는 가지각색이기 때문에 디자인을 할 때 기준이 되는 사이즈를 하나 정해야한다.

기준이 되는 이 사이즈를 1배수 디자인이라고 한다. 1배(100%) 원본 사이즈라는 뜻.

 

1배수 디자인을 정하는 방법은 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적인데,

유의해야 할 점은 내 타겟들이 쓰는 사이즈를 고려해야 한다는 것이다.

예를 들어 내가 만들 제품의 타겟이 중장년층이라 안드로이드를 많이 쓴다면 디자인도 안드로이드를 기준으로 해야겠쥬?

 

권장 1배수 사이즈는 아이폰은 375*812, 안드로이드는 360*800

디바이스별 픽셀 배율 및 해상도를 확인할 수 있는 사이트 https://yesviz.com/viewport/

 

<1배수 디자인이 구현되는 과정>

디자이너가 1배수 사이즈로 디자인을 하면 개발팀에서 개발을 한다.

기기는 코드를 읽고 디자인으로 바꾼 다음, 기기 배율만큼 확대 또는 축소한다.(렌더링)

기기 실제 해상도에 맞게 미세 조정(업 스케일,다운 스케일)을 마친 뒤 화면에 띄운다. 

 

 

💡그리드를 사용해야하는 이유

그리드는 원래 편집 디자인에서 쓰였던 것인데,

글과 그림들을 균형감 있게 배치할 수 있도록 도와주고, 주목해서 읽어야하는 부분을 강조해준다.

적당한 간격을 만들어 더 잘 읽히게 하기도 하는 등 전체적인 완성도가 올라간다.

웹에서 그리드를 사용하는 이유도 비슷하다. 균형감,완성도,일관성을 위해서이다.

 

 

💡4포인트 혹은 8포인트 그리드 디자인을 하는 이유

UI 디자인에 일정한 규칙을 부여하면 다른 디자이너나 개발자와 일할 때 서로 물어보는 번거로움과 비효율을 방지해준다.

8포인트 그리드는 여백,간격,높이,너비 등 UI 수치를 키우거나 줄일 때 최대한 8의 배수 단위로 하는 것

하필 8인 이유는 8은 1,2,4,8로 나눌 수 있기 때문이다. 몇 배를 해도 소수점 없이 깔끔하게 떨어지는 숫자이기 때문에 디자인을 축소하거나 확대할 때 디자인을 망가뜨리지 않을 수 있다.(소수점이 생기면 디자인이 깨져보이는 현상이 발생할 수 있음.)

최근에는 디바이스 해상도가 워낙 선명하고 좋아졌기 때문에 2배수,4배수로도 디자인 한다.

 

 

💡반응형과 적응형의 차이점

반응형은 해상도의 변화에 실시간으로 반응한다 → 만들기 어렵다…

적응형은 해상도가 변하더라도 반응하지 않거나 실시간으로 변하지 않는다 → 만들기 쉽지만 관리가 어려움

둘 다 각각의 장단점이 있고 실무에서도 필요에 따라 섞어서 사용한다.

 

💡디자인 시스템의 개념과 필요성

UI 키트가 재료 목록이라면 디자인 시스템은 레시피북이다.

디자인 시스템은 UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 '문서'이다.

반복적인 UI를 효율적으로 관리하고 팀 전체가 일관적으로 이해하기 위해 사용한다.

디자인을 반복해서 사용할 수 있어 시간과 비용이 줄어들고,

누가 만들어도 동일한 품질의 제품 설계가 가능하다는 장점이 있다.

 

💡파운데이션이란?

파운데이션은 디자인 시스템을 이루는 기본 재료들로

구성품인 컴포넌트를 만들기 위해 사용하는 공통 재료이다.

파운데이션의 구성은 조직의 디자인 시스템 마다 다를 수 있는데

크게 보면 색상,서체,아이콘,레이아웃(간격,여백,곡률,그리드,고도) 4가지로 구성되어있다.

 

 

💡컴포넌트의 개념

컴포넌트는 어떤 것을 만들기 위한 재료,구성품이라는 뜻

파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품을 뜻한다.

 

컴포넌트는 모양이 아닌 기능이 중요하다.

버튼마다 모양,색상이 다른데 우리는 같은 버튼으로 인식한다.

버튼의 생김새가 아닌 버튼이 하는 일을 기준으로 생각하기 때문이다.

 

컴포넌트의 종류는 기능에 따라 크게 6가지로 분류할 수 있다.

1. 액션 : 중요한 행동 수행
2. 인풋 : 정보를 입력 받을 때
3. 인포메이션 : 서비스의 상태나 안내사항을 전달할 때
4. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
5. 네비게이션 : 페이지 이동 시
6. 컨트롤 : 설정이나 값을 수정

 

💡마스터 컴포넌트와 인스턴스의 관계

• 컴포넌트를 수정하면 인스턴스에도 반영된다.
• 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않는다.
• 컴포넌트를 지우더라도 인스턴스는 남아있다.
• 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인 프레임으로 변경된다.

마스터 컴포넌트는 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이다.

반복적인 디자인을 빠르게 사용하기 위해 디자인을 복사할 수 있고,

복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 기능이다.

인스턴스는 마스터 컴포넌트의 복제본으로 마스터 컴포넌트의 속성을 그대로 이어받는다.

 

 

💡모달과 팝업의 차이점

모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻한다.

모달은 UI의 이름이 아닌 UI를 분류하는 기준 중 하나이다.

팝업은 화면 위에 새로운 화면을 띄우는 것을 칭한다. 둘은 엄연히 다른 것...!!!

 

💡컨트롤 요소 제작 시 유의사항

1.

컨트롤 요소는 다른 UI에 비해 크기가 매우 작기 때문에 사용자들이 손가락으로 누르기 불편하다.

따라서 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위를 만들어줘야 한다.

2.

컨트롤 요소는 대부분 라벨과 같이 쓰이고 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적이다.

컨트롤 요소를 배치할 때는 간격을 충분히 주어 잘못 누르는 일을 줄여줘야 한다.

3.

컨트롤 요소와 라벨을 깔끔하게 정리하려면 두 요소의 세로값을 같게 한다.

컨트롤의 사이즈를 라벨의 행간에 사용한 값으로 만들자.

 

---

 

느낀 점, 새롭게 깨달은 것💡

복습의 중요성 !!

시험이나 면접처럼 예상 문제를 생각하고 공부하는 것은 효과가 좋은 것 같다!

 

오늘의 잘한 점🥰

오늘 건강검진 때문에 또 외출... 하지만 일찍 입실해서 출석을 챙겼다 후후

 

오늘의 문제점,부족한 것😵‍💫

첫 과제를 받았는데 잘할 수 있을까 두렵다 ...ㅎㅎ...

 

해결방법👊

일단 해야지 모...