웹페이지가 이미지처럼 확대/축소 되는 효과

 

모바일 / 태블릿 타겟의 웹앱을 작업하는 중

필요에 의해 작성한 스크립트 입니다.

 

화면의 UI가(여백 / 이미지 / 텍스트 포함)

이미지 처럼 확대/축소 됩니다.

 

조건

1. rem 방식으로 CSS를 작성

2. 가능한 SVG 이미지를 활용할 것

3. UI 디자인은 FHD 해상도의 font-size: 16px 기준으로 작업할 것(필수는 아니지만 스크립트를 수정해야 함)

 

결과는 이런식으로 동작합니다.

 

 

아래의 스크립트가 포인트 입니다.

function setFontSize(){
    const deviceWidth = window.innerWidth; //디바이스의 가로넓이를 가지고옴
    const defaultScreenSize = 1920; //디자인 시안의 가로 사이즈
    const defaultFontSize = 16; //디자인 시안의 기준 폰트 사이즈
    const newFontSize = (deviceWidth / defaultScreenSize) * defaultFontSize;
    document.documentElement.style.fontSize = newFontSize + 'px';
}

document.addEventListener('DOMContentLoaded', () => {
    setFontSize();
});

window.addEventListener('resize', () => {
    setFontSize();
});

 

디자인 시안을 FHD 사이즈의 16px 기준으로 작업했을때

디바이스의 넓이가 FHD 보다 커지면 커진만큼

작아지면 작아지는 만큼 root의 font-size를 조절하여

화면에 보여지는 모든 UI가 같은 비율로 확대 / 축소가 됩니다.

 

(Figma 의 dev 모드에서 px을 rem으로 변경하면 퍼블리싱 작업하기도 편리함)

 

아래는 샘플 코드 입니다.

responsive_ui.zip

0.00MB