[반응형웹 사이트 제작 벤치마킹]
- 사용성 테스트 / 크로스 브라우징 -
다음 웹사이트 - PC 화면 / 태블릿 화면 / 모바일 화면
+ 골때리는 그녀들 예능 / 지프(Jeep) 자동차 +
간단한 박스 구조와 콘텐츠 구성
플랫 디자인(Flat Design) 컨셉의 반응형웹
[Benchmarking Sample 1]
+++++++
[주요 메이저 포탈 사이트 형태의 반응형웹]
- 간단한 실습 반응형웹 체험해 보기 -
본인 스마트폰으로... 접속해 보기
다음 www.daum.net / 네이버 www.naver.com / 줌 www.zum.com
프로스펙스 www.prospecs.com / m.prospecs.com
+++++++
+++++++
[반응형웹 사용성테스트 해상도(px) 기준 설정]
390(430/488) / 768 / 1024 / 1280 / 1440 / 1600 / 1920
+++++ 다음&네이버 / 적응형웹 +++++
+++++++
[Benchmarking Sample 2]
[ 디바이스 별 해상도 및 정보 ]
https://screensiz.es
https://material.io/blog/device-metrics
+++++++
+++++++
[Benchmarking Sample 3]
+++++++
[반응형웹 박스모델링 템플릿 모듈소스1]
+++ 데스크탑 [PC화면] 퍼스트 레이아웃 +++
(데스크탑PC / 태블릿 / 모바일)
+++++++
[반응형웹 박스모델링 템플릿 모듈소스2]
+++ 모바일 [모바일 버전] 퍼스트 레이아웃 +++
(모바일 / 태블릿 / 데스크탑PC 사이트 링크...)
03번 파일: 스마트폰 접속시 데스크탑&모바일 자유롭게 접속 링크 전환
04번 파일: 스마트폰 접속시 자동으로 모바일 전용으로만 접속 (자바스크립트 설정)
04번 파일: 템플릿 모듈소스 아코디언 UI 삽입
+++++++
[Benchmarking Sample 4]
다음 [모바일 버전] 사이트 벤치마킹
(매우 긴~ 원 페이지)
+++++++
[Benchmarking Sample 5]
[PC 화면모드 보기 & 모바일 화면모드 보기]
+++ 벤치마킹 기초데이터 수집자료 참고 +++
출처: 가비아
+++++++
[Benchmarking Sample 6]
+++++++
+++++++
+++++++
+++++++
+++++++
+++++++
[Benchmarking Sample 7]
+++
+++
+++
+++++++
+++++++
[Benchmarking Sample 8]
CSS Media Query - Break point Benchmarking
Layout ex7
[CSS 미디어쿼리 중단점 해상도 너비 - 권장 범위 설정]
- 모바일 퍼스트 작업 -
1. width 479px 이하 (크롬 개발자모드 390px 기준으로 작업!!)
2. 480 ~ 767
3. 768 ~1023
4. 1024 ~
++++++++++ mobile 기준 너비값: 390px ( 320/380/430/480 )
1. width 479px 이하
2. 480 ~ 767
3. 768 ~1023
4. 1024 ~ 1279
5. 1280 ~
++++++++++ tablet 기준 너비값: 768px ( 830 / 1024 )
1. width 479px 이하
2. 480 ~ 767
3. 768 ~1023
4. 1024 ~ 1279
5. 1280 ~ 1679
6. 1680 ~
-----
반응형 화면을 몇 단계로 나눌지 결정했다면, 각 단계에 대한 해상도를 정해야 한다. 현재 가장 많이 사용되는 PC, 테블릿, 모바일의 해상도를 리서치 후, 다양한 테스트를 통해 적절한 기준을 정하면 된다.
보통의 디바이스별 해상도 설정은 아래와 같다.
+ PC : 1024px 이상
+ 테블릿 : 768px ~ 1023px (768보다 미만이면 스마트폰이라 생각하면 된다.)
+ 모바일 : 390(430)px ~ 767px 을 사용한다.
+++++++
사용성 테스트 방법 (usability test method)
- 크롬 개발자 모드(F12) / Responsive -
[반응형웹 / 사용성 테스트 - 화면 해상도 너비(width) 가이드]
1. w390(320 / 380) / w430(420 / 480) px
2. w480(500)
------------
3. w768
4. w1024
------------
5. w1200(1280)
6. w1680
+++++++
브라우저 사용 현황을 통해 유저의 컴퓨터 환경과
점유율을 파악하는 웹 트래픽 분석
https://gs.statcounter.com
+++++++
반응형웹(RWD) VS 적응형웹(AWD)
1. 적응형웹(모바일웹): 다음, 네이버 / (포털 & 쇼핑몰) 콘텐츠가 많은 디자인
별도의 독립적인 UI템플릿으로 제작한다. 기기 별로 별도의 웹페이지 제작이 필요하다.
모바일 환경에서 PC사이트 주소로 접속할 경우, 이를 자동으로 감지하여 모바일 전용 페이지로 리디렉션하여 모바일 전용 웹페이지가 로딩된다. 디바이스 별로 최적화된 독립적인 홈페이지를 보여주고 싶다면 적응형웹이 권장이지만 제작 비용이 반응형웹 보다 더 높다.
2. 반응형웹: 스타벅스 / (플랫 & 머터리얼) 단순 명료한 디자인
하나의 개발된 홈페이지 소스코드로 다양한 종류의 디바이스에 자동으로 반응하여 콘텐츠가 재구성되 보여지기 때문에 사용자도 이용이 편리하고, 어플처럼 다운로드나 별도의 설치도 필요 없어서 유지보수 및 업데이트 작업이 쉽다. 다음과 네이버 처럼 적응형웹 보다는 상대적으로 개발 비용이 낮은 장점도 있다.
3. SPA(Single Page Application / 스파) - One Page 구조!!
부트스트랩(Boostrap) - CSS UIUX Design Framework
(Responsive Web & SPA)
싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다. SPA에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다. 문서는 프로세스 중 어떠한 지점에서도 다시 불러들이지 않으며 다른 문서로 제어권을 넘기지 않는다.
+++++++
[Benchmarking Sample 9]
[개발자들의 자만심과 기술적 한계의 시행착오]
반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들
반응형 웹(Responsive Web) 개발은 이미 일상이 되었습니다. 다만, 최근 몇 가지 프로젝트를 진행하며 알게 된 사실은 대부분의 개발자들이 반응형 웹에 대한 개념은 이해하지만 막상 어떻게 개발해야 하는지는 모른다는 겁니다.
Q. 이런 일이 왜 발생했을까?
동료들과 이야기하며 이런 상황이 발생하게 된 이유를 정리해 보니 대부분의 개발자들이 부트스트랩과 같은 CSS 웹 프레임워크를 쓰거나, 반응형 웹을 퍼블리셔의 영역이라고 생각한다는 것을 알게 되었습니다. CSS의 담당자가 개발자인지, 디자이너인지에 대한 역할 정의는 회사별 혹은 팀별로 다르다.
프론트엔드 파트인 웹디자이너(웹퍼블리셔) 직종과 백엔드 분야인 개발자 직종은 서로 상호간에 실무적으로 작업 내용의 무게 중심이 다르기 때문에 기술에 대한 바라보는 시각과 관점이 다를 수 밖에 없다.
이로 인해서 문제해결에 대한 접근 방식과 생각이 다르기 때문에 협업 작업시 다소의 의견 충돌과 다툼이 있을 수 있다.
문제의 핵심은 대체적으로 개발자들은 웹디자이너나 웹퍼블리셔 보다 상대적으로 CSS가 약해서 이다. 그에 따라서 CSS와 제이쿼리 기반의 반응형웹 프레임워크인 부트스트랩 기술을 배제하려는 경향이 있는 것이 원인이다.
반응형웹의 주요 핵심 기초기술은 CSS 기반이다.
특히 웹사이트의 UI디자인 작업은 CSS를 깊이 있게 잘 이해하고, 자유롭게 창의적으로 CSS를 하드코딩 할 수 있어야 한다!!
+++++
+++++++
[모바일 footer 박스 - 기초데이터 벤치마킹 샘플]
+++++++
프로토타입 제작 정보구조 및 콘텐츠 기획/구성
- 화면설계 스케치 와이어프레임 / 스토리보드 -
+++++++
[ 우수 웹(UI/UX)디자인 웹사이트 레퍼런스 / 무료 목업 ]
+++ 웹(UX/UI) 디자이너 & 웹퍼블리셔 구인정보 +++
https://www.dbcut.com
https://designbase.co.kr/freebies
[ 구글 머터리얼 디자인 참고 사이트 ]
https://m3.material.io
+ + + + + + +
[ 제한된 마감시간 (100%) 스케줄 관리 ]
++ 포트폴리오 프로젝트 진행... 시간 배분 ++
(2 2 4 2)
20%: 디자인 컨셉트, 콘텐츠 기획/구성 아이디어 시각화(스케치), 문서화
20%: 레퍼런스&벤치마킹, 기초데이터 수집 및 가공
40%: 프로토타입 제작 코딩!! 본 작업 시작!!
20%: 사용자 중심 사용성테스트 및 수정보완, 정리/정돈 백업
