베리어블 이름에 대해 질문드립니다

질문 주셔서 감사합니다. 질문 주신 부분에 대한 답변은 아래 자세히 적어놓았습니다. Primitive는 원시값, 즉 색을 부르는 가장 기본 단위의 값이라고 보시면 됩니다. 예를 들면 빨강, 노랑 같은 것들입니다. 제가 강의에서 사용하는 프레임워크 구조에서는 Primary는 Variant 내부에 있고, Role은 Interactive 가 있습니다. 다만 말씀하신 것처럼, 어떻게 구조를 짜고 정의하느냐에 따라 Primary가 Role이 될 수도 있고, 다른 용어/카테고리로 들어갈 수도 있습니다. 실제로 Twilio에서는 해당 용어가 Instance 내부 용어 아래에 있습니다. 하지만 강의에서 처음부터 너무 많은 내용을 한 번에 다루기보다는, 하나의 프레임워크를 먼저 이해한 뒤 스스로 더 연구해서 확장해 나가시는 방식을 추천드립니다. 강의 내용은 어디까지나 하나의 예시이니, 본인 상황에 맞게 논리적으로 수정해서 구성해 사용하시면 됩니다.https://paste.twilio.design/tokens또, 처음부터 모든 걸 완벽하게 이해하려고 너무 꼼꼼하게 파고들기보다는, 일단 한 번 완주해서 큰 그림을 잡고, 그다음에 부족한 부분을 다시 채워나가시는 것을 추천드립니다.이해 되지 않거나 더 궁금하신 부분은 질문 주세요. 감사합니다.

오토레이아웃 그리드에 이미지를 넣을 때 질문입니다.

안녕하세요, tndms1027님저도 해보니깐 제 생각에는 그리드 프레임 내부의 한 부분 보다 크기가 작으면 Hug로 씌워지고, 크기가 크면 Fill로 자동으로 씌워지는 것 같습니다. 저도 이부분에 대해서는 질문 주신 것을 토대로 여러 방식으로 하다보니 발견한 것입니다. 이 부분의 경우는 피그마에서 자동으로 해주는 것이고, 그 다음에는 수강생 분이 하신대로 따로 설정을 통해서 자신에게 맞는 부분을 찾아가시면 될 것 같습니다.Open grid settings의 경우에는 새로운 업데이트 내용인데, 강의에서는 현재 다루지 않고 있는데, 이 부분에 대해서 조만간 업데이트하도록 하겠습니다. 감사합니다.

16강 실습 예제 파일 어디있나요

안녕하세요, minit123님.먼저 강의와 제공된 Figma 파일 간 버전 차이로 인해 혼동을 드린 점 사과드립니다. 강의에서 v2로 표기된 것은 재촬영된 버전을 의미합니다.v1은 2023년 버전, v2는 2025년 버전이며, 두 버전 간 차이는 주로 인터페이스(UI)에 있습니다.강의에서 사용하는 예제 파일의 내용은 모두 동일하므로, 현재 제공된 파일을 기준으로 강의를 따라가셔도 무방합니다. 제가 강의에서 제공드리는 예제 파일의 개념에 대해 설명드리면, 제 강의에서의 예제 파일(스타일가이드)은 강의에서 최종적으로 완성한 파일을 의미합니다. 이는 예제 파일을 그대로 따라 만드는 용도라기보다는, 강의에서 제작한 동일한 완성본을 참고 자료로 제공하는 목적입니다. 강의에서는 수강생분들께 빈 캔버스에서 본인만의 스타일 가이드를 직접 만들어보는 것을 우선적으로 권장드리며, 제가 제공한 완성된 스타일 가이드는 참고용으로 활용하시기를 추천드립니다. 다만, 혼자 스타일 가이드를 만드는 과정이 어려운 경우에는 이후 컴포넌트 단계로 넘어갔을 때, 본인만의 스타일 가이드가 없다면 제공된 스타일 가이드를 기반으로 컴포넌트 제작을 연습해 보시는 것도 좋습니다. 컴포넌트 가이드라인도 제공드리고 있어, 이를 토대로 하나하나 만들어보시는 것을 권장 드립니다. 더 질문이 있으시면 언제든지 해 주시고, 강의 내에서 외에서든 설명이 부족한 부분 있으면 언제든지 질문 주세요. 완강하실 때까지 최선을 다해 도와드리겠습니다. 또한, 만약 제가 언급드린 제 강의 방식이 본인과 맞지 않으시면, 인프런을 통해 환불 신청하시는 것을 추천드립니다. 감사합니다. 볼드 드림.

수업 문의 드립니다

질문 주셔서 감사합니다!첫 강의는 2023년 촬영했으며, 2025년 2월에 전면 재촬영을 해서 최신 버전으로 다 바꾸어놓았습니다. 베리어블 창에서 조금 UI 인터랙션 측면에서 그룹 부분에 차이가 있고 나머지는 거의 동일합니다. 감사합니다!

[47강] 툴팁 그림자 질문드립니다.

안녕하세요, hana님. 우선 현재 겪고 계신 두 가지 문제 인 것 같습니다.Arrow(브래킷) 부분이 글자 위로 올라오는 문제,Clip content 적용 시 그림자가 사라지는 문제,이 두 가지가 동시에 작용하면서 지금과 같은 현상이 발생한 것으로 보입니다. 하나씩 차근차근 설명해드리겠습니다.✔ 브래킷(Bracket) 제작 시 프레임 vs 도형 선택의 문제강의에서는 Arrow(브래킷) 부분을 프레임(frame) 으로 만드는 방식을 소개하고 있습니다.그 이유는 프레임만이 베리어블(bg 등) 을 사용할 수 있기 때문입니다. 반면 도형(shape) 은 베리어블을 적용할 수 없습니다. 즉, 브래킷은 겉보기에는 도형처럼 보이지만, 베리어블을 쓰기 위해 프레임을 도형처럼 사용하는 ‘트릭’ 을 쓰는 것입니다. 다만 프레임은 원래 다양한 모양을 지원하지 않고 기본 사각형 형태이기 때문에, 사각형 프레임을 회전시켜 브래킷처럼 보이게 만들고, 그 위에 clip content 를 적용해 원하는 모양만 보이도록 하는 방식입니다. ✔ Figma 그림자(Shadow) 렌더링 이슈문제는 Figma에서 내부 프레임에 clip content를 적용하면 그림자 렌더링에 오류가 발생하는 경우가 있습니다. 왜 이런 현상이 있는지는 공식적으로 설명이 없지만, 실제로 많은 사용자들이 겪고 있는 버그에 가깝습니다.이를 해결하기 위해서는 Arrow의 클립 컨텐츠를 해제해야합니다. ✔ 그렇다면, 왜 hana님에게는 글자가 가려지는 문제가 발생할까? 제 강의에서는 사실 문제가 없습니다. 그 이유는, 강의에서 사용한 툴팁 박스의 패딩이 16px로 충분히 넉넉한 구조였기 때문에 Arrow가 글자 위로 올라오지 않습니다.반면 hana님 디자인에서는 육안으로 봐도 툴팁 박스의 패딩이 매우 얇아 보이기 때문에, Arrow와 텍스트가 겹쳐지는 현상이 발생한 것으로 판단됩니다. ✔ 최종 해결책 (가장 간단하고 확실한 방법)다행히 해결 방법은 매우 간단합니다. 현재 툴팁은 오토레이아웃으로 구성되어 있고, 당연히 브래킷(Arrow)이 위, 툴팁 박스가 아래에 놓인 구조일 가능성이 큽니다.이 순서만 바꿔주면 문제는 바로 해결됩니다. 👉 해결 방법최상단 레이어(Tooltip)를 선택우측 패널에서 오토레이아웃 Advanced → Canvas Stacking 항목으로 이동“First on top” 옵션 선택 또는 그 반대이렇게 설정하면, 툴팁 박스가 시각적으로 위에 배치되어 Arrow가 글자를 가리는 문제가 해소됩니다. 도움이 되셨으면 좋겠습니다. 궁금하신 부분 있으면, 질문 주세요. 감사합니다.

타이포그래피 스타일 질문드립니다.

안녕하세요, SEONYEONG JO님. 우선 Batch Styler를 사용하실 때 Weight 부분이 활성화되지 않으셨던 것 같습니다.플러그인 특성상 간혹 이런 버그가 발생하는 경우가 있습니다. 저의 경우에는 강의에서 진행한 방식 그대로 따라 했을 때 정상적으로 작동하긴 했습니다만,아마도 선택하신 타이포그래피에서 변경하시려는 폰트 이름이 달라서 발생한 문제로 보입니다.이런 경우에는 플러그인이 제대로 적용되지 않아, 하나하나 직접 수정하셔야 할 수 있습니다. 처음에는 번거로우실 수 있지만, 스타일은 한 번만 제대로 등록해두면 편하게 사용할 수 있으니이번에는 플러그인 대신 수기로 직접 설정해보시기를 추천드립니다.감사합니다.

완강 후 자료

안녕하세요, madamddo님 제가 방금 보내드렸습니다. 혹시 받지 않으셨으면 답변 주시기 바랍니다. 질문 주셔서 감사합니다!

베리어블에 콜렉션을 추가했음에도 피그마 우측에 스타일이 있는 이유

안녕하세요, design_team님.질문 주셔서 감사합니다. 타이포그래피 파트에서 자세히 설명드리겠지만, 질문 주신 내용은 강의 초반에 소개되는 베리어블(Variable)과 스타일(Style)의 근본적인 차이에서 비롯됩니다.특히 다음 두 가지 차이가 핵심입니다:복합 토큰 여부모드 적용 여부 복합 토큰(Composite Token) 여부베리어블은 한 번에 하나의 값만 가질 수 있습니다. 반면 피그마 스타일은 여러 속성을 묶은 ‘복합적인 값’을 가질 수 있습니다. 즉, 베리어블은 기능적으로 나누어져 있고(예: size, weight 등),아무리 그룹으로 묶어도 각각 개별 토큰입니다. 하지만 스타일은 이 여러 토큰을 하나로 묶은 형태로 사용할 수 있습니다. 예를 들어, H1의 경우는 하나의 스타일 안에 여러개의 배리어블이 담겨 있을 수 있습니다. 스타일: H1배리어블: h1-font-size배리어블: h1-font-weight배리어블: h1-line-height 사실개발 관점에서는 이렇게 쪼개질 필요가 없지만, 디자인(피그마 툴)에서는 스타일이 먼저 생기고 베리어블 기능이 나중에 추가되다 보니 이 두 방식을 모두 유지하면서 자연스럽게 구조가 이렇게 형성된 것 같습니다. 모드(Mode) 적용 여부베리어블은 모드를 변경할 수 있지만,스타일은 모드를 직접 변경할 수 없습니다. 그래서 스타일에 바로 모드를 입히는 대신, 시맨틱 베리어블 컬렉션을 따로 만든 후 그 값을 스타일에 적용하는 방식을 사용하게 됩니다. 만약 Desktop모드에서 Mobile모드로 변경하면, 스타일 H1이 마치 변경 되는 것 같지만, 실제로는 배리어블이 변경이 됩니다. 스타일: H1배리어블: h1-font-size(Desktop -> Mobile)배리어블: h1-font-weight(Desktop -> Mobile)배리어블: h1-line-height(Desktop -> Mobile) 저의 설명이 도움이 되셨으면 좋겠습니다. 더 궁금하신 부분 있으면, 질문 주세요.감사합니다. 볼드 드림.

[수업질문] line-height 값에 관하여

안녕하세요, hana님. 질문 주셔서 감사합니다. 타이포그래피 베리어블에서는 현재 120% line-height 값을 직접적으로 지원하지 않고 있습니다.이 부분은 아직 업데이트되지 않은 것으로 확인됩니다.따라서 베리어블을 적용하시고 싶으시면, 강의에서 언급드린 것처럼 직접 계산하여 적용하는 방법을 사용하셔야 합니다. 이 경우, line-height 값에는 픽셀(px) 단위를 붙여주시면 됩니다. 참고로 line-height에는 아래와 같은 단위/값이 사용될 수 있습니다: (MDN 문서 참고)normal2.5 (단위 없는 비율 값, 즉 250%와 동일)3em250%32px 만약 균등한 비율로 설정하고 싶으시다면, 퍼블리셔 분이 말씀하신 대로 1.2 또는 120% 값을 사용하시면 됩니다. 다만, 현재는 이 값이 타이포그래피 베리어블에서 지원되지 않으므로,Primitive 베리어블을 무시하고 스타일 속성에서 직접 120%를 입력하시면 됩니다. (❌ 1.2는 안됩니다.) Dev Mode에서는 120%로 표시되며, 실제로는 이는 퍼블리셔분이 말씀하신 1.2와 동일합니다.그래서 개발자분이 원하시는 방식(1.2 또는 120%)으로 이후에 자유롭게 적용하시면 될 것 같습니다. 도움이 되셨으면 좋겠습니다. 궁금하신 부분 있으시면 더 질문 주세요. 감사합니다.볼드 드림.

예제파일

안녕하세요, 프로젝트빌드업님. 현재 강의에서 사용되는 모든 예제 파일은 Practice v1 폴더 안에 포함되어 있습니다.혹시 제가 실수로 누락한 부분이 있다면, 원하시는 예제의 스크린샷이나 구체적인 설명을 보내주시면 감사하겠습니다. 확인 후, 빠르게 업데이트하여 반영하도록 하겠습니다.감사합니다. 볼드 드림.