bolduxlab

시니어 (9년 이상)

앞 질문에서 언급해드렸듯이, 전체 구조는 동일하지만 용어는 회사마다 다르게 사용 할 수 있습니다.하지만 질문에서 이미 답을 발견하셨듯이, 이제 전체적인 얼개를 알고 계신 것 같습니다.&nbsp;<ol><li>라이브러리를 외부로 내보낼 때, 숨길 수는 있습니다. 콜렉션 앞에 . 을 붙이시면, 콜렉션은 Hidden 안으로 들어가면서 내보내지 않을 수 있습니다. 이 부분은 스타일 가이드 부분에서 컴포넌트 사이에서 배우실 수 있습니다.</li><li>이 회사의 구조는 atomic, semantic 이렇게 구조가 되어 있습니다. 원티브에서는 UI에 색상을 적용할 때 베리어블에서 가져오는 것이 아니라 컬러 스타일에서 가지고 옵니다. 이렇게 하는 이유는 여러가지가 있는데, 우선 강의 앞부분에서 베리어블과 스타일의 차이에서 스타일은 여러 변수를 넣을 수 있는 반면, 베리어블은 그러지 못합니다. 예를 들어, hover에서 기존 default 색상 위에 다른 색상값을 올리는 경우가 될수 있습니다. 이는 머티리얼 디자인을 참고해보시면 됩니다. 또한 이미 스타일로 다 만들어진 경우 베리어블로 바꾸기 보다는 기존 스타일안에 베리어블을 연결하는 경우가 있습니다. <img src="https://cdn.inflearn.com/public/files/posts/53e969ec-0a4f-4214-8e24-80bee9e997ea/6b5a0e58-797d-4d04-a447-3d7b8a0779d4.webp" media-type="img" alt="Screenshot 2026-04-12 at 19.57.03.png.webp" title="Screenshot 2026-04-12 at 19.57.03.png.webp" width="562" height="332">.</li><li>Component, Frame의 경우는 제가 그 회사를 다니지 않아서 왜 이런 결정을 했는지 모르겠지만, 추측건데, 베리어블 창의 atom, theme은 컬러고, component와 frame은 숫자 즉, 패딩, 높이 너비 등으로 구분한 것 같습니다. 이후에 제 강의에서도 이 부분에 대해서 많이 배우실 것입니다.</li><li>시멘틱이라는 말 자체가 "의미가 있는 것." 디자인 시스템(UI Kit)에서는 단순하게 색상의 의미 역할을 부여한다고 생각하시면 됩니다. 그냥 빨강이 아니라 경고(warning) 중에서도 텍스트(text)에 사용되는 색 이렇게 말이죠. 그래서 크게 보면 UI 요소라고도 보실 수 있습니다. 강의에서는 라이트/다크 모드로 나오는데, 이는 이 모드가 가장 흔하게 사용되기 때문입니다.&nbsp;&nbsp;질문 더 있으면 주세요. 감사합니다.&nbsp;&nbsp;</li></ol>

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

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

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

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

예시파일 불일치

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

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

안녕하세요, heyjungbae님.강의가 도움이 되고 있다니 정말 기쁩니다.디자이너와 개발자의 협업 방식이나 핸드오버 과정은 많은 곳에서 언급되지만, 실제 실무에서는 굉장히 중요한 주제이기도 합니다. 이 부분은 최근에 새로 만든 피그마 강의의 마지막 파트에서 간단히 소개하고 있습니다.아직 디자인 시스템 관점에서 협업 관련에서 대해서 깊게 다룬 강의는 없는데, 다른 분들도 관심이 있으시다면 관련 내용을 정리해서 강의로 준비해보겠습니다. 또 AI 기반 워크플로우나 관심 있는 주제가 있다면 알려주시면, 내용을 취합해 공유하거나 강의로 제작해보도록 하겠습니다.감사합니다!

next step?

안녕하세요! &nbsp;수업 재미있게 들어주셔서 감사합니다 😊말씀해주신 부분은 Variables 세팅을 잘못하셨다기보다는, 플러그인이 업데이트되면서 출력 방식이 조금 달라진 경우일 가능성이 높아 보여요. Figma 플러그인들이 업데이트되면서 옵션 위치나 출력 포맷이 강의 화면과 조금 다르게 보일 때가 종종 있습니다.Variables 컬렉션이나 값이 정상적으로 설정되어 있다면 말씀하신 출력 차이는 큰 문제는 아니니 걱정 안 하셔도 괜찮습니다 👍감사합니다!

16강 Print Variables 출력 질문

안녕하세요, 한별님.&nbsp;타이포그래피 베리어블의 Name 값은 대소문자를 구분하지 않습니다.제가 강의를 촬영하던 시점에는 Value의 경우 대소문자에 영향을 받는 부분이 있었습니다. 예를 들어, 폰트 패밀리 Roboto에 Semi bold가 있다면 정확한 표기와 맞춰주어야 했습니다.하지만 현재 확인해보니 다음과 같이 작성해도 모두 정상적으로 인식됩니다:<ul><li>Semibold</li><li>SemiBold</li><li>semiBold</li><li>semibold&nbsp;</li></ul>또한 붙여 쓰거나 띄어 쓰는 방식, 대소문자 차이와 관계없이 모두 인식되기 때문에 크게 문제는 없습니다.&nbsp;다만 일반적으로 property를 작성할 때는 camelCase 방식을 많이 사용합니다. 반면, 이후에 배우실 컴포넌트의 경우에는 첫 글자를 대문자로 시작하는 방식(PascalCase)를 사용합니다. 회사마다 컨벤션은 조금씩 다르지만, _(언더스코어)를 사용하는 경우는 개인적으로 많이 보지는 못했습니다.&nbsp;Value의 경우에도 피그마에서 대문자로 작성하더라도 코드 단계에서 변경이 가능하기 때문에, 이 부분은 개발자와 협의하여 정하시는 것이 가장 좋습니다.마지막으로 이름이 길어질 경우에는 가독성을 위해 camelCase 대신 -(하이픈)을 사용하는 사례도 있습니다.&nbsp;도움이 되었길 바랍니다 😊

variables 이름 지을때 소문자,대문자 사용에 관해..

RooRoo님 안녕하세요, 우선 불편을 끼쳐 드려 죄송합니다.&nbsp;예제 파일은 강의 내용과 최대한 동일하게 맞춰서 제공해드리려고 했습니다. 혹시 빠진 부분이 있다면 말씀해주시면 바로 추가하도록 하겠습니다.&nbsp;또한 이와 관련해 어려운 점이 있으시면 1:1로 도와드리겠습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="mailto:boldplus.ux@gmail.com">boldplus.ux@gmail.com</a> 으로 이메일 주시면 확인 후 도움드리겠습니다. 감사합니다.

예제 파일이 다릅니다.

안녕하세요, RooRoo님 &nbsp;네 말씀해주신대로, 예제파일을 열어서 실행하시면 됩니다. import로 파일을 불러서 시작하시면 됩니다. 피그마가 처음이시면 제 이메일로 따로 연락주시면 제가 1:1으로 자세하게 알려드리도록 하겠습니다. 궁금하신 부분도 다 알려주시면 제가 도와드리도록 하겠습니다. 감사합니다.

시작 파일

강노님 안녕하세요, 아래 인프런 인턴이 말해준 것처럼 Option + Command + G가 맞습니다. 해당 부분은 영상 자막과 녹음을 새로 수정하도록 하겠습니다. 알려주셔서 정말 감사합니다.&nbsp;안 되시는 부분은 제가 보기에 이미지가 그리드 안에서 확장되지 않는 문제인 것 같습니다. 아마 그리드가 Hug로 설정되어 있어서 그런 것으로 보입니다. Hug로 설정되어 있으면, 프레임이 늘어나더라도 내부 콘텐츠 크기만큼만 따라오기 때문에 원하는 방식으로 확장이 되지 않습니다.&nbsp;이 경우에는 아래의 이미지처럼 Open grid settings를 눌러서 각 컬럼을 Fill 또는 Fixed로 변경해 주세요. 그렇게 설정하면 그리드가 고정되고, 내부 콘텐츠가 자연스럽게 자석처럼 붙으면서 함께 늘어날 것입니다.&nbsp;궁금하신 부분은 언제든지 질문 주세요.<img src="https://cdn.inflearn.com/public/files/posts/dcb39696-dd81-4207-832a-78cdda45fd22/bf8ea99a-08c6-473c-8ffb-1e3f21aaffaf.png" media-type="img" alt="Screenshot 2026-02-19 at 15.54.58.png" title="Screenshot 2026-02-19 at 15.54.58.png" width="278" height="224"><img src="https://cdn.inflearn.com/public/files/posts/99a7210c-ef28-431e-8a45-66152147ebd8/3af70e2f-a699-4564-8cf6-0ee431451b41.png" media-type="img" alt="Screenshot 2026-02-19 at 15.54.51.png" title="Screenshot 2026-02-19 at 15.54.51.png" width="300" height="359">&nbsp;

bolduxlab

Posts