배리어블 순서를 바꿀 때 드래그 드랍해도 안 바뀌는건 왜 그런건가요..? ㅠㅠ배리어블 복사하면 순서가 뒤엉켜있는 경우가 너무 많은데 그럴때마다 순서를 바꾸려고 드래그 드랍을 하면 몇개는 바뀌다가 안바뀝니다..배리어블이 너무 많아서 그런건가요? 이럴 때는 어떻게 해야할까요?

강사님!SF Symbols 다운로드 받았는데 윈도우라 파일이 호환이 안되는 거 같습니다. 윈도우에서 어떻게 활용하는지 알려주실 수 있으신가요?  

function setCanvasImages() { let imgElem; for(let i = 0; i < sceneInfo.values.videoImageCount; i++) { imgElem = new Image(); imgElem.src = `./images/picdiet 1/${1 + i}.jpg`; sceneInfo[0].objs.videoImages.push(imgElem); } // /home/ibmuser01/src/images/picdiet 1/1.jpg } setCanvasImages(); function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.content.offsetHeight + window.innerHeight * 0.5; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; if (values.length === 3) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence], 0, 0); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.25) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.57) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.83) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(yOffset < prevScrollHeight){ enterNewScene = true; if(currentScene === 0) return; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', setLayout); window.addEventListener('resize', setLayout); })(); main.js:181 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at playAnimation (main.js:181:30) at scrollLoop (main.js:292:9) at main.js:297:9이러한 에러가 나요.이미지 파일은 여기에 저장되어있슴돠.

자바강의 신청하려고하는데 이전사례처럼  하나짜리 통으로 풀버전으로 편집되서 출시될지 궁금해요

강의처럼 NavBar 인스턴스 컴포넌트에서 Selected 불린 프로퍼티를 끄고 켬에 따라 컬러의 변경을 주고싶은데 아이콘 인스턴스 스왑한 아이콘들은 컬러가 안바뀝니다ㅠ디자인 패널에서 NavBarItems-1은 셀렉트에 따라 바뀌는데 2번같이 아이콘을 Person 아이콘으로 스왑한 아이콘에 대해선 셀렉트 상태에도 컬러가 변하지 않는데요, 원래 이런건가요?

강의처럼 NavBar 인스턴스 컴포넌트에서 Selected 불린 프로퍼티를 끄고 켬에 따라 컬러의 변경을 주고싶은데 아이콘 인스턴스 스왑한 아이콘들은 컬러가 안바뀝니다ㅠ디자인 패널에서 NavBarItems-1은 셀렉트에 따라 바뀌는데 2번같이 아이콘을 Person 아이콘으로 스왑한 아이콘에 대해선 셀렉트 상태에도 컬러가 변하지 않는데요, 원래 이런건가요? 

안녕하세요 볼드님 강의 너무 잘 듣고 있습니다. 다름이아니라 아이콘을 변경하려고 할 때 색깔이 변경이 안 되는 경우, 아이콘 굵기가 다르게 나올 때가 있는데 어떤 부분이 문제인지 궁금합니다.

강의에서는 체크박스를 Boolean으로 처리하면 껏다가 켜는게 동시에 작동해서 따로 만드는걸 추천한다고 하셨는데, 지금 만들면서 테스트해보니까 복사한 인스턴스 각각에서 켰다가 끄는게 각자 동작하는데 혹시 동시에 동작하는게 어떤 상황에서 발생하는걸까요 ? 감사합니다 !!!

이전 강의 자료에서 설명해주셨던 것 같은데 까먹었습니다.. 왜 검색이 안되고 어디에서 검색이 안되었던거였죠..?

안녕하세요 볼드님!반응형 디자인 만들기 14:00쯤 레이어 눈 아이콘 우클릭을하면 로컬 배리어블이 나와야하는데 나오질 않습니다.... ㅠㅠTimeFrame은 눈모양 우클릭 배리어블 적용이 잘되는데imagePlaceholder 홀더에는 우클릭 적용이 안됩니다... 어디서 부터 잘못된건지 모르겠네요ㅜㅜ 도와주세요..

열심히 강의를 듣고 있습니다.근데 혹시 핵심 컴포넌트가 모두 완성된 파일을 공유받을수 없는지요?디자인시스템 파일은 공유해주셔서 다운받아서 참고하면서 보고 있는데요, 

학습을 하다가 이해가 안되시는 부분이 생겼다면 말씀해주세요! form 태그를 듣다가 생긴 의문인데요. 둘 다 사용자의 정보를 담는 건데form 태그와 input태그는 어떤 차이가 있는 건가요?... form태그가 url 받기 위한 박스(그 밖의 기능 즉, 사용자의 정보는 받지 않음, 송장같이 주소만 적음)이고input 태그는 사용자의 값을 직접 적는 칸(박스 안의 내용물)이라는 말인가요?

듣다가 중간에 멈춰서 다시 처음부터 복습하려고 듣고 있는데요초반 강의중에 color style guide 플러그인이 강의를 따라하며서 해보면 강사님 화면처럼 모든 색상이 나오질 않고 아래처럼 나오는데요, 다시 처음부터 모든 색상이 다 나오게 하려면 어떻게 해야 하는지요?저는 플러그인을 열면 아래처럼만 나옵니다. 예전에 연습했던 화면으로만 나오는건지...그렇다면 다시 처음부터 모든 색상이 나오게 하려면 어찌 해야 할까요?  

섹션 13 질문입니다.피그마 탬플릿에서 ctrl c + ctrl v 후에 강사님 강의에서는 asset을 선택하면 toolbar에서 asset이 뜨지만, 제꺼에서는 뜨지 않습니다.... 다른 ios example이 떠서요.detach는 되지만, 원인이 무엇인지는 모르겠습니다. 

안녕하세요 . 볼드님 강의 정말 잘 듣고 있습니다. 아이콘 union이 잘 안 되어서, 그룹을 풀고, outline stroke를 한 뒤, flatten을 하려고 하니 , 저렇게 깨져서요.. 방향키를 조절해보아도.. 잘 안 되네요 이럴 때는 어떻게 해야할까요? ㅜㅜ 

Left & Right는 적용이 잘되었는데, Top & Bottom 기능에서는 Constraint center한거마냥 움직여요..어떤것이 문제 일까요

안녕하세요 볼드님1- 한 프로젝트에서 저장된 베리어블을 다른 프로젝트 파일에서 쓰는 방법이 있나요?2- 그리고 반응형 웹작업을 할때 네비게이션이 있는 페이지 구성 시 그리드는 피그마에서 어떤 방식으로 잡고 가시는지 궁금합니다. (좌측 네비랑 우측 메인을 따로 생각하여 구성하는지?)3- 웹 작업을 처음 하는데 피그마에서 1440px 일경우 보통 마진을 얼만큼으로 설정한다 이런 정해진 값이 있는것인지, 웹에서는 아이콘 픽셀 사이즈가 1.5/2px이 아닌 소수점으로 작업해도 되는지 등 모바일 작업보다 많이 막막한데 사이즈 지정에 대해서 도움을 받을수 있는 사이트 같은게 있을까요?늘 친절한 답변 감사드립니다.

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?선생님은  <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> 이렇게 주셨는데만약 제가 따로 실습할때의 이미지 최대크기가 1280x720 이라면캔버스 width 크기를 1280으로 해줘야하는게 맞나요? 예제 코드 그대로 쓰고 캔버스 width값 1920하니까 이미지가 왼쪽으로 좀 치우쳐져 있어서어제오늘 계속 애쓰다가 캔버스 width값을 이미지 최대크기값만큼 1280으로 주니까 해결이됬어요.. 그러면 이제 궁금한게 모바일일때 화면에 꽉 채우게하고싶은데 어떻게 줘야할지 감이안잡힙니다 ㅠ-ㅠ

안녕하세요. 강의 완강해서 설문조사와 수강평남겼습니다.노션자료도 공부해보고 싶은데 확인해 주시면 감사하겠습니다!

안녕하세요, 질문이 여러개 있어서 글 남깁니다.시멘틱 컬러 강의에서 interactive 컬러들은 주로 Interactive한 요소, 즉 버튼 등에 활용을 하신다고 말씀하셨었는데 현재 예제에서는 text-interacitve-primary와 bg-interactive-primary가 색상이 파란색으로 동일한데 이런 경우에 파란색 primary 버튼을 만든다고 치면 텍스트는 Primary 컬러를 활용할 수 없는건가요? 컴포넌트는 Primary라는 이름을 쓰지만 텍스트 컬러는 sescondary가 활용되어도 되는건가요? 그리고 component는 버튼 등 필요한 경우에만 활용한다고 하셨는데 interacitve 컬러가 있는데도 버튼 컬러를 다시 한번 만들 이유가 있는건지 궁금합니다.마지막으로 디자인 시스템 뿐만 아니라 실제로 이걸 활용해서 컴포넌트나 실무 디자인을 한 예제는 볼 수 없을까요..?? 디자인 시스템 자료는 많은데 실제로 어떻게 활용되는지 감이 안 와서요 ㅠㅠ  우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.