ݺߣ

ݺߣShare a Scribd company logo

투어팁스모바일웹 제작가이드

•Download as PPTX, PDF•
•
병수 김
병수 김
1 of 29
Downloaded 57 times
Copyright Tourtips corp. All rights reserved. 투어팁스의 사전 승인 없이 본 내용의 전부 또는 일부에 대한 복사, 전재, 배포, 사용을 금합니다. 2013.10.11 서비스 개발팀 김병수 투어팁스 모바일 웹 제작 가이드
Copyright Tourtips corp. All rights reserved. 목차 1. IA(Information Achitecture) 설계 I. IA란? II. 모바일 기반의 정보설계 2. UI(User Interface) 설계 I. 반응형 웹이란? II. 반응형 웹 패턴 III. 국내 포탈사이트 반응형 사례 3. UI(User Interface) 디자인 기획 I. 모바일 해상도의 이해 II. 모바일웹에서의 폰트와 이미지 4. 퍼블리싱 방향 I. 모바일 관련 기본설정 II. Reset CSS의 적용 III. HTML5 와 CSS3 사용 IV. 모바일 내 이미지 처리방식
IA(Information Achitecture) 설계 I. IA란? II. 모바일 기반의 정보설계 1
Copyright Tourtips corp. All rights reserved. IA(Information Achitecture-정보 설계)란? 정보설계란 웹사이트에서 정보의 구성과 흐름을 만드는 것으로, 웹사이트와 고객 사이에서 커뮤니케이션을 수행하는 중요한 부분이다. 데이터 고유의 패턴을 정리하고 체계화 하여 복잡한 것들을 명확하게 정리하는 것, 다른사람이 스스로 찾을수 있도록 해주는 정보의 구조 또는 정보의 지도, 명백한 논 리, 인간의 이해력, 정보의 체계화와 관련된 과학 등에 초점이 맞추어 시대의 요구 사항을 해결하는것 • 정보 체계의 정립 • 네비게이션 체계 (Navigation System) • 레이블 체계 (Labeling System) • 탐색 체계(Searching System) • 컨텐츠 배치(Dispositon System) 사용자가 고민하지 않고 정보를 쉽고 빠르게 찾을 수 있으며,다시 찾기 쉽게 고객의 경험에 인식되도록 하는 매우 중요한 작업이 정보설계(Information Architecture)이다. 결론!!!
Copyright Tourtips corp. All rights reserved. 5 공간분할 공간분할 방식은 말 그대로 하나의 공간을 두고 그 공간 안에서 컨텐츠를 분할하는 방식이다. 이 방식은 보통 화면이 클 때 사용 하므로 모바일에 적합하지 않다. 모바일 기반의 정보설계 모바일은 화면이 작기때문에 너무 많은 정보들이 들어가게 되면 오히려 불편할 수 있음 사이트에 들어갈 요소들을 정확히 파악 욕심을 부려서 더 많은 데이터를 담을순 없을까?
Copyright Tourtips corp. All rights reserved. 6 모바일 기반의 정보설계 그렇다면 모바일에서는 어떤 분할방식이 적합한 가? World vs View 넓은 정보 배치에서 그때그때 일부만 보여주는 방식이다. 월드와 뷰의 개념, 그리고 이를 조작하는 방식인 ‘스크롤’ 이 등장한다, 이런 방식은 균질하면서도 방대한 데이터(ex:지도)를 보여주 기에는 적합하나, 이질적이고 순서가 담겨있는 데이터를 보여 주기에 적절하지 않다.
Copyright Tourtips corp. All rights reserved. 7 모바일 World vs View 모바일 기반의 정보설계 모바일에서의 정보공간은 ‘전개도’ 방식이다. 즉 정보를 인접성 중심으로 연결한 뒤 ‘이동’하며 보는 방식이다. 하지만, 전개도 방식을 극복할 수 있는 ‘시간성’중심의 정보 배열 방법론은 없을까?
Copyright Tourtips corp. All rights reserved. 8 모바일 기반의 정보설계 공간분할 vs 시간분할 하나의 페이지가 부분 갱신을 통해 여러 기능을 함으로 페이지 체류 시 간이 길어지고, 조망과 디테일등 상반된 활동도 가능케 한다.
9 UI(User Interface) 설계 I. 반응형 웹이란? II. 반응형 웹 패턴 III. 국내 포탈사이트 반응형 사례 2
Copyright Tourtips corp. All rights reserved. 반응형 웹 이란? 반응형 웹 디자인 (줄여서 RWD) 은 웹 디자인의 한 접근방법으로, 데스크탑 모니터부터 모바일 폰까지 등 많은 종류의 기기에서 최적의 사용환경 - 최소한의 리사이징, 패닝, 스크롤링으로도 읽기 쉽고 접근하기 쉬운 환경을 제공하는 사이트를 만드는 것을 말한다. 반응형 웹 디자인: 위키피디아의 정의 • 반응형 웹디자인의 3가지 핵심 기법 1. Fluid Grid Fluid Grid는 가변성이 있는 그리드(레이아웃)를 이용해 해상도에 최적화시키는 기법 예제 2. Flexible Images Fluid Grid와 마찬가지로 고정적인 px대신 %나 em을 사용해 이미지의 크기가 비율대로 조절되는 기법 3. Media Queries CSS3 이전에서 ‘print’, ‘screen’ 등 미디어 타입등을 사용하던 것을, CSS3에서는 스크린 폭/높이 등 (예: min-width: 320px) 디바이스관련 여러 정보를 이용하여 스타일을 바꿀 수 있게 되었습니다. 사실상 반응형 웹이 가능하게 된 큰 이유이기 도 합니다. @media print { #article {background:#fff; font-size:16px; color:#000} } @media screen and (max-width:640px){ #article {background:#fff; font-size:1.25em; color:#000} } #article {background:#000; font-size:0.75em; color:#fff}
Copyright Tourtips corp. All rights reserved. 반응형 웹 패턴 여러가지 패턴스타일이 존재하지만 공통적으로 많이 쓰는 패턴은 5가지 정도이다. 굳이 패턴을 쓰지 않아도 상관없지만 쓰지 않을경우에는 흐름이 어색해질 수 있으니 주의하자. A. Mostly fluid B. Column Drop 심플하기 때문에 가장 많이 사용되는 패턴으로, 큰 화면에서는 더 많이 여유를(가 장자리)를 두고, 유연한 Grids와 큰 화면에서 작은 화면으로 이미지 스케일링, 화면 이 작아질 수록 세로로 column들을 쌓는 형태를 취하는 패턴이다. 또 다른 인기있는 패턴으로, multi-column layout으로 시작해서 single-column layout과 화면사이즈가 작아짐에 따라 column이 아래로 떨어지는 형태로 끝이난다. Mostly Fluid pattern과는 달리, 이 레이아웃에서는 요소들의 전체 사이즈를 유지하 려는 일관성이 있다. 다양한 화면 크기에 적응하는 대신에 column들을 쌓는 형태 에 의존한다. http://www.fivesimplesteps.com/ http://modernizr.com/ 11
Copyright Tourtips corp. All rights reserved. 12 반응형 웹 패턴과 적용해야 할 패턴 방식 D. Tiny Tweek E. Off canvas C. Shifter 이 패턴은 다양한 화면 사이즈에 크로스 적용이 어렵다. 왜냐하면 많은 공수를 요 구하기 때문이다. 아마도 이러한 이유로 앞의 두가지 패턴보다는 덜 사용되는 이 유일 것이다. 여러 화면 사이즈에 적응시키는 가장 간단한 형태이지만, 이 패턴 또한 가장 인기 없는 패턴이었다. 완전 간단한 컨텐츠로 구성된 사이트에서는 단지 폰트 사이즈나 이미지 레이아웃 만 고려해서 사용하기에는 좋을 것이다. 웹사이트를 모바일로 가지고 오면서 콘텐츠의 크기와 양을 줄이지 않 는 새로운 방법으로, 일부영역을 숨겨서 사용자의 제스쳐 혹은 액션에 따라 숨겨두었던 영역을 보여주는 방식이다. http://foodsense.is/ http://futurefriend.ly/ http://www.kaemingk.com/en/our- showroom/christmas/
Copyright Tourtips corp. All rights reserved. 13 국내 포털사이트 반응형 사례 • 네이버 모바일 네이버의 경우 640px을 기준으로 641이상은 2단 640이하는 1단 구성으로 되어있다. (정확하게는 640px외에도 많은 사이즈를 기준으로 잡고 있지만 기본적으로 단이 나눠지는 기준은 640px이다.)
Copyright Tourtips corp. All rights reserved. 14 국내 포털사이트 반응형 사례 • 다음 모바일 다음의 경우도 마찬가지로 640px을 기준으로 잡고 있다.
Copyright Tourtips corp. All rights reserved. 15 국내 포털사이트 반응형 사례 • 네이트 모바일 네이트 모바일페이지도 마찬가지로 640px을 기준으로 2단구성과 1단 구성을 나누고 있다.
16 UI(User Interface) 디자인 기획 I. 모바일 해상도의 이해 II. 모바일웹의 사이즈 기준 III. 모바일웹에서의 폰트와 이미지 3
Copyright Tourtips corp. All rights reserved. 17 모바일 해상도의 이해 스마트폰과 주요 해상도 (2013.2.2 기준) • iPhone5 : 640 x 1136 • iPhone4S : 640 x 960 • 갤럭시S3, 갤럭시노트2 : 720 x 1280 • 옵티머스G : 768 x 1280 • 갤럭시노트 : 800 x 1280 • 그외 해상도 참고 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density CSS pixel ratio 에 관하여 위에서 보듯이 iPhone 4S의 가로 해상도는 640px 이다. css 에 width:160px 로 지정한다면, 기대하는 크기는 화면의 1/4 이 어야 한다. 하지만, 실제로 보여지는 크기는 1/2로 나타난다. 왜 그럴까? iPhone4S의 경우에는 CSS pixel ratio 값이 ’2′이기 때문에 1/4 크기가 아닌 (1/4) X 2 인 1/2 크기로 표현된다. (160px 의 두배인 320px 인것처럼 표현된다.) 디바이스 해상도에서 CSS pixel ratio 를 나눈값이 디바이스가 css 에 대응하는 픽셀 값이다. dpi 에 관하여 마찬가지로 갤럭시S 를 예로 안드로이드 폰을 알아보겠다. 갤럭시S의 가로 해상도는 480px 이고, 240dpi (hdpi) 이기 때문 에 480 / 1.5 로 계산해서 디바이스 가로 화면의 크기가 320px 로 생각하고 코딩하면 된다. 1.5 라는 계수는 ‘px = dp X (dpi/160)’ 이라는 공식에서 나왔으 며, 갤럭시S의 경우 ’480 = css와 대응되는 px 값 X (240/160)’ 계산을 통해 480px 해상도는 320px 의 css 와 대응된다는 것을 알 수 있다. 이해를 돕기 위해 하나의 예를 더 들어보자면, width:160px 을 스타일로 적용시키면, ‘px = 160 X (240/160)’ 이라는 공식을 통해 디바이스 상에는 240px 로 인식되면서 갤럭시S 화면의 1/3 이 아닌, 1/2을 차지하게 되는 것이다. 즉! 디바이스의 해상도가 640px 이지만, 브라우저의 해 상도는 320px 로 생각하면 된다는 뜻이다. 즉! 디바이스의 해상도가 480px 이지만, 브라우저의 해 상도는 320px 로 생각하면 된다는 뜻이다.
Copyright Tourtips corp. All rights reserved. 18 모바일 웹의 사이즈 기준 각 스마트폰의 브라우저 해상도 위의 표를 살펴보면 스마트폰에서의 웹브라우저 최대 가로사이즈는 640px 앞서 타 사이트들이 640px을 기준으로 잡은 이유이다. 640px을 기준으로 잡고 1280까지의 여백을 생각해 4의 배수로 디자인 하는것이 각 해상도 마다 정수로 px단위가 떨어진다. 왜 하필 4의 배수일까? 이는 영상의 구조가 4의 배수일 때 가장 컨트롤하기 쉽기 때문이다. 또한 압축알고리즘을 적용하기도 쉽다. 푸리에 변환이라고 알려져 있는 변환에도 적응하기 쉽고, CPU 또한 4의 배수값이 처리하기에 편하다.
Copyright Tourtips corp. All rights reserved. 19 모바일 웹에서의 폰트와 이미지 PC웹사이트는 이미지 크기와 글자 크기 등 나름 정해진 규칙 속에서 제작해 왔다. 하지만 모바일 디바이스는 성장한 지 얼마 되지 않았기에 이미지 크기, 글자 크기 등을 나름대로 고민해서 작성해야 한다. • 폰트사이즈 통상적으로 폰트 사이즈는 고정단위(px)와 유동단위(%, em)가 있다. 보통 모바일의 경우 px과 %보다는 em단위를 많이 쓴다. 모바일에서 확대, 축소시 px은 고정이기때문에 변화가 없지만 em은 확대축소가 가능하다. 기존의 웹 페이지들도 em을 쓰는것이 접근성 측면에서 좋다. 1em = 16px em 계산법 12(사용하고싶은px) / 16(기준크기px) = 0.75em 계산하기 싫으신 분들은 http://pxtoem.com/ 참고 • 이미지 사이즈 기본적으로 이미지는 사이즈의 문제 보다는 용량의 문제가 이슈가 크다. 그렇기 때문에 디자인적으로는 모바일 내에서 이미지의 크기를 가변으로 할것인지 고정으로 할것인지만 정하고 넘어가자.
퍼블리싱 방향 I. 모바일 관련 기본설정 II. Reset CSS의 적용 III. HTML5 와 CSS3 사용 IV. 모바일 내 이미지 처리방식 4
Copyright Tourtips corp. All rights reserved. 21 모바일 관련 기본설정 • [Viewport] - 기본설정 모바일 웹브라우저의 기본 화면크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다. 기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320x480)를 본다고 가정한 경우 뷰포트 를 설정하지 않는다면 가로 좌우 여백이 330px의 여백이 남는 아주 작은 화면을 보게 됩니다. 다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다. • [자동 전화걸기 태그 방지] - 기본설정 전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다. • [파비콘] – 기본설정 추천 안드로이드 스마트폰은 버전에 따라 홈화면 아이콘 및 파비콘을 홈화면 아이콘으로 사용합니 다.(png사용) • [툴바감추기] – 기본설정 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주 소표시줄이 사라진 것 처럼 만들수 있습니다. <meta name="viewport" content="width=device-width , initial- scale=1.0" /> 풀 브라우징 된 사이트의 모습 스마트폰의 해상도와 동일하게 노출
Copyright Tourtips corp. All rights reserved. 22 Reset CSS 설정 Reset CSS를 설정하는 이유는 각 브라우저마다 기본적으로 정해져 있는 태그들의 속성들을 리셋 시켜주지 않으면 브라우저마 다 다른 모습으로 보여질 가능성이 있기때문에 CSS스타일을 일관되고 현대적인 기준으로 바꿔준다. • 여러가지 Reset CSS들이 기본적으로 지정하는 속성 1. 대부분 영역을 지정하는 태그들에 Margin, padding, border속성 0 2. HTML5를 지원하지 않는 브라우저에서도 새로 추가된 태그들을 일반 div 요소로 볼수 있게 처리 • Normalize.css 1. 기본적으로 지정하는 속성이외에 HTML5에 좀 더 특화된 Reset CSS 2. 크로스 브라우징에서 가장 번거롭게 하는 button과 input에 대해 좀더 세밀하게 잡아줌 • Yahoo Reset CSS 1. 대부분의 태그보다는 자주 쓰는 태그에 대한 설정을 좀 더 세밀하게 작업 2. 영역을 지칭하는 태그도 일부에 한해 설정, 글자크기도 기본글자크기가 달라지는 부분에만 기본 100%가 되게 설정 • 그 외에도 Naver, Daum, Nate등의 포털에서도 자사만의 Reset CSS 보 유 • 투어팁스에서는 모바일만을 위한 HTML제작이기 때문에 HTML5를 가장많 이 지원하는 Normalize.css 채택
Copyright Tourtips corp. All rights reserved. 23 HTML5 와 CSS3 사용 • HTML5 HTML5를 판별하는 기준은 바로 새로운 문서 형식(Doctype)에 있다. 1. 새로운 마크업 기존의 복잡한 문서형식정의 대신 간결하고 간편해졌으며 css나 javascript에 대한 태그 역시 간결해졌다. 그 외에도 HTML5에서는 HTML4보다 확장된 태그들을 지원한다. 특히, 문서 구조에 적합하게 header, footer, nav, section과 같은 구조화 마크업을 사용할수 있다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html>
Copyright Tourtips corp. All rights reserved. 24 HTML5 와 CSS3 사용 2. 편리한 폼(Form)속성 HTML5는 개발자의 수고를 덜어 줄 Form 기능 개선을 담고있다. input태그의 각종 type 속성이 추가되어 다양한 기능을 제공해 준다.  email <input type="email" /> - 지원하는 곳에서 자판이 email용으로 변하고 email형식을 입력해야함  url <input type="url" /> - 지원하는 곳에서 자판이 url용으로 변하고 http://가 자동으로 앞에 사용됩니다.  tel <input type=“tel" /> - 지원하는 곳에서 자판이 tel용으로 변하고 전화번호를 입력할수 있도록 합니다.  number <input value="1" type="number" step="1" max="10" min="1" />  range <input type="range" step="1" max="10" min="1" />  date... <input type="date" /> - 날짜와 관련된 유형입니다.  search <input type="search" /> - 검색상자입니다. 입력시 상자 오른쪽에 x 표시가 됩니다.  color <input type="color" /> - 색상을 선택합니다. 그 외에도 autocomplete, autofocus등등의 속성이 있지만 현재 브라 우저에서 미미하게 지원하고 있기때문에 가급적 피하자 email tel url
Copyright Tourtips corp. All rights reserved. 25 HTML5 와 CSS3 사용 • CSS3 CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다. 이것은 각종 브라우저나 디바이스 가 필요에 따라 원하는 CSS모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 하는 것을 돕는다. 1. CSS2와 차이점 2. CSS3의 새로운 주요 속성 • text-shadow : 텍스트 그림자 설정 • text-overflow : 텍스트가 정해진 width값을 넘어설때 그 길이만큼 자르고 나머지는 … 처리 • word-wrap : 텍스트가 끊김 없이 이어져 있을경우 단어의 길이에 상관없이 잘라서 다음줄로 이동 • @font-face : 새로운 웹 폰트를 쓸수 있음 • opacity : 투명도 설정 • box-shadow : 박스요소에 그림자 설정 • border-radius : 모서리 둥글게 • background(s) : 다중 백그라운드 이미지 처리 • gradient : 배경색을 그라디언트로 지정할수 있음 • transform : 박스요소의 일그러짐 정도 설정 • transition, animation : 각 요소의 모션(움직임)설정
Copyright Tourtips corp. All rights reserved. 26 HTML5 와 CSS3 사용 3. CSS3의 새로운 선택자 • E[attr^=val] : 'attr' 속성의 값이 'val'으로 시작하는 요소를 선택 • E[attr$=val] : ‘attr’ 속성의 값이 ‘val’로 끝나는 요소를 선택 • E[attr*=val] : 'attr' 속성의 값에 'val'이 포함되는 요소를 선택 • E:root : 문서의 최상위 요소(html)를 선택 • E:nth-child(n) : 앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택 • E:nth-last-child(n) : 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 • E:nth-of-type(n) : E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택 • E:nth-last-of-type(n) : E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택 • E:last-child : 마지막에 등장하는 요소가 E 라면 선택 • E:first-of-type : E 요소 중 첫 번째 E를 선택 • E:last-of-type : E 요소 중 마지막 E를 선택 • E:only-child : E 요소가 유일한 자식이면 선택 • E:only-of-type : E 요소가 유일한 타입이면 선택 • E:empty : 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택 • E:target : E의 URI가 요청되면 선택 • E:enabled : 사용 가능한 폼 콘트롤(input, textarea, select, button) E를 선택 • E:disabled : 사용 불가능한 폼 콘트롤(input, textarea, select, button) E를 선택 • E:checked : 선택된 폼 콘트롤(input checked="checked")을 선택 • E:not(s) : S가 아닌 E 요소를 선택 • E~F : E 요소가 앞에 존재하면 F를 선택 HTML5와 CSS3가 강력한 기능들이 추가가 되었고 이를 대부분의 모바일 브라우저는 지원하긴 하지만, 적절한 곳에 적절하게 사용하여 웹표준을 지키도록 하자.
Copyright Tourtips corp. All rights reserved. 27 모바일내 이미지 처리방식 • 기본정책 1. 이미지 스프라이트 운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들 은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도 모한다. • 스프라이트는 수직정렬 (vertical)형과 바둑판(tile)형 중 서비 스에 따라 선택하여 사용 • 수직 정렬형 스프라이트는 개체 수가 늘어남에 따라 공간 또한 늘어나 용량 이슈가 발생하므로 모바일 환경에서는 바둑판형 스프라이트로 진행한다. (비교표 참조) • 각 스프라이트 집합은 타이틀, 버튼, 아이콘, 메뉴(GNB 또는 Tab), 숫자 등 용도별로 나누어 그룹핑 2. 이미지 타입 선택 • 3G망을 이용하는 유저를 고려하여 용량 축소가 중요하다. • PNG-8 포맷을 기본으로 저장하며, 색상 수가 많거나 반투명 효과가 있으면 PNG-24를 사용한다. • 용량 대비 이미지 품질을 고려하여 포맷을 변경할 수도 있다. 3. 이미지 용량 및 크기 • CSS image : 스프라이트 된 이미지의 용량이 60KB 를 넘지 않도록 한다. • promotion image : 스프라이트 된 이미지의 용량이 400KB 를 넘지 않도록 한다. 4. 이미지 품질관리 • save for web 기준 JPG Quality 70 이상 • PNG로 저장시 이미지 Optimizing Tool을 통해 반드시 압축하여 저장 • 이미지 최적화 툴을 이용하여 이미지 압축 진행
28 참고 문헌 및 URL • 어비의 실무노트 • 'View', RIA 혹은 Mobile 기반의 정보 설계 - 좁은 창에서 정보의 시분할 또는 공간분할 전략 slide share • http://blog.naver.com/PostView.nhn?blogId=redflaghk&logNo=40156122631 • http://yoonsy.kr/archives/322 • http://kangyoo80.dothome.co.kr/index.php/archives/1092 • http://blog.naver.com/disciples123?Redirect=Log&logNo=120128032351 • 실전 html5가이드. pdf 감사합니다.
투어팁스모바일웹 제작가이드

More Related Content

투어팁스모바일웹 제작가이드

  • 1. Copyright Tourtips corp. All rights reserved. 투어팁스의 사전 승인 없이 본 내용의 전부 또는 일부에 대한 복사, 전재, 배포, 사용을 금합니다. 2013.10.11 서비스 개발팀 김병수 투어팁스 모바일 웹 제작 가이드
  • 2. Copyright Tourtips corp. All rights reserved. 목차 1. IA(Information Achitecture) 설계 I. IA란? II. 모바일 기반의 정보설계 2. UI(User Interface) 설계 I. 반응형 웹이란? II. 반응형 웹 패턴 III. 국내 포탈사이트 반응형 사례 3. UI(User Interface) 디자인 기획 I. 모바일 해상도의 이해 II. 모바일웹에서의 폰트와 이미지 4. 퍼블리싱 방향 I. 모바일 관련 기본설정 II. Reset CSS의 적용 III. HTML5 와 CSS3 사용 IV. 모바일 내 이미지 처리방식
  • 3. IA(Information Achitecture) 설계 I. IA란? II. 모바일 기반의 정보설계 1
  • 4. Copyright Tourtips corp. All rights reserved. IA(Information Achitecture-정보 설계)란? 정보설계란 웹사이트에서 정보의 구성과 흐름을 만드는 것으로, 웹사이트와 고객 사이에서 커뮤니케이션을 수행하는 중요한 부분이다. 데이터 고유의 패턴을 정리하고 체계화 하여 복잡한 것들을 명확하게 정리하는 것, 다른사람이 스스로 찾을수 있도록 해주는 정보의 구조 또는 정보의 지도, 명백한 논 리, 인간의 이해력, 정보의 체계화와 관련된 과학 등에 초점이 맞추어 시대의 요구 사항을 해결하는것 • 정보 체계의 정립 • 네비게이션 체계 (Navigation System) • 레이블 체계 (Labeling System) • 탐색 체계(Searching System) • 컨텐츠 배치(Dispositon System) 사용자가 고민하지 않고 정보를 쉽고 빠르게 찾을 수 있으며,다시 찾기 쉽게 고객의 경험에 인식되도록 하는 매우 중요한 작업이 정보설계(Information Architecture)이다. 결론!!!
  • 5. Copyright Tourtips corp. All rights reserved. 5 공간분할 공간분할 방식은 말 그대로 하나의 공간을 두고 그 공간 안에서 컨텐츠를 분할하는 방식이다. 이 방식은 보통 화면이 클 때 사용 하므로 모바일에 적합하지 않다. 모바일 기반의 정보설계 모바일은 화면이 작기때문에 너무 많은 정보들이 들어가게 되면 오히려 불편할 수 있음 사이트에 들어갈 요소들을 정확히 파악 욕심을 부려서 더 많은 데이터를 담을순 없을까?
  • 6. Copyright Tourtips corp. All rights reserved. 6 모바일 기반의 정보설계 그렇다면 모바일에서는 어떤 분할방식이 적합한 가? World vs View 넓은 정보 배치에서 그때그때 일부만 보여주는 방식이다. 월드와 뷰의 개념, 그리고 이를 조작하는 방식인 ‘스크롤’ 이 등장한다, 이런 방식은 균질하면서도 방대한 데이터(ex:지도)를 보여주 기에는 적합하나, 이질적이고 순서가 담겨있는 데이터를 보여 주기에 적절하지 않다.
  • 7. Copyright Tourtips corp. All rights reserved. 7 모바일 World vs View 모바일 기반의 정보설계 모바일에서의 정보공간은 ‘전개도’ 방식이다. 즉 정보를 인접성 중심으로 연결한 뒤 ‘이동’하며 보는 방식이다. 하지만, 전개도 방식을 극복할 수 있는 ‘시간성’중심의 정보 배열 방법론은 없을까?
  • 8. Copyright Tourtips corp. All rights reserved. 8 모바일 기반의 정보설계 공간분할 vs 시간분할 하나의 페이지가 부분 갱신을 통해 여러 기능을 함으로 페이지 체류 시 간이 길어지고, 조망과 디테일등 상반된 활동도 가능케 한다.
  • 9. 9 UI(User Interface) 설계 I. 반응형 웹이란? II. 반응형 웹 패턴 III. 국내 포탈사이트 반응형 사례 2
  • 10. Copyright Tourtips corp. All rights reserved. 반응형 웹 이란? 반응형 웹 디자인 (줄여서 RWD) 은 웹 디자인의 한 접근방법으로, 데스크탑 모니터부터 모바일 폰까지 등 많은 종류의 기기에서 최적의 사용환경 - 최소한의 리사이징, 패닝, 스크롤링으로도 읽기 쉽고 접근하기 쉬운 환경을 제공하는 사이트를 만드는 것을 말한다. 반응형 웹 디자인: 위키피디아의 정의 • 반응형 웹디자인의 3가지 핵심 기법 1. Fluid Grid Fluid Grid는 가변성이 있는 그리드(레이아웃)를 이용해 해상도에 최적화시키는 기법 예제 2. Flexible Images Fluid Grid와 마찬가지로 고정적인 px대신 %나 em을 사용해 이미지의 크기가 비율대로 조절되는 기법 3. Media Queries CSS3 이전에서 ‘print’, ‘screen’ 등 미디어 타입등을 사용하던 것을, CSS3에서는 스크린 폭/높이 등 (예: min-width: 320px) 디바이스관련 여러 정보를 이용하여 스타일을 바꿀 수 있게 되었습니다. 사실상 반응형 웹이 가능하게 된 큰 이유이기 도 합니다. @media print { #article {background:#fff; font-size:16px; color:#000} } @media screen and (max-width:640px){ #article {background:#fff; font-size:1.25em; color:#000} } #article {background:#000; font-size:0.75em; color:#fff}
  • 11. Copyright Tourtips corp. All rights reserved. 반응형 웹 패턴 여러가지 패턴스타일이 존재하지만 공통적으로 많이 쓰는 패턴은 5가지 정도이다. 굳이 패턴을 쓰지 않아도 상관없지만 쓰지 않을경우에는 흐름이 어색해질 수 있으니 주의하자. A. Mostly fluid B. Column Drop 심플하기 때문에 가장 많이 사용되는 패턴으로, 큰 화면에서는 더 많이 여유를(가 장자리)를 두고, 유연한 Grids와 큰 화면에서 작은 화면으로 이미지 스케일링, 화면 이 작아질 수록 세로로 column들을 쌓는 형태를 취하는 패턴이다. 또 다른 인기있는 패턴으로, multi-column layout으로 시작해서 single-column layout과 화면사이즈가 작아짐에 따라 column이 아래로 떨어지는 형태로 끝이난다. Mostly Fluid pattern과는 달리, 이 레이아웃에서는 요소들의 전체 사이즈를 유지하 려는 일관성이 있다. 다양한 화면 크기에 적응하는 대신에 column들을 쌓는 형태 에 의존한다. http://www.fivesimplesteps.com/ http://modernizr.com/ 11
  • 12. Copyright Tourtips corp. All rights reserved. 12 반응형 웹 패턴과 적용해야 할 패턴 방식 D. Tiny Tweek E. Off canvas C. Shifter 이 패턴은 다양한 화면 사이즈에 크로스 적용이 어렵다. 왜냐하면 많은 공수를 요 구하기 때문이다. 아마도 이러한 이유로 앞의 두가지 패턴보다는 덜 사용되는 이 유일 것이다. 여러 화면 사이즈에 적응시키는 가장 간단한 형태이지만, 이 패턴 또한 가장 인기 없는 패턴이었다. 완전 간단한 컨텐츠로 구성된 사이트에서는 단지 폰트 사이즈나 이미지 레이아웃 만 고려해서 사용하기에는 좋을 것이다. 웹사이트를 모바일로 가지고 오면서 콘텐츠의 크기와 양을 줄이지 않 는 새로운 방법으로, 일부영역을 숨겨서 사용자의 제스쳐 혹은 액션에 따라 숨겨두었던 영역을 보여주는 방식이다. http://foodsense.is/ http://futurefriend.ly/ http://www.kaemingk.com/en/our- showroom/christmas/
  • 13. Copyright Tourtips corp. All rights reserved. 13 국내 포털사이트 반응형 사례 • 네이버 모바일 네이버의 경우 640px을 기준으로 641이상은 2단 640이하는 1단 구성으로 되어있다. (정확하게는 640px외에도 많은 사이즈를 기준으로 잡고 있지만 기본적으로 단이 나눠지는 기준은 640px이다.)
  • 14. Copyright Tourtips corp. All rights reserved. 14 국내 포털사이트 반응형 사례 • 다음 모바일 다음의 경우도 마찬가지로 640px을 기준으로 잡고 있다.
  • 15. Copyright Tourtips corp. All rights reserved. 15 국내 포털사이트 반응형 사례 • 네이트 모바일 네이트 모바일페이지도 마찬가지로 640px을 기준으로 2단구성과 1단 구성을 나누고 있다.
  • 16. 16 UI(User Interface) 디자인 기획 I. 모바일 해상도의 이해 II. 모바일웹의 사이즈 기준 III. 모바일웹에서의 폰트와 이미지 3
  • 17. Copyright Tourtips corp. All rights reserved. 17 모바일 해상도의 이해 스마트폰과 주요 해상도 (2013.2.2 기준) • iPhone5 : 640 x 1136 • iPhone4S : 640 x 960 • 갤럭시S3, 갤럭시노트2 : 720 x 1280 • 옵티머스G : 768 x 1280 • 갤럭시노트 : 800 x 1280 • 그외 해상도 참고 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density CSS pixel ratio 에 관하여 위에서 보듯이 iPhone 4S의 가로 해상도는 640px 이다. css 에 width:160px 로 지정한다면, 기대하는 크기는 화면의 1/4 이 어야 한다. 하지만, 실제로 보여지는 크기는 1/2로 나타난다. 왜 그럴까? iPhone4S의 경우에는 CSS pixel ratio 값이 ’2′이기 때문에 1/4 크기가 아닌 (1/4) X 2 인 1/2 크기로 표현된다. (160px 의 두배인 320px 인것처럼 표현된다.) 디바이스 해상도에서 CSS pixel ratio 를 나눈값이 디바이스가 css 에 대응하는 픽셀 값이다. dpi 에 관하여 마찬가지로 갤럭시S 를 예로 안드로이드 폰을 알아보겠다. 갤럭시S의 가로 해상도는 480px 이고, 240dpi (hdpi) 이기 때문 에 480 / 1.5 로 계산해서 디바이스 가로 화면의 크기가 320px 로 생각하고 코딩하면 된다. 1.5 라는 계수는 ‘px = dp X (dpi/160)’ 이라는 공식에서 나왔으 며, 갤럭시S의 경우 ’480 = css와 대응되는 px 값 X (240/160)’ 계산을 통해 480px 해상도는 320px 의 css 와 대응된다는 것을 알 수 있다. 이해를 돕기 위해 하나의 예를 더 들어보자면, width:160px 을 스타일로 적용시키면, ‘px = 160 X (240/160)’ 이라는 공식을 통해 디바이스 상에는 240px 로 인식되면서 갤럭시S 화면의 1/3 이 아닌, 1/2을 차지하게 되는 것이다. 즉! 디바이스의 해상도가 640px 이지만, 브라우저의 해 상도는 320px 로 생각하면 된다는 뜻이다. 즉! 디바이스의 해상도가 480px 이지만, 브라우저의 해 상도는 320px 로 생각하면 된다는 뜻이다.
  • 18. Copyright Tourtips corp. All rights reserved. 18 모바일 웹의 사이즈 기준 각 스마트폰의 브라우저 해상도 위의 표를 살펴보면 스마트폰에서의 웹브라우저 최대 가로사이즈는 640px 앞서 타 사이트들이 640px을 기준으로 잡은 이유이다. 640px을 기준으로 잡고 1280까지의 여백을 생각해 4의 배수로 디자인 하는것이 각 해상도 마다 정수로 px단위가 떨어진다. 왜 하필 4의 배수일까? 이는 영상의 구조가 4의 배수일 때 가장 컨트롤하기 쉽기 때문이다. 또한 압축알고리즘을 적용하기도 쉽다. 푸리에 변환이라고 알려져 있는 변환에도 적응하기 쉽고, CPU 또한 4의 배수값이 처리하기에 편하다.
  • 19. Copyright Tourtips corp. All rights reserved. 19 모바일 웹에서의 폰트와 이미지 PC웹사이트는 이미지 크기와 글자 크기 등 나름 정해진 규칙 속에서 제작해 왔다. 하지만 모바일 디바이스는 성장한 지 얼마 되지 않았기에 이미지 크기, 글자 크기 등을 나름대로 고민해서 작성해야 한다. • 폰트사이즈 통상적으로 폰트 사이즈는 고정단위(px)와 유동단위(%, em)가 있다. 보통 모바일의 경우 px과 %보다는 em단위를 많이 쓴다. 모바일에서 확대, 축소시 px은 고정이기때문에 변화가 없지만 em은 확대축소가 가능하다. 기존의 웹 페이지들도 em을 쓰는것이 접근성 측면에서 좋다. 1em = 16px em 계산법 12(사용하고싶은px) / 16(기준크기px) = 0.75em 계산하기 싫으신 분들은 http://pxtoem.com/ 참고 • 이미지 사이즈 기본적으로 이미지는 사이즈의 문제 보다는 용량의 문제가 이슈가 크다. 그렇기 때문에 디자인적으로는 모바일 내에서 이미지의 크기를 가변으로 할것인지 고정으로 할것인지만 정하고 넘어가자.
  • 20. 퍼블리싱 방향 I. 모바일 관련 기본설정 II. Reset CSS의 적용 III. HTML5 와 CSS3 사용 IV. 모바일 내 이미지 처리방식 4
  • 21. Copyright Tourtips corp. All rights reserved. 21 모바일 관련 기본설정 • [Viewport] - 기본설정 모바일 웹브라우저의 기본 화면크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다. 기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320x480)를 본다고 가정한 경우 뷰포트 를 설정하지 않는다면 가로 좌우 여백이 330px의 여백이 남는 아주 작은 화면을 보게 됩니다. 다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다. • [자동 전화걸기 태그 방지] - 기본설정 전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다. • [파비콘] – 기본설정 추천 안드로이드 스마트폰은 버전에 따라 홈화면 아이콘 및 파비콘을 홈화면 아이콘으로 사용합니 다.(png사용) • [툴바감추기] – 기본설정 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주 소표시줄이 사라진 것 처럼 만들수 있습니다. <meta name="viewport" content="width=device-width , initial- scale=1.0" /> 풀 브라우징 된 사이트의 모습 스마트폰의 해상도와 동일하게 노출
  • 22. Copyright Tourtips corp. All rights reserved. 22 Reset CSS 설정 Reset CSS를 설정하는 이유는 각 브라우저마다 기본적으로 정해져 있는 태그들의 속성들을 리셋 시켜주지 않으면 브라우저마 다 다른 모습으로 보여질 가능성이 있기때문에 CSS스타일을 일관되고 현대적인 기준으로 바꿔준다. • 여러가지 Reset CSS들이 기본적으로 지정하는 속성 1. 대부분 영역을 지정하는 태그들에 Margin, padding, border속성 0 2. HTML5를 지원하지 않는 브라우저에서도 새로 추가된 태그들을 일반 div 요소로 볼수 있게 처리 • Normalize.css 1. 기본적으로 지정하는 속성이외에 HTML5에 좀 더 특화된 Reset CSS 2. 크로스 브라우징에서 가장 번거롭게 하는 button과 input에 대해 좀더 세밀하게 잡아줌 • Yahoo Reset CSS 1. 대부분의 태그보다는 자주 쓰는 태그에 대한 설정을 좀 더 세밀하게 작업 2. 영역을 지칭하는 태그도 일부에 한해 설정, 글자크기도 기본글자크기가 달라지는 부분에만 기본 100%가 되게 설정 • 그 외에도 Naver, Daum, Nate등의 포털에서도 자사만의 Reset CSS 보 유 • 투어팁스에서는 모바일만을 위한 HTML제작이기 때문에 HTML5를 가장많 이 지원하는 Normalize.css 채택
  • 23. Copyright Tourtips corp. All rights reserved. 23 HTML5 와 CSS3 사용 • HTML5 HTML5를 판별하는 기준은 바로 새로운 문서 형식(Doctype)에 있다. 1. 새로운 마크업 기존의 복잡한 문서형식정의 대신 간결하고 간편해졌으며 css나 javascript에 대한 태그 역시 간결해졌다. 그 외에도 HTML5에서는 HTML4보다 확장된 태그들을 지원한다. 특히, 문서 구조에 적합하게 header, footer, nav, section과 같은 구조화 마크업을 사용할수 있다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html>
  • 24. Copyright Tourtips corp. All rights reserved. 24 HTML5 와 CSS3 사용 2. 편리한 폼(Form)속성 HTML5는 개발자의 수고를 덜어 줄 Form 기능 개선을 담고있다. input태그의 각종 type 속성이 추가되어 다양한 기능을 제공해 준다.  email <input type="email" /> - 지원하는 곳에서 자판이 email용으로 변하고 email형식을 입력해야함  url <input type="url" /> - 지원하는 곳에서 자판이 url용으로 변하고 http://가 자동으로 앞에 사용됩니다.  tel <input type=“tel" /> - 지원하는 곳에서 자판이 tel용으로 변하고 전화번호를 입력할수 있도록 합니다.  number <input value="1" type="number" step="1" max="10" min="1" />  range <input type="range" step="1" max="10" min="1" />  date... <input type="date" /> - 날짜와 관련된 유형입니다.  search <input type="search" /> - 검색상자입니다. 입력시 상자 오른쪽에 x 표시가 됩니다.  color <input type="color" /> - 색상을 선택합니다. 그 외에도 autocomplete, autofocus등등의 속성이 있지만 현재 브라 우저에서 미미하게 지원하고 있기때문에 가급적 피하자 email tel url
  • 25. Copyright Tourtips corp. All rights reserved. 25 HTML5 와 CSS3 사용 • CSS3 CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다. 이것은 각종 브라우저나 디바이스 가 필요에 따라 원하는 CSS모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 하는 것을 돕는다. 1. CSS2와 차이점 2. CSS3의 새로운 주요 속성 • text-shadow : 텍스트 그림자 설정 • text-overflow : 텍스트가 정해진 width값을 넘어설때 그 길이만큼 자르고 나머지는 … 처리 • word-wrap : 텍스트가 끊김 없이 이어져 있을경우 단어의 길이에 상관없이 잘라서 다음줄로 이동 • @font-face : 새로운 웹 폰트를 쓸수 있음 • opacity : 투명도 설정 • box-shadow : 박스요소에 그림자 설정 • border-radius : 모서리 둥글게 • background(s) : 다중 백그라운드 이미지 처리 • gradient : 배경색을 그라디언트로 지정할수 있음 • transform : 박스요소의 일그러짐 정도 설정 • transition, animation : 각 요소의 모션(움직임)설정
  • 26. Copyright Tourtips corp. All rights reserved. 26 HTML5 와 CSS3 사용 3. CSS3의 새로운 선택자 • E[attr^=val] : 'attr' 속성의 값이 'val'으로 시작하는 요소를 선택 • E[attr$=val] : ‘attr’ 속성의 값이 ‘val’로 끝나는 요소를 선택 • E[attr*=val] : 'attr' 속성의 값에 'val'이 포함되는 요소를 선택 • E:root : 문서의 최상위 요소(html)를 선택 • E:nth-child(n) : 앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택 • E:nth-last-child(n) : 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 • E:nth-of-type(n) : E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택 • E:nth-last-of-type(n) : E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택 • E:last-child : 마지막에 등장하는 요소가 E 라면 선택 • E:first-of-type : E 요소 중 첫 번째 E를 선택 • E:last-of-type : E 요소 중 마지막 E를 선택 • E:only-child : E 요소가 유일한 자식이면 선택 • E:only-of-type : E 요소가 유일한 타입이면 선택 • E:empty : 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택 • E:target : E의 URI가 요청되면 선택 • E:enabled : 사용 가능한 폼 콘트롤(input, textarea, select, button) E를 선택 • E:disabled : 사용 불가능한 폼 콘트롤(input, textarea, select, button) E를 선택 • E:checked : 선택된 폼 콘트롤(input checked="checked")을 선택 • E:not(s) : S가 아닌 E 요소를 선택 • E~F : E 요소가 앞에 존재하면 F를 선택 HTML5와 CSS3가 강력한 기능들이 추가가 되었고 이를 대부분의 모바일 브라우저는 지원하긴 하지만, 적절한 곳에 적절하게 사용하여 웹표준을 지키도록 하자.
  • 27. Copyright Tourtips corp. All rights reserved. 27 모바일내 이미지 처리방식 • 기본정책 1. 이미지 스프라이트 운영성 이미지 성격이 아닌 아이콘 또는 장식을 위한 이미지 요소들 은 스프라이트 기법을 활용하여 파일의 Size, Request 최소화를 도 모한다. • 스프라이트는 수직정렬 (vertical)형과 바둑판(tile)형 중 서비 스에 따라 선택하여 사용 • 수직 정렬형 스프라이트는 개체 수가 늘어남에 따라 공간 또한 늘어나 용량 이슈가 발생하므로 모바일 환경에서는 바둑판형 스프라이트로 진행한다. (비교표 참조) • 각 스프라이트 집합은 타이틀, 버튼, 아이콘, 메뉴(GNB 또는 Tab), 숫자 등 용도별로 나누어 그룹핑 2. 이미지 타입 선택 • 3G망을 이용하는 유저를 고려하여 용량 축소가 중요하다. • PNG-8 포맷을 기본으로 저장하며, 색상 수가 많거나 반투명 효과가 있으면 PNG-24를 사용한다. • 용량 대비 이미지 품질을 고려하여 포맷을 변경할 수도 있다. 3. 이미지 용량 및 크기 • CSS image : 스프라이트 된 이미지의 용량이 60KB 를 넘지 않도록 한다. • promotion image : 스프라이트 된 이미지의 용량이 400KB 를 넘지 않도록 한다. 4. 이미지 품질관리 • save for web 기준 JPG Quality 70 이상 • PNG로 저장시 이미지 Optimizing Tool을 통해 반드시 압축하여 저장 • 이미지 최적화 툴을 이용하여 이미지 압축 진행
  • 28. 28 참고 문헌 및 URL • 어비의 실무노트 • 'View', RIA 혹은 Mobile 기반의 정보 설계 - 좁은 창에서 정보의 시분할 또는 공간분할 전략 slide share • http://blog.naver.com/PostView.nhn?blogId=redflaghk&logNo=40156122631 • http://yoonsy.kr/archives/322 • http://kangyoo80.dothome.co.kr/index.php/archives/1092 • http://blog.naver.com/disciples123?Redirect=Log&logNo=120128032351 • 실전 html5가이드. pdf 감사합니다.