[신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(1) (HTML/CSS)

 

 

1. 웹 구성요소 알기

 

1) 웹이란

: 전 세계가 연결된 정보의 공간

: 우리는 웹을 통해 문서, 이미지, 비디오, 애플리케이션 등의 다양한 콘텐츠에 쉽게 접근하고 공유할 수 있다

: 하이퍼링크를 통해 문서 간 이동이 가능하며, 이로 인해 웹은 거대한 연결 구조(Navigation Network)를 형성한다

 

2) 웹을 만드는 3가지 언어

HTML (HyperText Markup Language)

• 웹 페이지의 구조를 정의하는 마크업 언어 - 사용자뿐 아니라 검색 엔진이 콘텐츠를 이해하고 인덱싱하는 데도 도움이 된다
• 웹 페이지에 있는 모든 콘텐츠는 HTML을 통해 구성됨 - 이는 상호 연결을 가능하게 함(하이퍼링크)
• <태그>를 사용하여 각 요소의 구조와 역할을 구분

CSS (Cascading Style Sheets)

• 웹 페이지의 스타일링과 레이아웃을 정의한다
• 기본적인 스타일링(색상, 폰트, 정렬), 포지셔닝, 반응형 디자인을 이해해야 한다

JavaScript

• 웹 페이지의 인터랙티브 기능을 구현할 때 사용하는 프로그래밍 언어이다
• DOM 조작, 이벤트 처리, 비동기 통신(AJAX)에 대한 기본적인 이해가 중요하다

 

3) HTML과 브라우저의 관계

• 브라우저는 HTML 을 해석
• DOM 생성 - HTML 을 단순히 한 줄씩 읽는 게 아니라 브라우저가 트리 구조로 변환함, DOM 을 컴퓨터가 이해하는 것임
• 스타일 적용 - HTML 은 웹 페이지의 구조만 정의, 스타일은 CSS 가 적용하는 것

 

4) CSS 는 인테리어 디자이너

• 웹 페이지의 색상, 레이아웃, 폰트 등을 결정하여, 방문자에게 보다 쾌적하고 매력적인 환경을 제공한다

 

5) JavaScript 는 웹을 움직이게 만든다

• 웹 페이지에 동적인 효과와 반응을 부여하는 역할
• 페이지 위에 있는 요소들을 실시간으로 제어할 수 있다
• JavaScript는 브라우저(클라이언트)와 서버 사이에서 데이터를 주고받는 중개자 역할 : 사용자가 폼에 정보를 입력하고 제출 버튼을 누르면, JavaScript는 이 데이터를 서버로 전송 - 서버로부터 응답이 오면, 화면을 새로 고치지 않고도 필요한 내용을 즉시 사용자에게 보여줄 수 있다 - 이건 AJAX 기반

 

6) 프론트 개발자라면 반드시 알아야 하는 것들

반응형 웹 디자인

• 모바일, 태블릿, 데스크탑 등 다양한 디바이스에 최적화된 화면 구성
• @media를 활용한 CSS 미디어 쿼리 사용법 숙지

 

 

2. 프론트엔드 개발자가 하는 일

 

1) 프론트 개발자의 역할

• 사용자 경험을 시각적으로 구현하기
• 구조와 성능, 보안을 책임지는 클라이언트 엔지니어링
  • XSS (Cross-Site Scripting) 주의 - 공격자가 웹 페이지에 악성 스크립트(JavaScript)를 삽입해서 사용자의 브라우저에서 실행되도록 유도하는 공격, 주로 댓글, 검색창, 입력폼처럼 사용자 입력을 그대로 출력하는 곳에서 발생
  • CSRF(Cross-Site Request Forger) 주의 - 사용자가 로그인된 상태라는 걸 악용해서, 공격자가 의도치 않은 요청을 자동으로 보내도록 조작하는 공격

 

 

3. HTML5 알아보기

 

1) 시맨틱 태그

: 과거 대부분 <div> 로 구분되던 구성해서 의미론적인 구성으로 변화함

: 시맨틱 요소들 포함 - <header>, <nav>, <section>, <article>, <aside>, <footer>  등

• 검색 엔진 최적화(SEO) 향상 : 검색 엔진은 시맨틱 태그를 통해 콘텐츠 구조를 더 정확히 파악할 수 있음
• 코드의 명확성 및 유지보수 용이성 : 코드를 쉽게 읽고 유지관리하기 좋음

기능/특징	HTML4	HTML5
마크업	<div>와 <span>으로 주로 구분	시맨틱 요소 (<header>, <footer> 등) 도입
멀티미디어	외부 플러그인(Flash 등) 필요	<video>, <audio> 등 멀티미디어 지원
폼	폼 요소 유형 제한	새로운 입력 유형 및 속성 추가
그래픽 및 그래픽 API	부족	<canvas>를 통한 그래픽 처리 및 WebGL 지원
웹 앱	웹 앱 지원 부족	오프라인 웹 앱, 지오로케이션 API 등 지원
퍼포먼스 및 성능	성능 제한	향상된 성능 및 브라우저 호환성
웹 접근성	시맨틱 태그 부재로 낮은 접근성	시맨틱 태그 도입으로 높은 접근성

 

 

[참고] HTML 태그 공부

https://codingeverybody.kr/category/html/

코딩에브리바디

 

https://developer.mozilla.org/ko/docs/conflicting/Learn_web_development/Core/Structuring_content

HTML 소개 | MDN

 

 

[실습] 웹 페이지 Clone