아이콘 빌런 부분

강의 촬영 시에는 문제가 많았는데, 이제 잘 되나 보네요. 다행입니다.많은 이유가 있겠지만, 제 강의에서 사용되는 아이콘의 주요 목적을 말씀드리자면, 라인의 경우 크기가 커져도 선 굵기가 함께 따라오지 않는 반면, 면으로 처리하면 크기가 함께 따라옵니다.이뿐만 아니라 용량과 Path를 줄여 최적화하는 데 도움이 되나, 사실 체감상 크게 차이가 나지는 않습니다.따라서 강의에서처럼 Union, Flatten으로 처리하는 편입니다. Flatten의 경우에는 강의에서 언급했듯이 SVG 코드 내 문제도 있기 때문이기도 하고요.만약 회사에서 두 가지 색이 사용되거나 한 가지 크기로만 사용되는 경우에는 강의에서 제안하는 방식이 맞지 않을 수 있습니다. 따라서 회사에서 구성원들과 상의하여 아이콘 작업을 하시는 것을 추천드립니다.

배리어블 Value에 관해 질문있습니다.

베리어블의 값을 연결하고 스타일에 연동하면 어떻게 되나요?네, 피그마가 자동으로 인식해서 연결합니다 되도록이면 대소문자 띄어쓰기를 조심하면 좋습니다. 좋은 방법은 연결하시고, 스타일 창에 열어보면 문제가 있는 경우는 NotoSans 이렇게 스트로크가 쳐져 있습니다. 우선 답변이 늦어져서 죄송합니다. 4, 5월에 가족 병간호 하느라 정신이 없었네요ㅠ.질문 있으시면 언제든지 남겨주세요.

Navigation Mobile 토글 베리어블이 안됩니당

해결하신 것 같네요.! 이제 거의 다 오셨네요. 정말 수고 많으셨습니다!!

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

네, 연결이 끊겼다는 의미입니다. 보통 타이포그래피의 굵기 항목에서 연결선이 끊겨 보이는 경우는, 연결된 값이 서로 정확히 일치하지 않을 때 발생합니다. 예를 들어 등록하신 Roboto 타이포그래피에서 굵기 값이 Semibold여야 한다고 가정해보겠습니다. 그런데 베리어블 값에는 semi_bold로 들어가 있으면, 충돌이 발생합니다. 그리고, 만약 Semibold에 해당하는 숫자 값인 600으로 지정하였는데, 만약 Roboto 자체에 해당 값이 아예 없는 경우라면 이런 충돌이 발생할 수 있습니다. 특히 모드를 변경했을 때, 타이포그래피마다 지원하는 굵기 값이 서로 다르면 이런 문제가 더 자주 생깁니다. 그래서 이런 경우에는 텍스트 이름보다는 숫자 값으로 관리하시는 것을 보통 더 권장드립니다.한번 사용하시는 타이포그래피의 굵기 값과, 베리어블 원시 굵기 값을 확인하시고 크로스 체크 해보시기 바랍니다.감사합니다.

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

안녕하세요, 한별님좋은 질문 주셔서 감사합니다. 저도 제 파일에서 직접 확인해봤는데, 한별님과 동일한 현상이 나타났습니다. 제 판단으로는 버그처럼 보이기도 하지만, 피그마에서 의도한 방식일 가능성도 있어 보입니다. 현재 상황을 보면, 텍스트가 외부 프레임 안에 있고 그 외부 프레임의 모드가 모바일로 변경될 경우, 텍스트 자체는 변경되지만 스타일 패널 내부에 표시되는 값은 기존 값 그대로 유지되는 것 같습니다. 앞부분에서 스타일과 베리어블의 차이에 대해 언급되었다시피 베리어블은 모드에 의해 직접 제어됩니다. 반면 스타일은 내부에 베리어블이 연결되어 있을 경우 간접적으로 변화가 반영될 수는 있지만, 스타일 자체가 모드에 의해 직접 제어되는 것은 아닙니다. 그래서 스타일 내부에 표시되는 값들은 모드가 바뀌더라도 함께 변경되지 않는 것으로 보입니다. 저도 이번에 확인하면서 처음 알게 된 부분인데, 꽤 흥미로운 동작 방식이네요. 그리고 이 현상은 타이포그래피뿐 아니라 색상에서도 동일하게 적용됩니다.즉 정리하자면, 스타일은 모드가 바뀌어도 화면 내에서는 바뀌지만, 실제 내부 스타일 값은 변화가 없다고 보시면 됩니다. 의도가 되었든 안되었든, 조금 혼동스러운 UI이긴 합니다.더 질문 있으면 답변 주세요.

신규 업데이트 내용

동팔이님 안녕하세요, 예제 파일을 업데이트하긴 했는데, 수정 범위가 아주 작아서 별도로 안내드리지는 않았습니다.기존에 날짜가 2024년으로 들어가 있던 부분이 있었는데, 이를 2025년으로 바로잡았고, 앞부분에 예제 내용을 조금 덧붙였습니다. 업데이트 안내를 너무 자주 드리면 수강생분들께서 오히려 피로감을 느끼실 수 있을 것 같아, 이번에는 따로 공지하지 않았습니다. 감사합니다.

디자인 시스템에 그룹명을 숨길 수도 있나요?

앞 질문에서 언급해드렸듯이, 전체 구조는 동일하지만 용어는 회사마다 다르게 사용 할 수 있습니다.하지만 질문에서 이미 답을 발견하셨듯이, 이제 전체적인 얼개를 알고 계신 것 같습니다. 라이브러리를 외부로 내보낼 때, 숨길 수는 있습니다. 콜렉션 앞에 . 을 붙이시면, 콜렉션은 Hidden 안으로 들어가면서 내보내지 않을 수 있습니다. 이 부분은 스타일 가이드 부분에서 컴포넌트 사이에서 배우실 수 있습니다.이 회사의 구조는 atomic, semantic 이렇게 구조가 되어 있습니다. 원티브에서는 UI에 색상을 적용할 때 베리어블에서 가져오는 것이 아니라 컬러 스타일에서 가지고 옵니다. 이렇게 하는 이유는 여러가지가 있는데, 우선 강의 앞부분에서 베리어블과 스타일의 차이에서 스타일은 여러 변수를 넣을 수 있는 반면, 베리어블은 그러지 못합니다. 예를 들어, hover에서 기존 default 색상 위에 다른 색상값을 올리는 경우가 될수 있습니다. 이는 머티리얼 디자인을 참고해보시면 됩니다. 또한 이미 스타일로 다 만들어진 경우 베리어블로 바꾸기 보다는 기존 스타일안에 베리어블을 연결하는 경우가 있습니다.(사진).Component, Frame의 경우는 제가 그 회사를 다니지 않아서 왜 이런 결정을 했는지 모르겠지만, 추측건데, 베리어블 창의 atom, theme은 컬러고, component와 frame은 숫자 즉, 패딩, 높이 너비 등으로 구분한 것 같습니다. 이후에 제 강의에서도 이 부분에 대해서 많이 배우실 것입니다.시멘틱이라는 말 자체가 "의미가 있는 것." 디자인 시스템(UI Kit)에서는 단순하게 색상의 의미 역할을 부여한다고 생각하시면 됩니다. 그냥 빨강이 아니라 경고(warning) 중에서도 텍스트(text)에 사용되는 색 이렇게 말이죠. 그래서 크게 보면 UI 요소라고도 보실 수 있습니다. 강의에서는 라이트/다크 모드로 나오는데, 이는 이 모드가 가장 흔하게 사용되기 때문입니다. 질문 더 있으면 주세요. 감사합니다.

디자인 시스템 네이밍에 관한 질문드립니다.

질문을 아주 잘 해주셨습니다. 오히려 여기서 헷갈리셨다는 건 앞부분의 맥락은 제대로 따라오셨다는 뜻입니다. 먼저 1번 질문부터 말씀드리면, 적어주신 예시는 쇼피파이(Shopify)의 토큰 네이밍 방식입니다. 앞에서 말씀드린 Namespace / Object / Base / Modifier는 절대적인 정답 공식이라기보다, 디자인 시스템을 분석한 사람들이 공통적으로 발견한 패턴에 가깝습니다. 즉, 모든 회사가 반드시 똑같이 쓰는 규칙은 아닙니다. 그래서 이번에 보신 Role도 “왜 갑자기 나오지?”가 아니라, 쇼피파이는 Base만으로 의미를 다 담지 않고, 중간에 Role이라는 의미 축을 하나 더 둬서 관리하는구나 정도로 이해하시면 됩니다. 예를 들어,Base(category): colorBase(property): bgBase or Component(Role): interactiveModifier(variant): subduedModifier(state): hover 이런 구조라면, 단순히 “배경색”이 아니라 인터랙션 가능한 요소에 쓰이는 배경색이고, 그중 subdued 변형이며, hover 상태의 값까지 단계적으로 설명하고 있는 것입니다. 즉, 여기서 Role은 갑자기 튀어나온 이상한 개념이 아니라,이 토큰이 어떤 역할의 UI에 쓰이는지 설명하는 의미 단위라고 보시면 됩니다. 정리하면, 앞에서 배운 구조로 대부분 해석은 가능하고, Role은 쇼피파이에서 추가로 사용하는 의미 분류라고 이해하시면 충분합니다. 중요한 건 “이름이 왜 이렇게 생겼는가”를 읽어내는 것이지, 모든 시스템이 똑같은 문법을 쓴다고 생각하실 필요는 없습니다. 다음으로 2번 질문인 배리어블(토큰) 계층 구조에 대해 설명드리면, 이건 이름 짓는 순서만을 뜻하는 것도 아니고, 폴더 분류용 개념만을 뜻하는 것도 아닙니다. 핵심은 토큰을 추상화 수준에 따라 나누는 방식이라고 보시면 됩니다. 보통은 아래처럼 이해하시면 가장 쉽습니다.1. Raw value가장 실제적인 값 자체입니다. 예: #005BD3, 16px, 8px 2. PrimitiveRaw value에 재사용 가능한 기본 이름을 붙인 단계입니다. 예: blue-500, spacing-2, gray-100 3. Theme브랜드나 테마 맥락에 따라 Primitive를 묶어 적용한 단계입니다. 예: brand_a-500, brand_b-500 4. Semantic실제 UI 의미 기준으로 이름 붙인 단계입니다.예: color-bg-interactive, color-text-critical, space-button-padding-x 즉,Raw value는 진짜 값이고Primitive는 재료 이름이고Theme는 테마별 연결 단계이고Semantic은 실제 사용 목적을 기준으로 한 이름입니다. 그래서 이 계층 구조는토큰을 어떻게 관리할지 정리하는 기준이기도 하고,특히 시맨틱 토큰 이름을 어떻게 지을지 연결되는 개념이기도 합니다. 예를 들어:Raw value: #005BD3Primitive: blue-500Semantic: color-bg-interactive실제 사용: 버튼 기본 배경색이렇게 연결될 수 있습니다. 결론적으로 말씀드리면, 계층 구조는 토큰을 체계적으로 분류하고 관리하기 위한 큰 개념이고, 네이밍은 그중에서도 특히 Primitive와 Semantic 단계에서 중요하게 작동하는 것입니다.즉, 폴더 구조 이야기이기도 하고, 이름 짓기 이야기이기도 하지만, 더 정확히는 “디자인 토큰을 어떤 추상화 단계로 관리할 것인가”에 대한 개념입니다. 지금 헷갈리시는 포인트는 아주 정상적입니다.왜냐하면 실무에서는 이 두 개념이 자주 섞여서 설명되기 때문입니다.그래서 지금 단계에서는 이렇게만 구분하시면 충분합니다. 그리고 다음에 컬러 부분에서 실습을 하면서 만들어보고, 적용해보다 보면, 더 이해가 되실 것 입니다. 이 강의를 한번 만에 이해하는 것은 경력 20년차 되신 분도 어려워하십니다. 계속 반복해서 들으시면서 배워나가시면 도움이 되실 것입니다. 그리고 헷갈리는 것은 언제든지 질문 게시판을 남겨주시기 바랍니다. 네이밍 구조: 토큰 이름을 어떤 규칙으로 읽고 쓸 것인가계층 구조: 토큰을 어떤 추상화 단계로 나눠 관리할 것인가 이 둘은 연결되어 있지만, 같은 개념은 아닙니다.

예시파일 불일치

안녕하세요, Meaw님. 먼저 강의를 수강하시는 과정에서 불편을 드린 점 진심으로 사과드립니다. 공유해 드린 자료는 강의 이해를 돕기 위해 제공된 것이며, 강의에 포함된 모든 예시 파일은 피그마를 통해 직접 따라 그려보실 수 있도록 구성되어 있습니다. 다만 이 부분이 강의 내에서 충분히 안내되지 않아 혼란과 불편을 드린 것 같습니다. 우선 다음주 동안 1단원 내용을 다시 점검하면서 어떤 부분을 보완해야 할지 확인해보겠습니다. 이후 필요한 내용을 반영해 강의 내용과 강의 포함된 자료에 업데이트해두겠습니다. 참고로 현재 강의는 2025년에 마지막으로 업데이트된 상태입니다. 해당 시기에 제가 강의를 제작했기 때문에, 파일 자료는 2024년이 아니라 2025년일 것입니다. 제가 이메일을 보내주시면, 업데이트 되는대로 안내해드리도록 하겠습니다.boldplus.ux@gmail.com

open in Figma 누르고 ui kit 다운?받았을 때

안녕하세요, 한별님. 인프런 인턴이 잘 설명해줘서 답변을 안드렸는데, 혹시 아직도 문제가 있으시다면.. 관련 파일 썸네일을 캡쳐해서 여기 댓글 남겨주시면, 제가 도움 드리도록 하겠습니다.불편을 끼쳐드려서 죄송합니다.감사합니다.