RWD

시작하기. 무료입니다
또는 회원 가입 e메일 주소
Rocket clouds
RWD 저자: Mind Map: RWD

1. 모바일화면에서의 구현 이슈사항

1.1. Image

1.1.1. 이미지 분기처리

1.1.1.1. 디바이스로 분기

1.1.1.2. DPI로 구분

1.1.1.2.1. HDPI(x1.5)

1.1.1.2.2. XHDPI(x2.0)

1.1.2. 아이콘 폰트

1.1.2.1. 예제

1.1.2.1.1. Icon Font Sets

1.2. popup

1.2.1. 새창팝업

1.2.2. 레이어팝업

1.3. font

1.3.1. 웹폰트

1.3.1.1. 종류

1.3.1.1.1. 나눔체

1.3.1.1.2. 노토산스

1.3.1.1.3. 스포카 한 산스

1.3.1.2. 포맷

1.3.1.2.1. eot

1.3.1.2.2. woff

1.3.1.2.3. woff2

1.3.1.2.4. ttf

1.3.1.2.5. svg

1.3.1.3. 기타

1.3.1.3.1. 글꼴설정

1.3.1.4. 주의사항

1.3.1.4.1. 라이센스

1.3.1.4.2. Performance

1.3.2. 이미지폰트

1.3.2.1. alt값을 가져오는 방식은 개발팀과 협의후 진행

1.3.2.1.1. 단점

1.3.3. 이미지 폰트는 사용하면 안되는 이유

1.3.3.1. 다양한 해상도에 대응(고해상도)

1.3.3.2. 언어 번역

1.3.3.3. 웹 접근성(이중 관리의 대상)

1.3.3.4. 유동적인 그리드(line break)

1.3.3.5. 불필요한 데이터의 전송(페이지의 경량화)

1.4. menu

1.4.1. GNB

1.4.1.1. 예제

1.4.1.1.1. 반응형 네비게이션 패턴

1.4.1.1.2. Stack Menu(포개지는 메뉴)

1.4.1.1.3. 모바일에 최적화된 responsive menu 만들기

1.4.1.1.4. A Responsive Off-Canvas Menu

1.4.1.1.5. Responsive Multi-Level Menu

1.4.1.2. New node

1.4.2. Tab Menu

1.5. file

1.5.1. 다운로드/업로드

1.5.2. 파일종류

1.5.2.1. PDF

1.6. data table

1.6.1. 예제활용

1.6.1.1. canvas-based chart

1.6.1.2. thumbnail image that links to the data

1.6.1.3. selectively displaying data

1.6.1.4. Mobile First Responsive Faux Table

1.6.1.5. responsive calendar demo

1.6.1.6. horizontal scrolling

1.6.1.7. FooTable – 작은 화면에 테이블을 효과적으로 표시해주는 jQuery plugin

1.6.1.8. Responsive scrollable tables

1.7. video/audio

1.7.1. 코덱종류

1.7.1.1. Audio

1.7.1.1.1. mp3

1.7.1.1.2. ogg

1.7.1.2. Video

1.7.1.2.1. mp4

1.7.1.2.2. ogg

1.7.1.2.3. webm

1.7.2. 문제점

1.7.2.1. 다양한 코덱

1.7.2.2. 스트리밍

1.7.2.3. DRM

1.7.3. 제시방안

1.7.3.1. 코덱을 직접 변환

1.7.3.1.1. HTML5용 동영상 인코딩의 비법

1.7.3.2. 동영상 변환 솔루션

1.7.3.3. 유튜브를 활용

1.8. etc

1.8.1. 특수문자

1.8.2. 인코딩/캐릭터셋

1.8.2.1. UTF-8권장

1.8.3. 프레임셋/아이프레임

1.8.3.1. 프레임셋은 비권장

1.8.3.2. 아이프레임

1.8.3.2.1. 예제

1.8.4. 문단

1.8.4.1. 예제

1.8.4.1.1. line breaks

1.8.5. Retina

1.8.5.1. mo pixels mo problems

1.8.6. 터치 디바이스

1.9. Component

1.9.1. 갤러리

1.9.2. 슬라이드

1.9.2.1. 예제

1.9.2.1.1. Responsive Slider

1.10. DPI

1.10.1. 컨텐츠 이미지

1.10.2. 배경 이미지

2. 파트별 유의사항

2.1. 공통

2.1.1. 인쇄

2.1.1.1. 코드예제

2.2. 기획

2.2.1. 컨텐츠에 구조를 선형화

2.2.2. 화면설계서에서 제목영역의 확실한 구분

2.3. 디자인

2.3.1. 웹폰트 사용 유무

2.3.2. 홈아이콘(터치 아이콘)

2.4. 퍼블리싱

2.4.1. 인코딩/캐릭터셋

2.4.2. HTML5

2.4.3. 콘텐츠에 대한 분리는 개발팀과 협의하여 HTML에서는 CSS로 숨김처리하고 개발팀에서는 분기처리한다.

2.4.4. CSS파일에 들어가는 배경이미지에 주소가 개발작업시 주소가 수시로 바뀔 경우 CSS에 들어가는 배경 이미지 폴더만 CSS파일과 같은 경로에 위치시킨다.

2.5. 개발

2.5.1. Simple-RESS(서버타입 샘플예제)

3. 분기방식

3.1. user-agent

3.2. ddr

3.3. media-queries

3.3.1. Media Query Image Download Test

3.4. mobile os

4. 업무협의

4.1. 분기대상선정

4.1.1. 분기할 규칙을 정의

4.1.2. PC

4.1.3. Tablet

4.1.4. Smart Phone

4.2. 해상도 기준 선정(break point)

4.2.1. ~600px

4.2.2. ~1024px~

4.2.3. 1025px~

4.3. 브라우저 지원

4.3.1. IE8이하, IE9이상

4.3.2. Chrome

4.3.3. Safari

4.3.4. Firefox

4.3.5. Opera

4.4. 테스트기기

4.4.1. 1.선정기준

4.4.1.1. 가장 많이 판매된 기기

4.4.1.2. 전체 트래픽 점유율

4.4.1.3. 자사 사이트에 많이 접속하는것을 분석툴을 활용하여 통계치를 분석.

4.4.2. 2.선정기준

4.4.2.1. OS(iOS, Android OS)

4.4.2.2. OS Version

4.4.2.3. 해상도/화면크기

4.5. 스크립트

4.5.1. 퍼블리싱용

4.5.2. 개발용

5. 작업환경

5.1. 무선환경 구축(WiFi)

5.2. HTML 가이드

5.2.1. 현황판

5.2.1.1. 모바일화면 체크

5.2.2. UI 가이드

5.2.2.1. 개발가이드

5.3. 브라우저 세팅

5.3.1. 크롬

5.3.1.1. Site to Phone

5.3.1.2. goo.gl URL Shortener

5.3.1.3. User-Agent Switcher for Chrome

6. 접근방식에 대한 제안

6.1. 공통

6.2. PC Web, Mobile Web (모바일 사이트는 따로 제작)

6.3. PC Web/Smart Pad, Smart Phone (구조는 동일하되 pc.css와 mobile.css는 분리)

6.3.1. 완전분리

6.3.1.1. pc.css

6.3.1.2. mobile.css

6.3.2. 부분분리(CSS3 구현가능한 브라우저)

6.3.2.1. common.css

6.3.2.2. ie8이하.css(Conditional comments)

6.3.2.3. css3.css

6.3.2.3.1. pc.css

6.3.2.3.2. mobile.css

6.4. PC Web, Smart Pad, Smart Phone(Smart TV) (반응형 웹, 각기 다른 해상도에 대응)

6.4.1. ie8이하.css

6.4.1.1. 해상도에 대응하지 않음(Conditional comments)

6.4.2. presentation.css

6.4.2.1. 공통영역

6.4.3. layout.css

6.4.3.1. 해상도 기준 선정에 의한 분리

7. 프로세스 진행

7.1. 1. 컨텐츠 프로토타입

7.2. 2. 화면설계서 템플릿(사이트을 분석 패턴화)

7.2.1. 보스턴 글로브 디자인 프로토타입

7.3. 3. UI Design Pattern

7.4. 4. 퍼블리싱 가이드

7.4.1. 현황판

7.4.1.1. QR Code

7.4.2. HTML 가이드

7.4.2.1. 가이드

7.4.2.1.1. 개발참고

7.4.2.1.2. HTML

7.4.2.1.3. CSS

7.4.2.1.4. 네이밍

7.4.2.1.5. 디렉토리

7.4.2.2. 패턴/컴포넌트

7.4.2.2.1. 공통

7.4.2.2.2. 메뉴별

7.4.2.2.3. 표/입력폼

7.4.2.2.4. 버튼

7.4.2.3. 이미지

8. 참고문헌

8.1. 사이트

8.1.1. ress-responsive-design-server-side-components

8.1.2. ress-responsive-design-server-side-components-2

8.1.3. 반응형 웹 디자인 작업을 위한 10가지 유용한 도구

8.1.4. Content Prototyping In Responsive Web Design: Related Resources

8.1.5. How To Set Up A Print Style Sheet

8.1.6. web font gallery

8.1.7. Fluid grids, orientation & resolution independence

8.1.8. HTML5 Video Player

8.1.9. responsive-design-techniques

8.2. 도서

8.2.1. responsive web design

8.2.2. mobile first

8.2.3. adaptive web design

9. 반응형 웹의 현실적인 문제점 분석 및 논의해야할 사항

9.1. 과연? 내부역량으로 진행이 가능한것인가에 대한 논의

9.2. 각 파트별 모바일(특성)에 대한 지식은 수행되고 있는가?

9.3. 반응형 웹이 생산성이 있는가?

9.4. 클라이언트에 어떤 이익이 있는가?

9.5. 유지보수 측면에서의 장/단점

9.5.1. 장점

9.5.2. 단점

9.6. 데스크탑인 먼저인가 모바일이 먼저인가?

9.7. 모든 브라우저에 대응해야하는가?

9.7.1. IE8 이하 버전

9.7.1.1. 유동적인 레이아웃을 위해 스크립트를 사용해야하나?(성능이슈)

9.7.1.2. 동일한 디자인을 표현해야 하다보니 태그의 중첩을 피할 수 없게되서 용량이 늘어나게 된다. (용량문제)

10. 3가지 제작 방식

10.1. 멀티 스크린을 위한 제작 방식 제안

10.2. PC Web, Mobile Web

10.3. PC Web/Smart Pad, Smart Phone

10.4. PC Web, Smart Pad, Smart Phone

11. Workflow

11.1. flexible grids

11.2. flexible images and media and

11.3. media queries.

12. 모바일OS별 버그 리포트

12.1. Android

12.1.1. 2.2버전이하에서의 png24 뭉게짐 현상

12.1.2. 레이어팝업

12.2. iOS

12.2.1. orientation change zoom bug

12.3. 주의사항

13. 반응형 웹의 혜택

13.1. 웹 접근성

13.2. 상호 호환성