Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
RWD создатель Mind Map: RWD

1. 파트별 유의사항

1.1. 공통

1.1.1. 인쇄

1.1.1.1. 코드예제

1.2. 기획

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

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

1.3. 디자인

1.3.1. 웹폰트 사용 유무

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

1.4. 퍼블리싱

1.4.1. 인코딩/캐릭터셋

1.4.2. HTML5

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

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

1.5. 개발

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

2. 분기방식

2.1. user-agent

2.2. ddr

2.3. media-queries

2.3.1. Media Query Image Download Test

2.4. mobile os

3. 업무협의

3.1. 분기대상선정

3.1.1. 분기할 규칙을 정의

3.1.2. PC

3.1.3. Tablet

3.1.4. Smart Phone

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

3.2.1. ~600px

3.2.2. ~1024px~

3.2.3. 1025px~

3.3. 브라우저 지원

3.3.1. IE8이하, IE9이상

3.3.2. Chrome

3.3.3. Safari

3.3.4. Firefox

3.3.5. Opera

3.4. 테스트기기

3.4.1. 1.선정기준

3.4.1.1. 가장 많이 판매된 기기

3.4.1.2. 전체 트래픽 점유율

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

3.4.2. 2.선정기준

3.4.2.1. OS(iOS, Android OS)

3.4.2.2. OS Version

3.4.2.3. 해상도/화면크기

3.5. 스크립트

3.5.1. 퍼블리싱용

3.5.2. 개발용

4. 작업환경

4.1. 무선환경 구축(WiFi)

4.2. HTML 가이드

4.2.1. 현황판

4.2.1.1. 모바일화면 체크

4.2.2. UI 가이드

4.2.2.1. 개발가이드

4.3. 브라우저 세팅

4.3.1. 크롬

4.3.1.1. Site to Phone

4.3.1.2. goo.gl URL Shortener

4.3.1.3. User-Agent Switcher for Chrome

5. 접근방식에 대한 제안

5.1. 공통

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

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

5.3.1. 완전분리

5.3.1.1. pc.css

5.3.1.2. mobile.css

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

5.3.2.1. common.css

5.3.2.2. ie8이하.css(Conditional comments)

5.3.2.3. css3.css

5.3.2.3.1. pc.css

5.3.2.3.2. mobile.css

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

5.4.1. ie8이하.css

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

5.4.2. presentation.css

5.4.2.1. 공통영역

5.4.3. layout.css

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

6. 프로세스 진행

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

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

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

6.3. 3. UI Design Pattern

6.4. 4. 퍼블리싱 가이드

6.4.1. 현황판

6.4.1.1. QR Code

6.4.2. HTML 가이드

6.4.2.1. 가이드

6.4.2.1.1. 개발참고

6.4.2.1.2. HTML

6.4.2.1.3. CSS

6.4.2.1.4. 네이밍

6.4.2.1.5. 디렉토리

6.4.2.2. 패턴/컴포넌트

6.4.2.2.1. 공통

6.4.2.2.2. 메뉴별

6.4.2.2.3. 표/입력폼

6.4.2.2.4. 버튼

6.4.2.3. 이미지

7. 3가지 제작 방식

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

7.2. PC Web, Mobile Web

7.3. PC Web/Smart Pad, Smart Phone

7.4. PC Web, Smart Pad, Smart Phone

8. Workflow

8.1. flexible grids

8.2. flexible images and media and

8.3. media queries.

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

9.1. Android

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

9.1.2. 레이어팝업

9.2. iOS

9.2.1. orientation change zoom bug

9.3. 주의사항

10. 반응형 웹의 혜택

10.1. 웹 접근성

10.2. 상호 호환성

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

11.1. Image

11.1.1. 이미지 분기처리

11.1.1.1. 디바이스로 분기

11.1.1.2. DPI로 구분

11.1.1.2.1. HDPI(x1.5)

11.1.1.2.2. XHDPI(x2.0)

11.1.2. 아이콘 폰트

11.1.2.1. 예제

11.1.2.1.1. Icon Font Sets

11.2. popup

11.2.1. 새창팝업

11.2.2. 레이어팝업

11.3. font

11.3.1. 웹폰트

11.3.1.1. 종류

11.3.1.1.1. 나눔체

11.3.1.1.2. 노토산스

11.3.1.1.3. 스포카 한 산스

11.3.1.2. 포맷

11.3.1.2.1. eot

11.3.1.2.2. woff

11.3.1.2.3. woff2

11.3.1.2.4. ttf

11.3.1.2.5. svg

11.3.1.3. 기타

11.3.1.3.1. 글꼴설정

11.3.1.4. 주의사항

11.3.1.4.1. 라이센스

11.3.1.4.2. Performance

11.3.2. 이미지폰트

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

11.3.2.1.1. 단점

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

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

11.3.3.2. 언어 번역

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

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

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

11.4. menu

11.4.1. GNB

11.4.1.1. 예제

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

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

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

11.4.1.1.4. A Responsive Off-Canvas Menu

11.4.1.1.5. Responsive Multi-Level Menu

11.4.1.2. New node

11.4.2. Tab Menu

11.5. file

11.5.1. 다운로드/업로드

11.5.2. 파일종류

11.5.2.1. PDF

11.6. data table

11.6.1. 예제활용

11.6.1.1. canvas-based chart

11.6.1.2. thumbnail image that links to the data

11.6.1.3. selectively displaying data

11.6.1.4. Mobile First Responsive Faux Table

11.6.1.5. responsive calendar demo

11.6.1.6. horizontal scrolling

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

11.6.1.8. Responsive scrollable tables

11.7. video/audio

11.7.1. 코덱종류

11.7.1.1. Audio

11.7.1.1.1. mp3

11.7.1.1.2. ogg

11.7.1.2. Video

11.7.1.2.1. mp4

11.7.1.2.2. ogg

11.7.1.2.3. webm

11.7.2. 문제점

11.7.2.1. 다양한 코덱

11.7.2.2. 스트리밍

11.7.2.3. DRM

11.7.3. 제시방안

11.7.3.1. 코덱을 직접 변환

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

11.7.3.2. 동영상 변환 솔루션

11.7.3.3. 유튜브를 활용

11.8. etc

11.8.1. 특수문자

11.8.2. 인코딩/캐릭터셋

11.8.2.1. UTF-8권장

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

11.8.3.1. 프레임셋은 비권장

11.8.3.2. 아이프레임

11.8.3.2.1. 예제

11.8.4. 문단

11.8.4.1. 예제

11.8.4.1.1. line breaks

11.8.5. Retina

11.8.5.1. mo pixels mo problems

11.8.6. 터치 디바이스

11.9. Component

11.9.1. 갤러리

11.9.2. 슬라이드

11.9.2.1. 예제

11.9.2.1.1. Responsive Slider

11.10. DPI

11.10.1. 컨텐츠 이미지

11.10.2. 배경 이미지

12. 참고문헌

12.1. 사이트

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

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

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

12.1.4. Content Prototyping In Responsive Web Design: Related Resources

12.1.5. How To Set Up A Print Style Sheet

12.1.6. web font gallery

12.1.7. Fluid grids, orientation & resolution independence

12.1.8. HTML5 Video Player

12.1.9. responsive-design-techniques

12.2. 도서

12.2.1. responsive web design

12.2.2. mobile first

12.2.3. adaptive web design

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

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

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

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

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

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

13.5.1. 장점

13.5.2. 단점

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

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

13.7.1. IE8 이하 버전

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

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