[📝TIL 02_3]커리어 코칭과 3주차 강의

|  2024년 10월 30일 수요일 TO DO  |

✔️ Figma 활용법(1) 3주 차 강의 듣기

✔️ 3주 차 숙제 작성 후 제출하기

✔️ 커리어 코칭 상담

 

---

Figma 활용법(1) 3주 차 강의

분기점과 그리드

✨ 분기점

디스 플레이의 해상도에 따라서 각각의 다른 화면을 보여주기 위한 기준점을 말한다.

 🔎 왜 분기점을 사용할까? 

사용자들은 웹사이트를 방문할 때 스마트폰, 태블릿, 데스크톱, 노트북 등 다양한 화면으로 방문한다.
그러기 때문에 우리는 사용자가 어떤 디바이스로 서비스를 이용하는지,
어떤 화면의 크기를 가지고 있는지를 고려하여 분기점을 기준으로 디자인을 나눌 수 있어야 한다.

 

🔗디자인에 유용한 통계자료

statcounter : 디자인할 때 필요한 웹 브라우저 점유율과 해상도, SNS 점유율 등의 통계를 제공해 준다.

 

 

✨ 그리드

격자라는 뜻으로, 화면에 디자인을 배치하는 가이드라인을 말한다.

디자인 배치할 기준선이 되는 가상의 선을 그은 후 그 선에 맞춰 레이아웃을 짠다.

 🔎그리드를 만드는 방법 

일반적으로 세로 방향의 기둥(칼럼 Column)들을 몇 개 둘 지 정하는 게 우선이다.
데스크톱 화면을 기준으로 기둥은 12개를 사용한다.
이때, 12개를 사용하는 레이아웃을 12 칼럼 그리드(12 Column Grid)라고 부른다.

 🔎왜 12개를 사용할까? 

12는 짝수이면서 1, 2, 3, 4, 6, 8, 10, 12로 나누어 유연하게 배치할 수 있다.
또한 모바일 웹 디자인에서 4개를 배치하여 사용하기 시작했고,
반응형 디자인으로 확장하기 위해 태블릿 : 2배인 8개 / 데스크톱 : 3배인 12개로 사용하다 보니 정해졌다.

🚨
16개를 사용하는 경우도 있다.
그러나 12개 이상으로 사용하면 반응형 디자인과 개발제작에 복잡함이 생길 수 있다.

 

8포인트-그리드 디자인

✨ 8포인트 그리드

8, 16, 24, 32... 8의 배수로 간격이나 크기, 여백 등에 사용하고 맞추는 방법을 말한다.

 🔎 왜 8포인트 그리드를 사용할까? 

일정한 규칙이 있다면 다른 디자이너와 협업, 개발자가 자료를 받아 개발하는 데에 번거로움과 비효율성을 최소화할 수 있다.

8은 1, 2, 4, 8로 나눌 수 있어서 커질 때, 작아질 때 다른 수에 비해 딱 떨어지게 만들 수 있다.
따라서 해상도가 변하여 업스케일/다운 스케일 될 때 유연하게 대처할 수 있다.

🚨
10과 같은 짝수이면서 홀 수가 될 수 있는 기준은 불완전한 디자인이 생기게 되고,
결국 디자인이 깨져 보이는 현상이 발생할 수 있다.

 

반응형과 적응형

✨ 반응형 디자인 Responsive

해상도가 변하면 실시간으로 반응하는 디자인을 말한다.

디자인 하나만 만들면 된다는 장점이 있지만 만들기 어렵다는 단점이 있다.

 

 

✨ 적응형 디자인 Adaptive

해상도가 변하더라도 실시간으로 반응하거나 변하지 않는 디자인을 말한다.

만들기 쉽다는 장점이 있지만 디바이스 별마다 관리를 해야 한다는 불편하다는 단점이 있다.

 

디자인 시스템

✨ 디자인 시스템

UI는 다른 디자이너와 같은 방법, 개발자와 같은 생각으로 움직여야 한다.

따라서 반복적인 UI를 효율적으로 관리하고 팀 전체가 일관적으로 이해할 수 있다.

 

디자인 시스템은 크게 파운데이션(기초 재료), 컴포넌트(기초 재료를 이용해 만든 구성품)로 나뉜다.

파운데이션 : 컬러, 폰트, 레이아웃, 곡률, 간격 등

컴포넌트 : 버튼, 체크박스, 탭, 바텀시트 등

 

디자인 시스템의 장점과 단점을 알아보자면, 

👍 디자인을 반복해서 사용할 수 있기에 시간과 비용을 절약할 수 있다.

👍 누가 만들어도 동일한 품질의 제품(형태, 구조, 기능 등)을 설계할 수 있다.

 

👎 각 다양한 형태 UI를 하나로 통일하는 과정이 오래 걸린다.

👎 정작 사용하는 UI에 비해 디자인 시스템이 방대해져서 업데이트 시 들어가는 힘이 커질 수 있다.

👎 디자인 시스템을 최대한 활용하려다 보니 새로운 디자인에 대해서는 소극적으로 변하게 된다. 이로 팀 전체가 경직될 수 있다.

🔎아토믹 디자인 시스템 Atomic Design system

Atom 은 원자를 뜻하는 단어로, 원자를 결합하는 개념의 디자인 시스템을 말한다.

 

🔗참고할 수 있는 디자인 시스템

머티리얼 디자인

라인 디자인 시스템 

밀리의 서재 디자인 시스템

라이트닝 디자인 시스템

디자인 시스템

---

1회차 커리어 코칭

나는 왜 프로덕트 디자인을 선택하였는가?

나의 장점 / 단점은 무엇인가?

나의 앞으로 비전은 무엇인가?

 

코치님께서는 이 세가지의 질문을 던져주셨다.

프로덕트 디자이너가 되고자 하는 이유와 장점/단점은 여러번 고민해봤던지라 명확하게 그리고 있었다.

 

하지만 나의 앞으로 비전에 대해서는 사실.. 명확하게 그려지지 않았다.

'내가 이 분야에 잘 맞을까?' '이 분야에 대해서 잘 버틸 수 있을까?'

'과연 이 분야에 내가 오랜시간동안 끌고 갈 수 있을까?'

다양한 걱정과 불안함으로 비전보단 지금 당장 해내야 한다는 강박밖에 없었다.

그렇게 나는 대답을 해야한다는 촉박한 마음에 결국 명확하지 않은 대답을 드리고 말았다.

"좋은 역량을 가진 좋은 사수가 되고 싶어요"

 

이에 코치님께서는 많은 이야기를 해주셨다.

사실 좋은 역량을 가진 좋은 사수가 되는건 누구나 열심히, 성실히 잘 수행하고 연차를 쌓다보면 될 수 있다. 나만의 비전이 없다..

또한 나의 장점이 꼼꼼하고 계획적인데, 나의 비전에 대해서는 계획을 세우지 않은 것 같다.

그렇다면 나의 장점이 과연 계획적인게 맞는걸까?

내가 왜 이 분야를 하고싶은지부터 뚜렷한 목적과 방향을 계획을 세우는 것이 좋을 것같다.

그냥 생각없이 공부하고 전문성을 키우기보다는 정확하게 내가 왜 이 길을 가야하고 왜 하고싶은지, 그래서 나의 비전을 어떻게 그려가고싶은지 계획해봐야겠다.

이번 코칭시간은 나를 다시 되돌아보게 된 점이 많았다.

반성한 부분도 많았고 의지를 불태울 이유도 생긴 것 같아서 좋았다.

 

🔥 나 자신 화이팅! 🔥

이번 주말 또는 틈나는 시간에 세가지 질문을 다시 명확하게 그려봐야겠다.