묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
애니메이션 시간차
animation.css에서 강의대로 animate__fadeInLeftBig을 가져왔는데 첫 슬라이드는 자연스럽게 나옵니다. 두번째 슬라이드에서는 중간에 살짝 덜컹거리듯이 하며 나오는 문제와 next 버튼을 클릭했을 때 다음 화면을 넘어가게 되면 애니메이션 텍스트의 나타나는 시간과 이미지가 슬라이드되서 보여지는 시간 차이가 납니다.혹시 animatin.css 에서 선언된 애니메이션 옵션이 변경 가능한지 궁금합니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
프로 다운어떻게 요청드리면 되나요?
어디로 요청드리면 되나요?~
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
완강이벤트
안녕하세요.완강 후 설문조사와 수강평을 남겼습니다.선물혜택은 메일로 발송이 되나요?감사합니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
디스코드 채널에 들어가지지 않습니다.
디스코드는 이제 들어갈 수 없는걸까요? 링크로 진입했는데 초대를 수락할 수 없다고 뜨네요.
-
미해결애플 웹사이트 인터랙션 클론!
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
안녕하세요 선생님!예전에 선생님 강의 청첩장강의랑 flex,grid, 기타 강의들 구매하고 들었던 학생입니다.선생님은 메인개발분야가 뭔지 궁금합니당.또 리액트 사용하시는지도 궁금합니다!질문과는 무관한 여담이지만,,최근 리액트로 프로젝트하면서 애니메이션 편하게 구현하기위해서 여러 라이브러리를 사용하고 또 gsap관련해서도 찾아보고 했었는데.. gsap로 이렇게 손쉽게 인터랙티브 애니메이션을 구현할 수있다고? 하면서 혁신이다! 라고 생각했었는데보니깐 자체 서비스에서 결제 같은 기능이있을경우 (넷플릭스같은) gsap 프리미엄을 결제해서 사용해야하더라구요..그것도 연간 구독 시스템이고, 코딩하는 개발자 수에따라서 개별로 구매..ㅎㄷㄷ 그래서 돌고돌아 다시 선생님 곁으로왔습니다.이 강의 듣다가 개인적인 일들이 겹쳐서 중간하차했었는데 다시 처음부터 차근차근 수강하고 복습해서 마스터해보려고합니닷.. 질문 요약1: 선생님 메인분야가 뭐에요?2: gsap에 관해서 의견이궁금합니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
반응형 / 적응형 웹의 정의에 대한 질문이 있습니다.
안녕하세요. 좋은 강의 잘 보고 있습니다. 디자인 시스템을 구축하는데 있어 큰 도움이 될 것 같습니다. 🙇♂ 영상 초반 반응형과 적응형 웹의 정의 설명 부분에서 질문이 있습니다. 제가 아는 기준에선 반응형은 기기에 상관없이 브라우저의 사이즈에 따라 미디어 쿼리로 구현해놓은 브레이크 포인트에 맞춰서 스타일이 달라지는 것이고, 적응형은 클라이언트의 기기를 웹서버에서 미리 파악하여 해당 레이아웃을 서버에서 내려주는 방식으로 알고 있습니다. 이에 따라 반응형은 브라우저의 크기가 변경될때마다 레이아웃을 비롯한 스타일이 변경되고, 적응형은 이미 내려 받은 소스코드가 해당 레이아웃이므로 변경이 없을텐데요. 그래서 예시로 알려주신 애플 웹 사이트는 반응형 웹이고, 적응형의 예시는 네이버가 아닐까 생각이 들었습니다. 제가 아는 것이 틀렸을수도 있고, 디자인에서는 반응형/적응형에 대한 정의가 조금 다른 것일수도 있다고 생각이 들었고, 무엇보다, 협업을 하면서 정확한 정의로 커뮤니케이션이 이루어져야할 것 같아, 어떻게 보면 강의에서 중요한 개념은 아닐 수 있지만, 이 부분에 대해서 조금 더 설명을 듣고 싶어 질문을 남기게 되었습니다. 감사합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 라이브러리 스왑 질문
안녕하세요.피그라 라이브러리 스왑 관련해서 질문드립니다. A 파일에서 로컬로 마스터컴포넌트 생성해서 사용중인데,마스터 컴포넌트만 파일을 분리하여 B 파일을 생성하고 이를 링크시켜 사용하고자 합니다. A 파일을 퍼블리싱하고 새로운 B 파일에 마스터 컴포넌트를 복사하여 퍼블리싱한 하여 링크시키고라이브러리 스왑한 후 A 파일에서 원본을 삭제하는 방식으로 하고싶은데,라이브러리 스왑을 진행해도 오류메시지는 없느나 스왑이 되지 않고있습니다. 방법이 잘못된 것인지 궁금합니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션4에 있는 4번째 강의 질문(스크롤링)
스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다. 권장<script> /* Smooth Scrolling */ $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); 문제: 이 스크립트 하기 전에는 menu a를 눌렀을 때 잘 이동했는데 해당 스크립트를 추가하면 작동이 되지 않습니다.. 그래서 일단 아래와 같이 html { scroll-behavior: smooth; } 해결했더니 다음 챕터에서 .gototop부분에서 같이 스크립트 작성해야 하는 부분이 있네요. 혹시 잘못된 부분이 있을까요? <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Archecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effect JS& CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!--FONTASOME CDN--> <script src="https://kit.fontawesome.com/c7f55332cf.js" crossorigin="anonymous"></script> </head>$(function(){ /* Trigger*/ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }); $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }); /* Change CSS with Scroll */ $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header').addClass('active') } else { $('header').removeClass('active') } }); /* Smooth Scrolling */ $('.menu a').click(function(e){ e.preventDefault(); $.scrollTo(0, 900); }); });
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
vector 아이콘 유니온시 아이콘이 깨지는 현상이 있어요!
첫번째 사진은 유니온 하기 전두번째 사진은 유니온 후 입니다! 지금 사진에 나와있는건, 벡터가 아예 깨지는 현상이지만어떤건 색깔이 아예 빠지는 것도 있는 등.. 유니온 시 그대로 유니온이 되지 않은 현상이 있는데버그인지 아니면 제가 잘 못 해서 그런건지 궁금합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘 사이즈 변경
안녕하세요! 강의 잘 들으며 실습해보고 있습니다.버튼을 컴포넌트 세트로 만드는 연습을 하고 있는데요.사이즈별 버튼 생성시, 기존 24*24 사이즈의 아이콘에서 버튼의 사이즈에 맞게 아이콘 사이즈도 키워지면 좋을 것 같은데, 아이콘 프로퍼티 변경시 24*24 사이즈로 복귀됩니다. 아이콘 파운데이션을 크기별로 생성하는 것 말고 혹시 어떤 방법을 사용할 수 있는지 여쭙습니다.혹 제가 해당 개념을 강의 중 놓쳤거나 했다면 알려주시면 감사하겠습니다!
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
컬러 베리어블에서 semantic 관련
컬러 베리어블에서 semantic 관련semantic - text 정의 interactive를 따로 구분한 이유는 무엇인가요? 예를들어 웹 사이트의 GNB 텍스트 메뉴(버튼)의 primary, hover, pressed를 설정하기 위함 인가요?그럼 버튼 컴포넌트의 텍스트는 모두 컬러 설정 할때 semantic - text 정의 interactive로 정의 하면 되나요?아래 볼드님 피그마 파일로 스터디 중인데요. 위에 언급햇듯이 GNB의 텍스트 메뉴(버튼) 기본이 블랙컬러, 호버하면 블루 컬러로 변경되는 형태일 경우 컬러 베리어블 정의된 값을 어떻게 적용해야 하나요? 아래 첨부파일 이미지 보면 text>primary는 블랙, text>interactive>primary는 블루로 정의하셨는데...이런 부분은 뭔가 부딪치는 느낌입니다..text>interactive>primary가 필요한가요? interactive에서는 호버, 프레스, 디세이블, 셀렉티드 같은 상태값(states)만 정의 되야 하는거 아닐까 싶은데..의견 부탁드립니다. ? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
SSL설정하는 부분이 안보입니다.
Security 부분에 SSL 설정하는 부분이 안보이는데 바뀐건가요? 설정한적에 없는데 설정이 되어있기는 합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Auto layout 글자가 늘어나도 버튼이 같이 안 늘어나요
이게 될 때도 있고 다른 데에서 해보면 또 안돼서 감을 못 잡겠습니다
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요?
semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요? primitive를 참조하지 않는 이유는 무엇인가요? 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
접근성의 원리의 잘 적용된 사례/아닌 사례
좋은 강의 감사합니다.디자인 원리 중, 접근성의 원리를 잡아 사례를 조사했습니다.잘 적용된 사례 - ZetaZeta는 ai를 활용하여 캐릭터를 생성하거나 생성된 ai 캐릭터와 채팅으로 대화할 수 있는 어플입니다.각 캐릭터들의 설명과 썸네일이 카드형 UI구조로 일관성 있게 구성되어 보기 편합니다. 항목 별로 모아두고, 항목마다 여백이 충분히 있어 구분감이 있습니다.잘 적용되지 않은 사례 - ZAPPY위의 zeta의 서비스와 유사한 ai 캐릭터와 채팅하는 ZAPPY입니다. 우선 채팅을 생성하는 버튼(FAB버튼)이 상단 위, 그것도 맨 오른쪽에 있고 크기도 작아 눈에 띄지 않습니다. 사용자가 이 어플을 사용하는 이유인 'ai캐릭터 생성' 이니 만큼 크기를 키우고, 오른쪽 하단 혹은 중앙에 배치해야 한다고 생각합니다. 또한 채팅 리스트의 컴포넌트 크기가 작아 서로 붙어있는 것처럼 보입니다. 이것을 보고 카카오톡이 떠올랐습니다. 카카오톡 채팅 리스트처럼 너비 여백을 크게 주면, 각 채팅에 구분감이 생겨 혼란을 주지 않을 것 같다는 생각을 하게 되었습니다.
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX와 안좋은 UX 사례
좋은 강의 감사드립니다.- 좋은 UX의 사례: MockupWorld를 꼽았습니다.Mockup World는 유/무료 목업 자료를 제공하는 사이트입니다.전체적인 디자인이 일관되게 통일되어있어 보는데 편했습니다. 대응의 원리를 잘 적용하여 사용자가 자주 사용하는 search bar를 상단 네비게이션과 같이 두는 것이 아니라 따로 하단에 크게 배치하여 사이트에 들어가자마자 사용자가 바로 검색할 수 있게 유도했다 생각합니다.search bar 하단에는 카테고리 분류를 칩 버튼으로 두어 무료 목업이 필요한 의도가 높은 사용자들이 검색 없이도 원하는 아이템을 찾을 수 있게 해두었습니다. (바로 아래에 광고가 있는 것이 아쉽지만) 이는 의도가 낮은 사용자라 할지라도 둘러볼 가능성을 높일 것이라 생각 됩니다.- 나쁜 UX의 사례: 미리캔버스를 꼽았습니다.미리캔버스는 미리 캔버스는 저작권 없이 디자인 분야를 잘 모르는 사람들도 다양한 템플릿을 제작할 수 있는 사이트입니다. 1. 카테고리를 썸네일을 사용해 공간 차지를 많이 하다 보니 어떤 템플릿이 있는지 한 눈에 보기 힘듭니다. 위의 Mockup world처럼 이미지 없이 칩 버튼을 사용해 사용자가 원하는 템플릿을 한번에 찾을 수 있게 도와주면 좋을 것 같다는 생각을 하게 되었습니다.2. 템플릿 사이즈에 일관성이 없습니다. 이미지도 화려해 눈이 피로하다 느꼈습니다. 템플릿에 대한 타이틀과 어떤 템플릿인지의 대한 설명도 없어 사용자는 직접 눌러보며 알아봐야 합니다. 카드형 UI로 만들어 템플릿에 대한 기본정보를 넣으면 어떨까 하는 생각이 들었습니다.3. 화면에서는 안 나와있지만 '이번 주 인기 카드 뉴스', '이번 주 인기 포스터' 가 하단에 있습니다. 주 단위로 바뀌고, 사용자가 자주 찾는 인기 있는 목록이라면 추천 목록처럼 상단에 있어야 더 적합하다고 생각합니다.강의를 듣기 전에는 막연하게 잘 사용하면 그게 좋은 UX가 아닌가? 라는 생각을 했지만, 강의를 들은 후 UX 디자인의 원리를 통해 어떤 것이 더 사용자에게 사랑 받는 디자인인지 과제를 통해 감을 잡을 수 있었습니다. 좋은 강의 감사드리며 남은 강의도 열심히 수강 하겠습니다. 감사합니다.
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
Part/MenuItems 컴포넌트 세트 만들때 badge 문제
다양한 형태의 사이드 네비게이션(Side Navigation) - 파트2Part/MenuItems 컴포넌트 세트 만들때 badge값을 하나만 변경해도 Full, Icon only, Icon & label 모두 변경됩니다. Full만 Number로 왜 안될까요??? 그리고 강의 너무 감사합니다. 한국어로 된 디자인 시스템 강의도 잘 없지만, 반복해서 연습해볼 수 있게 강의를 구성해주셔서 쉽게 잘 따라갈 수 있어요. 케이스별 실무 팁도 자연스럽게 배울 수 있고요. 수강생들에겐 참 알찬 강의인데, 강의 제작하시는 과정이 쉽지 않으셨을 것 같고.. 여러모로 정말 많이 배웁니다, 볼드님 :)
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
기술적 준수사항 중 탭키 이동 건
별도로 지정하지않은 상호작용이 필요한 모든 콘텐츠는 임시링크를 적용하고 탭키로 이동 선택할수 있어야 한다라는 기술적 준수사항에, 푸터의 패밀리사이트 항목들도 해당되나요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
핸드오프 링크와 그냥 공유 링크와 차이점을 모르겠어요
Share공유를 눌러서 개발자에게 보낸다고 했는데 그 전에 있던 강의 중에서 공유하는 방법이 똑같은데 그냥 핸드오브링크는 그냥 공유하는 방법과 똑같다고 보면 될까요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
Value 값을 대문자로 꼭해야하나요?
Value 값을 대문자로 꼭 표시하지 않아도 괜찮을까요? 개발자와 네이밍에 관련해 카멜표기를 하자고 했었는데 컴포넌트 또한 카멜표기로 해야하는지 궁금합니다
