컴포넌트별 베리어블 구축

허이짜님 안녕하세요.말씀해주신 방향이 맞는 것 같습니다. 회사 프로덕트/서비스에 따르겠지만 결국 제품이 커지고, 다양한 UI가 생기다보면, 시맨틱 베리어블에 맞지 않는 것이 나오게 됩니다. 그때마다 새로 추가하거나 만들어진 규칙을 어긋내면서 하다보면 결국 일관성이 떨어지거나 일관성은 있는데 모두 주요색으로 뒤덮혀 있어서, 반복적인 지루한 UI가 만들어질 수 있습니다. 실제로 몇몇 회사 토큰 구조에서는 시맨틱을 넘어 컴포넌트 Level로 올라갑니다. 저도 서비스가 커지고, UI가 많아지고, 복잡해지면, 그것이 더 맞을 수 있다고 생각합니다. 그래서 그런 경우는 제 생각에는 개인적으로 콜랙션을 추가로 만들어, 시맨틱 단계를 넘어 컴포넌트 단계로 한층 더 만드시는 것을 추천드립니다. 그리고 컴포넌트 단계 베리어블에서 시맨틱에서 색을 가져다 쓰는 방법이 더 좋지 않을까 싶습니다. 감사합니다. 볼드 드림.

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

허이짜님 안녕하세요.말씀해주신 것처럼 강의에서 제공된 토큰(베리어블) 구조 관점에서 텍스트 필드 안에 있는 요소들은 모두 interactive 컬러를 사용하는 것이 좋습니다. 제가 작업할 때는, (말씀해주신대로) 사용자가 보았을 때 시각적으로 상태가 변하는 요소들에만 interactive 컬러를 적용했습니다. 제 텍스트 필드의 경우에는 배경색이 상태에 따라 변하지 않기 때문에 interactive 값을 따로 적용하지 않았습니다. 이런 선택을 한 이유는, 작업을 하다 보면 예외 케이스가 생기게 되고, 그때마다 값을 추가하다 보면 불필요하게 갯수가 늘어날 수 있기 때문입니다. 그래서 기본적인 기준만 두고, 나머지는 상황에 맞게 확장할 수 있도록 하였습니다. 강의에서는 이러한 기준으로 설명드렸지만, 제가 현재 회사 실무/사이드 프로젝트에서는 오히려 interactive 개념을 아예 제거하고 더 슬림하게 사용합니다. 결국에는 회사 내 디자이너·동료분들과 협업하면서 상황에 맞게 선택하시고, 강의에서 제공되는 것은 하나의 예시로 봐주시면 될 것 같습니다. 감사합니다.볼드 드림!

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

아이콘 형태가 동일해야 된다는 의미는 두가지 조건이 반드시 충족 되어야 합니다.레이어 이름가 반드시 동일해야합니다. 현재 Shape 컴포넌트 안에 어떤 구조, 이름으로 되어 있는지는 모르겠지만, 만약 레이어 최상위 레이어 이름이 Vector라고 한다면, 다른 아이콘 컴포넌트도 반드시 동일하게 Vector라고 해야합니다.구조라 하면, 예를 들어, 최상위 레이어가 Union으로 되어 있어서 면으로 구성되어 있는지 아니면 선으로 구성되어 있는지입니다. 예를 들어, Shape는 면에 색이 적용되었다고 가정할 경우, 다른 아이콘은 선으로 구성 되어 있다면, 다른 아이콘으로 변경시에는 선의 색이 따라오게 됩니다.제공 드린 아이콘 컴포넌트에 잘 이 부분이 되어 있으니 한번 참고해보시기 바랍니다.감사합니다.만약 그래도 안되면, boldplus.ux@gmail.com으로 파일 보내주시면 제가 확인 해보고 문제상황에 대한 해결책을 더 자세히 알려드리겠습니다.

UI Kit에서 배리어블 등록 안되는 문제

연진님 안녕하세요, 우선 질문에 답변을 늦게 드린 점 죄송합니다.개인적인 건강 사정으로 인해 접속이 어려웠습니다.제가 보기에는 아래에 Bold Plus Foundation 2025가 있는 것으로 보아, 스크롤을 하시면 보일 것 같습니다. 우선 라이브러리를 등록했는지 아래처럼 꼭 체크하시고, 그렇지 않은 경우는 보이지 않습니다. (사진) 그러면 아래 화면처럼 찾으실 수 있으실 것입니다.(사진) Apply variable의 경우 등록된 라이브러리를 기준으로 만들어지기 때문에 꼭 확인 하시고, 순서대로 해주셔야 합니다. 가끔 Library 파트에 Apply variable name 같은 글자가 자동으로 생성되어 콜렉션을 찾을 수가 없는데, 이 경우 지워주시면 됩니다. (사진)또 질문 있으시면 바로 주세요. 바로 답변해드리도록 하겠습니다.

교육용 피그마 계정 문의

안녕하세요, 연진님작년까지 에듀계정이 신청 가능했는데, 작년 9월에 피그마에서 정책을 변경하여, 이 강의를 통해서 신청은 불가합니다. 저희가 운영하는 부트캠프를 통해서는 신청이 가능한데, 이또한 그 기간에서만 사용가능하며, 부트캠프 참여자만 신청가능합니다. 아직 부트캠프 운용 계획은 없지만 3~4월 상반기에 할 예정입니다. 우선은 강의 들으실 때 내보내기를 하지 마시고 동일한 파일내에서 컴포넌트, 페이지를 만드셔도 강의 따라오시는데 무리가 없습니다.

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

안녕하세요, 질문 감사합니다! 베리어블 타입을 잘 보셔야 합니다. 타이포그래피에 속하는 베리어블 타입은 텍스트와 숫자입니다. Font size의 경우는 반드시 숫자여야합니다. 하지만 현재는 시맨틱 Font size는 텍스트로 설정이 되어 있고, Primitive에는 숫자 베리어블로 설정이 되어 있어서 이런 문제가 생기는 것입니다. 시맨틱 Font size를 숫자 베리어블로 바꾸시면 해결 될 것 입니다. 이는 저도 가끔 헷갈릴 때가 있긴 합니다. 그리고, 제가 알기로는 타입을 변경하는건 없는걸로 알고 있어서 새로 지우시고 다시 만드시면 될 것 같습니다. 또 안되시거나 궁금하신 부분 있으시면 질문주세요. 감사합니다.

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

안녕하세요, 질문 감사합니다! 베리어블 타입을 잘 보셔야 합니다. 타이포그래피에 속하는 베리어블 타입은 텍스트와 숫자입니다. Font size의 경우는 반드시 숫자여야합니다. 하지만 현재는 시맨틱 Font size는 텍스트로 설정이 되어 있고, Primitive에는 숫자 베리어블로 설정이 되어 있어서 이런 문제가 생기는 것입니다. 시맨틱 Font size를 숫자 베리어블로 바꾸시면 해결 될 것 입니다. 이는 저도 가끔 헷갈릴 때가 있긴 합니다. 그리고, 제가 알기로는 타입을 변경하는건 없는걸로 알고 있어서 새로 지우시고 다시 만드시면 될 것 같습니다. 또 안되시거나 궁금하신 부분 있으시면 질문주세요. 감사합니다.

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

안녕하세요, 허이짜님 🙂질문 주신 “바디만 따로 웨이트를 시맨틱에서 그룹핑한 이유”는 말씀해주신 부분이 맞습니다. 조금 더 설명드리면, 이유는 크게 두 가지입니다. 1) 바디는 실제로 사용하는 웨이트 종류가 여러 개(N개)바디 텍스트는 상황에 따라 Regular / Medium / Semibold처럼 여러 웨이트를 사용합니다. 그래서 “바디”라는 카테고리 안에서 스타일이나 컴포넌트가 끌어다 쓸 수 있도록 바디 전용 웨이트 토큰이 N개가 필요합니다.(이 때 이걸 Primitive에서 가져옵니다.)즉, 바디는 ‘하나의 타입’이 아니라 ‘여러 변형 웨이트를 가진 타입’이라서, 별도로 웨이트를 그룹핑해두는 것이 유지보수/사용성 면에서 가장 합리적입니다. 2) 강의/피그마 구조상 “스타일”과 “시맨틱 타이포 베리어블”이 사실상 같은 역할 수행강의에서 사용하는 구조는 개념적으로 실질적으로 같은 목적이라고 보셔도 됩니다.스타일 = 시맨틱 토큰(복합 토큰)다만 피그마에서는 기존에 텍스트 스타일이라는 별도의 기능이 이미 존재했고, Variables는 나중에 생긴 기능이라 둘이 “완전히 동일하게” 동작하지는 않습니다. 그래서 실무에서 흔히 하듯이 스타일과 시맨틱 토큰을 같은 구조로 유지하면서도 베리어블에서 모드 전환(예: 다크모드/브랜드 변경)에서도 잘 동작하도록 설계해둔 겁니다.정리하자면:✅바디는 웨이트가 여러 개라 N개의 토큰이 필요했고✅스타일과 시맨틱을 사실상 같은 구조로 운영하려다 보니✅바디 웨이트를 따로 그룹핑하는 방식이 가장 효율적이었다라고 이해하시면 됩니다. 좋은 질문 주셔서 감사합니다 🙂

First Draft 툴이 보이지 않아요..

안녕하세요, 문하람님. 피그마 계정까지 구매하셔서 직접 시도해보시려 했는데, 해당 기능이 없어 당황하셨을 것 같아요. 강의에서는 First Draft와 유사한 기능으로 소개해드렸는데, 대신 아래 링크의 서비스를 활용해보시길 권해드립니다.https://stitch.withgoogle.com/ 결과물은 학습된 UI 스타일에 따라 조금 다르게 나올 수 있지만, 충분히 좋은 출발점이 될 수 있습니다.또한 와이어프레임을 제작하고 싶으시다면, 프롬프트에 ‘와이어프레임’이라는 키워드를 꼭 포함해 주세요. 생성된 결과는 복사해서 피그마로도 가져올 수 있으니, 해당 기능도 꼭 확인해보시기 바랍니다. 감사합니다.

안녕하세요. 강사님 min width 질문입니다.

Tndms1027안녕하세요, 질문 주셔서 감사합니다. 강의에서 제가 “줄여졌을 때 좋다”라고 다소 두리뭉실하게 설명드렸는데, 보다 명확하게 말씀드리면 추후 화면이 모바일처럼 작아졌을 때를 고려해 값을 정하는 것입니다. 아래 첨부된 이미지처럼 양쪽 여백을 보시면,바깥쪽 여백(outer margin)과 박스 안쪽 여백(inner padding)이 함께 존재하는 것을 확인하실 수 있습니다.(사진) 이 여백들을 기준으로 계산하면,• 바깥 여백이 16px씩 양쪽이므로 → 16 × 2• 박스 안쪽 여백까지 함께 고려하면 16px이 양쪽으로 2번씩 들어가게 되어 → 16 × 4라는 값이 나오게 됩니다. 반응형은 고려해야 할 요소들이 많아서, 제가 처음부터 더 명확하게 설명드렸어야 했는데 부족했던 점 죄송합니다.이번 설명이 궁금하셨던 부분을 해결하는 데 도움이 되었으면 좋겠습니다. 😊 추가로 답변이 늦은 점 죄송합니다. 인프런 쪽에서 데스크탑에서 질문 답하기, 보내기가 최근 몇일 동안 아예 먹통이 되었네요.