인프런 커뮤니티 질문&답변
작성한 질문수
간격 베리어블 등록하기 하며 질문
작성
·
34
0
- 기본 spacing unit 말고 구체적인 거 정할 때 예를 들어 border radius 등 줄 때 - 보통 어떤 걸 기준으로 하는지 궁금합니다. 다른 시스템 걸 따라하나요? 그리고 이렇게 미리 설정하고 쓰다가 쓰다보니 값이 너무 크거나 작아서 바꾸는 경우도 잦은지 궁금합니다.
- measurement랑 appearance - 차이 두는 이유가 궁금합니다.
(디스코드에 질문하려다가 해당 강의와 직접적으로 관련이 있는 거라서 여기에 질문하는 게 저도 다시 답변 확인할 때 강의랑 비교해서 이해하기 쉽고, 다른 분들이나 볼드샘께서도 맥락을 아실 것 같아서 여기에 남깁니다)
답변 2
0
안녕하세요, hye님.
일반적으로 이미 웹사이트나 서비스가 존재한다면, 그 안에서 자주 쓰이는 단위를 기준으로 border-radius 값을 정하는 경우가 많습니다.
만약 기존 레퍼런스가 없는 경우, 말씀하신 것처럼 다른 디자인 시스템을 참고하거나 브랜드 경험(BX) 에 맞게 새로 설정합니다. 이를 위해선 다양한 시도를 미리 해보는 과정이 필요하죠. 저도 보통은 버튼, 주요 컴포넌트, 배경 요소 등을 중심으로 테스트를 해본 뒤 브랜드에 어울리는 값을 선택합니다.
물론 저도 미리 값을 정해두고 쓰다 보면 추가로 필요한 게 생기기도 합니다. 하지만 가능한 한 새로운 단위를 무분별하게 추가하지 않으려고 합니다. 특히 팀 규모가 클수록 일관성을 지키는 게 중요하거든요. 팀의 성격이나 분위기에 따라 접근 방식은 달라질 수 있습니다.
예를 들어,
xs: 작은 UI 요소(아이콘 등)
lg: 배경이나 큰 요소
처럼 구체적으로 구분하기도 하고,
혹은 목적에 따라 분리해 따로 관리하기도 합니다.
정답이 정해진 것은 아니며, 팀의 상황과 목적에 따라 유연하게 정하면 됩니다.
Measurement vs. Appearance
무언가를 구분하는 기준도 결국 목적과 상황에 따라 달라집니다.
이번 강의에서는 이해를 돕기 위해 다음과 같이 구분했습니다.
Measurement: Primitive 개념으로, 측정값(예: px 단위의 수치, 백분율%) 자체를 의미합니다.
Appearance: Semantic 개념으로, 이 Measurement 값을 기반으로 시각적으로 표현되는 형태를 의미합니다.
하지만 실제 프로젝트에서는 이렇게 세분화하지 않고, Semantic 단일 체계만 사용하는 경우도 많습니다.
예를 들어,border-radius-xl: 8px 이렇게 직접 값을 지정하는 식이죠.
이 방식은 Measurement 단계(예: 4px 그리드 규칙) 를 생략할 수 있어 좀 더 자유롭게 디자인할 수 있다는 장점이 있습니다.
도움이 되셨으면 좋겠습니다.
감사합니다.
볼드 드림.
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는 디자인의 시각적 요소, 예를 들어 색상, 그림자, 투명도 등을 지정하는 데 중점을 둡니다. 이는 디자인의 분위기를 결정하고 사용자의 시각적 경험에 직접적인 영향을 줍니다.
- 차이 두는 이유: 두 개를 분리하여 관리하는 이유는, 하나는 물리적인 공간 관리에 집중하고, 다른 하나는 시각적 표현을 조절하는 데 집중하는 것이 훨씬 더 효율적이기 때문입니다.
이전에 유사한 질문과 답변을 통해 유용한 정보를 제공받으실 수 있습니다. 아래 참고하실 만한 링크를 소개합니다:
저는 질문자님의 이해를 돕고자 기존 답변 링크들을 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.