[정보처리기사실기] 9. UI 구현 - 1과목 소프트웨어 구축

9. UI 구현 - 1과목 소프트웨어 구축

목차

화면 구성

레이아웃

레이아웃은 특정 공간에 여러 구성 요소를 보기 좋고 효과적으로 배치하는 것입니다. 다양한 방법으로 레이아웃을 작성할 수 있으며, 주로 다음과 같은 방법들이 사용됩니다

특정 공간에 여러 구성 요소를 보기 좋고 효과적으로 배치하는 것을 목표로합니다.

 

작성방법

요소	설명
DIV 요소	HTML에서 가장 일반적으로 사용되는 블록 수준 요소로, CSS를 사용하여 스타일 및 레이아웃을 조절합니다.
SPAN 요소	텍스트나 인라인 요소를 그룹화하는 데 사용되며, 주로 텍스트 스타일링을 위해 활용됩니다.
TABLE 요소	표를 만들 때 사용되며, 표 형태의 레이아웃을 작성할 때 주로 사용됩니다.
시멘틱 태그	HTML5에서 추가된 시맨틱 태그들은 의미론적으로 요소를 그룹화하여 명확한 레이아웃을 작성하는 데 도움이 됩니다.

 

시멘틱 태그

시멘틱 태그는 검색엔진의 크롤러가 웹 페이지를 잘 가져갈 수 있게 구조를 짜는 것입니다.

시멘틱 태그	설명
<header>	문서나 섹션의 머리말을 정의하며, 로고, 네비게이션 등의 콘텐츠를 포함합니다.
<nav>	내비게이션 링크를 그룹화하여 정의합니다.
<main>	문서나 섹션의 주요 콘텐츠를 정의합니다.
<article>	독립적으로 구분되거나 재사용 가능한 콘텐츠 블록을 정의합니다.
<section>	문서의 섹션을 나타내며, 주로 테마별로 묶인 콘텐츠를 표현합니다.
<aside>	주변 콘텐츠와 관련된 보조 콘텐츠를 정의합니다.
<footer>	문서나 섹션의 바닥글을 정의하며, 저작권 정보나 연락처 등을 포함합니다.

 

HTML5

월드와이드웹을 통해 정보를 표현하기 위한 마크업 언어 5번째 버전

 

HTML5 특징

1. 멀티미디어: HTML5는 오디오 및 비디오와 같은 멀티미디어 콘텐츠를 웹 페이지에 쉽게 통합할 수 있는 기능을 제공합니다. <audio>와 <video> 태그를 사용하여 멀티미디어 콘텐츠를 삽입하고 제어할 수 있습니다.
2. 그래픽: HTML5는 캔버스(canvas) 요소를 도입하여 그래픽 및 그래픽 애니메이션을 렌더링할 수 있는 기능을 제공합니다. JavaScript를 사용하여 캔버스 요소를 그리고 제어할 수 있습니다.
3. 통신: WebSocket과 같은 새로운 통신 프로토콜을 지원하여 실시간 양방향 통신을 가능케 합니다. 이를 통해 웹 소켓을 사용하여 서버와 클라이언트 간에 데이터를 효율적으로 전송할 수 있습니다.
4. 지리적 위치: HTML5는 Geolocation API를 제공하여 사용자의 위치 정보를 얻을 수 있습니다. 이를 사용하여 웹 애플리케이션에서 사용자의 위치에 따라 맞춤형 서비스를 제공할 수 있습니다.
5. 오프라인 작업: HTML5는 로컬스토리지(local storage)와 오프라인 캐시(offline cache)를 지원하여 오프라인 상태에서도 웹 애플리케이션을 사용할 수 있게 합니다. 이를 통해 사용자가 인터넷에 연결되지 않은 상황에서도 웹 애플리케이션을 실행하고 데이터를 보관할 수 있습니다.

CSS

HTML이나 XML과 같은 마크업 언어로 작성된 문서의 디자인을 스타일링하는 언어.

CSS 특징

• 디자인 분리: HTML과 디자인을 분리하여 유지보수성과 효율성을 향상시킴.
• 재사용성: 스타일 규칙을 정의하여 여러 요소에 동일한 스타일을 적용하고 중복을 최소화함.
• 동적 디자인: 요소의 상태나 사용자의 상호작용에 따라 스타일을 동적으로 변경할 수 있음.
• 반응형 웹: 미디어 쿼리와 함께 사용하여 다양한 디바이스와 화면 크기에 대응하는 웹 디자인을 구현함.

 

Java Script

클라이언트 측 언어, 웹 브라우저에서 실행되며, 웹 페이지의 동적인 기능을 담당하는 프로그래밍 언어.

Java Script 

특징

• 스크립트 언어: HMTL에 삽입되어, 인터프리터에 의해 실행되며, 컴파일 과정이 없어도 바로 실행할 수 있는 언어.
• 이벤트 중심: 사용자의 상호작용에 따라 동작하며, 주로 이벤트 핸들러를 통해 이벤트를 처리함.
• 프로토타입 기반 객체지향 언어: 클래스가 없고, 객체의 상속과 프로토타입을 기반으로 객체지향 프로그래밍을 지원함.
• 동적 형변환: 변수의 타입을 명시적으로 선언하지 않고도 자동으로 형변환을 수행함.
• 다양한 환경에서의 사용: 웹 브라우저뿐만 아니라 Node.js를 통해 서버 측 프로그래밍에서도 사용됨. 또한, 모바일 앱 개발에서도 널리 활용됨.

 

JavaScript 프레임워크

1. React
   • 페이스북에 올린 사진이 반응(React) 좋다로 암기
   • 특징: 싱글 페이지 애플리케이션(SPA) 개발에 주로 사용되는 라이브러리로, 사용자 인터페이스를 만들기 위한 컴포넌트 기반 접근 방식을 채택합니다. Virtual DOM을 활용하여 성능을 향상시키고, 상태 관리를 위한 Redux나 Context API와 같은 추가 라이브러리와 함께 사용됩니다.
   • 설명: 페이스북에서 개발된 오픈소스 라이브러리이며, UI를 만들기 위한 컴포넌트 기반 라이브러리입니다. React를 사용하면 UI를 모듈화하고, 코드의 재사용성을 높일 수 있습니다.
   • 만든 기관: 페이스북
2. Vue.js
   • 특징: 가벼우면서도 유연한 프레임워크로, 반응성 UI를 구축하기 위해 사용됩니다. 가상 DOM을 사용하여 성능을 향상시키고, 단방향 데이터 바인딩 및 컴포넌트 기반 아키텍처를 제공합니다.
   • 설명: Evan You에 의해 만들어진 오픈소스 JavaScript 프레임워크이며, Vue.js는 UI를 만들기 위한 진보된 방법을 제공합니다.
   • 만든 기관: Evan You와 개발 커뮤니티
3. AngularJS
   • 특징: Google에서 개발한 오픈소스 프레임워크로, MVC 패턴을 기반으로한 프론트엔드 개발을 위한 완전한 솔루션을 제공합니다. 양방향 데이터 바인딩, 의존성 주입, 템플릿 기반의 프레젠테이션 등의 기능을 제공합니다.
   • 설명: 구글에서 개발한 오픈소스 프레임워크로, 크로스 플랫폼 앱 및 웹 애플리케이션을 빠르게 개발하기 위한 도구로 널리 사용됩니다.
   • 만든 기관: 구글
4. Ajax
   • 특징: 웹 페이지를 리로드하지 않고도 서버와 데이터를 비동기적으로 주고받을 수 있는 기술입니다. JavaScript와 XML을 사용하여 데이터를 서버에서 비동기적으로 가져와서 웹 페이지에 표시합니다.
   • 설명: Asynchronous JavaScript and XML의 약자로, 서버와 통신하여 웹 페이지의 일부를 업데이트할 수 있게 해주는 기술입니다. 이를 통해 사용자 경험을 향상시키고, 웹 애플리케이션의 성능을 향상시킬 수 있습니다.
   • 만든 기관: Microsoft의 Jesse James Garrett

 

UI 관련 용어

설명을 하고 단어를 맞추는 문제들이 자주 출제되기 때문에 한번씩 읽고 지나가시길 바랍니다.

용어	설명
웹 표준 (Web Standard)	웹에서 사용되는 기술이나 포맷에 대한 표준화된 규격
웹 호환성 (Web Compatibility)	여러 브라우저나 디바이스에서 동일하게 작동하는 것
웹 접근성 (Web Accessibility)	장애인 및 비장애인 누구나 웹 콘텐츠에 접근할 수 있도록 하는 것
반응형 웹 (Responsive Web)	다양한 디바이스와 화면 크기에 대응하여 웹 페이지가 최적화되는 것
인포그래픽 (Infographic)	정보를 시각적으로 나타낸 그래픽입니다.
브랜드 아이덴티티 (Brand Identity)	브랜드의 독특한 정체성과 시각적 요소를 나타내는 것
네비게이션 (Navigation)	웹 페이지에서 사용자가 콘텐츠를 찾고 탐색하는 데 사용되는 요소입니다.
아코디언 (Accordion)	사용자가 제목을 클릭하면 해당 섹션을 펼쳐 보여주는 UI 패턴입니다.
플레이스 홀더 (Placeholder)	입력 필드에 사용자가 입력해야 할 정보를 나타내는 텍스트 또는 이미지입니다.
필터링 (Filtering)	원하는 항목만 선택적으로 보여주는 기능
입력폼 (Input Form)	사용자로부터 정보를 입력받기 위한 웹 페이지
입력필드 (Input Field)	사용자가 데이터를 입력할 수 있는 웹 페이지
썸네일 (Thumbnail)	이미지나 비디오의 미리보기 이미지입니다.
레이블 (Label)	입력 필드나 버튼 등과 관련된 텍스트로, 해당 요소의 목적이나 용도를 설명합니다.
대체 텍스트 (Alternative Text)	이미지나 미디어 요소에 대한 대체 설명을 제공합니다.