묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
다크모드 적용시 문제가 있어 질문 드립니다.
안녕하세요! 먼저 강의를 잘 듣고 있고 자세하게 알려주셔서 감사합니다.강의 듣다가 막히는 부분이 있어 질문 남깁니다.현재 [모드를 활용한 다크모드 전화, 그리고 그 원리 배우기- 파트 2] 를 듣고 있습니다.베리어블에 다크모드 색상 값을 입력하고 Component UI 파일에서 Appearance로 모드를 전환하려는데 어떤 부분은 바뀌고 어떤 부분은 바뀌지 않는 현상이 있습니다. (사진첨부1)아래 캡처(사진첨부2)처럼 used variables와 Foundation2025(라이브러리파일)로 나뉘어서 뜨는데 이것 때문일까요? 왜 강의와 다르게 두 개로 나뉘어서 뜨는지잘 모르겠습니다.
-
미해결피그마 시작하기
지금 강의하실 때 사용하시는 피그마 예제??
지금 강의하실 때 사용하시는 피그마 예제는 어디서 어떻게 불러오나요? 내PC에 다운받아서 따라하고 싶은데...윈도우 오프라인 환경의 PC에서요.
-
해결됨부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
수강기간이 무제한이된건가요?
영코디쌤 전강좌가 수강기간이 무제한으로 바뀌어있던데 제학습창엔 수강만료날짜가 표시되어있는데 저도 혜택을 받을수있을런지요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Rename layers
안녕하세요 볼드님!강의를 듣다 문의 사항이 생겨 질문드립니다. 기존 베타 버전이던 Rename layers가 사라지고 하기와 같이 뜨는데요, 클릭하여 진입해도 rename layers가 없어 여쭤봅니다!
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
단축키 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 단축키도 중간에 이야기 해주시면 안될까요? 물론 직접 찾아보면서 하긴하지만 잘 안나오는 경우도 있고 그때마다 영상 멈추고 찾아보는거보다 강사님께서 알려주시면 좋을듯해서요..
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
타이포그래피 primitive typeface 네이밍 질문있습니다
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.안녕하세요! primitive:typography 에 궁금한 점이 있습니다.font family/typeface 를 등록할 때, Name열에 어떻게 명명할지 고민이 됩니다.주로 화면들에는 거의 pretendard를 사용하고 있고, Geist 폰트 부분으로 조금씩 (페이지네이션 숫자, 영어 정도) , inter (한 두개) 정도를 사용하고 있다면 어떻게 해야할까요?폰트가 모두 sans여서 어떻게 구분해서 Name열에 적어야할지 모르겠습니다. (강의에서 설명주신 부분은 아래 사진입니다)
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
단락별 행간 조절
선생님의 화면에 나오는 단락별행간 조절할 수 있는게 안뜨는데 어디로 가면 찾을수 있나요?윈도우입니다!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의
플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의 쌤 안녕하세요~피그마에서 아이콘 키라인 가이드에 맞춰 아이콘 제작(union > flatten 모두 적용 완료)하여 svg로 아이콘을 전달하였으나, 플러터 개발 환경 > 배포하여 적용해보면 svg 아이콘 깨짐이 발생하는 문제를 겪고 있습니다~svg export 플러그인, SVG 최적화(SVGOMG) 적용하여 수정했으나, 동일하게 SVG 깨짐 현상이 해결되지 않는데요~fill rule editer 플러그인은 아직 적용하지 않았으나, 이를 적용하지 않는 것이 문제일까요?fill rule editer도 다시 적용해 볼 예정입니다만, 해결이 될지 알 수 없어서 문의 드려봅니다! 🥺실무에 유익한 강의 항상 감사합니다!!
-
미해결디자인 시스템 - 스타일 파운데이션
플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의
강사님 안녕하세요~피그마에서 24 아이콘 키라인 가이드에 맞춰 아이콘을 제작(union > flatten 모두 적용 완료)하여 svg로 아이콘을 전달하였으나, 플러터 개발 환경 > 배포하여 적용해보면 svg 아이콘 깨짐이 발생하는 문제를 겪고 있습니다~svg export 플러그인, SVG 최적화(SVGOMG) 적용하여 수정했으나, 동일하게 SVG 깨짐 현상이 해결되지 않는데요~fill rule editer 플러그인은 아직 적용하지 않았으나, 이를 적용하지 않는 것이 문제일까요?fill rule editer도 다시 적용해 볼 예정입니다만, 해결이 될지 알 수 없어서 문의 드려봅니다!실무에 유익한 강의 항상 감사합니다!!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인시스템네이밍
안녕하세요 볼드선생님!디자인시스템은 강의를 듣고 만들고있지만디자인시스템네이밍에 관련해서 네이밍을 어떤식으로 정해야하는지 잘 모르겠는데혹시 관련해서 팁이 있을까요!?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Theme에서 다크와 라이트를 구분하지 않고 Semantic에서 구분하는 이유가 궁금합니다
안녕하세요 Theme에서 다크와 라이트를 구분하지 않고 Semantic에서 구분하는 이유가 궁금합니다 Theme에서 부터 - brand1 - dark- brand1 - light- brand2 - dark- brand2 - light로 구분하게 되면semantic에서는 - bold-sementic-backgound로 모든 브랜드와 다크모드가 대응 되는거 아닌가요?제가 구조를 제대로 이해한게 맞나요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
semantic typography Responsive 가이드 문서 (font size, line height) 부분 질문
쌤 안녕하세요. semantic typography 등록 후 가이드 문서 제작 중인 상황입니다. 공유해주신 🔹파운데이션 스타일 가이드 + 컴포넌트 워크시트 통합본https://www.figma.com/community/file/1469798941319486391/bp-design-kits-single-version-v1을 참고해서 가이드 문서를 제작하다가 semantic typography 등록 및 스타일 가이드 문서에서 같은 24, 20 폰트 사이즈의 line height가 데스크탑, 모바일에서 다른 숫자로 적용된 이유가 궁금합니다. desktop: 24px/28, 20px/24mobile: 24px/32, 20px/28 어떤 규칙이 적용된 것인지 궁금합니다!같은 font size에서 line height가 다른 숫자로 적용되어 배리어블 등록 및 가이드 문서 제작 시, 이 부분이 헷갈려서 질문드렸습니다! 헷갈릴 경우에는 데스크탑, 모바일 모두 같은 폰트 사이즈에 같은 line height를 적용해도 될지 궁금합니다!! 실무에 유익한 강의와 좋은 자료 공유해주셔서 항상 감사합니다!
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
홈페이지 메인화면에 이미지 짤림
안녕하세요 글을 작성했는데메인 화면에서 글에 작성한 이미지가 안보입니다문제가 뭔지 모르겠어요ㅜㅜ
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
레이어 팝업 '닫기' 가 안됩니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>A1~A4레이아웃 연습</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="logo"></div> <div class="manu"></div> </header> <div class="silde"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open">SNS 발송 서비스 개선작업<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업<b b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트<b>2019.12.31</b></a> <a href="#none">올엣 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 안내<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="image/1.jpg" alt="garllery1"></a> <a href="#none"><img src="image/2.jpg" alt="garllery2"></a> <a href="#none"><img src="image/3.jpg" alt="garllery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="nav"></div> </div> <footer> <div class="copy"> <div class="copy2"></div> <div class="copy3"></div> </div> <div class="logo2"></div> </footer> <div class="model"> <div class="model-content"> <h1>SNS비회원주문하기 종료 안내</h1> <p>안녕하세요. JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입 없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 따라 KISAS의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거레서비스의 공통된 사함이라는 점을 안내드립니다. </p> <a class="close-model">X 닫기</a> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/costom.js"></script> </body> </html> .container{ border: 1px solid #111; width: 1200px; margin: auto; } header{ width: 1200px; height: 100px; background-color: #222; } header div{ height: 100px; } .logo{ width: 170px; background-color: #333; float: left; } .manu{ width: 700px; background-color: #444; float: right; } .silde{ height: 300px; background-color: #555; } .items{ /* height: 200px; */ overflow: hidden; } .items>div{ display: inline-block; height: 200px; float: left; } .news{ width: 400px; background-color: #666; } .tab-inner{ margin: 5px 10px; } .btn{ } .btn .active{ background-color: #fff; } .btn a{ width: 100px; height: 50px; background-color: #888; border: 1px solid #000; display: inline-block; text-align: center; color: #111; text-decoration: none; box-sizing: border-box; padding: 13px 0; border-radius: 5px 5px 0 0; margin-left: -5px; border-bottom: none; cursor: pointer; } .tabs{ background-color: #fff; height: 145px; border: 1px solid #000; margin-left: -5px; margin-top: -1px; } .tab1 a.open{ cursor: pointer; } .tab1 a{ color: #000; text-decoration: none; box-sizing: border-box; border-bottom: 1px solid #000; display: block; margin: 3px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 a{ box-sizing: border-box; display: inline-block; padding: 17px 0; margin-left: 10px } .tab2 img{ width: 110px; } .banner{ width: 400px; background-color: #777; } .nav{ width: 400px; height: 200px; background-color: #888; } footer{ height: 100px; background-color: #999; } footer> div{ float: left; height: 100px; } .copy{ width: 1030px; } .copy> div{ width: 1030px; height: 50px; } .copy2{ background-color: #444; } .copy3{ background-color: #777; } .logo2{ width: 170px; background-color: #222; } .model{ position: absolute; left: 0; top: 0; background-color: #00000028; width: 1200px; height: 700px; margin: 7px; display:block; display: none; } .model-content{ position: absolute; left: 50%; top: 50%; background-color: #fff; width: 500px; height: 400px; border: 1px solid #000; transform: translate(-50%,-50%); box-sizing: border-box; } .model-content h1{ color: #fff; background-color: #000; width: 450px; display: inline-block; text-align: center; margin: 25px; } .model-content p{ line-height: 26px; text-shadow: 0 0 3px #0000003d; text-align: center; } .close-model{ background-color: #000; width: 90px; height: 40px; display: inline-block; float: right; color: #fff; text-align: center; box-sizing: border-box; margin: 12px; padding: 6px; cursor: pointer; }$('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.open').click (function(){ $('.model').fadeIn() }) $('.close-model').click (function(){ $('.mode1').fadeOut() })코드를 보내드립니다
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
영어/ 한국어 타이포 다를경우
안녕하세요 선생님,항상 꼼꼼하게 답변 달아주셔서 감사합니다.텍스트 스타일을 영어와 한국어 폰트를 다르게 쓰는데 이럴 경우, 컴포넌트를 어떻게 관리 해야할까요? 1) 한국어로 컴포넌트를 등록해둘 경우, 가져와서 영어 타이포로 변경하는게 너무 번거로워 방법이 있는지 궁금합니다.2) 컴포넌트를 한국어로 적용해두고 영어와 한국어 그냥 교체해서 사용해도 되는 걸까요? 약간씩 차이가 생길것 같아 우려가 됩니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
타이포그래피 배리어블 등록 관련 질문
쌤 안녕하세요, 타이포그래피 배리어블 등록 관련 질문드려요!브랜드가 1개예요. 컬러 배리어블 등록시에는 브랜드 컬러와 Theme을 등록하지 않았어요.Sematic Typography 등록 시에 font family는 Theme을 등록하지 않은 경우, 어디에 등록해서 사용하는 것이 좋을지 궁금합니다! 아직 경험이 많지 않아서요~쌤의 예제 파일을 참고하면서 등록하다보니 헷갈려서 질문드려요!도움 부탁 드립니다!!실무에도 유용한 강의와 예제 공유해주셔서 항상 감사합니다!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
완강했습니다 :)
안녕하세요. 처음 들었을때는 어려웠는데 피그마 사용하면서 강의를 재차 들으니까 도움이 많이 됩니다. 완강과 설문남겼습니다. 완주선물혜택도 부탁드릴게요. 감사합니다!
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.
마우스 클릭 갤러리마우스 클릭 공지사항 .js .html.css 세번 정도 다시 해보고 class명까지 바꿔가며 확인을 했지만 도저히 찾을 수가 없어요 이상하게 .js가 아예 안되는 것도 아니고 배경색만 바뀌지 않습니다 제가 보기엔 .btn a.active 가 .js로 입력이 안되는 것 같은데 정말 궁금하네요!
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
뷰티파이 설치 관련 문의
30:00 익스텐션 뷰티파이 설치 시 제 코드에서는 이렇게 나오는데, 설치해서 사용해도 되는건가요??
-
미해결디자인 시스템 - 스타일 파운데이션
색상 파레트 제작 시, 색상 배합 방법 문의
안녕하세요컬러 파운데이션 제작 (컬러 파레트 색상 정의) 질문 드립니다.브랜드 컬러로 프라이머리 컬러, 세컨더리 컬러가 있을 경우, 프라이머리 컬러를 고려한 시스템 컬러, 뉴트럴 컬러, 액센트 컬러 각각 파레트 생성을 위한 컬러 배합 노하우가 궁금합니다!머터리얼 컬러 빌더 도구도 시도해보았으나 아직 테스트 해 본 정도입니다.피그마 플러그인 사용 시, 제가 지정한 프라이머리 컬러를 고려한 시스템 컬러, 뉴트럴 컬러를 생성할 수 있는 플러그인은 찾지 못하여 문의 드립니다!프라이머리 컬러를 반영하여 컬러 스타일 가이드를 완성할 수 있도록 시스템 컬러, 액센트 컬러, 뉴트럴 컬러 등을 생성하는 효과적인 방법이 있는지 궁금합니다.
