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

 

 

1. 디자인 시스템

 

1) 왜 중요한가?

: 생산성이 엄청 올라감

• UI 일관성 유지 : 팀마다 스타일이 달라지는 걸 방지 (디자인 브랜딩 유지)
• 개발 생산성 향상: 이미 만든 컴포넌트를 재사용 → 반복 코드 줄어듦
• 협업 강화 : 디자이너 개발자 간 커뮤니케이션 효율 ↑
• 빠른 확장성 : 디자인이 바뀌어도 핵심 토큰만 바꾸면 전체에 반영 가능

 cf. 컬러 토큰을 만들어주면 좋다

 

 

2. CSS 가상속성

: 선택자에 : 또는 ::를 붙여 사용하며, 시각적 효과나 인터랙션을 표현할 수 있게 해준다

 

1) 가상 클래스(Pseudo-class)란?

:  HTML 요소가 가진 특정 상태를 선택하는 기능, 상태 기반 스타일링을 할 수 있다

가상 클래스	설명
:hover	마우스를 요소 위에 올렸을 때 동작
:active	요소가 클릭되어 활성화된 순간
:focus	요소에 포커스가 갔을 때 (입력창 클릭 등)
:nth-child(n)	부모의 n번째 자식 요소에 적용
:checked	체크된 <input type="checkbox"> 또는 <radio>에 적용

 

2) 가상 요소(Pseudo-Element)란?

: 요소 내부의 특정 위치나 가상의 부분을 선택할 수 있는 기능, 실제 존재하지 않는 요소처럼 동작

가상 요소	설명
::before	선택된 요소 앞에 내용 추가 (content: "" 속성을 반드시 작성)
::after	선택된 요소 뒤에 내용 추가 (content: "" 속성을 반드시 작성)
::first-line	요소의 첫 번째 줄만 스타일 적용
::first-letter	요소의 첫 글자에만 스타일 적용
::placeholder	<input>이나<textarea>의placeholder 텍스트에 스타일 적용

 

 

3. 반응형 웹

: 하나의 웹사이트가 다양한 디바이스의 해상도에 맞춰 자동으로 레이아웃과 스타일을 조절하는 웹 디자인 기법

: 다양한 해상도에서 최적화된 화면을 제공함

요소	설명
@media	화면 크기별로 다른 CSS 적용 가능
%, vw, vh	요소의 크기를 비율(%)이나 뷰포트 단위(vw: 너비, vh: 높이)로 설정
max-width	최대 너비를 제한해 큰 화면에서 과도하게 넓어지는 것 방지
flex, grid	유연한 정렬(flex)또는2차원 레이아웃(grid)구성 도구

 

1) 뷰포트

: 웹 브라우저에서 실제로 콘텐츠가 보여지는 '화면 영역'

• 왜 중요한가?
  → 모바일 화면의 크기는 pc 보다 훨씬 작아서 모바일에서는 웹 페이지가 축소된 형태로 표시되는 문제가 발생함,
  뷰포트에 맞게 화면을 보여줘야 함!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

// width=device-width : 디바이스의 화면 너비에 맞춰 콘텐츠를 표시함
// initial-scale=1.0 : 초기 배율을 1로 설정하여 축소 없이 표시함

• 왜 써야 하는가?
  → 반응형 웹에서 미디어쿼리나 vw/vh 단위를 제대로 적용하려면, 브라우저가 "현실의 화면 크기"를 인식할 수 있어야 함,
  뷰포트 메타태그는 바로 이 화면 크기의 기준점을 지정해주는 역할을 함

 

2) 상대 단위 기준

단위	기준	주요 용도	특징 / 장점
%	부모 요소의 크기를 기준으로 설정됨 width: 100% → 부모 너비에 맞춤	카드 내부 이미지, input 너비 설정	부모에 비례 → 유동적인 크기 조절 가능
vw / vh	브라우저 뷰포트(Viewport) 기준 1vw = 뷰포트 너비의 1% 1vh = 뷰포트 높이의 1%	전체 레이아웃 비율 지정 풀스크린 배너, 반응형 글씨 크기	뷰포트 기준 → 화면 크기에 따라 자동 반응
em	부모 요소의 폰트 크기 기준	폰트, 패딩, 마진 등	중첩되면 계산 누적 → 예측 어려울 수 있음
rem	최상위(root) 요소의 폰트 크기 기준 (html)	폰트, 패딩, 마진 등	전역 기준 → 일관성 있고 계산 쉬움

• 폰트 크기를 rem으로 설정할 때의 장점?
  → 접근성과 사용자 설정을 고려한 디자인이 됨
  사용자가 브라우저 폰트 사이즈를 키우면 rem 은 그에 맞춰 커짐, but px은 고정값이라 브라우저 설정을 무시해버림
  → 유지보수 및 테마 적용이 쉬움 (일관된 크기 체계 유지 가능)
  디자인 시스템에서 기본 크기만 바꾸면 전체 페이지 스타일을 쉽게 조정 가능