Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 2016웹트렌드와 반응형웹
Similaire à 2016웹트렌드와 반응형웹 (20)
2016웹트렌드와 반응형웹
- 2. CONTENTS Chapter1. 2016 웹 트렌드 1. 수직적인 패턴과 스크롤 2. 카드 스타일의 인터페이스 3. 애니메이션 기법 활성화 4. 심미적이고 다양한 타이포그래피를 활용 5. 디자인 트렌드의 공통요소 Chapter2. 반응형웹 1. 반응형웹이란? 2. 반응형웹? 적응형웹? 3. 반응형웹에 대한 완벽한 이해 4. 반응형웹 제작 방법 Chapter3. 반응형웹에 대처하는 자세 1. 고해상도 이미지의 필요성 2. SVG란? 3. SVG 라이브러리 4. 다양한 폰트 사용
- 4. 1. 수직적인 패턴과 스크롤 모바일과 태블릿 환경까지 고려한 수직적인 흐름의 디자인이 유행 모바일 환경에서 인터넷에 접속하는 사용자의 비율은 점점 늘어나고 있습니다. 이처럼 점차 커지는 모바일 환경에 대한 기대는 수직적인 흐름의 디자인을 유행하게 만들었습니다. 4 모바일에서 전체 인터넷 사용 점유율 20% 돌파 출처 : ITWORLD(www.itworld.co.kr) 2013.12.10 기사
- 5. 1. 수직적인 패턴과 스크롤 5 더웹 (http://www.wetheweb.net/index/) 벽산 (http://www.byucsan.com/index.asp)
- 6. 2. 카드 스타일 인터페이스 모든 디바이스 사이즈에 매끄럽게 호환 카드 모양으로 구획을 나눈 디자인은 정보를 질서정연하게 보여주기에 용이하며, 가로든 세로든 정렬이 쉽기 때문에 반응형 홈페이지에 최적화된 디자인 스타일 6 구글이 제시한 머티리얼 디자인 과 머티리얼 디자인 라이트
- 7. 2. 카드 스타일 인터페이스 7 구글 블로그템플릿 (www.getmdl.io/templates/blog/index.html) BLOCK16 (block16omaha.com)
- 8. 3. 애니메이션 기법 활성화 HTML5의 표준화, 이에 상응하는 CSS3의 상위기법 활용 2014년도 W3C에서 HTML5 표준 제정하였으며, 이에 따라 CSS3의 무궁무진한 기법들이 개발되었으며, 지속적으로 사용되고 있습니다. 8 와이브릿지 (www.y-bridge.co.kr) 글로벌 의료인력 DB시스템 고도화 (개 발중)
- 9. 4. 심미적이고 다양한 타이포그래피를 활용 다양한 폰트가 제작되고, 구글폰트나 어도비 타입킷에서 개발 및 보급 폰트의 의존도를 높인 사이트는 SEO(검색엔진최적화)에 유리할 뿐만 아니라 가볍고 로딩속도가 빠릅니다. 9 HAWK&HEN (www.hawkandhen.com)
- 10. 디자인 트랜드의 공통 요소란? 10 레이아웃? 컬러? 정보전달? 편의 성?
- 11. 디자인 트랜드의 공통 요소란? 11 “모바일 퍼스트” - 기획, 모바일, 태블릿, 데스크탑 순 으로
- 12. Chapter2. 반응형 웹
- 13. 반응형웹이란? 13 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지. 반응형 웹은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS를 사용해 기기의 페이지 렌더링을 조정하는 설정입니다.
- 14. 1. 반응형웹? 적응형웹? 14 혹시 반응형웹과 적응형웹의 차이점을 아시나요?
- 15. 1. 반응형웹? 적응형웹? 15 반응형웹 Responsive Web Design(RWD) 적응형웹 Adaptive Web Design(AWD) 장 점 유동적인 변화로 인해 자연스 러움 모든 디바이스 사이즈에 대응 가능 단 점 완벽한 사이징 불가능 [상대적 사이즈(%)] 작업기간이 길고, 유지보수가 힘듬 장 점 각 디바이스에 맞는 최적화된 UI 완벽한 사이징 가능 [절대적 사이즈 (px)] 빠른 응답 속도 단 점 단계적인 변화로 인한 부자연스러 움 모든 디바이스 사이즈에 대응 불가
- 16. 1. 반응형웹? 적응형웹? 16 그럼 반응형웹을 해야되요? 적응형웹을 해야되 요?
- 17. 1. 반응형웹? 적응형웹? 17 금산군청 (www.geumsan.go.kr/html/kr/) 워싱턴D.C 시청 (https://my.spokanecity.org/)
- 18. 2. 반응형웹에 대한 완벽한 이해 18 1. 반응형웹에 대한 오해와 진실 그냥 부트스트랩 가져다 붙이면 되는거 아냐? 그냥 부트스트랩 가져다 붙이면 되는거 아냐? 그냥 부트스트랩 가져 다 붙이면 되는거 아냐?
- 19. 2. 반응형웹에 대한 완벽한 이해 19 절때! 그렇지 않습니 다.
- 20. 2. 반응형웹에 대한 완벽한 이해 20 1. 부트스트랩의 그리드 시스템
- 21. 2. 반응형웹에 대한 완벽한 이해 21
- 22. 3. 반응형웹 제작 방법 22 직접 미디어쿼리를 이용한 방 법 Use to Mediaquery 부트스트랩을 활용한 방 법 Use to Bootstrap 장 점 여러 기능(스크립트)가 자동탑재 학습이 쉽고, 빠름 다양한 확장기능 제공 Less, Sass등의 CSS 생산도구 제공 CDN 제공 여러 버전의 테마를 제공 막강한 Twitter의 UI 프레임워크 단 점 많은 서비스에서 사용되어, 독창성이 떨어 짐 IE8이하에서는 지원되지 않음 많은것들을 담아내려고 했기때문에 수정이 불편함(CSS의 중복으로 스타일이 깨지는 문제) 플랫폼화 되있어서 커스터마이징에 한계가 있음 장 점 최적화되고 가볍다. 좀더 정교하고 퀄리티가 높다. 획일화 되지 않은 다양한 디자인 표현 가 능(12등분의 그리드 형태가 아니여도 모든요 소를 표현할 수 있다.) 단 점 작업시간이 오래 걸림 유지보수가 어려움
- 24. 1. 고해상도 이미지의 필요성 24 금산군청 PC화면 금산군청 모바일화면 Retina 디스플레이가 변화시킨 생태계 화면크기는 같은데 반해 픽셀의 개수는 기존보다 4배 증가 됐습니다. 이로 인해 표현 되야 될 이미지의 크기가 가로 2배, 세로 2배가 됐습니다.
- 25. 2. SVG(Scalable Vector Graphics)란? 25 벡터이미지방식의 XML 기반 파일 형식 IE9부터 정식 지원, 벡터이미지 방식이라 사이즈를 줄이던 키우던 이미지 왜곡이 없습니다. SVG 정식로 고
- 26. 3. SVG 라이브러리 26 Font Awesome : SVG파일 형식의 ICON을 모아 놓은 라이브러리 유지 보수에 좋으며, 작업 속도 향상, 능률 향상, 쉬운 접근성
- 27. 3. SVG 라이브러리 27
- 28. 4. 다양한 폰트사용 28 http://plani.co.kr/font/font.html 국문 웹 폰트의 지속적인 테스팅, 최적화에 연구와 관심
- 29. 29 작업자들간에 “배려”, “협동”이 필요할 때입니 다. Chapter4. 맺음 말
- 30. 감사합니 다.
- 31. 질의응 답
Notes de l'éditeur
- 안녕하십니까? 2016년 웹트랜드와 반응형웹에 대해서 발표를 하게 된 퍼블리싱팀 김지만입니다. 이제부터 발표를 시작하겠습니다.
- 저는 목차를 크게 세가지로 구분해봤는데요. 첫 번째는 2016년 웹트랜드에 대해 두 번째는 반응형웹에 대해 세 번째는 반응형웹에 대처하는 자세입니다.
- 첫 번째 2016년 웹트랜드입니다.
- 모바일과 태블릿의 보급화로 인해 사용자들은 이전보다 손쉽게 인터넷에 접속할 수 있게 되었습니다. 앞에 보이는 그래프는 전체 인터넷 사용자 중 모바일기기에서 접속하는 비율을 나타낸 그래프입니다. 2013년도 기준 20%를 돌파했습니다. 증가추세를 보아 현재는 넘어서지 않았을까 추측 됩니다. 이에 따라 수직형태의 패턴과 스크롤방식의 스타일이 유행을 하게됩니다.
- 제가 예시로 보여드릴 사이트입니다. 잠시 감상 하시겠습니다. (더웹과 벽산사이트를 둘러본다.) 수직적인 패턴과 스크롤 방식은 올해 갑자기 나타는 경향은 아니고 2013년도부터 차츰 보이던 형태입니다. 과거와 다르게 현재는 단순한 스크롤링에서 벗어나 좀더 자연스럽게 반응하는 시차반응 페럴렉스 스크롤방식, 그리고 QHD화면에서도 잘림없이 큰 화면에 대응한다는 점이 차이점이라고 볼 수 있습니다. 꽉차있어서 풍성해 보이지 않습니까?
- 올해도 어김없이 유행할 카드스타일의 인터페이스입니다. 카드스타일은 정보전달이 매끄럽고 질서정연한 모습을 보여줍니다. 그리고 모든 디바이스 사이즈에 최적화된 UI를 제공할 수 있는 강점이 있습니다. 가장 초기에 개념을 잡은 것이 구글의 머티리얼 디자인입니다. 구글은 처음 모바일 디바이스환경을 만들때 부족한 것들이 참많았습니다. 기존의 UI로는 작은 모바일 화면을 대응할 수 없다고 생각하고, 모바일과, 데스크탑 그 외에 다양한 디바이스사이즈를 아우르는 하나의 일관된 디자인 가이드가 필요했던 것입니다. 그것이 바로 머터리얼 디자인입니다.
- 앞에 보이는 사이트는 머터리얼 디자인라이트 사이트입니다. 구글의 디자인 철학이 잘 담긴 PC웹 전용 디자인 가이드입니다. 위의 사이트는 카드스타일의 인터페이스를 사용해 흡사 메뉴판을 보고 있는 느낌을 전달하며, 반응형에 최적화된 인터페이스를 제공합니다.
- 말도 많고 탈도 많던 HTML5가 2014년에 정식으로 표준화됬습니다. 국내에는 여전히 구형브라우저 사용자가 대다수라 큰 이슈가 되진 못했지만, 마이크로소프트에서는 금년부터 인터넷익스플로러8이하 버전 보안을 지원하지 않겠다고 했습니다. 이제는 신기술을 쓸 때가 도래했습니다. 외국은 IE의존도가 낮은편이라, 예전부터 써와서 많은 발전을 이루었지만, 저희도 이제는 시대에 맞게 적극 사용해야 될것입니다. 다음으로 보실 사이트는 여러분께서 익히 잘 알고 계신 와이브릿지 사이트입니다. 이 사이트는 많은 수의 애니메이션 효과가 있어서 사용자로 하여금 흥미를 유발 시킵니다. 그리고 다음 사이트는 제가 가장 최근에 작업한 홈페이지로 저도 트랜드에 맞게 간단한 애니메이션 효과를 넣었습니다.
- 네 번째로는 심미적이고 다양한 타이포그래피 서체를 활용한 홈페이지가 만들어 지고 있습니다. 현재는 다양한 폰트가 제작되고 있으며, 구글이나 어도비에서 개발 및 보급에 앞장서고 있기 때문에 그 어느 시대보다 사용하기 편리한 시대입니다. 폰트의 의존도를 높인 사이트는 검색엔진최적화에 유리할 뿐만 아니라 가볍고 빠릅니다. 인터넷 속도가 아무리 빨라졌다해도 일부국가를 제외하고는 아직도 3G 통신망을 쓰는 국가가 대다수를 차지합니다. 용량이 무거운 이미지로 로딩속도가 느려진다면 사용자들은 오래 머물고 싶지 않을 것입니다. 영문 폰트는 서체구조가 단순해 다양한 형태로 수정하기 좋지만 한글 폰트는 변수가 많아 만들기 힘들다고 합니다. 한글 폰트 이슈에 관해서는 제가 발표 후반부에 다시한번 말씀 드리겠습니다. (예시) 이사이트는 다양한 웹폰트를 사용해 심미성이 느껴집니다. 그리고 외국사이트 답게 시원시원한 화면에 과감한 타이포배치가 눈에 띕니다. 이외에도 다양한 디자인 이슈들이 존재 하지만, 디자인쪽은 좀더 전문적인 분야기도 하고, 국내 실정에 맞지 않는 사항이 많아서 여기까지만 요약하겠습니다.
- 그렇다면, 혹시 디자인 트랜드의 공통 키워드에 대해 아시는 분 계십니까? 힌트를 드리자면 2009년 이후 대두된 주요 이슈입니다. 그리고 저희 그룹웨어에 지식공유게시판안에 2016년 웹디자인 트랜드라는 게시글안에 있습니다. (조크) 맞추신 분께는 까페M에서 커피한잔 할수 있는 커피이용권을 드리겠습니다. (물론 저와함께 마시는 거입니다. ^_^)
- -> 그렇습니다. 디자인 트랜드의 공통 키워드는 바로 “모바일 퍼스트”입니다. 앞서 말씀드린거와 같이 전체 인터넷 사용 점유율이 모바일에서는 가파른 상승세입니다. 모든 디자인적 요소가 점점 모바일에 초점이 맞춰져 있습니다. 즉, PC 웹사이트만큼 모바일사이트가 중요하다는 이야깁니다. 그럼 기존에 방식처럼 PC홈페이지 따로 모바일홈페이지 따로 만들면서 자원관리를 비효율적으로 하지 말고 하나의 소스로 다양하게 사용하는 “원 소스 멀티 유즈” 방식이 필요해 졌습니다.
- 이러한 필요성이 대두된 가운데 반응형 홈페이지가 나타나게 됬습니다.
- 반응형웹이란 디스플레이 종류에 따라 화면의 크기가 자동으로 “최적화” 되도록 조절되는 웹페이지라고 구글에서는 정의를 하고 있습니다. “최적화”라는 키워드를 생각하시면 될 것입니다. 여러분들께서 익히 잘 알고 계신 계념이기 때문에 간단히 생략하고 넘어 가겠습니다.
- 그렇다면.. 혹시 적응형웹이라는 단어를 들어 보셨습니까? 적응형웹은 역시 반응형웹과 마찬가지로 CSS3의 미디어쿼리 기술을 이용하여 스타일을 분기처리하여 화면을 변화시킵니다. 단계적으로 레이아웃이 변경되느냐, 아님 유동적으로 레이아웃이 변경되느냐 이 차이입니다.
- 두 방식에도 각각의 장단점들이 존재를 하게됩니다. 반응형웹방식은 유동적인 변화로 인해 이동이 자연스러우며, 새로운 사이즈의 디바이스기기가 만들어져도 상대적 사이즈로 반응하기 때문에 따로 제작할 필요가 없습니다. 하지만 작업 소요시간이 오래 걸리고 많은 테스트 시간을 거쳐야 됩니다. 적응형웹방식은 각 디바이스에 맞는 최적화된 레이아웃을 제공하기 때문에 정교한 사이징이 가능하며, 빠른 응답속도를 자랑합니다. 하지만 브라우저 크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 재배치되기 때문에 약간 부자연스럽게 느껴질 수 있고, 새로운 형태의 디바이스가 만들어진다면, 따로 작업을 해야되는 번거로움이 있습니다. 실 예로 모바일 사이즈가 다 같아 보이지만 실상은 그렇지 않습니다. 가장 기본이 되는 아이폰5이하는 320px의 사이즈를 모든 안드로이드폰은 360px의 사이즈를 아이폰6는 375px, 아이폰6+는 414px의 사이즈를 가지고 있습니다. 이 외에도 아이패드, 아이패드 미니, 갤럭시탭 등등 무수한 사이즈가 존재하고 있습니다.
- 그렇다면, 반응형웹을 해야될까요? 아님 적응형웹을 해야될까요????? 현재는 반응형웹이 장점이 더 많고, 대중화 되있기 때문에 많이 사용됩니다만, 사실 국내 웹사이트 실정에는 잘 맞지 않습니다.
- 우리나라는 한 화면에 많은 콘텐츠 표현을 선호하는 문화가 자리잡고 있기 때문에 반응형 웹구축이 복잡한 편입니다. 예시로 앞에 보이는 국내 사이트는 금산군청사이트입니다. (사이트 훑어보기) 여기는 미국의 수도 워싱턴D.C 시청사이트입니다. (사이트 훑어보기) 국내사이트에 비해서 심플합니다. 이렇게만 디자인 나온다면 반응형작업하기 편할꺼 같습니다^^; 근데 국내사이트는 수도도 아니고 시도 아닌 군에서 만든 사이트가 이렇게나 많습니다. 이 무수한 정보들을 꽉꽉 집어 넣기도 힘들고 모든 디바이스에 반응하게끔 하려면 사이즈를 상대값으로 작업해야 돼서 여간 힘든게 아닙니다. “제 개인적인 견해로는 비주얼이 부각되는 홈페이지는 반응형웹으로 제작하고 공공기관 및 연구원 홈페이지는 적응형웹으로 제작하는 스마트한 혼용 방식이 필요하다고 생각됩니다.”
- 반응형웹에 대한 오해에 대해서 제가 재미있는 예시를 만들어봤습니다. (플레이) 대다수의 작업자분들께서는 부트스트랩 플러그인을 사용하면 반응형웹은 저절로 된다고 생각하십니다. 하지만!
- 절때 그렇지 않습니다.
- 부트스트랩을 사용하려면 부트스트랩이 규정한 엄격한 룰을 지켜야 합니다. 그리드 시스템이라 불리는 이 체계는 모든사이즈를 12분할 한 형태입니다. 클래스명에 접두사로 구분을 줘 모바일일때, 태블릿일때, 일반 데스크탑일때, 와이드 데스크탑일때 총 4가지형태를 반응하게 만들어 놓은 시스템입니다. 이 체계는 최소한의 사이즈 조절법이라 좀더 디테일하게 작업 할 수 없는 단점이있습니다.
- 위의 그림은 부트스트랩의 아주 기본적인 탬플릿입니다. (클릭) 그리드시스템을 적용해 본문영역을 12분의8로 분할하였고, 사이드매뉴는 12분의2로, 여백도 12분의2로 줬습니다. 최소로 제어할 수 있는 사이즈가 12분의1이기 때문에 이 이하의 사이즈를 조절하기는 사실상 힘듭니다. 그래서 부트스트랩을 이용한 홈페이지는 다 비슷비슷하게 생긴 이유입니다.
- 반응형웹을 제작 할때는 직접 미디어쿼리를 이용해 제작하는 방법과 부트스트랩과 같은 플러그인을 사용해 제작하는 방법이 있습니다. 직접 미디어쿼리를 이용해 제작하면 사이트가 최적화되고 가볍습니다. 그리고 다양한 디자인에 대응할 수 있으며, 작업 퀄리티가 더 높습니다. 하지만 작업시간이 오래 걸리며, 유지보수가 어려운 단점이 있습니다. 부트스트랩을 이용한 방법은 작업시간이 비교적 빠르며, 이미 많은 기능들이 탑재 되있어 다양한 기능들을 사용하기 편리합니다. 단점으로는 그리드시스템을 사용하기 때문에 디자인들이 하나같이 다 획일화되있으며, 불필요한 소스들이 많아 전반적으로 사이트가 무겁습니다.
- 지금까지 반응형웹에 대해서 자세하게 설명 드렸습니다. 그렇다면, 반응형웹에 우리들은 어떻게 대처해야 할까요?
- 애플은 2010년에 아이폰4를 발표하면서 아이폰에 “레티나 디스플레이”를 넣었습니다. 픽셀의 개수를 기존의 화면보다 4배 증가시켰으며, 이로 인해 표현 되야 될 이미지의 크기가 가로2배, 세로 2배가 됬습니다. 그래서 pc화면에서는 선명하게 잘 나오는 이미지가 모바일에서 볼때는 뭉개지는 현상이 생기게 됩니다. 반응형웹은 하나의 이미지로 pc와 모바일 화면에 보여지게 됩니다. 아까 예시로 들었던 금산군청의 PC화면에서의 아이콘 모습입니다. PC에서는 선명하게 잘보이지만 모바일 화면에서의 아이콘은 뭉개지는 현상을 확인할 수 있습니다. 이 문제를 해결하기 위해선 이론 상 모든 이미지를 2배 크게 만들어야 하는데 사실상 불가능 합니다.
- 하지만 대안을 찾았습니다. 확대나 축소를 해도 이미지 손상이 없는 벡터이미지 방식으로 사용하면 문제가 해결이 됩니다. 2009년에 W3C에서 SVG라는 이름의 벡터이미지 포멧을 만들었습니다. SVG이미지를 사용하면 2배 큰 이미지가 필요없이, 확대나 축소를 해도 이미지 깨짐현상이 없습니다. 하지만 ie9버전부터 지원하기 때문에 구형브라우저에서는 사용할 수 없는 단점이 있습니다.
- SVG이미지를 이용해 아이콘을 만들면 모바일에서도 선명하게 볼 수 있습니다. 제가 소개 시켜 드릴 폰트어썸이라는 사이트는 작업자들의 수고를 덜고자 여러 나라에서 공통적으로 쓰이는 아이콘들을 모아놓은 라이브러리입니다.
- 이 외에도 구글의 머티리얼 아이콘즈, 폰트엘로닷컴, 아이콘팩 등등 다양한 폰트아이콘사이트가 존재하며, 디자인 톤에 맞게 사용하면 될것입니다. 작업속도와 능률이 향상되고, 쉬운 사용성과 편리함 때문에 적극 사용 하길 권장합니다.
- 그리고 다양한 폰트를 사용해 홈페이지를 좀더 미려하게 제작해야 됩니다. 저희 퍼블리싱팀은 국문 웹폰트를 모두 모아 지속적인 테스팅과 최적화 연구를 하고 있습니다. 각 pm분들께서는 고객사에 가셔서 협의를 하실때 이 표본을 보고서 상담하시면 좋을 거 같습니다. 편리하게 모바일폼에서도 최적화 시켜놨습니다. 실예로 금년 2월 2일(바로 저번주였죠.)에 네이버에서 나눔스퀘어 폰트를 배포했습니다. 기존 폰트보다 작은 사이즈에서 가독성이 뛰어나 본문용으로 제격이라 적극사용을 권장하려 하였으나, IE구형브라우저나 파이어폭스에서는 가독성이 깨지는 현상이 발생해 현재 네이버본사에 문의를 넣었고, 네이버에서 테스트를 해보겠다는 답변을 받았습니다. 저희 퍼블리싱팀은 지속적인 관심과 테스트를 통해 더 나은 환경을 제공하겠습니다.
- 기술이 점점 더 진화하고 고급화되고 있습니다. 좋은 홈페이지를 만들기 위해서는 각 파트에서 최선을 다하고 협업자에게도 따뜻한 배려가 필요할 때입니다.
- 우리 모두 2016년도에도 파이팅입니다. 감사합니다. (조크) 질문은 받지 않겠습니다....
- 농담입니다. 자유로운 질문시간 갖겠습니다.