오늘의 Weekly Insight

• Responsive Web 경험을 다듬는 것은 제품 퀄리티에 매우 중요해요.

• 한정된 리소스로 끝단까지 디테일을 완성하기 위해서는 디자인 정보의 양을 제한하는 것이 핵심이에요.
• 간단한 모바일 뷰 같은 경우는 내맘대로 px을 찍더라도 QA를 하는데 큰 이슈가 없다고 생각해요.
• 하지만 Responsive UI에서 내맘대로 px을 사용하게되면 Breakpoint에 따라 QA 비용이 곱셈으로 상승해요.

• 디자인 토큰 개념을 통해 디자인 정보의 양을 제한하고, Responsive UI를 더 빠르게 만들어봐요.

디자인 토큰과 Layout

• 디자인 토큰은 디자인을 하는데 유한한 정보들로 한정하는 것을 의미해요.
• as-is: npx
• to-be: 4px, 8px, 12px, 16px

• 디자인 토큰에는 여러 유형이 있어요.
• Typography
• Color
• background-primary
• foreground-on-primary
• Spacing
• Radii
• 등등...

• 앞서 설명했듯이, Responsive UI는 정보의 양이 너무 많기 때문에, 퀄리티를 올리기 위해서는 디자인 토큰(특히 Spacing)과 레이아웃 시스템 구축이 핵심이에요.