[후기] 원티드 프리온보딩 디자인 챌린지 8월 후기 - 3회차

3회차 후기로 돌아왔다!
1,2회차 후기는 이 곳에서 볼 수 있다.

-1회차
https://nurilee-d.tistory.com/m/13

[강의] 원티드 프리온보딩 디자인 챌린지 8월 후기 - 1회차

-2회차
https://nurilee-d.tistory.com/m/14

[강의] 원티드 프리온보딩 디자인 챌린지 8월 후기 - 2회차

---

3회차 강의는 UI디자인을 만드는데 가장 기초적인 개념이 되는 내용들을 다뤘다.
화면 해상도를 비롯해 피그마에서 주요 기능들에 대한 개념…
아는 내용도 있었지만 평소에 헷갈렸던 내용들도 있었다.

출처 - 본 강의 캡쳐

화면 크기

나는 사실… 반응형이 재밌다(?)
처음 피그마에서 오토 레이아웃 기능을 알고 써먹을 때, 혼자서 머리 꽁꽁 싸매며 오토로 반응하는 레이아웃을 만들었을 때의 그 후련함이란..
알아서 착착착 크기에 맞게 변하게 만드는 게 너무 신기하고 흥미롭다.
아무튼 내가 디자인한 화면 그대로 모든 사람들이 보는 건 아니기 때문에 화면 크기와 반응형을 잡는 건 역시 중요한 것 같다.

출처 - 본 강의 캡쳐

출처 - 본 강의 캡쳐

출처 - 본 강의 캡쳐

참고차 알아두면 좋을 곳 같은 데스크탑 스크린 비율…
나도 회사에서 일하면서 제대로 반응형 구조 잡는 법을 터득했는데, 767px을 브레이크포인트로 모바일 버전, PC버전 이렇게 분기를 한다.

출처 - 본 강의 캡쳐

요건 스마트폰 점유율인데, 2024년 것까지 꽤나 최신 버전이다. 언젠가는 유용할 일이 있을까 싶어 캡쳐!

출처 - 본 강의 캡쳐

절대적인 법칙은 아니지만 참고하면 매우 도움이 될 것 같다!
사실 위에 말했던 768px 기준 분기 중인 서비스는 pc 위주라서 모바일에선 너무 불편하다.
근데 이 예시처럼 모바일도 SM, MD 나누게 되면 얼마나 마음의 평온이 찾아올까… 라는 생각이 든다.
언제 할 수 있을런지는 모르겠지만(?)

출처 - 본 강의 캡쳐

요것도 흥미로운 사실

---

출처- 피그마튜터 유튜브

아무튼 3회차에는 기본적인 레이아웃과 UI 요소에 관한 내용이 많았고 이미 알고 있는 내용이 좀 포함되어 있었기에 짧게 기록 완료!
스타일과 베리어블의 차이에 대해 알 수 있으려나 했는데 요게 쫌 아쉬웠다.
하지만 4회차에 해당 내용이 나오므로… 4회차 후기에 적어보도록 하겠다.