[정보처리기사 실기 이론정리4] 화면 설계, UI

1. UI(User Interfrace) : 컴퓨터, 웹 사이트 등의 정보 기기와 사용자간의 상호작용을 가능하게 하는 매개체, UI의 핵심은 사용자가 쉽고 편리하게 이용할 수 있는 직관적이고 보편적인 디자인 

2. UX(User eXprerience) : 사용자가 UI를 통해 경험하는 모든 것을 포함, 단순히 제품의 기능적인 측면을 넘어서 사용자의 감정, 인식, 반응 등 포괄적인 경험을 고려

3. UI 유형

• CLI(Command Line Interface) : 사용자가 키보드를 사용하여 명령어를 입력해 컴퓨터를 조작
• GUI(Graphical User Interface) : 그래픽과 텍스트 기반으로, 사용자의 입력이 마우스 등을 통해 이루어짐
• NUI(Natural User Interface) : 특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식해 정보 제공
• OUI(Organic User Interface) : 현실의 모든 것이 입력 및 출력 장치로 사용될 수 있는 인터페이스
• VUI(Voice User Interface) : 음성인식을 기반으로 한 사용자 인터페이스
• ARU(Augmented Reality User Interface) : 증강 현실 기술을 활용한 사용자 인터페이스

4. UI 설계 원칙 : 직관성, 유효성, 학습성, 유연성

5. UI 설계 도구

• 와이어프레임 : 웹 사이트나 앱의 기본 구조와 레이아웃을 나타내는 초기 설계 도구
• 스토리보드 : 서비스나 제품의 시나리오 흐름을 시각적으로 나타내는 도구
• 프로토타입 : 실제 서비스와 유사하게 동작하는 모델
• 목업 : 와이어프레임보다 구체적이며, 실제 화면과 유사한 정적 디자인
• 유스케이스 : 사용자 관점에서 시스템이 어떻게 동작하는지 나타내는 도구

6. 감성공학 : 인간의 감성을 물리적 설계 요소로 번역하고 구현하는 기술

7. 레이아웃 : 특정 공간 내에서 여러 구성요소를 보기 좋고 효과적으로 배치

8. HTML5 : 월드와이드웹을 통해 정보를 표현하기 위한 마크업 언어의 5번째 버전, 웹 페이지의 기본 구조 담당

9. CSS :  HTML과 함께 웹 페이지를 구성, 웹 문서의 디자인 요소를 담당

10. JavaScript :

• 모질라 재단에 의해 개발된 프로토타입 기반의 스크립트 언어, 클라이언트 측에서 웹 페이지의 동적 동작을 담당
• React : 페이스북에 의해 개발, UI를 만드는데 사용되는 자바스크립트 라이브러리
• Vue.js : 자바스크립트로 개발된 컴포넌트 기반의 프론트엔드 프레임워크
• AngularJS : 구글에서 개발, 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크
• Ajax(Asynchronous Javascript and XML) : 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법, 페이지 전체를 새로 고침할 필요 없이 웹 애플리케이션 속도와 사용자 경험을 향상