Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CONTENTS
Chapter1. 2016 웹 트렌드
1. 수직적인 패턴과 스크롤
2. 카드 스타일의 인터페이스
3. 애니메이션 기법 활성화
4. 심미적이고 다양한 타이포그래피를 활용
5. 디자인 트렌드의 공통요소
Ch...
Chapter1. 2016 웹트렌드
1. 수직적인 패턴과 스크롤
모바일과 태블릿 환경까지 고려한 수직적인 흐름의 디자인이 유행
모바일 환경에서 인터넷에 접속하는 사용자의 비율은 점점 늘어나고 있습니다.
이처럼 점차 커지는 모바일 환경에 대한 기대는 수직적...
1. 수직적인 패턴과 스크롤
5
더웹 (http://www.wetheweb.net/index/)
벽산 (http://www.byucsan.com/index.asp)
2. 카드 스타일 인터페이스
모든 디바이스 사이즈에 매끄럽게 호환
카드 모양으로 구획을 나눈 디자인은 정보를 질서정연하게 보여주기에 용이하며,
가로든 세로든 정렬이 쉽기 때문에 반응형 홈페이지에 최적화된 디자인 스타일
...
2. 카드 스타일 인터페이스
7
구글 블로그템플릿 (www.getmdl.io/templates/blog/index.html)
BLOCK16 (block16omaha.com)
3. 애니메이션 기법 활성화
HTML5의 표준화, 이에 상응하는 CSS3의 상위기법 활용
2014년도 W3C에서 HTML5 표준 제정하였으며,
이에 따라 CSS3의 무궁무진한 기법들이 개발되었으며, 지속적으로 사용되고 ...
4. 심미적이고 다양한 타이포그래피를 활용
다양한 폰트가 제작되고, 구글폰트나 어도비 타입킷에서 개발 및 보급
폰트의 의존도를 높인 사이트는
SEO(검색엔진최적화)에 유리할 뿐만 아니라 가볍고 로딩속도가 빠릅니다.
9
...
디자인 트랜드의 공통 요소란?
10
레이아웃? 컬러? 정보전달? 편의
성?
디자인 트랜드의 공통 요소란?
11
“모바일 퍼스트” - 기획, 모바일, 태블릿, 데스크탑 순
으로
Chapter2. 반응형 웹
반응형웹이란?
13
디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지.
반응형 웹은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS를 사용해 기기의 페이지 렌더링을
조정하는 설정...
1. 반응형웹? 적응형웹?
14
혹시 반응형웹과 적응형웹의 차이점을 아시나요?
1. 반응형웹? 적응형웹?
15
반응형웹
Responsive Web Design(RWD)
적응형웹
Adaptive Web Design(AWD)
장
점
유동적인 변화로 인해 자연스
러움
모든 디바이스 사이즈에 대응
가능
...
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
장
점
여러 기능(스크립트)가 자동탑재
학습이 쉽고, 빠름
다양한 ...
Chapter3. 반응형웹에 대처하는
자세
1. 고해상도 이미지의 필요성
24
금산군청 PC화면 금산군청 모바일화면
Retina 디스플레이가 변화시킨 생태계
화면크기는 같은데 반해 픽셀의 개수는 기존보다 4배 증가 됐습니다.
이로 인해 표현 되야 될 이미지의 크...
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. 맺음
말
감사합니
다.
질의응
답
2016웹트렌드와 반응형웹
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
기획자를 위한 최신 모바일웹 트랜드와 반응형 웹 화면 설계
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

2016웹트렌드와 반응형웹

Download to read offline

사내발표자료(대외비x)

Related Books

Free with a 30 day trial from Scribd

See all

2016웹트렌드와 반응형웹

  1. 1. CONTENTS Chapter1. 2016 웹 트렌드 1. 수직적인 패턴과 스크롤 2. 카드 스타일의 인터페이스 3. 애니메이션 기법 활성화 4. 심미적이고 다양한 타이포그래피를 활용 5. 디자인 트렌드의 공통요소 Chapter2. 반응형웹 1. 반응형웹이란? 2. 반응형웹? 적응형웹? 3. 반응형웹에 대한 완벽한 이해 4. 반응형웹 제작 방법 Chapter3. 반응형웹에 대처하는 자세 1. 고해상도 이미지의 필요성 2. SVG란? 3. SVG 라이브러리 4. 다양한 폰트 사용
  2. 2. Chapter1. 2016 웹트렌드
  3. 3. 1. 수직적인 패턴과 스크롤 모바일과 태블릿 환경까지 고려한 수직적인 흐름의 디자인이 유행 모바일 환경에서 인터넷에 접속하는 사용자의 비율은 점점 늘어나고 있습니다. 이처럼 점차 커지는 모바일 환경에 대한 기대는 수직적인 흐름의 디자인을 유행하게 만들었습니다. 4 모바일에서 전체 인터넷 사용 점유율 20% 돌파 출처 : ITWORLD(www.itworld.co.kr) 2013.12.10 기사
  4. 4. 1. 수직적인 패턴과 스크롤 5 더웹 (http://www.wetheweb.net/index/) 벽산 (http://www.byucsan.com/index.asp)
  5. 5. 2. 카드 스타일 인터페이스 모든 디바이스 사이즈에 매끄럽게 호환 카드 모양으로 구획을 나눈 디자인은 정보를 질서정연하게 보여주기에 용이하며, 가로든 세로든 정렬이 쉽기 때문에 반응형 홈페이지에 최적화된 디자인 스타일 6 구글이 제시한 머티리얼 디자인 과 머티리얼 디자인 라이트
  6. 6. 2. 카드 스타일 인터페이스 7 구글 블로그템플릿 (www.getmdl.io/templates/blog/index.html) BLOCK16 (block16omaha.com)
  7. 7. 3. 애니메이션 기법 활성화 HTML5의 표준화, 이에 상응하는 CSS3의 상위기법 활용 2014년도 W3C에서 HTML5 표준 제정하였으며, 이에 따라 CSS3의 무궁무진한 기법들이 개발되었으며, 지속적으로 사용되고 있습니다. 8 와이브릿지 (www.y-bridge.co.kr) 글로벌 의료인력 DB시스템 고도화 (개 발중)
  8. 8. 4. 심미적이고 다양한 타이포그래피를 활용 다양한 폰트가 제작되고, 구글폰트나 어도비 타입킷에서 개발 및 보급 폰트의 의존도를 높인 사이트는 SEO(검색엔진최적화)에 유리할 뿐만 아니라 가볍고 로딩속도가 빠릅니다. 9 HAWK&HEN (www.hawkandhen.com)
  9. 9. 디자인 트랜드의 공통 요소란? 10 레이아웃? 컬러? 정보전달? 편의 성?
  10. 10. 디자인 트랜드의 공통 요소란? 11 “모바일 퍼스트” - 기획, 모바일, 태블릿, 데스크탑 순 으로
  11. 11. Chapter2. 반응형 웹
  12. 12. 반응형웹이란? 13 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지. 반응형 웹은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS를 사용해 기기의 페이지 렌더링을 조정하는 설정입니다.
  13. 13. 1. 반응형웹? 적응형웹? 14 혹시 반응형웹과 적응형웹의 차이점을 아시나요?
  14. 14. 1. 반응형웹? 적응형웹? 15 반응형웹 Responsive Web Design(RWD) 적응형웹 Adaptive Web Design(AWD) 장 점 유동적인 변화로 인해 자연스 러움 모든 디바이스 사이즈에 대응 가능 단 점 완벽한 사이징 불가능 [상대적 사이즈(%)] 작업기간이 길고, 유지보수가 힘듬 장 점 각 디바이스에 맞는 최적화된 UI 완벽한 사이징 가능 [절대적 사이즈 (px)] 빠른 응답 속도 단 점 단계적인 변화로 인한 부자연스러 움 모든 디바이스 사이즈에 대응 불가
  15. 15. 1. 반응형웹? 적응형웹? 16 그럼 반응형웹을 해야되요? 적응형웹을 해야되 요?
  16. 16. 1. 반응형웹? 적응형웹? 17 금산군청 (www.geumsan.go.kr/html/kr/) 워싱턴D.C 시청 (https://my.spokanecity.org/)
  17. 17. 2. 반응형웹에 대한 완벽한 이해 18 1. 반응형웹에 대한 오해와 진실 그냥 부트스트랩 가져다 붙이면 되는거 아냐? 그냥 부트스트랩 가져다 붙이면 되는거 아냐? 그냥 부트스트랩 가져 다 붙이면 되는거 아냐?
  18. 18. 2. 반응형웹에 대한 완벽한 이해 19 절때! 그렇지 않습니 다.
  19. 19. 2. 반응형웹에 대한 완벽한 이해 20 1. 부트스트랩의 그리드 시스템
  20. 20. 2. 반응형웹에 대한 완벽한 이해 21
  21. 21. 3. 반응형웹 제작 방법 22 직접 미디어쿼리를 이용한 방 법 Use to Mediaquery 부트스트랩을 활용한 방 법 Use to Bootstrap 장 점 여러 기능(스크립트)가 자동탑재 학습이 쉽고, 빠름 다양한 확장기능 제공 Less, Sass등의 CSS 생산도구 제공 CDN 제공 여러 버전의 테마를 제공 막강한 Twitter의 UI 프레임워크 단 점 많은 서비스에서 사용되어, 독창성이 떨어 짐 IE8이하에서는 지원되지 않음 많은것들을 담아내려고 했기때문에 수정이 불편함(CSS의 중복으로 스타일이 깨지는 문제) 플랫폼화 되있어서 커스터마이징에 한계가 있음 장 점 최적화되고 가볍다. 좀더 정교하고 퀄리티가 높다. 획일화 되지 않은 다양한 디자인 표현 가 능(12등분의 그리드 형태가 아니여도 모든요 소를 표현할 수 있다.) 단 점 작업시간이 오래 걸림 유지보수가 어려움
  22. 22. Chapter3. 반응형웹에 대처하는 자세
  23. 23. 1. 고해상도 이미지의 필요성 24 금산군청 PC화면 금산군청 모바일화면 Retina 디스플레이가 변화시킨 생태계 화면크기는 같은데 반해 픽셀의 개수는 기존보다 4배 증가 됐습니다. 이로 인해 표현 되야 될 이미지의 크기가 가로 2배, 세로 2배가 됐습니다.
  24. 24. 2. SVG(Scalable Vector Graphics)란? 25 벡터이미지방식의 XML 기반 파일 형식 IE9부터 정식 지원, 벡터이미지 방식이라 사이즈를 줄이던 키우던 이미지 왜곡이 없습니다. SVG 정식로 고
  25. 25. 3. SVG 라이브러리 26 Font Awesome : SVG파일 형식의 ICON을 모아 놓은 라이브러리 유지 보수에 좋으며, 작업 속도 향상, 능률 향상, 쉬운 접근성
  26. 26. 3. SVG 라이브러리 27
  27. 27. 4. 다양한 폰트사용 28 http://plani.co.kr/font/font.html 국문 웹 폰트의 지속적인 테스팅, 최적화에 연구와 관심
  28. 28. 29 작업자들간에 “배려”, “협동”이 필요할 때입니 다. Chapter4. 맺음 말
  29. 29. 감사합니 다.
  30. 30. 질의응 답
  • jinokseok

    Sep. 29, 2017

사내발표자료(대외비x)

Views

Total views

3,698

On Slideshare

0

From embeds

0

Number of embeds

683

Actions

Downloads

60

Shares

0

Comments

0

Likes

1

×