■ 질문 남기실 때 꼭! 참고해주세요.마지막이론부분에 필수함수종류에 마우스엔터 마우스리버라고했는데. 마우스오버,마우스아웃으로도 적어도 별다른문제가 생길까요..¿¿- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.

 제목: 인프런 내 수강 중 강의에 대한 질문을 올리는 절차 및 환경에 대한 불편함배경: 사용자(나)는 강의 종료 후 하루 뒤에 과제(or 질문)에 대한 생각이 떠올랐음.과제를 작성하기 위해 거쳐야할 버튼이 3개였으며, 텍스트 작성하다 실수로 브라우저 뒤로가기 버튼을 했고, 다시 돌아왔으나 내용이 날라가 다시 작성함.영향 예측: 강의 내 과제(or 질문) 참여 활성도가 낮아질 것으로 예상됨.학생들이 직접 올리는 과제(or 질문)은 "참여율"을 판단하는 한 가지 지표로 보임.해당 지표를 눈 여겨 봐야할 이유는, 장기적 관점에서 사용자의 탈퇴율을 낮추는 회사의 핵심 목표와도 밀접한 영향이 있다고 판단됨.개선이 필요한 내용: 1. 강의를 수강하고 있는 사용자의 경우, 강의별 질문 올리기에 대한 접속 절차 개선(아래 스크린샷은 현재 접속 절차임)2. 텍스트 입력 환경 개선 필요입력 중 내용 자동 저장 기능 및 사진 이미지 조정 기능이 필요과제를 하며 느낀 점:디자이너가 어떤 문제를 발견해, 이를 해결해야겠다고 생각했더라도다른 팀원들 (기획자 및 개발자, CEO 등등)을 설득해 공감을 이끌어내는 것이 중요할 것 같다는 생각이 들었습니다. 또한 문제 발견 및 해결을 위한 리서치 과정의 관점에 대해서도 생각해보았습니다. 그 문제를 정당화시키는 관점이 아닌, 객관적으로 보는 자세가 역시 중요하며, 이를 계속 고수하는 것이 필요하겠다고 생각했습니다.질문 사항:사실 과제를 하며, 제가 느낀 불편한 점이 정말 맞는가? 내가 제기한 불편함이 소수의 사용자가 느끼는 불편함이면?과 같은 의문이 들었어요. 또 한가지는 강렬하게 들었던 생각은원래 기능을 잘 몰라 그런 것이 아닐까? 에 대한 것입니다.이런 생각이 들면 어떻게 해야 하는 것일까요?파악하지 못한 기능이 없는지 더 적극적인 자세로 임해 기능을 찾아봐야 하는 것인지, 선생님의 생각이 궁금해 질문 드립니다.참고로 좋은 UX 사례는 다시 정리해 글 올리도록 하겠습니다. 읽어주셔서 감사합니다! 앗, 제가 과제의 의도를 잘 이해하지 못한 것 같습니다."디자인 원리를 토대로" 라고 이야기 해 주셨는데, 그저 제가 느낀 불편감을 토대로 입력했던 것 같습니다. 디자인 원리에 근거해 다시 다른 주제로 과제올려보도록 할게요! 감사합니다 :)

안좋은 UX 사례로 배달앱 요기요 탈퇴 시스템을 선정했습니다.사용자가 회원탈퇴를 하기위해 앱 상에서 탈퇴하기를 찾아들어간 상황이지만. 계속 이용하기 버튼이 존재하며탈퇴하기보단 계속 이용하기를 강조하는 버튼과 색상을 사용함으로서. 요기요측 에서는 사용자 탈퇴를 일부 막을수 있겠지만,사용자에게 혼동을 주는 UX이라 생각합니다.오히려 사용자가 계속 이용하기를 실수로 눌렀다 한들. 브랜드 이미지에대한 반감만 생길뿐이라 생각되는 UX입니다.일반적으로 사용자가 생각하는 탈퇴시스템의 mental model과 너무 상반되게 UX를 디자인한것같습니다.사용자의 문제해결, 편의, 사용자 관점에서 디자인한 UX가 아닌. 요기요 브랜드측 의도에 따른 디자인이라 생각됩니다.그리고 선택지를 체크 해야 탈퇴하기 버튼이 활성화되어 행동유도 디자인 또한 부족하다 생각됩니다. 좋은 UX 사례로 애플 소유의 노래찾는 앱 Shazam. 입니다.이앱을 처음접하는 사용자라도 어떻게하면 노래를 찾을수있는지 행동유도가 잘 디자인되어있다고 생각합니다.또한 대응의 원리또한 잘 적응되어있다고 생각합니다.애플 소유의 앱이라노래찾는 기능과 연관지어 애플뮤직을 이용하라는 광고성 문구를 충분히 넣을 가능성이 있지만,그렇지 않고 사용자의 관점에서 잘디자인한것같습니다. 선생님 덕분에 재미있게 UXUI에 대하여 재밌게 잘이해하며 공부하고있습니다.한가지 질문이있습니다.UX의 좋은 원리에서 행동유도와 대응의원리가 유사하다고 이해가 되는데 정확히 분명하게 차이를 스스로 설명하기 어렵습니다. 차이점이 무엇일까요? 

하단 Tab 바에 들어가는 아이콘 사이즈를 줄였을 때 아이콘 굵기가 굵어지면서 아이콘 모양이 달라지는데요아이콘 모양을 변형시키지 않으면서 사이즈를 줄일 수 있는 방법이 있나요?

제품 상세 페이지 디자인 관련색상 컴포넌트 설정 시 local styles- color style 과 local variables 차이점이 궁금합니다.색상 컴포넌트를 반영했는데 local styles 과 local variables로 구분해서 저장되었습니다.

선생님 안녕하세요! 가설을 세우고 (예를 들어 이 서비스의 이 기능을 많이 사용할 것이다.), 이에 대한 검증에 필요한 방법이 사용자 리서치라고 하셨는데요. 혹여나 해당 기능이 실제로 많이 안쓰인다면, 즉 가설을 잘못 정해서 검증에 실패했다면 어떻게 하나요? 이런 경우 디자이너의 신뢰도도 떨어질 것 같아 왠지 좀 두려운(?) 부분인 것 같습니다. 현업에서 이러한 사례가 있었는지도 궁금합니다!

공지사항 갤러리와 바로가기 제작이 생략 되어있어서다른 실전 제작 강의를 참고해서 혼자 만들어보았는데, 공지사항과 갤러리 사이 간격을 주고싶은데 방법을 모르겠습니다 ㅠ그리고 바로가기 메뉴와 갤러리 메뉴 사이에도간격을 주는 방법을 모르겠는데 어떻게 하면 될까요?지금 제가 작성한 html과 css에 어떤걸 추가하면 될까요 ㅠㅠ?

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 원래 위처럼 document.querySelector("#scroll-section-0 .main-message.a"),.main-message.a 와 같이 클래스는 붙여서 작성해야하나요? 띄워서 작성하니까 안찾아지던데아이디와 클래스는 다른 속성이라서 띄워주고, 클래스끼리는 붙여서 작성해야하는 건가요아니면main-message클래스랑 a클래스는 형제클래스니까 부모 자식의 관계를 뜻할 때만 띄워주는 건가요?

종합 실전예제3. 이커머스 앱 UI 디자인- 오픈소스 템플릿을 활용한 UI 디자인 기초작업 강의에서 질문드립니다.하단 탭바를 복사해서 왔을 때 Star 아이콘 프레임 수치들이 고정값으로 수정할 수 없게 되어있습니다.Component 가 제대로 삭제되지 않는 것 같습니다.강의에서 알려주신대로 복사하고 해당 Component를 삭제해도 Go to main component 누르면 오픈소스 파일로 넘어갑니다.

웹 제작 에디터(아임웹)에서 해당 기능을 사용하려고 합니다. 수업에서는 파일을 불러오는데.. 웹 에디터에서는 그런 기능을 지원하지 않아 전체를 복사해서 붙여 넣었는데 오류가 발생합니다.외부 기능을 쓰는 web-animations 기능은 cdn으로 적용이 잘 되었습니다.혹시 scroll-timeline.js 내용도 cdn으로 불러올 수 있는 방법이 있을까요??검색해도 찾을 수가 없어 문의드립니다. ^^a

넓이를 높이를 전부 고정값으로만 사용하게 되는데 혹시 해당 부분은 100% 로 채워서는 적용이 어려울까요?모바일까지 고려하게되면 퍼센트로 작업해야할것같은데 뭔가 넓이값이 달라지게 되면 중간중간 요소들 컨트롤이 아에 어려운 구조가 될까요?

섹션11에서 사용하시는 피그마 예제파일은 어디서 다운받을 수 있나요?

■ 질문 남기실 때 꼭! 참고해주세요.강사님 저는 왜 확장버튼 누르면 화면처럼 안뜰까요검색창에 알파벳치면 확장을 가져오는 동안 오류가 발생했습니다.xhr failed 라는 창이 뜨고 엑스 표시로 검색을 해도 강사님처럼 검색이안됩니다 ㅠㅠ뭐가 잘못일까요 ...???

유튜브에도 웹디기능사 합격하기 영상이있는데 인프런강의랑 머가다른지요...? 인프런보다 짧아보이기는 한데 정확히 뭐가 다른지 선생님께 여쭤보고싶어서요 ,,,

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A타입</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">sub-menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">sub-menu2</a> <div class="sub-menu"> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu2</a> </div> </li> <li> <a href="#none">sub-menu3</a> <div class="sub-menu"> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu3</a> </div> </li> <li> <a href="#none">sub-menu4</a> <div class="sub-menu"> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt=""></a> <a href="#none"><img src="images/slide-02.jpg" alt=""></a> <a href="#none"><img src="images/slide-03.jpg" alt=""></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> <a href="#none"><em>공지사항공지사항공지사항공지사항공지사항</em> <b>2023.05.05</b></a> </div> </div> </div> <div class="gallery"> <div class="btn"> 갤러리 </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt=""></a> <a href="#none"><img src="images/gallery-02.jpg" alt=""></a> <a href="#none"><img src="images/gallery-03.jpg" alt=""></a> </div> </div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. <br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, <br> 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br><br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.<br> </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { color: #000; font-size:15px; background-color: #fff; margin:0; } a { text-decoration: none; color:inherit; } .container {width :1200px; border:1px solid #000; margin:auto;} header {height:100px; border:1px solid red; position:relative;} .slide {height:300px;} .items {height:250px;} footer {height:100px;} /* header */ header > div { height:100px; } .header-logo { border:1px solid #000; width:200px; float:left; } .navi { /* border:1px solid #000; */ width:600px; float:right; margin-right:20px; margin-top:55px; } .menu { } .menu li { list-style: none; float:left; width:25%; } .menu li > a { display: block; padding:5px; background-color: #fff; text-align: center; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; } .sub-menu a { display:block; padding:5px; background-color: #fff; text-align: center; } .sub-menu a:hover { background-color: #000; color:#fff; } /* slide */ .slide { position:relative; overflow:hidden; } .slide > div { font-size: 0; width:3600px; position:absolute; top:0; left:0; float: left; animation:slide 10s linear infinite; } @keyframes slide { 0% {left:0;} 30% {left:0;} 35% {left:-1200px;} 65% {left:-1200px;} 70% {left:-2400px;} 95% {left:-2400px;} 100% {left:0;} } /* items */ .items > div { height:250px; float:left; box-sizing: border-box; } .news { width:400px; border:1px solid #000; } .btn { display: inline-block; padding:5px; border: 1px solid #000; width:100px; text-align: center; } .tab1 {} .tab1 a {display:block; padding:5px;} .tab1 a em { width:70%; float:left; font-style:normal; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tab1 a b { width:30%; float:right; } .gallery { width:400px; border:1px solid red; } .tab2 { text-align: center; } .tab2 a {} .tab2 img { width:120px; } .shortcut { width:400px; border:1px solid green; } /* footer */ footer > div { height:100px; float:left; box-sizing:border-box; } .footer-logo { width:200px; background-color: #000; } .copyright { width:800px; background-color: aqua; } .sns { width:200px; background-color: green; } /* modal */ .modal{ position:absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.5); width:100%; height:100%; display: none; } .modal-content { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: #fff; height:350px; } .modal-content a { display: block; padding:20px; float:right; border:1px solid #000; } 이미지슬라이드가 1200*300 이 아니라정사각형으로 나오는데 원인을 모르겠어서 문의합니다^^;;

강사님의 강의를 보면서 타 스타트업 과제와 협업한 영어 포트폴리오가 있습니다. 혹시 이메일을 보내면 귀한 피드백을 제공해 주실지요? :)

독학으로 웹디기능사실기 유튜브보고 공부하고 덜공부한상태로보러갔다가 왔는데 요새는 비주얼스튜디오코드로 시험많이보고 브라켓이 잘안깔려있다는 시험장도있다고 해서 그러는데 이강의도 브라켓으로 하는데 비주얼스튜디오로 연습해도 문제없을까요 ?

E-2 역사 박물관로고 만들기에서 심벌과 로고명이 포함된 완전한 형태로 디자인한다. 라고 있습니다.그냥 텍스트로 역사박물관이라고 제작하면 감점이 많이 되나요? 

혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다

■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.안녕하세요 강사님~제공해준 수험자 이미지에서 슬라이드 이미지 포토샵 연습하고있는데요..! 새 파일을 만들어서 그 위에 덮어씌워서 크기를 맞추는걸로 아는데 이미지가 짤려도 상관없는건가요 ?? 안짤리게 맞추려다보니까 찌그러져서요...아래 이미지 처럼 짤려도되는걸까요 ?? 아니면 이런식으로 해야하나요 ??