“Pf_setUiScale(0.95)”의 정체, 레이아웃이 살아났습니다

들어가며

웹사이트를 만들다 보면 분명히 PC에서는 괜찮아 보이는데 특정 해상도에서만 화면이 묘하게 어긋나는 경우가 있습니다.

버튼이 조금 커 보이거나, 카드가 생각보다 넓게 보이고, 테이블이 화면 밖으로 밀려나기도 합니다.

특히 기존에 만들어진 웹사이트를 수정하거나 다양한 모니터 환경에서 화면을 맞추다 보면 이런 문제가 꽤 자주 발생합니다.

이럴 때 개발자 코드에서 종종 보이는 것이 바로 이런 형태입니다.

Pf_setUiScale(0.95);

처음 보면 상당히 단순합니다.

“UI를 95% 크기로 줄이는 코드인가?”

대체로 그런 목적이라고 볼 수 있습니다.

다만 실제 프로젝트에서는 단순히 화면 전체를 축소하는 것 이상의 의미가 있을 수 있습니다. 중요한 것은 Pf_setUiScale()이라는 함수 자체가 표준 JavaScript 함수가 아니라 해당 프로젝트에서 직접 만들어 사용하고 있는 사용자 정의 함수일 가능성이 높다는 점입니다.

즉, 이 코드만 보고 정확히 어떤 CSS 속성을 변경하는지는 알 수 없습니다.

함수 내부를 확인해야 합니다.

Pf_setUiScale(0.95)에서 0.95는 무엇일까?

일반적으로 이런 UI 스케일 함수는 숫자를 배율로 사용하는 경우가 많습니다.

예를 들어 다음과 같은 형태를 생각할 수 있습니다.

Pf_setUiScale(1);

100% 크기입니다.

Pf_setUiScale(0.95);

95% 정도로 축소합니다.

Pf_setUiScale(0.9);

90% 정도로 축소합니다.

반대로,

Pf_setUiScale(1.1);

처럼 설정하면 110% 크기로 확대하는 방식이 될 수 있습니다.

물론 이것 역시 Pf_setUiScale() 함수가 실제로 어떻게 구현되어 있느냐에 따라 달라집니다.

예를 들어 내부에서 CSS transform: scale()을 사용할 수도 있고, zoom을 사용할 수도 있으며, 특정 컨테이너의 크기나 폰트 크기를 조정하는 방식일 수도 있습니다.

그래서 이런 코드를 발견했을 때 무작정 값을 바꾸기보다는 먼저 함수 정의부터 확인하는 것이 좋습니다.

CSS의 transform: scale()과 비슷한 개념

UI 전체를 축소하는 가장 흔한 방법 중 하나는 CSS의 transform을 이용하는 것입니다.

예를 들어,

.container {
    transform: scale(0.95);
}

라고 하면 해당 요소가 시각적으로 약 95% 크기로 표시됩니다.

JavaScript에서는 다음처럼 작성할 수도 있습니다.

document.querySelector('.container').style.transform =
    'scale(0.95)';

이런 방식이라면 Pf_setUiScale(0.95)라는 함수가 내부적으로 비슷한 작업을 하고 있을 가능성을 생각해볼 수 있습니다.

하지만 여기서 한 가지 문제가 있습니다.

transform: scale()은 단순히 요소를 작게 보이게 만드는 것이기 때문에 레이아웃 계산과 실제 표시 크기가 서로 다르게 느껴질 수 있습니다.

특히 테이블이나 고정된 위치의 요소가 많은 화면에서는 예상하지 못한 여백이나 위치 문제가 발생할 수 있습니다.

그래서 UI 전체 스케일을 적용할 때는 단순히 “작아졌으니까 끝”이라고 생각하면 안 됩니다.

왜 UI를 0.95로 줄이는 걸까?

실제 개발 상황에서는 아주 사소한 이유로 이런 코드를 넣기도 합니다.

예를 들어 디자인 시안은 1440px 화면을 기준으로 만들어졌는데 실제 사용자 환경에서는 브라우저의 기본 UI나 화면 크기 차이 때문에 콘텐츠가 조금 답답하게 느껴질 수 있습니다.

특히 관리 화면이나 데이터가 많이 들어가는 화면에서 이런 문제가 눈에 띕니다.

예를 들어 한 화면에 다음과 같은 요소가 있다고 해보겠습니다.

• 상단 메뉴
• 검색 영역
• 날짜 선택
• 여러 개의 버튼
• 데이터 테이블
• 페이징
• 오른쪽 사이드 영역

각각의 영역이 조금씩 크다면 전체 화면에서는 상당히 많은 공간을 차지합니다.

이때 1.0 배율에서는 한 줄에 표시되던 내용이 특정 화면에서는 줄바꿈되거나 가로 스크롤이 생길 수도 있습니다.

그래서 프로젝트에 따라 0.95 또는 0.9 정도의 스케일을 적용해서 한 화면에 조금 더 많은 정보를 보여주는 경우가 있습니다.

그런데 무조건 0.95가 좋은 것은 아니다

여기서 개발할 때 가장 조심해야 합니다.

UI가 화면에 잘 들어온다고 해서 무조건 스케일을 줄이는 것이 좋은 해결 방법은 아닙니다.

예를 들어 0.95로 줄였더니 화면은 깔끔해졌다고 해보겠습니다.

그런데 사용자가 작은 모니터에서 접속하면 글자가 너무 작아질 수 있습니다.

또 모바일이나 태블릿 환경에서는 전혀 다른 문제가 발생할 수도 있습니다.

특히 웹사이트를 반응형으로 제작하고 있다면 단순한 UI 스케일보다는 미디어 쿼리나 반응형 레이아웃을 먼저 검토하는 편이 좋습니다.

@media (max-width: 1200px) {
    .container {
        width: 100%;
    }
}

또는 CSS Grid나 Flexbox를 활용해 화면 크기에 따라 요소가 자연스럽게 배치되도록 만드는 방법도 있습니다.

스케일 조정은 어디까지나 레이아웃을 보완하는 방법 중 하나라고 생각하는 것이 좋습니다.

Pf_setUiScale() 함수는 어디서 확인해야 할까?

만약 실제 프로젝트에서 다음 코드를 발견했다면,

Pf_setUiScale(0.95);

가장 먼저 해야 할 일은 함수 검색입니다.

프로젝트 전체에서 다음 문자열을 검색합니다.

Pf_setUiScale

그러면 보통 다음과 같은 함수 정의를 찾을 수 있습니다.

function Pf_setUiScale(scale) {
    // UI 크기 조정
}

여기서부터 실제 동작을 확인하면 됩니다.

예를 들어 내부에,

document.body.style.zoom = scale;

가 있다면 브라우저의 zoom을 이용하고 있는 것입니다.

또는,

document.body.style.transform =
    `scale(${scale})`;

처럼 되어 있다면 transform을 이용하는 방식일 수 있습니다.

프로젝트에 따라 특정 클래스에만 적용할 수도 있습니다.

const target = document.querySelector('.page-wrap');

target.style.transform =
    `scale(${scale})`;

이렇게 구현되어 있다면 페이지 전체가 아니라 특정 영역만 축소됩니다.

결국 함수 이름만 보고 판단하기보다는 함수 내부 구현을 확인하는 것이 핵심입니다.

UI 스케일을 적용할 때 같이 확인해야 하는 것

스케일 값을 변경했다면 단순히 화면만 확인해서는 부족합니다.

개발하면서 저는 이런 경우 다음 항목을 같이 확인하는 것이 좋다고 봅니다.

1. 폰트 크기

글자가 너무 작아지지 않았는지 확인해야 합니다.

특히 테이블의 작은 글씨는 스케일을 조금만 줄여도 가독성이 크게 떨어질 수 있습니다.

2. 버튼 영역

버튼 자체뿐 아니라 클릭할 수 있는 영역도 확인해야 합니다.

모바일 환경이라면 특히 중요합니다.

3. 테이블

데이터 테이블은 스케일 조정의 영향을 상당히 많이 받습니다.

컬럼이 줄어들거나 텍스트가 잘리는지 확인해야 합니다.

4. 팝업

팝업이 화면 중앙에서 벗어나거나 크기가 예상과 달라질 수도 있습니다.

5. 고정 위치 요소

position: fixed나 position: sticky를 사용하는 메뉴가 있다면 반드시 확인하는 것이 좋습니다.

스케일 적용 방식에 따라 위치 계산이 예상과 다르게 보일 수 있기 때문입니다.

개발할 때 이런 코드를 발견했다면?

개인적으로 Pf_setUiScale(0.95) 같은 코드를 발견했을 때 가장 먼저 “왜 0.95지?”라는 생각부터 해보는 편이 좋다고 생각합니다.

0.95라는 숫자 자체보다 왜 이 값이 들어갔는지가 더 중요합니다.

특정 해상도에서 화면이 잘리지 않도록 넣었을 수도 있고, 오래된 디자인을 보정하기 위해 추가했을 수도 있습니다.

또는 특정 브라우저에서만 발생하던 레이아웃 문제를 임시로 해결하기 위해 들어갔을 가능성도 있습니다.

문제는 이런 코드가 시간이 지나면서 아무도 이유를 모르는 코드가 될 수 있다는 것입니다.

그래서 가능하다면 주석을 남겨두는 것도 좋습니다.

// 1440px 기준 화면에서 우측 메뉴가 잘리지 않도록 UI를 95%로 조정
Pf_setUiScale(0.95);

이렇게 해놓으면 나중에 다른 개발자가 코드를 수정할 때 훨씬 이해하기 쉽습니다.

결국 중요한 것은 스케일보다 원인이다

Pf_setUiScale(0.95) 같은 코드는 짧지만 실제 화면에서는 꽤 큰 차이를 만들 수 있습니다.

하지만 UI가 화면에 맞지 않는다고 무조건 0.95, 0.9 같은 값을 적용하는 것은 좋은 해결 방법이라고 보기 어렵습니다.

먼저 왜 화면이 깨지는지 확인해야 합니다.

컨테이너의 width가 문제인지, 고정된 px 값 때문인지, Flex 레이아웃 때문인지, 테이블의 최소 너비 때문인지 확인한 뒤 필요한 경우 UI 스케일을 보완책으로 사용하는 것이 좋습니다.

특히 기존 프로젝트를 유지보수하다 보면 이런 작은 함수 하나가 여러 화면에 영향을 주는 경우가 있습니다.

그래서 Pf_setUiScale(0.95)를 단순히 “화면을 95%로 줄이는 코드”라고만 기억하기보다는,

“프로젝트에서 UI 전체 또는 특정 영역의 표시 크기를 조정하기 위해 만든 사용자 정의 함수일 수 있으며, 실제 동작은 함수 내부 구현을 확인해야 한다.”

라고 이해해두는 것이 가장 정확합니다.

결국 웹 UI에서 중요한 것은 화면을 무조건 작게 만드는 것이 아니라 사용자가 어떤 해상도에서도 내용을 편하게 볼 수 있도록 레이아웃을 설계하는 것입니다.

스케일 조정은 그 과정에서 사용할 수 있는 하나의 도구일 뿐입니다.