HTML5 고급 기능

그래픽과 인터페이스

SVG (Scalable Vector Graphics)

개요: SVG는 "XML 기반의 벡터 이미지 포맷"으로, 웹에서 벡터 기반 그래픽을 정의하는 데 사용됩니다. XML 텍스트 파일에 저장되어 검색, 인덱싱, 압축이 가능하며, 상호작용과 애니메이션도 지원합니다. HTML5는 인라인 SVG를 지원합니다.

벡터 그래픽의 특징:

• 정의 방식: 직선, 원, 사각형 등의 도형을 이용하여 그래픽을 정의합니다.
• 품질: "크기 변경, 프린터 해상도에 무관하게 품질 유지"가 가능합니다. 래스터 그래픽(픽셀 기반)과 달리 확대/축소 시 품질 저하가 없습니다.
• 편집: "모든 텍스트 편집기 사용 생성/편집 가능"합니다.
• 기능: 애니메이션, 검색, 인덱싱, 스크립트화, 압축이 가능합니다.
• 처리 시간: 그리는 데 시간이 많이 걸릴 수 있습니다.

주요 SVG 태그:

• 원: <circle>
• 사각형: <rect>
• 타원: <ellipse>
• 폴리라인: <polyline>
• 다각형: <polygon>
• 텍스트: <text>
• SVG 애니메이션: <animate> 태그를 사용하여 애니메이션을 구현할 수 있으며, SVG는 XML 기반이므로 SVG DOM으로 표현되어 각 요소에 이벤트 처리기를 붙여 애니메이션을 지정할 수 있습니다.

드래그 앤 드롭 (Drag and Drop)

개요: "사용자가 객체를 마우스로 끌어서 다른 애플리케이션에 놓는 기능"으로, HTML5 표준에 포함됩니다. 구글 캘린더나 웹 하드 애플리케이션 등에서 활용됩니다.

과정:

• draggable="true" 속성 설정: 드래그 가능한 요소에 이 속성을 설정해야 합니다.
• dragstart 이벤트: 드래그가 시작될 때 발생하며, dataTransfer 객체의 setData() 메서드를 호출하여 이동되는 데이터를 설정합니다.
• drag 이벤트: 드래그하는 도중에 계속 발생합니다.
• dragenter 이벤트: 마우스로 드래그하다가 새로운 요소 안으로 들어갈 때 발생하며, 새로운 요소가 타겟 요소인지 검사합니다.
• dragleave 이벤트: 마우스로 드래그하다가 요소를 빠져나갈 때 발생합니다.
• dragover 이벤트: 드래그 도중에 마우스가 다른 요소 위에 있을 때 발생하며, 드롭을 허용하려면 e.preventDefault()를 호출하여 기본 처리를 막아야 합니다.
• drop 이벤트: 사용자가 마우스 버튼을 놓았을 때 발생하며, dataTransfer 객체의 getData() 메서드를 이용하여 필요한 데이터를 꺼냅니다.

웹 워커 (Web Worker)

개요: "자바스크립트에서 시간이 많이 걸리는 작업을 할 때 사용할 수 있는 메커니즘"으로, 백그라운드에서 실행하는 자바스크립트 스레드입니다. 이를 통해 "스크립트가 완료와 관계없이 웹페이지가 응답할 수 있음"으로써 페이지 처리 성능에 영향을 주지 않습니다.

용도:

• 영상 처리 (캔버스나 비디오 요소에서 추출된 데이터를 사용)
• 대용량 데이터 처리 (XMLHTTPRequest 호출 후 파싱)
• 텍스트 분석 (실시간 사전 검색, 자동 오류 수정)
• 데이터베이스 요청 동시 수행 (로컬 데이터베이스 요청)

저장과 통신

웹 스토리지 (Web Storage)

개요: HTML5가 제공하는 클라이언트 컴퓨터에 데이터를 저장하는 메커니즘입니다. 기존 쿠키의 한계점(4KB 저장 용량, 20개 제한, 보안 취약)을 극복하며, "쿠키보다 안전하고 속도도 빠르며", 약 5MB 정도의 많은 양의 데이터를 저장할 수 있습니다. 데이터는 "키:값" 쌍으로 저장되며 해당 웹 페이지만 액세스할 수 있습니다.

종류:

• 로컬 스토리지 (Local Storage): "브라우저가 닫힐 때 삭제되지 않음" (만료 날짜가 없음). 같은 도메인만 로컬 스토리지를 공유할 수 있습니다. localStorage 전역 객체를 사용하며 setItem(), getItem(), removeItem(), clear() 등의 API를 제공합니다.
• 세션 스토리지 (Session Storage): "해당 세션이 종료되면 데이터가 사라짐" (하나의 윈도우). 같은 도메인이라도 브라우저 윈도우가 다르면 서로 다른 영역을 사용합니다. sessionStorage 전역 객체를 사용합니다.

지원 여부 검사: 'localStorage' in window 또는 'sessionStorage' in window를 통해 브라우저 지원 여부를 확인할 수 있습니다.

파일 API (File API)

개요: "웹 브라우저가 사용자 컴퓨터에 있는 로컬 파일을 읽어올 수 있도록 해주는 API"입니다. 이를 통해 온라인 상태가 아닌 오프라인 상태에서도 동작할 수 있는 웹 애플리케이션을 작성할 수 있습니다.

주요 객체: File, FileReader.

File 객체 속성:

• name: 파일 이름
• size: 파일 크기 (바이트 단위)
• type: 파일 타입 (MIME type)
• lastModifiedDate: 최종 변경 날짜

파일 선택: <input type="file"> 태그에 multiple (여러 파일 선택) 및 accept="image/\*" (특정 유형 파일 선택, MIME 타입 지정) 속성을 추가하여 여러 파일이나 특정 유형의 파일을 선택할 수 있습니다. onchange 이벤트 핸들러를 사용하여 파일 변경 시 작업을 수행할 수 있습니다.

웹 소켓 (WebSocket)

개요: "웹 애플리케이션을 위한 차세대 양방향 통신 기술"이며, HTML5에서 자바스크립트를 통해 사용할 수 있는 소켓 통신입니다. HTTP가 페이지 다운로드 기능만 하는 반면, 웹 소켓은 TCP/IP가 제공하는 모든 기능(채팅, 게임, 실시간 주식 거래 등 실시간 양방향 상호작용)을 사용할 수 있습니다.

통신 방식: HTTP를 통해 웹소켓 업그레이드 요청을 보내고, 서버에서 "OK! 지금부터 웹소켓임." 응답을 받으면 WebSocket 프로토콜로 전환됩니다.

WebSocket 클래스: new WebSocket(url, [protocol])을 사용하여 통신용 소켓 객체를 만들 수 있습니다. url은 wss:로 시작합니다.

주요 이벤트 및 메서드:

• onopen: 소켓 연결 확립 시 발생.
• onclose: 연결 종료 시 발생.
• onerror: 통신 오류 시 발생.
• onmessage: 서버로부터 데이터 도착 시 발생.
• send(data): 웹 소켓을 통해 데이터 전송.
• close(): 연결 해제.

서버 전송 이벤트 (Server-Sent Events)

개요: "웹 페이지가 서버로부터 자동적으로 데이터를 전달받을 수 있는 기법"으로, 서버가 주기적으로 보내주는 "일종의 푸시(push) 기술"입니다. 주식 가격 업데이트, 뉴스 피드, 스포츠 결과, 트위터 업데이트 등 실시간으로 서버에서 클라이언트로 데이터를 보낼 때 사용됩니다.

절차:

• 클라이언트는 HTTP를 통해 웹 페이지를 요청합니다.
• 요청받은 웹 페이지의 자바스크립트가 서버로 연결을 오픈합니다.
• 서버는 주기적으로 새로운 정보가 있다고 클라이언트에게 이벤트로 통보합니다.

핵심 개념 정리

• HTML5 고급 기능은 사용자 경험을 향상시키고 웹 애플리케이션의 기능을 확장하는 데 필수적인 기술들을 포함합니다.
• SVG는 고품질의 확장 가능한 벡터 그래픽을 웹에 통합하는 강력한 도구입니다.
• 드래그 앤 드롭은 직관적인 사용자 인터페이스 상호작용을 가능하게 합니다.
• 웹 워커는 웹 애플리케이션의 성능을 저해하지 않으면서 복잡하고 시간이 오래 걸리는 작업을 백그라운드에서 처리할 수 있도록 돕습니다.
• 웹 스토리지는 클라이언트 측에서 대용량 데이터를 안전하고 효율적으로 저장할 수 있게 이러한 HTML5 고급 기능들은 현대 웹 애플리케이션의 복잡성과 상호작용성을 크게 향상시키는 데 기여합니다.