이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]

이미지는 마크업의 반이다

목차
1. 스프라이트의 기본 재료 – 이미지
2. 이미지를 저장하는 방법
3. 상황에 맞는 파일형식 고르기
4. 이미지 품질과 로딩속도
5. 이미지 스프라이트(Sprite)가 무엇인가요?
6. 스프라이트 제작과 코드 선언
7. 스프라이트 유형별 분석

1. 스프라이트의 기본 재료 - 이미지

4 / 이미지는 마크업의 반이다
UI개발자가 알아야 할 이미지는 무엇일까요?

1.1 웹에서 많이 사용하는 이미지 파일형식
JPEG/JPG GIF
 지원색상 : 24비트(16,777,215색)
 2)손실 압축방식
 1)압축률 ↑ 용량↓ 품질 ↓
 4)트루컬러를 지원하며
대중적으로 사용됨
 사용용도 : 사진, 제품사진 등 다양한 색상
이 필요한 이미지
 지원 색상 : 8비트 (256색)
 3) 무손실 압축방식
 파일전송시간의 최소화를 위해 만들어짐
 투명 지원, 반투명 X
 여러 장의 이미지를 1개 파일에 담아 애
니메이션 효과가능
 사용용도 : 색이 단순한 로고,블릿 기호
나 움직이는 아이콘 등

JPEG/JPG GIF
 지원색상 : 24비트(16,777,215색)
 2)손실 압축방식
 1)압축률 ↑ 용량↓ 품질 ↓
 4)트루컬러를 지원하며
대중적으로 사용됨
 사용용도 : 사진, 제품사진 등 다양한 색상
이 필요한 이미지
 지원 색상 : 8비트 (256색)
 3) 무손실 압축방식
 파일전송시간의 최소화를 위해 만들어짐
 여러 장의 이미지를 1개 파일에 담아 애
니메이션 효과가능
 사용용도 : 색이 단순한 로고,블릿 기호
나 움직이는 아이콘 등
1)이미지 압축 : 이미지의 정보가 손실되지 않고, 전송되는 시간도 줄이기 위해 압
축하며 손실/무손실 압축방식으로 나뉨
2)손실 압축방식 : 이미지를 압축했을 때 원래 가지는 정보의 일부가 손실되면서
압축됨, 불필요한 색, 정보를 삭제하기 때문에 압축률이 높을 수록 이미지가 깨짐
3)무손실 압축방식 : 이미지를 압축해도 이미지의 정보량(색상 등)이 변하지 않게
압축되나 압축률이 높을수록 파일용량이 커짐
4)트루컬러(true color)= full color = 24`비트 이상 컬러 = 자연의 색과 거의 동
일하여 사람의 눈으로 구별 어려움

PNG
 GIF와 JPEG의 장점을 합친 파일형식
 GIF보다 압축률이 우수
PNG-8 PNG-24
 지원 색상 : 8비트 (256색)
 GIF와 거의 유사하나 용량이 적음
 사용용도 : 색이 단순한 로고,블릿 기호나
움직이는 아이콘 등
 지원색상 : 24비트(16,777,215색)
 투명, 반투명 모두 지원
 무손실 압축하므로 큰 이미지의 경우 파일
용량이 매우 클수 있음
 사용용도 : 배경이 투명/반투명한 다양한
색상의 이미지나 스프라이트
 무손실 압축방식
 반투명 지원

1.2 한눈에 보는 이미지 파일형식
LOW HIGH
파일용량 PNG-8 GIF JPEG PNG-24
지원 색상수 PNG-8 = GIF JPEG PNG-24
이미지 품질 GIF PNG-8 JPEG PNG-24
투명, 반투명 JPEG 지원 X PNG-8, GIF 투명만 지원 PNG-24 ALL

2. 이미지를 저장하는 방법

2.1 포토샵을 활용한 이미지 저장방법
PSD 원본파일을 가급적 가지고 있어라!
TIP

3
Save : 저장하기
Save As…: 다른 이름으로 저장하기
Save for Web & Devices :
웹과 디바이스 용으로 저장하기
단축키는 Alt+Shift+Ctrl+S
TIP
2
1
1
2
3

저
장
옵
션
1
2
3
4
이미지 파일형식과 품질 설정
메타데이터 삭제
설정값에 따라 용량과 품질을 비교
저장

GIF 저장옵션 PNG-8 저장옵션

PNG-24 저장옵션

잠깐, 메타데이터는 왜 삭제해야 하나요?

cf. 메타데이터를 삭제해야 하는 이유?
메타데이터란?
촬영시간
촬영위치 정보
노출모드
사용 S/W
플래시 사용여부
해상도
사진크기 등
사진에 대한 정보

메타데이터는 정보다

메타데이터가 있고, 없고의 차이?
메타데이터 없음메타데이터 있음

메타데이터 없음
용량 1,696KB
메타데이터 있음
용량 1,706KB
1,706KB – 1,696KB = 10KB 차이!

메타데이터는 개인정보다

메타데이터란?
촬영시간
촬영위치 정보
노출모드
사용 S/W
플래시 사용여부
해상도
사진크기 등
사진에 대한 정보
오호.. 딱 걸려뜸!

파일용량과 퀄리티의 복합적 판단

 색상은 얼마나 가지고 있는지
 반투명/투명한 배경을 가지고 있는지

다양한 색상의 이미지

3.1 다양한 색상의 이미지
① GIF 파일
다양한 색상의 이미지에는
GIF는 적절치 않음.
원본

② PNG-8 파일
원본
③ PNG-24 파일
GIF, PNG-8보다는
PNG-24가 다양한 색상을 가진
이미지에 적절

④ JPEG 파일
품질 80은 100과 비교했을 때
깨짐이 거의 없고 파일용량도
PNG-24에 비해 절반 이상 절감
다양한 이미지의 경우,
품질과 용량 측면에서
JPEG가 가장 효율적인 포맷
원본

다양한 색상의 이미지에서는 JPEG를 사용하는 것이 가장 효율적
JPEG : 용량, 퀄리티
BEST
GIF : 이미지 깨짐 PNG : 용량이 큼

단순한 색상의 이미지

3.2 단순한 색상의 이미지
단순한 색상 이미지는
png-8이 BEST!

다양한 색상의 반투명 이미지

3.3 다양한 색상의 반투명 이미지
반투명 이미지는
PNG-24가 BEST!

이미지 품질을 5단계(10, 30, 50, 80, 100)로 나누어
이미지 로딩속도를 측정

이미지 정보
파일형식 : JPG파일
크기 : 4320px × 3240px
속도 측정도구 Chrome 개발자 도구 – [Network]
체크 방식
품질이 다른 5개의 이미지가 첨부된 각 html 파일을
로드하여 이미지가 모두 나타날 때까지 걸리는 시간을 체크함

이미지를 받기 직전까지
준비되는 시간 :
4+13+104+120=241ms=0.241s
이미지 받는 시간 : 7.23s
데이터 분석 방법
막대그래프에 마우스를 올려보면 로딩관련한 확인이 가능 (ms=1/1,000s)
이미지를 로드하는데 걸린 시간
= 0.241+7.23 = 총 7.47s

품질 100
품질 80
품질 50
품질 30
품질 10
이미지 용량 : 5.4MB
이미지 로드시간 : 7.0초
이미지 용량 : 1,005KB
이미지 용량 : 582KB

품질 100
품질 80
품질 50
품질 30
품질 10
이미지 용량 : 1,005KB
4. 이미지 품질과 페이지 로딩속도
[결과]
이미지 품질(화질)이 좋을 수록
파일용량은 커지고, 이미지 로딩속도는 느려짐
무조건 좋은 품질의 이미지를 사용하는 것은 좋은 방법 X.
각 콘텐츠의 용도에 따라
적절한 파일형식과 품질을 정하는 것은 UI개발자의 몫

5. 이미지 스프라이트(Sprite)란?

5.1 스프라이트는 무엇인가요?
스프라이트란 여러 개의 개별 이미지를 하나로 만드는 것으로,
페이지 속도이슈를 최소화 할 수 있는 이미지 최적화 기법
-
스프라이트
이미지
-
개별
이미지

5.1 스프라이트는 무엇인가요?
스프라이트란 여러 개의 개별 이미지를 하나로 만드는 것으로,
페이지 속도이슈를 최소화 할 수 있는 이미지 최적화 기법
이미지 : 1개
총 용량 : 36.9KB
스프라이트
이미지
이미지 : 100개
총 용량 : 156KB
개별
이미지

5.2 스프라이트에 적합한 이미지
자주 바뀌는 이미지 자주 바뀌는 않는 이미지
이미지는 2종류로 나뉨

자주 바뀌는 이미지 자주 바뀌는 않는 이미지
쇼핑몰 배너, 상품 이미지 등 GNB, LNB, 검색창, 로그인, 하단 푸터, 버튼요소 등
어떤 이미지가 스프라이트에 적합할까요?

쇼핑몰 배너, 상품 이미지 등 GNB, LNB, 검색창, 로그인, 하단 푸터, 버튼요소 등
어떤 이미지가 스프라이트에 적합할까요?
자주 바뀌는 않는 이미지자주 바뀌는 이미지

자주 바뀐다는 것은 매번 교체를 위한 어떠한 액션이 필요하다는 뜻
이로 인해 스프라이트 작업할 때 기존에 있던 다른 이미지에 영향을 줄 수 있음
자주 바뀌지 않는 이미지가 스프라이트에 적합

스프라이트를 사용하면 무엇이 좋아요?

웹브라우저는 서버로부터 이미지를 요청.
만약 100개의 이미지가 사용되었다면 100번 요청.
서버 요청횟수가 많아지면 그만큼 로딩속도가 느려져 좋은 경험을 주지 못함.
하지만, 스프라이트는 이미지 개수가 줄어들기 때문에,
서버 요청횟수를 최소화한 몇 번의 통신만으로도
다양한 이미지를 볼 수 있는 장점.
5.3 스프라이트의 장점
웹페이지 로딩속도가 빨라집니다.

1번 이미지 요청/다운
오~ 완전 빨리 떠~
HTTP 서버
[스프라이트를 사용했을 때 기분좋은 사용자의 모습]
HTTP 서버
[개별 이미지를 사용했을 경우 짜증내는 사용자의 모습]
아악! 왜케 느려?
100번 이미지 요청/다운

많은 이미지들을 1개의 파일로 관리할 수 있고,
네이밍에 대한 부담도 줄어들기 때문에 관리측면에서도 유용.
파일 관리가 깔끔해집니다.

스프라이트 적용 전 스프라이트 적용 후
100개 1개

6. 스프라이트 제작과 코드 사용

6.1 스프라이트 제작하기
① background 레이어 생성
Tip) background 레이어에 색을 입히면 이미지들이 잘 구분됨.

2px
2px 2px
2px
② 각 SNS 아이콘 이미지들
추가하고,아래와 같이 이미지
간 최소 2px 이상 간격을 줌.
Tip) 간격을 주는 이유는 태블릿의 Safari 브라우저에서
이미지가 조금 넘쳐 보이는 버그를 방지하기 위함.

③ 가장자리들의 여백을 최소
화해서 자름
④ 배경의 투명도 지원, 깨짐
정도, 파일용량 등을 고려하
여 PNG, GIF, JPG 중 선택하
여 저장
Tip) 각 성격에 맞는 이미지들끼리 묶어야 효과적

6.2 스프라이트 코드 선언하기
① 스프라이트 이미지를 사용하려면 background속성을 사용
② 스프라이트 공통 클래스 .spr_share를 선언하고 사이즈, 이미지 경로 등을 입력
결과화면
HTML
CSS

③ 각각의 이미지들은 background-position으로 좌표값을 지정
6.2 스프라이트 코드 선언하기
결과화면
HTML
CSS

디바이스 대응시,
스프라이트 크기/위치는 짝수로 하는 것이 좋다

디바이스의 해상도 대응
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?

다양한 디바이스의 해상도
(2배 기준으로 설명)

홀수크기 (원본)
315px
103px
짝수크기
104px
316px
CSS
width : 158px
height : 54px
background-size : 158px 54px
원본 사이즈가 315*103인 홀수 크기의 이미지가 있습니다.
1) 원본 사이즈 그대로 홀수크기로 이미지를 사용해보고,
2) 짝수크기로도 조정했을 때의 차이점 알아보겠습니다.

홀수크기
짝수크기
아이폰7

홀수크기
짝수크기
아이폰7
홀수 크기의 이미지를 사용했을때
짝수 크기보다 뿌옇게 보이는 것을 알 수 있습니다.

홀수크기 (원본) 짝수크기
53px 52px
한글자를 확대해서 보아도,
홀수크기가 더 뿌옇게 보이고, 1px 더 큰것을 볼 수 있습니다.

홀수크기 (원본) 짝수크기
53px 52px
한글자를 확대해서 보아도,
홀수크기가 더 뿌옇게 보이고, 1px 더 큰것을 볼 수 있습니다.
왜 그럴까요?

디바이스 해상도 대응을 위해 50% 사이즈 크기로 선언해야 하다보니
소수점을 피하기 위한 원래 크기보다 1px 크게 background-size가 선언되어
이미지가 늘어나면서 뿌옇게 보이는 현상이 발생
315px
316px
1px

스프라이트 이미지 위치에 따라 어떻게 표현되는지 대해 알아보겠습니다.
각각 홀수, 짝수 위치에 이미지를 놓고 디바이스에서 확인
홀수 위치 짝수 위치
97, 288 96, 288
0,0 0,0
CSS
width : 46px
height : 46px
background-size : -48px -144px

홀수 위치
짝수 위치
흰 여백 생김
아이폰7

홀수 위치
짝수 위치
흰 여백 생김
아이폰7
왜 그럴까요?

이미지가 홀수 위치에 놓였지만,
소수점을 피하기 위한 짝수값 선언을 위해 원래의 위치보다 -1px 인 위치에
background-position값을 선언했기 때문입니다.
실제위치 : 97, 288
이미지 선언기준 : 96, 288
background-position:-48px -144px
50%
1px

스프라이트 이미지의 크기나 위치를 홀수로 할 경우,
이미지가 정확한 비율로 표현되지 않기때문에
짝수로 하는 것이 좋습니다.
짝수가 최고!

6.3 주의사항
스프라이트 원본 PSD는 꼭 보관하세요.
여럿이서 작업을 하다 보면 이미지 위치가 다른 사람 이미지와
겹치거나 파일이 없어지는 경우가 발생.
이를 대비하기 위해 반드시 원본 PSD을 이미지가 있는 위치에
함께 보관하는 것이 좋음.
오른쪽 이미지와 같이 가이드를 활용하여 이미지 영역을 명확
히 해두면 다른 사람이 작업을 하더라도 동일 위치에 이미지가
겹치는 상황을 방지할 수 있음.
이미지 크기, 용량이 너무 크지 않도록 해야 합니다.
이미지의 개수를 줄이기 위해 하나의 이미지에 계속 합치다 보면 이미지 크기, 용량이 커질 수 밖에 없다.
결국 본래 스프라이트 사용목적에 어긋나게 됨. 그래서 초기에 어떤 이미지를 스프라이트로 만들 것인지 판단하는 것이 중요.
크기가 커진다면 유사한 콘텐츠끼리 묶어 별도로 스프라이트를 만들거나, 개별 이미지로 사용하는 것이 좋다.
가이드(guides)

홈페이지 종류
쇼핑몰형
이벤트&
프로모션형
기업형 개인형
스프라이트는 콘텐츠에 따라 공통으로 사용하기도 또는 특정 콘텐츠 전용으로 사용합니다.
스프라이트를 홈페이지 유형별로 어떻게 사용하면 좋은지 알아보겠습니다.

1)구성 : 메인 / 소개 / 정보 / 홍보 / IR / 채용 등
2)특징 : 기업형 사이트는 사이트 전체에 기업만의 특성(CI, 분위기 등)을 반영하게 됩니다.
메인 페이지는 디자인적인 화려함과 서브 페이지의 간단한 요약 등이 주로 노출됩니다.
서브 페이지는 기업소개나 채용정보 등 상세한 내용을 담고 있습니다.
3)스프라이트 구성
7.1 기업형
공통
페이지에서 공통으로 노출되는 부분은 공통 스프라이트로
묶어주면 좋습니다. 주로 페이지의 상단, 하단이 해당됩니다.
메인
페이지
메인 페이지는 메인 페이지에서만 노출되기 때문에, 메인 페
이지 전용 스프라이트로 묶습니다.
서브
페이지
그 외 페이지는 회사 소개나 채용 등 정보 제공용이므로 큼
직한 이미지나 텍스트, 공통 가이드가 들어가므로 서브 페이
지 전용 스프라이트로 묶어주면 좋습니다.

[메인 페이지] [서브 페이지] [서브 페이지]
공통 스프라이트
7.1 기업형

7.2 쇼핑몰형
1)구성 : 메인 / 상품상세 / 상품리스트 / 장바구니 등
2)특징 : 단순한 접근이 아닌 흥미를 유발하여 소비자로 하여금 최종 구매단계까지 이르도록 유도해
야 하기 때문에 상품 진열(홍보)에 크게 초점을 둡니다.
메인 페이지는 카테고리 별 BEST상품이나 기획전 및 이벤트를 노출하며, 그 외 페이지는 상품의
상세나 카테고리 별 리스트, 장바구니 등으로 이루어져 있습니다.
3)스프라이트 구성
공통
카테고리 별 상품 리스트들 가이드는 대부분 똑같기 때문에
한꺼번에 스프라이트로 묶습니다.
메인/서브
페이지
서브페이지와 메인 페이지와 카테고리목록을 표현하는 가이
드가 다를 수 있습니다. 다를 경우에는 해당 영역의 전용 스
프라이트로 묶습니다.

공통 스프라이트 전용 스프라이트
7.2 쇼핑몰형

7.3 이벤트 & 프로모션형
1)구성 : 메인 / 상세
2)특징 : 단발성 페이지들로, 사용자의 참여를 유도하기 위해 디자인적으로 화려한 큼직한 이미지들
로 구성되며, 복잡한 구조의 마크업이 필요하지 않습니다.
응모하기 버튼, 문자 받기 등 이벤트에 해당하는 콘텐츠가 포함됩니다.
3)스프라이트
공통
페이지 구성이 단순하여 용량에 제한이 없다면, 전부 스프
라이트로 해도 상관없습니다.

7.4 개인형
1)구성 : 개인마다 다름
2)특징 : 개인의 성향에 따라 홈페이지 구성이 달라집니다. 정보전달의 목적이라면 대부분 블로그 형
식으로 제공이 되고, 포트폴리오 목적이라면 화려함이 가미된 리스트 형식으로 제공이 됩니다.
3)스프라이트
공통
공통으로 노출되는 이미지라면 공통 스프라이트로 묶어
주면 좋습니다. 기업형에 비해 콘텐츠 많지않아 서브페이
지이더라도 용량 제한이 없다면 공용 스프라이트 1개로
사용해도 좋습니다.

이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to 이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]

Similar to 이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017] (20)

이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]