[EST] 240627 Figma-01 / CSS-10

Figma

피그마란?

- UI / UX 디자인을 위한 클라우드 기반 협업 웹 어플리케이션

- 웹을 기반으로 디자인 편집을 작업

- 웹 링크 공유를 통해 편리하게 협업한느 디자인 툴

 

주요기능

- 디자인 시스템 구축

- 서비스 웹 / 앱 UXUI 디자인

- 카드뉴스 제작

- 교안 이미지 제작

- 책 표지 디자인

---

반응형 이미지

반응형 이미지가 필요한 이유

- 웹페이지는 다양한 디바이스 환경을 고려하여 적절한 이미지를 제공해야함

 

해상도 전환

- 단지 크기만 다른 동일한 컨텐츠의 이미지를 보여주고 싶을 때 사용하는 방법

- 큰 이미지가 필요없는 좁은 화면에서 더 작은 이미지를 제공하고 싶을 때

- 선택적으로 다양한 해상도의 이미지를 고밀도/저밀도 화면에 제공하고 싶을 때

 

srcset

- 브라우저가 네트워크, 메모리, 성능, 시간 등을 고려하여 최적의 이미지를 선택

- px단위가 아닌, w, x 서술자 사용

 

w서술자

- 이미지의 원본 넓이를 브라우저에게 알려줌

- w서술자가 적용되면 이미지 크기는 기본적으로 뷰포트의 100%를 차지

 

x서술자

- 화소의 밀도 / 디바이스 화소 밀도에 따른 이미지를 로딩하도록 부라우저에게 알려줌

 

-> srcset은 브라우저에게 이미지 선택권을 위임하는 속성

 

sizes

- 이미지가 차지하게 될 사이즈를 브라우저에게 알려줌

- sizes와 width를 같이 작성할 경우 width를 우선

 

sizes 작성 유무

<img 
	srcset="
		/img/chilli_360px.jpg 360w, 
	  /img/chilli_720px.jpg 720w, 
	  /img/chilli_1440px.jpg 1440w"
	src="/img/chilli_360px.jpg" alt="다람쥐 캐릭터 칠리" />

<img 
	srcset="
		/img/chilli_360px.jpg 360w, 
	  /img/chilli_720px.jpg 720w, 
	  /img/chilli_1440px.jpg 1440w" 
	sizes="
		(max-width: 360px) 200px, 
		(max-width: 720px) 400px,
											 600px"
	src="/img/chilli_360px.jpg" alt="다람쥐 캐릭터 칠리" />

---

아트디렉션 

- 연출방향, 중요한 부분을 자른 이미지를 보여주는 것

- 반응형 이미지에서 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여주는 형태의 방법

- 다른 비율, 다양한 크기의 이미지를 사용하고 싶을 때 사용

<picture>
	<source media="(min-width: 1024px)" srcset="/img/lication-chilli.png">
	<source media="(max-width: 1023px)" srcset="/img/lication-chilli2.png">
	<img src="lication-chilli.png" alt="위니브 리케이션 속 칠리">
</picture>

---

정리

srcset, sizes

• 동일한 크기(동일한 비율, 동일한 내용)의 이미지를 다양한 디바이스의 적절한 해상도, 사이즈로 보여주고 싶을 때 사용.
• 브라우저가 알아서 이미지를 선택함에 유의

<picture>, <source>

• 브라우저의 환경, 화면의 크기와 방향 등을 고려하여 다양한 이미지를 보여 주고 싶을 때 사용