멘토님이 이력서를 작성할 때 혹은 프로젝트를 진행할 때 참고하라고 보내주신 UX·UI 레벨 테스트. 예시를 함께 줘서 알고 있던 부분도 더 잘 알 수 있게 되었고, 미처 생각지 못한 부분들도 있었어서 까먹지 않도록 정리하는 글. (결과는 이렇게 나왔다) 긴 글은 왼쪽 정렬이 읽기 편하다 다음 글줄의 시작점을 찾기 쉽게 하기 위해, 긴 글의 경우에는 시작점이 일정하게 갖추어져있는 왼쪽 정렬이 읽기 편하다. 중앙 정렬의 경우 글줄의 시작점이 매번 달라지기 때문에 쉽게 피로

와이어프레임(wireframe) 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 제작 피델리티(fidelity) 레벨 와이어프레임의 품질 수준 Low Fidelity Wireframe(Lo-Fi Wireframe) 손으로 빠르게 그린 수준 아이디어를 구체화 시키며 큰 그림을 잡을 때 사용 Middle Fidelity Wireframe(Mid-Fi Wireframe) Lo-Fi 와이어프레임으로 아이디어가 어느정도 구체화 되고 확정 된 후 보기 좋게 다듬은 수준 와이어프레임을 봤을 때 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있음 Hight Fidelity Wireframe(Hi-Fi Wireframe) 완성본에 가깝게 작성한 것 목업에 가까운 형태이며, 작성하는데 시간이 많이 걸리고 수정이 어려운 등 와이어프레임의 목적과 맞지 않아 여기까지 제작하는 경우는 많지 않음 프로토타입(prototype) 실제

UI User Interface, 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템 (화면상의 그래픽 요소 뿐 아니라 키보드, 마우스 등의 물리적인 요소도 포함) GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 UI디자인 패턴 모달(Modal) 화면 위에 오버레이 되는 창. 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋음. 토글(Toggle) On/Off 등 두 개의 옵션이 있을 때 사용. (여러 개의 옵션이 있을 때도 사용할 수 있지만, 옵션의 개수가 많다면 탭을 더 선호함) 사용자가 토글의 상태를 직관적으로 알 수 있게 하는 것이 좋음. 탭(Tab) 콘텐츠를 분리해서 보여주고 싶을 때 사용. 각 섹션의 이름이 너무 길지 않고, 구분이 명확하며, 현재 어떤 섹션을 보고 있는지 표시