[인프런 워밍업 클럽 스터디 3기 디자인] 2주차 발자국

2주 차 - 학습했던 내용 요약피그마 베리어블과 스타일 파운데이션 실습을 저번 주차에 이어서 작업했고 이번주는 컴포넌트들을 만드는 법에 대해 배웠t습니다. 목표한 진도까지는 아직 나가지 못해서 다음주에 조금 더 시간내서 과제랑 마무리해보려고 합니다. [주요 내용 복습] [이론📖] 간격 배리어블 이름, 구조 짜기일관성 있는 간격과 유연한 레이아웃을 구축하기 위해 그리드를 사용1.5배수 랜더링 이슈로 주로 8-point grid를 사용함일반적으로 더 작은 단위로 레이아웃을 정렬하고 싶은 경우 4-point grid를 사용함+1.5배수 랜더링 이슈란?1.5배수 렌더링 이슈란?1.5배수는 1픽셀을 1.5배 크기로 변환해야 하는데, 픽셀은 소수점 단위로 정확히 나눌 수 없는 정수 단위의 단위라서 렌더링 시 오류가 발생할 가능성이 높음.✅ 예제:10px 크기의 요소를 1.5배수 스케일로 렌더링 → 10 × 1.5 = 15px하지만 15px을 정확히 2배 또는 3배 해상도에 맞출 수 없음결과적으로 픽셀 보정(Anti-aliasing) 과정에서 모호한 렌더링(Blurry)이 발생그래서 8pt 그리드를 사용하는 이유8pt 그리드는 모든 크기를 8의 배수(8, 16, 24, 32...)로 설정하는 디자인 시스템.8의 배수를 사용하면, 2배수(2x)나 3배수(3x)와 같은 정수 배율에 정확히 맞출 수 있어서 렌더링 오류를 방지 가능!✅ 예제:8px → 2x 스케일 적용 → 8 × 2 = 16px (정확히 나눠짐)8px → 3x 스케일 적용 → 8 × 3 = 24px (정확히 나눠짐)8px → 1.5x 스케일 적용 → 8 × 1.5 = 12px (정수 단위로 맞춰짐)→ 1.5배수에서 발생하는 반올림 문제를 최소화할 수 있음.[이론&실습] 그리드 시스템과 반응형 기준점 설정하기 ✅break pointmobile(320-767)Count4 stretch Margin:16 Gutter: 16{FluidRange: 320-767} tablet(768-1023)Count8 stretch Margin:24 Gutter: 24{fluiderange: 768-1023} laptop(1024-1415)Count12 stretch Margin:24 Gutter: 24{fluiderange:1024-1415} desktop(1424-)Count12 center W:96 Gutter: 24{Fixedrange:1416-} Grid 적용 후 구현 plugin:Layout Grid Visualizer2주 차 - 회고2주 차에는 1주차 내용을 거의 복습하고 마무리했고 컴포넌트 수업도 조금 듣는 정도로 진도를 나갔습니다. 요즘 ai에게 물어보면서 수업을 정리해가고 있는데 더 머리에 잘 들어오고 좋은 것 같아 좋은 것 같은데 진도가 스케쥴 보다는 많이 뒤쳐지고 있는것 같아서 다음주에 조금 더 많이 진행해보려고 합니다. 아직 진행을 많이 못했지만 컴포넌트 실습 부분이 정말 유익한 것 같은데 많이 연습해봐야 할 것 같습니다. +완성된 배리어블을 Variable Print 로 문서화 했는데 완성작의 문서들이랑 조금 다른 것 같아서 다시 복습해봐야 할 것 같습니다. 인프런 워밍업 클럽 스터디 - 후기유익하고 과제일자가 정해져 있으니 확실히 스터디에 속도가 나는 것 같아서 좋은 것 같습니다. 앞으로도 열심히 진행해보려고 합니다.

[인프런 워밍업 클럽 스터디 3기 디자인] 1주차 발자국

1주 차 - 학습했던 내용 요약피그마 배리어블과 디자인 토큰에 대한 이론 수업을 진행했고 색상, 타이포그래피, 간격, 그림자효과, 반응형 기준점 배리어블 등록을 실습해보았다. 등록할 요소들이 생각보다 많아서 아직 한번에 이해가 되는 느낌은 아니었다. 여러 번 반복학습을 해봐야 할 것 같다.1주 차 - 회고개인 일정으로 1주 차에 학습을 많이 하지 못했다. 그래도 일요일날 몰아서 했는데 역시 인증은 못했지만 목표한 커리큘럼은 다 들을 수 있었다. 이번 커리큘럼을 진행하면서 배운 새로운 피그마 단축키 사용법과 플러그인들이 유용했는데 사용법을 많이 익혀놓고 실무에 들어갈때 활용할 수 있도록 해야 할 것 같다. Batch Style - 등록된 폰트들의 스타일이나 크기등을 한꺼번에 수정 가능하다.Styler - 스타일을 한번에 등록해주는 플러그인이다.Typescales - 크기별로 폰트 스타일을 생성해준다. 자간이나 두께등의 디테일한 설정을 일관되게 수정해줘서 유용하다.Print Variables - 등록된 베리어블의 내역을 문서로 만들어줘서 기획서를 작성하거나 팀에 공유할때 좋을 것 같다.Styles to Variables - 스타일로 등록해놓은 것을 베리어블로 바꿔주는 플러그인이다.Color Style Guide - 컬러 스타일 가이드를 생성해준다.인프런 워밍업 클럽 스터디 - 후기인턴때 작은 스타트업 회사에서 일했었는데 업무가 항상 바쁘고 업무들이 shadcn 같은 기존 디자인 컴포넌트 라이브러리나 시스템을 가져다 쓰는 게 보통이라 디자인 시스템에 대해 알 기회가 없었다. 그렇지만 이번 인프런 스터디를 통해 디자인 시스템과 figma 숙련도를 올릴 수 있는 기회가 되었으면 좋겠다. 아직 스터디는 초반부라 갈 길이 멀지만 잘 달려봐야겠다.