CON-TENTSChap-ter1.

2016 웹 트렌드1. 수직적인 패턴과 스크롤2. 카드 스타일의 인터페이스3. 애니메이션 기법 활성화4. 심미적이고 다양한 타이포그래피를 활용5. 디자인 트렌드의 공통요소

Chapter2. 반응형웹1. 반응형웹이란 ?2. 반응형웹 ? 적응형웹 ?3. 반응형웹에 대한 완벽한 이해4. 반응형웹 제작 방법

Chapter3. 반응형웹에 대처하는 자세1. 고해상도 이미지의 필요성2. SVG 란 ?3. SVG 라이브러리4. 다양한 폰트 사용

Chapter1. 2016 웹트렌드

1. 수직적인 패턴과 스크롤모바일과 태블릿 환경까지 고려한 수직적인 흐름의 디자인이 유행모바일 환경에서 인터넷에 접속하는 사용자의 비율은 점점 늘어나고 있습니다 .이처럼 점차 커지는 모바일 환경에 대한 기대는 수직적인 흐름의 디자인을 유행하게 만들었습니다 .

4

모바일에서 전체 인터넷 사용 점유율 20% 돌파

출처 : ITWORLD(www.itworld.co.kr) 2013.12.10 기사

1. 수직적인 패턴과 스크롤

5

더웹 (http://www.wetheweb.net/in-dex/)

벽산 (http://www.byucsan.com/in-dex.asp)

2. 카드 스타일 인터페이스모든 디바이스 사이즈에 매끄럽게 호환카드 모양으로 구획을 나눈 디자인은 정보를 질서정연하게 보여주기에 용이하며 , 가로든 세로든 정렬이 쉽기 때문에 반응형 홈페이지에 최적화된 디자인 스타일

6

구글이 제시한 머티리얼 디자인 과 머티리얼 디자인 라이트

2. 카드 스타일 인터페이스

7

구글 블로그템플릿 (www.getmdl.io/templates/blog/index.html)

BLOCK16 (block16omaha.com)

3. 애니메이션 기법 활성화HTML5 의 표준화 , 이에 상응하는 CSS3 의 상위기법 활용2014 년도 W3C 에서 HTML5 표준 제정하였으며 , 이에 따라 CSS3 의 무궁무진한 기법들이 개발되었으며 , 지속적으로 사용되고 있습니다 .

8

와이브릿지 (www.y-bridge.co.kr)

글로벌 의료인력 DB 시스템 고도화 (개발중 )

4. 심미적이고 다양한 타이포그래피를 활용다양한 폰트가 제작되고 , 구글폰트나 어도비 타입킷에서 개발 및 보급폰트의 의존도를 높인 사이트는 SEO( 검색엔진최적화 ) 에 유리할 뿐만 아니라 가볍고 로딩속도가 빠릅니다 .

9

HAWK&HEN (www.hawkandhen.com)

디자인 트랜드의 공통 요소란 ?

10

레이아웃 ? 컬러 ? 정보전달 ? 편의성 ?

디자인 트랜드의 공통 요소란 ?

11

“ 모바일 퍼스트” - 기획 , 모바일 , 태블릿 , 데스크탑 순으로

Chapter2. 반응형 웹

반응형웹이란 ?

13

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지 .

반응형 웹은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS 를 사용해 기기의 페이지 렌더링을 조정하는 설정입니다 .

1. 반응형웹 ? 적응형웹 ?

14

혹시 반응형웹과 적응형웹의 차이점을 아시나요 ?

1. 반응형웹 ? 적응형웹 ?

15

반응형웹Responsive Web Design(RWD)

적응형웹Adaptive Web Design(AWD)

장점 유동적인 변화로 인해 자연스러움모든 디바이스 사이즈에 대응 가능단점 완벽한 사이징 불가능 [ 상대적 사이즈 (%)]작업기간이 길고 , 유지보수가 힘듬

장점 각 디바이스에 맞는 최적화된 UI완벽한 사이징 가능 [ 절대적 사이즈(px)]빠른 응답 속도단점 단계적인 변화로 인한 부자연스러움모든 디바이스 사이즈에 대응 불가

1. 반응형웹 ? 적응형웹 ?

16

그럼 반응형웹을 해야되요 ? 적응형웹을 해야되요 ?

1. 반응형웹 ? 적응형웹 ?

17

금산군청 (www.geumsan.go.kr/html/kr/)

워싱턴 D.C 시청 (https://my.spokanecity.org/)

2. 반응형웹에 대한 완벽한 이해

18

1. 반응형웹에 대한 오해와 진실

그냥 부트스트랩 가져다 붙이면 되는거 아냐 ?

그냥 부트스트랩 가져다 붙이면 되는거 아냐 ?

그냥 부트스트랩 가져다 붙이면 되는거 아냐 ?

2. 반응형웹에 대한 완벽한 이해

19

절때 ! 그렇지 않습니다 .

2. 반응형웹에 대한 완벽한 이해

20

1. 부트스트랩의 그리드 시스템

2. 반응형웹에 대한 완벽한 이해

21

3. 반응형웹 제작 방법

22

직접 미디어쿼리를 이용한 방법Use to Mediaquery

부트스트랩을 활용한 방법Use to Bootstrap

장점 여러 기능 ( 스크립트 ) 가 자동탑재학습이 쉽고 , 빠름다양한 확장기능 제공Less, Sass 등의 CSS 생산도구 제공CDN 제공여러 버전의 테마를 제공막강한 Twitter 의 UI 프레임워크

단점 많은 서비스에서 사용되어 , 독창성이 떨어짐IE8 이하에서는 지원되지 않음많은것들을 담아내려고 했기때문에 수정이 불편함 (CSS 의 중복으로 스타일이 깨지는 문제 )플랫폼화 되있어서 커스터마이징에 한계가 있음

장점 최적화되고 가볍다 .좀더 정교하고 퀄리티가 높다 .획일화 되지 않은 다양한 디자인 표현 가능(12 등분의 그리드 형태가 아니여도 모든요소를 표현할 수 있다 .)

단점 작업시간이 오래 걸림유지보수가 어려움

Chapter3. 반응형웹에 대처하는 자세

1. 고해상도 이미지의 필요성

24

금산군청 PC 화면 금산군청 모바일화면

Retina 디스플레이가 변화시킨 생태계화면크기는 같은데 반해 픽셀의 개수는 기존보다 4배 증가 됐습니다 .이로 인해 표현 되야 될 이미지의 크기가 가로 2배 , 세로 2배가 됐습니다 .

2. SVG(Scalable Vector Graphics) 란 ?

25

벡터이미지방식의 XML 기반 파일 형식IE9 부터 정식 지원 , 벡터이미지 방식이라 사이즈를 줄이던 키우던 이미지 왜곡이 없습니다 .

SVG 정식로고

3. SVG 라이브러리

26

Font Awesome : SVG파일 형식의 ICON 을 모아 놓은 라이브러리유지 보수에 좋으며 , 작업 속도 향상 , 능률 향상 , 쉬운 접근성

3. SVG 라이브러리

27

4. 다양한 폰트사용

28

http://plani.co.kr/font/font.html

국문 웹 폰트의 지속적인 테스팅 , 최적화에 연구와 관심

29

작업자들간에 “배려” , “ 협동”이 필요할 때입니다 .

Chapter4. 맺음말

감사합니다 .

질의응답