[인프런 워밍업 클럽 스터디 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 point
mobile(320-767)
Count4 stretch Margin:16 Gutter: 16
{Fluid
Range: 320-767}
tablet(768-1023)
Count8 stretch Margin:24 Gutter: 24
{fluide
range: 768-1023}
laptop(1024-1415)
Count12 stretch Margin:24 Gutter: 24
{fluide
range:1024-1415}
desktop(1424-)
Count12 center W:96 Gutter: 24
{Fixed
range:1416-}
Grid 적용 후 구현 plugin:
Layout Grid Visualizer
2주 차 - 회고
2주 차에는 1주차 내용을 거의 복습하고 마무리했고 컴포넌트 수업도 조금 듣는 정도로 진도를 나갔습니다. 요즘 ai에게 물어보면서 수업을 정리해가고 있는데 더 머리에 잘 들어오고 좋은 것 같아 좋은 것 같은데 진도가 스케쥴 보다는 많이 뒤쳐지고 있는것 같아서 다음주에 조금 더 많이 진행해보려고 합니다. 아직 진행을 많이 못했지만 컴포넌트 실습 부분이 정말 유익한 것 같은데 많이 연습해봐야 할 것 같습니다.
+완성된 배리어블을 Variable Print 로 문서화 했는데 완성작의 문서들이랑 조금 다른 것 같아서 다시 복습해봐야 할 것 같습니다.
인프런 워밍업 클럽 스터디 - 후기
유익하고 과제일자가 정해져 있으니 확실히 스터디에 속도가 나는 것 같아서 좋은 것 같습니다. 앞으로도 열심히 진행해보려고 합니다.
답변 1