피그마 배웠지만 안 배웠다.

처음 웹페이지를  맡아 작업했는데, 이렇게 작업하면 나중에 개발할 때 힘들다고 혼났다. 어떤 곳은 fix, 어떤 곳은 hug, 일관적이지 않은 수치, 웹페이지가 제대로 분할되어 있지 않았다. 곳곳에 나도 모르는 앱솔루트 기능도 들어가 있는 경우는 다반사고. 부트캠프에서 배운 피그마는 말 그대로 아주 기초였다. 그래서 피그마 배웠지만 안 배웠다고 할 수 있다. 회사에서 천덕꾸러기,,,,,,,,,,,,,,,,엉엉.

요즘 매일 듣는 이야기는 반응형을 항상 생각하며 디자인해야 한다는 말이다. 머리로는 충분히 알겠는데, 신입이다 보니 변수 예측하는 수준이 낮다 보니 비슷한 결의 피드백을 받고 있다. (자괴감 모먼트) 모든 컴포넌트는 hug, fill로 이루어져야 하며 되도록 fix는 사용하지 않아야 개발자들이 힘들지 않다고 했다. 또 배웠다. 오늘 들은 피드백들을 정리해 보면 아래와 같다. 

 

1. 피그마 > 웹페이지 제작할 때 되도록 앱솔루트(absolute) 기능을 사용하면 안 된다
(이미지 위에 컴포넌트 또는 프레임 얹어야 할 때만 사용)
: 앱솔루트가 뭐지? 나는 씌운 적도 없는데 자꾸 씌워져 있어.............. 왜 씌워지는 거야.

2. 앱솔루트 기능이 들어가 있으면 'Fill' (채우기) 옵션이 보이지 않는다.
(채우기가 보이지 않으면 앱솔루트 확인할 것)
: 주말에 앱솔루트 기능에 대해 알아보고 정리해야지

3. 버튼은 너비(W)를 고정시키지 않는다. 대부분 Hug 처리해 반응형 웹/앱에 유연하게 작업할 것!
: 내가 일하는 곳에서 버튼 높이(H)는 36px으로 FIX 해 사용하기로 약속했다.

4. Bg에 사각형 도형 쓰지 말고, 프레임 - 오토레이아웃 처리해 배경 채울 것!'

5. 프레임을 남용하지 말 것! 필요한 만큼 사용하자.

6. 이미지 비율에 맞춰 늘리고 싶을 때는 단축키 K(scale)!

---

오늘 배운 것들 (내가 일하는 조직에만 해당하는 내용이니 이 부분은 참고하지 않아도 된다)

그리드 여백 (선 프레임 - 오토레이아웃화)
0. 평균 사이즈 1440
1. 상하패딩값 60
2. 좌우패딩값 100
3. 상하갭 24
4. 좌우갭 12

모달
- 보통 W는 500, 1000 사이즈로 작업한다. 
- 패딩값은 40px