[면접] 크로스 브라우징, 반응형 웹 디자인 원칙

크로스 브라우징, 반응형 웹 디자인 원칙

크로스 브라우징

크로스 브라우징이란

웹 표준 기술을 채용해 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하고, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미함

=> 즉, W3C(World Wide Web Consortium)에서 채택된 웹표준 기술을 바탕으로 여러 종류의 브라우저에서 정상적으로 작동하는 웹페이지를 만드는 작업을 말함(호환성) => 브라우저 별로 렌더링 엔진이 다르기 때문에 브라우저별로 100% 똑같이 만들 수 없음 -> 때문에 모든 브라우저에서 100% 동일하게 만드는 것이 목적이 아니라 비슷하게 만들어 어떤 브라우저 환경에서도 이상없이 작동되게 하는 것이 목적임

크로스 브라우징이 생겨난 배경

초기의 웹 브라우저인 월드와이드 앱이 나온 후, 넷스케이프 내비게이터(Netscape Navigator)와 MS의 인터넷 익스플로러(Internet Explorer)의 경쟁을 통해 많은 웹 브라우저들이 탄생하게 됨 -> 각 브라우저별로 엔진이 다름 -> 호환이 안 됨

이로 인한 웹 브라우저들 간의 호환성 문제가 발생함 -> 이를 해결하기 위해 브라우저 호환성기술 개발로 이어짐(여기서 크로스 브라우징이라는 개념이 나오게 됨)

크로스 브라우징이 필요한 이유

브라우저마다 렌더링 엔진이 다르기 때문임

작동하지 않는 HTML5, 자바스크립트 코드 존재
해석하지 못하는 CSS 존재
브라우저 버그들이 존재
브라우저마다 자체적인 CSS 스타일

=> 프론트엔드 개발자는 웹 페이지에 대한 높은 수준의 접근성과 유용성을 달성하기 위해 브라우저 간 호환성을 고려해야함

어떤 브라우저를 기준으로 크로스 브라우징에 대처해야할까?

가장 점유율이 높은 브라우저부터 맞춰나가면 좋음(사용하는 유저가 많으니까)

이 곳을 참조(https://gs.statcounter.com/)해서 점유율이 높은 브라우저를 보면 됨

크로스 브라우징 이슈가 생겼을 때 어떻게 해결할까?

적용한 기능을 지원하는 브라우저를 찾기

모든 환경에서 지원해야한다면 라이브러리 사용

HTML5 Pollyfill

직접 구현할 때는 '기능 탐지' 사용

if(isIE){
attatchEvent();
} else if(isFirefox){
addEventListener();
}

fucntion addHandler(el, type, handler){
    // modern browser : chrome, safari, firefox ...
    if(el.addEventListener){
        el.addEventListener(type, handler, false);
    }
    // IE
    else if(el.attachEvent){
        el.attachEvent("on" + type, handler);
    }
    //Old Browsers
    else {
        el["on" + type] = handler;
    }
}

reset.css(혹은 normalize.css) 사용

* {margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
}

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block; 
} 

html {font-size:10px}

body { line-height: 1; font-family: 'Noto Sans KR', sans-serif; font-size : 1.4rem } 
body, input, button,select, textarea, th, td {color: #222;}

a {text-decoration: none;  color: inherit;}
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 

blockquote:before, blockquote:after,
q:before, q:after { 
    content: ''; 
    content: none; 
} 

table { border-collapse: collapse; border-spacing: 0; }

웹브라우저마다 기본 스타일이 다름 때문에 동일한 스타일을 적용하기 위해서는 브라우저마다 기본으로 셋팅되어있는 스타일 디폴트 값을 리셋해서 동일한 스타일을 적용할 수 있도록 함

prefix 사용 css 표준안으로 확정되기 이전이나 브라우저가 실험적으로 제공하는 기능을 사용할 때, 벤더 프리픽스를 사용하면 해당 기능이 포함되어있지 않은 구형 브라우저에서도 사용할 수 있게 해줌

브라우저	벤더 프리픽스
IE or Edge	-ms-
Chrome	-webkit-
Firefox	-moz-
Safari	-webkit-
Opera	-o-
iOS Safari	-webkit-
Android Browser	-webkit-
Chrome for Android	-webkit-

=> 하지만 벤더 프리픽스를 사용할 때마다 지원범위를 확인하고 벤더 프리픽스를 붙이는 것이고, 벤더 프리픽스를 붙인 속성이 css 표준안이 된다면 또 일일히 찾아서 지워야함. 따라서 불필요한 프리픽스를 사용할 가능성이 있음

따라서 아래와 같은 사이트나 라이브러리를 사용하면 좋음

크로스 브라우징 해결해본 적이 있는지?

사파리에서 에러가 많이 나옴 -> 지금까지 했던 프로젝트를 사파리에서 확인해서 해결했던 거 정리하기

반응형 웹 디자인 원칙

1. flex grid layout 고정된 픽셀 대신 em이나 %같은 상대 단위를 사용하여 레이아웃을 다양한 화면 크기에 적용할 수 있음 -> 일관된 구조와 가독성을 유지할 수 있음 2. flexible image and media css를 사용해 이미지와 영상 같은 미디어의 크기를 비율을 유치하면서도 기기나 화면의 크기게 따라 조정할 수 있어야함 3. media query 미디어 쿼리를 사용하여 반응형 디자인이 조정되는 중단점(break point)를 만들어 사용자가 사용하는 장치에 따라 다양한 스타일을 적용할 수 있음 4. mobile first design 초기 디자인을 모바일용으로 제작한 후 점차 큰 화면으로 발전 시키거나 개선해나가는 디자인 전략임 가장 작은 화면부터 시작하여 단순성, 효율성 및 간소화된 UX를 만들고, 모바일 화면이라는 제한된 공간에서 꼭 필요한 컨텐츠와 기능을 선택함 -> UI가 복잡해지는 것을 방지하고 사용자 친화적인 디자인 가능해짐 -> 모바일 버전이 완성되면 더 큰 화면에 맞게 디자인을 확장하고 개선하기 5. Content Prioritization 모든 화면 크기에 필수적인 콘텐츠와 사용자 경험을 저하시키지 않으면서 더 큰 화면에 점진적으로 개선될 수 있는 콘텐츠 요소를 결정해야함 6. typography optimization - 글꼴은 사용자의 가독성에 중요한 역할을 함 - 선택한 글꼴 스타일과 크기가 다양한 화면 크기(특히 휴대폰같은 소형 장치)에서 읽을 수 있는지 확인하기 - 장치나 화면 해상도에 관계없이 선명함과 선명도를 유지할 수 있는 글꼴을 선택하기 - 백분율(%)이나 뷰포트 기반 단위(ex: vw, vh)와 같은 상대 단위를 사용하여 반응형 글꼴 크기를 구현 -> 텍스트 크기가 화면 크기에 비례하여 조정되게 하기 - 편안하게 읽을 수 있도록 줄 길이를 조정하기 긴 글은 모바일에서 읽기 힘든 경우가 많음 - 시각 장애가 있는 사용자의 가독성을 높이기 위해 텍스트와 배경 사이에 충분한 대비를 주기 - 다양한 조명 조건에서도 텍스트를 읽을 수 있는 색상 조합 선택하기 7. Touch-Friendly Interactions 모바일 기기나 태블릿같이 터치하여 사용할 수 있는 기기들이 많이 사용함에 따라 반응형 웹 디자인에는 터치에 대한 사용자 상호작용 최적화가 포함됨 8. Performance Optimization 여러 장치에서 빠른 로딩을 위해 성능을 최적화해야함 lazy loading 이나 code spliiting, 서버 요청 감소 등의 기술을 사용해 최적화를 하기 9. Cross-Browser Compatibility 사용자들은 다양한 브라우저를 사용하고 있음 어떠한 브라우저를 사용해도 똑같은 사용자 경험을 줄 수 있어야함 -> 때문에 다양한 브라우저와 브라우저 버전에서 디자인이 의도한 대로 작동하는지 확인해야함 10. User-Centered Testing and Continuous Iteration 웹사이트가 다양한 장치와 화면 크기에 잘 적응하고 작동하는지 확인해야함 다양한 상황에서 발생할 수 있는 사용성 문제, 디자인 불일치 등을 체크하고 고쳐나가야함 또한 사용자의 피드백을 지속적으로 받고 모니터링 해 변화하는 사용자의 요구와 행동에 따라 디자인을 조정해나가야함

Hah-nna / Tech_Interview