정답 C.UX는 제품 자체에 대한 사용자의 경험만을 말한다. UX는 제품 자체에 대한 사용자의 경험만을 말한다는 설명은 옳지 않습니다. UX는 제품 또는 서비스를 사용하는 사용자가 느끼는 전반적인 경험을 의미하며, 제품 자체 뿐만 아니라 사용자가 상호 작용하는 모든 측면을 고려합니다. UX는 사용자의 니즈와 요구에 맞추어 제품을 설계하고, 사용자가 쉽게 사용할 수 있도록 인터페이스를 개발하는 등의 과정을 포함합니다. 따라서 C번 설명이 옳지 않습니다. 제품 그 자체뿐만 아니라, 제품과 관련된 모든 요소가 UX에 영향을 줍니다. 제품을 사용해보기 이전에 제품의 정보를 접하게 되는 홍보 단계, 그리고 제품을 사용해본 이후에 접하게 되는 사후 관리 단계가 제품 그 자체 이외에 UX에 영향을 주는 대표적인 예시입니다.
D.나쁜 UI는나쁜 UX를유발한다.
2. 다음 UI 디자인 패턴에 대한 설명으로 옳지 않은 것을 고르세요.
A.GNB는 어느 페이지에서 봐도 항상 동일한 위치에 있어야 한다. B.해당 예시에서 GNB는 탭으로 구현되었다. C.LNB의 구성은 페이지에 따라 달라질 수 있다. D.LNB는 꼭 드롭다운으로 구현해야 한다.
정답 D.LNB는 꼭 드롭다운으로 구현해야 한다. LNB는 꼭 드롭다운으로 구현해야 한다는 설명이 옳지 않습니다. LNB는 웹 페이지의 좌측에 위치하는 메뉴를 의미하며, 사용자가 원하는 정보를 찾을 수 있도록 페이지 구조를 제공합니다. LNB는 드롭다운 메뉴 외에도 사이드바, 아이콘 메뉴, 햄버거 메뉴 등 다양한 형태로 구현할 수 있습니다. 따라서 D번 설명이 옳지 않습니다.
GNB에종속된 LNB는드롭다운으로구현되는경우가많지만, 꼭그래야하는것은아닙니다. 필요에따라다른방식으로구현해도흐름상자연스럽다면문제가없습니다. 또한, 특정페이지에서만보이는 LNB는드롭다운이아닌페이지한쪽에고정되어있는경우가많습니다. 따라서, LNB는꼭드롭다운으로구현해야하는요소가아닙니다.
3. 다음 중 컬럼 그리드 시스템에 대한 설명으로 옳지 않은 것을 고르세요.
A.Margin, Column, Gutter의 세 가지 요소로 구성된다. B.Margin은 고정값으로 사용해야 한다. C.Column은 콘텐츠가 차지하게 될 영역이다. D.Gutter는 컬럼 너비보다 크게 설정하지 않는 것이 좋다.
정답 B.Margin은 고정값으로 사용해야 한다. Margin은 고정값으로 사용해야 한다는 설명이 옳지 않습니다. Margin은 뷰포트의 크기에 따라 유동적으로 조정되어야 합니다. Margin이 고정값으로 설정되면 뷰포트의 크기가 변경되었을 때 레이아웃이 깨질 수 있기 때문입니다. 따라서 B번 설명이 옳지 않습니다.
C.Column은 콘텐츠가 차지하게 될 영역이다.
D.Gutter는컬럼너비보다크게설정하지않는것이좋다.
4. 다음 중 피터 모빌의 벌집 모형이 제시한 UX의 7가지 요소에 대한 설명으로 옳은 것을 고르세요.
A.유용성은 직관적이고 사용하기 쉬운 서비스인가에 관한 요소다. B.사용성은 서비스가 기능을 제공하고 있는가에 관한 요소다. C.검색 가능성은 사용자가 검색을 통해 해당 서비스를 찾을 수 있는가에 관한 요소다. D.가치성은 모든 요소를 총합하여 사용자에게 가치를 제공하고 있는가에 관한 요소다.
C.검색 가능성은 사용자가 검색을 통해 해당 서비스를 찾을 수 있는가에 관한 요소다. 정답 D.가치성은 모든 요소를 총합하여 사용자에게 가치를 제공하고 있는가에 관한 요소다. 제품이나 서비스가 사용자에게 얼마나 큰 가치를 제공하고 있는지, 문제를 얼마나 잘 해결해주고 있는지 등을 평가하는 요소입니다.
유용성은 서비스가 기능을 제공하고 있는가에 관한 요소입니다. 서비스 목적에 맞는 기능은 물론, 목적에 부합하지 않더라고 디자인 등의 심미적 기능도 포함합니다.
사용성은 직관적이고 사용하기 쉬운 서비스인가에 관한 요소입니다. 기능이 잘 작동되는 것을 넘어서, 사용자가 쉽게 사용할 수 있어야 좋은 UX를 제공할 수 있습니다.
5. 다음 예시가 피터 모빌의 벌집 모형이 제시한 UX의 7가지 요소 중 충족시키지 못한 요소를 모두 고르세요.
오랜만에 배달을 시켜먹으려고 하는 박해커씨. 평소 즐겨먹던 프랜차이즈가 출시한 모바일 애플리케이션을 사용해서 주문하려고 하는데요. 애플리케이션의 UI가 영 생소하고 복잡해서 한참 후에 주문에 성공합니다. 아마도 출시 기념 할인 행사가 아니었으면 중간에 포기했을 것 같습니다. 며칠 후 박해커씨의 어머니도 할인을 받기 위해 애플리케이션으로 주문하려고 하시는데요. 이번에는 글씨가 너무 작아서 결국 주문을 포기하고 마십니다.
정답 D.접근성 애플리케이션의 UI가 생소하고 복잡해서 사용자가 주문에 성공하는 데 한참 걸렸다는 것은 사용성 측면에서 충족시키지 못한 부분입니다. 또한, 주문 시 글씨가 너무 작아서 사용자가 주문을 포기한 것은 접근성 측면에서 충족시키지 못한 부분입니다.
매력성과유용성은문제상황에서언급되지않았으므로, 해당 2가지요소에대해서는충족여부를판단할수없습니다.
6. 다음 중 user flow 다이어그램에 대해 옳지 않은 설명을 고르세요.
A.기본적으로 직사각형, 다이아몬드, 화살표를 사용해서 작성한다. B.사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있다. C.기획 단계에 그려보는 것이기 때문에, 비용에는 크게 영향을 주지 않는다. D.Miro, FigJam 등의 툴을 사용하면 편리하게 그릴 수 있다.
정답 C.기획 단계에 그려보는 것이기 때문에, 비용에는 크게 영향을 주지 않는다. 기획 단계에 그려보는 것이기 때문에, 비용에는 크게 영향을 주지 않는다는 설명이 옳지 않습니다. User flow 다이어그램은 제품이나 서비스의 기획 및 디자인 단계에서 중요한 작업 중 하나이며, 디자인, 개발, 마케팅 등의 여러 분야에서 사용되므로 비용과 시간이 소요될 수 있습니다.
D.Miro, FigJam 등의툴을사용하면편리하게그릴수있다.
7. 다음 user flow 다이어그램에서 찾을 수 있는 사용자 흐름상의 문제를 모두 고르세요.
A.로그인을 해야만 게시판에 접근할 수 있다. B.게시글을 확인할 수 없다 C.글 작성을 취소할 수 없다. D.업로드 후 게시판으로 이동한다.
8. 다음 글을 읽고, 제이콥 닐슨의 10가지 사용성 평가 기준 중 어느 항목을 고려하지 못해 발생한 상황인지 고르세요.
코드스테이츠 수강생 김코딩씨는 매일 자신의 블로그에 TIL을 작성합니다. 오늘은 직접 그린 그림까지 넣어가며 특히 공을 들여 작성했습니다. 뿌듯한 마음으로 자신이 작성한 TIL을 읽어보는 김코딩씨. 그러다 발견한 오타를 고치려고 수정하기 버튼을 누르려다가 그만 손이 미끄러져 삭제하기 버튼을 눌러버리고, 그렇게 혼신의 힘을 다해 작성한 TIL이 순식간에 삭제되고 맙니다.
A.일관성 및 표준 (Consistency and standards)
B.오류 방지 (Error prevention)
C.사용의 유연성과 효율성 (Flexibility and efficiency of use)
D.오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
정답 B.오류 방지 (Error prevention) 오타 수정을 원했지만, 실수로 삭제 버튼을 눌러 TIL을 삭제해 버리는 상황에서는 오류 방지 (Error prevention) 기준이 충족되지 않았습니다. 이를 방지하기 위해선 삭제 버튼과 수정 버튼의 위치를 다르게 배치하거나, 삭제를 누르기 전에 경고 메시지를 띄워주는 등의 방법으로 사용자가 실수로 오작동하는 것을 방지해야 합니다.
C.사용의 유연성과 효율성 (Flexibility and efficiency of use)
D.오류의인식, 진단, 복구를지원 (Help users recognize, diagnose, and recover from errors)
9. 다음 글을 읽고, 제이콥 닐슨의 10가지 사용성 평가 기준 중 어느 항목을 잘 충족하고 있는 상황인지 고르세요.
순간의 실수로 TIL을 삭제해버린 김코딩씨. 게시글 목록에서 방금 작성했던 글이 없어져버린 현실을 도저히 믿고싶지 않습니다. 절망에 빠지려던 찰나, 화면에 작은 모달창이 하나 뜹니다.
' 게시글이 삭제되었습니다. [ 실행 취소 ] '
김코딩씨는 모달창이 없어질세라 재빨리 실행 취소 버튼을 누릅니다. 그러자 게시글 목록에 실수로 삭제했던 게시글이 다시 생깁니다. 허겁지겁 게시글에 들어가 작성했던 내용도 그대로 있는 것을 확인하고서야 안도의 한숨을 내쉬는 김코딩씨. 정말 다행입니다.
A. 시스템 상태의 가시성 (Visibility of system status) B. 사용자 제어 및 자유 (User control and freedom) C. 기억보다는 직관 (Recognition rather than recall) D. 도움말 및 설명 문서 (Help and documentation)
정답 C. 3 Figma에서 상태를 갖는 하나의 컴포넌트를 만들 때, 상단 패널에서 "Component" 버튼을 클릭하면, "Create Component" 옵션으로 넘어갑니다. 그리고 "Variant" 버튼을 클릭하여 상태가 있는 버튼을 만들 수 있습니다. 이때, "New State" 버튼을 누르면 새로운 상태를 추가할 수 있습니다.
