강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

hye님의 프로필 이미지
hye

작성한 질문수

6주 완성 디자인 시스템 부트캠프 4기

[실습✨] 간격 배리어블 등록하기

간격 베리어블 등록하기 하며 질문

작성

·

6

0

- 기본 spacing unit 말고 구체적인 거 정할 때 예를 들어 border radius 등 줄 때 - 보통 어떤 걸 기준으로 하는지 궁금합니다. 다른 시스템 걸 따라하나요? 그리고 이렇게 미리 설정하고 쓰다가 쓰다보니 값이 너무 크거나 작아서 바꾸는 경우도 잦은지 궁금합니다.

- measurement랑 appearance - 차이 두는 이유가 궁금합니다.

(디스코드에 질문하려다가 해당 강의와 직접적으로 관련이 있는 거라서 여기에 질문하는 게 저도 다시 답변 확인할 때 강의랑 비교해서 이해하기 쉽고, 다른 분들이나 볼드샘께서도 맥락을 아실 것 같아서 여기에 남깁니다)

답변 1

0

안녕하세요, 인프런 AI 인턴입니다. hye님!

디자인 시스템을 구축할 때, 특히 다양한 요소에 대한 크기나 간격을 설정하는 것은 중요한 작업입니다. 질문에 대한 몇 가지 포인트를 정리해 드리겠습니다.

1. 기본 Spacing Unit과 Border Radius 설정

  • 기준 설정: 보통 디자인 시스템을 만들 때는 일관성을 유지하기 위해 기본 Spacing Unit을 정의합니다. 이 값은 4, 8, 16과 같은 배수로 설정하는 경우가 많습니다.
  • Border Radius: Border Radius의 경우도 디자인의 스타일에 따라 다를 수 있지만, 일반적으로 4px, 8px 등과 같은 값을 많이 사용합니다. 이는 다른 시스템이나 디자인 가이드라인에서 참고할 수 있으며, 실사용에서 조정할 수도 있습니다.
  • 값 조정: 사용 중에 특정 값이 너무 크거나 작게 느껴진다면, 디자인 팀과의 협의를 통해 적절히 조정될 수 있습니다. 유연성을 유지하며 디자인 시스템을 발전시킬 수 있습니다.

2. Measurement와 Appearance의 차이

  • Measurement: 여기에는 크기, 간격, 패딩 등과 같은 수치적인 요소가 포함됩니다. 디자인에서 공간을 어떻게 사용하고 배치할지를 정의합니다.
  • Appearance: Appearance는 디자인의 시각적 요소, 예를 들어 색상, 그림자, 투명도 등을 지정하는 데 중점을 둡니다. 이는 디자인의 분위기를 결정하고 사용자의 시각적 경험에 직접적인 영향을 줍니다.
  • 차이 두는 이유: 두 개를 분리하여 관리하는 이유는, 하나는 물리적인 공간 관리에 집중하고, 다른 하나는 시각적 표현을 조절하는 데 집중하는 것이 훨씬 더 효율적이기 때문입니다.

이전에 유사한 질문과 답변을 통해 유용한 정보를 제공받으실 수 있습니다. 아래 참고하실 만한 링크를 소개합니다:

저는 질문자님의 이해를 돕고자 기존 답변 링크들을 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

hye님의 프로필 이미지
hye

작성한 질문수

질문하기