관점 측면 : 행동유도성, 대응의 원리좋은 UX/UI세줄일기 : 사용자가 어디에 사진을 넣어야하는지, 어디에 어떤 내용을 적어야하는지 정확하게 알려줌 나쁜 UX/UI개인작업 어플 : 깔끔한 디자인에만 치우쳐 사용자가 어디를 어떻게 조작해야하는지 편의성이 떨어짐.(실제로 테스트 결과 불폄함을 호소하는 사용자들 있었음)+화면은 추후에 피드백을 받고 글씨를 넣은 모습입니다

주제: 유튜브 - 재생 목록 내 영상 시청 화면의 UX/UI 분석분석 배경: 재생 목록 요소가 같이 보이게끔 유튜브 영상을 시청한 적이 있습니다. 소소하지만 현 상태를 나타내는 UI 아이콘이 눈에 띄었고, (우측 재생 목록 요소 내, 재생 중 애니메이션과 좋아요 버튼이 표시됨) 사용자를 위한 세심한 배려로써 느껴져 좋은 경험을 받았던 것 같습니다. 또한 수업에서 배운 원리들도 몇 가지 보여 분석하면 좋겠다고 생각했습니다.좋은 UX/UI 사례1. 일관적인 재생 목록: 재생 목록 내 UI 요소들이 동일하게 디자인 되어 있습니다. 사용자는 재생 목록을 스크롤하여 올리거나 내리면서 이전/이후 목록 확인이 가능한 것을 쉽게 예측할 수 있습니다. 2. 재생 영상과 재생 목록 별 유사성의 원리:왼쪽의 경우 현재 재생중 영상이 전체 화면의 80% 채웠고, 나머지 부분은 재생목록으로 표시되어 있습니다. 화면상의 비율뿐 아니라 각각 제공되는 기능이 다르기에 UI상에서도 차이가 보입니다.사용자는 재생 영상 혹은 재생 목록 관련 영역을 구분하여 필요한 기능을 찾아갈 수 있습니다.3. 현재 상태를 알려주는 UI:왼쪽 재생 영상이 실제로 재생중이라면 우측 재생목록에서는 재생중 애니메이션이, 좋아요 버튼을 눌렀다면 해당 아이콘이 표시됩니다. 사용자는 현 영상 상태를 UI 상에서 확인 가능합니다. 

사진처럼 링크 된거처럼 보이는데 비주얼코드에서는 #none 해놓으면 안먹히는거같은데 ,,아닌가요 ? 저런경우에는text-decoration:none 을 해야할까요 ? ㅠ

"UX리서처" 직업 설명 중 사용자 리서치에 대한 룰을 만들거나 직접하는 역할을 수행한다고 나와있는데, 혹시 룰이라면 어떤 것을 말하는 걸까요?! 사례를 들어 설명해주실 수 있을까요?! (회사에서는 어떻게 룰을 정의하는지 궁금해서 여쭤봅니다 :))

별개의 질문인데, 전혀 몰라서 여기에 질문남겨봐요,,ㅠ회사에서 피그마 쓸지 말지를 WPF환경에서 호환되냐 안되냐고 결정하신다는데,, 전혀 문외한이라 여기에 여쭤봅니다,,,

섹션2 번째 내용입니다.해당과정을 리액트에서 적용하면서 따라가고 있습니다. 돔접근에 대해서는 useRef를 사용해서 잘 따라가고 있는데, scrollSection1 의 부분에서 scrollSection1Msg1~scrollSection1Msg4 의 opacity 부분에서 아래와 같이 작업했습니다. 그런데 화면에 잔상이 남습니다. 완전히 opacity=0 가 되지 않는 것처럼 희미하게 글자들이 중첩되며 남아 있습니다. (맥북 M1) values : { selectionMsgA_opacity : [0 ,1, {start: 0.1, end:0.2}], selectionMsgA_opacity_out : [1 ,0, {start: 0.25, end:0.3}], else if (scrollRatio <= 0.3) { obj.Section1Msg1.current.style.opacity = calcValues(values.selectionMsgA_opacity_out, currentYoffset) obj.Section1Msg1.current.style.transform = `translateY(${ calcValues(values.selectionMsgA_translateY_out, currentYoffset)}%)`

■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. 첨부와같이 나오는데 설치가 안되어도 하나씩 입력하면 되기는 하지만 설치가 안되어도 상관없겠죠?아니면 대체하는 익스텐션이 있는걸까요?

코딩웍스 교수님 안녕하세요!필기시험 합격후 실기 시험 대비하여 수업을 듣고 있는 수강생입니다.저는,섹션 00. 부터 시작해서 섹션01.섹션02.를 수강하고 있는데요.수강하기 전에 미리 섹션13.에 있는 핵심이론 PDF교재를출력해서 준비한 후에 섹션02.수업을 듣고있습니다.그런데 강의 순서와 교재 순서도 맞지 않고,,HTML교재에는 이미지맵, 유튜브다운로드, 멀티미디어, 표만들기, 폼 요소등 더 많은 내용이 실려있는데강의목록에는 보이지않고... 다루지 않는 것 같아서의문이 생겨 질문 남깁니다.교재에는 있지만 강의목록에는 없는 부분들은혼자서 독학해야되는 부분인건가요? 비전공자라서 아예 처음이라 이 강의를 큰맘먹고 결제 후 차근차근 따라가며 실기준비를 하고자했는데강의에서는 다 다루지않아서....어떻게 준비를 해야되는건지 막막합니다. 그리고수업순서는 섹션00부터 차례대로 수강해나가면서실습을 같이 따라하면서 준비하면 실기 합격과 가까워지는 것은 맞는걸까요?? 바쁘신 와중에 질문 읽어주셔서 감사합니다.답변 부탁드립니다. 감사합니다.

웹디자인실기를 보려고하는데요 강의의 코딩하는것들을 여러 유형별로 암기하는건가요?제작하는 과정을 외워질때까지 몇번이고 만들어보면 될까요?

푸터부분에 일자로 되어서 강의처럼 안되는데 뭐가문제일까요 ,,선생님이 하신대로따라했는데 계속 저부분이 안되서 문의드립니다 ...ㅠㅠㅠㅠ

프러그인 - 아이콘에서 가져온 아이콘을 수정할 수 있는지 궁금합니다.

강의 후기 작성은 어디에 하면 될까요??

항상 친절하게 답변해주셔서 감사합니다.프레임을 만들고 프로토타입을 실행해서 보는데 특정 아이콘이 안 보이거나 특정아이콘이 화면에 고정되어서 보이는(아래 캡처사진, 돋보기 아이콘) 등의 문제가 생겼습니다.이럴경우, 어떻게 해결해야 하는지 모르겠습니다.

선생님 안녕하세요!사용자에게 다음 단계의 행동을 유도할 수 있는 것을 CTA라 이해했고, 이와 관련된 테스트도 20 ~ 30%로 한다고 하셨습니다. 혹시 회사에서 진행하셨던 테스트의 과정 및 결론이 어떻게 도출되는지 여쭤봐도 될까요?!(보통 내부 팀원 대상으로 테스트를 하여 정성적인 방식인 1:1 or n:1 인터뷰를 하시는걸까요?!)

■ 질문 남기실 때 꼭! 참고해주세요.마지막이론부분에 필수함수종류에 마우스엔터 마우스리버라고했는데. 마우스오버,마우스아웃으로도 적어도 별다른문제가 생길까요..¿¿- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- 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로 구분해서 저장되었습니다.

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