같은 코드, 다른 기기에서의 뷰포트






HTML/CSS/JS가 웹 브라우저에서 동작할 때
내 PC와 연결된 디스플레이에서는 정상적인 비율로 나오는데 


다른 기기와 연결된 디스플레이에서는
멋대로 비율이 바뀐다던가, 여백 공간이 남는 등의 현상이 발생하고는 한다.


대부분 내 PC와 그 다른 기기의 브라우저 환경이 다르기 때문에 발생한다.
1. 사용자 인터페이스가 다르다.
2. 웹 브라우저 소프트웨어가 다르다.


사용자 인터페이스 차이

예를 들어, PC와 셋톱박스(STB)를 각각 동일한 모니터에 연결한다 했을 때
다음과 같은 두 쌍의 인터페이스가 생성된다.

MONITOR-PC = 마우스, 키보드 (스크롤 등으로 무한히 확장 가능한 화면)
MONITOR-STB = 모니터, TV (고정된 화면)

사용자 인터페이스가 다르기 때문에
뷰포트 overflow 시,
pc 브라우저는 스크롤바, STB 브라우저는 ghost space를 패딩하여 보여준다.



웹 브라우저 소프트웨어 차이

때문에 셋톱박스에서 웹뷰어 프로그램을 사용하여 웹 페이지를 띄운다면
그 웹뷰어 프로그램이 어떤 프로그램의 어떤 버전 기반인지 추적해야한다.


예를 들어, 어떤 A라는 STB의 웹뷰어 프로그램은
Android System WebView는 Google Chromium 기반이며
버전은 Chromium 95.0.4638.74 임을 기록해두는 것이 좋다.



폰트

또한, 폰트 사용에도 유의해야한다.

CDN 방식으로 네트워크를 타고 폰트를 다운로드 하는 프로그램이라면
네트워크 구성에 따라 CDN 주소가 막혀서
해당 기기의 기본 폰트가 나올 수도 있기 때문이다.

때문에 설정한 폰트가 제대로 렌더링 되는지
개발자 도구의 computed > rendered fonts에서 직접 확인해줘야한다.
스타일 시트에 폰트 이름이 나온다고 렌더링 되는 것이 아니다.

브라우저 자체 웹 폰트의 경우
클라이언트 프로그램에서 이미 폰트 파일을 가지고 있으므로
네트워크 트래픽이 발생하지 않는다.

서비스하고 있는 제품의 웹 서버에 폰트를 이미 다운로드 해 뒀다면
CSS에 명시된 @font-face 룰에 따라
웹 서버에서 폰트를 최초에 전송할 때 네트워크 트래픽이 발생하거나
최초에 다운로드 후, 브라우저 폴더에 캐싱한다.

Font CDN의 경우 무료인 경우가 많지만
따로 파일 스토리지 서비스를 이용하거나 유료 폰트를 사용한다면
마찬가지로 트래픽 + 구독료 비용이 발생한다. 

댓글

댓글 쓰기

이 블로그의 인기 게시물

Blogger 커스터마이징 : CSS 수정 (sticky-header)

이미지
sticky-header, centered-top-container sticky animating 삽질1 google blogger의 템플릿 테마중 하나인 Contempo에서는  스크롤을 어느 정도 내린 상태에서 다시 올리면 상단의 검색창이 내려와서 스크롤을 다시 내릴 때까지 유지된다. (이 "어느 정도"에 해당하는 값은  기본 테마의 javascript에 코딩 되어있을 것으로 추측한다.) css 수정 후 이 부분에 문제가 생겨서 내릴때에도 올릴 때에도 계속 검색창이 내려오고 사라졌다를 반복한다. < 페이지 최하단 모습 > 데이터를 색인하여 찾을 때는 유용한 기능이라고 생각하지만 검색 기능은 이미 블로그 최상단에 존재한다. 따라서 해당 기능을 제거하기로 했다. scroll event를 감지하고 그에 따라 html이나 css문서를 수정하는 작업은  javascript가하는 일이다. html 편집기를 통해 코드를 살펴본 결과 이 javascript 코드는 외부 cdn 서버에서 가져오는 것 같다.  javascript 코드를 직접 건드려야되나 싶어서 구글링 해 본 결과 간단하게 css 코드를 수정해서 없앨 수 있었다. sol) sticky-header 제거 https://joshua-dev-story.blogspot.com/2020/04/blogger-remove-sticky-header.html FE, Publishing 에서는 '고정 헤더'라고 부르고 있는 이 태그의 css를 수정하면 된다. display 옵션을 none으로 바꿔서 기존 요소의 block을 전부 없애고 기능까지 해제해버리는 것. 이 sticky header를 보이지 않게하는 방법은 opacity를 0으로 만들거나 visibility를 hidden으로 할 수도 있지만 display : none 옵션이 가장 확실해보인다. 수정 후 여전히 scroll 이벤트에 따라 DOM의 변경이 일어나는 것 같지만 sticky header는 더이상 보이지 않는다. 삽질2...
Read more »

노마드코더 개발자북클럽 Clean code 완주, 독후감

이미지
짧은 기간 동안 Java로 쓰여진 클린 코드 책을 읽으며 코드를 짤 때 더 정성을 들여 쓰는 습관을 들였다. 당장 작동하는 코드보다는 유지 보수가 편한, 수정보다는 확장을 할 수 있는, 잘 읽히는, 정직하고, 하나의 일에 몰두하는 그런 코드를 짜려고 했다. 퇴근을 하고 책상 앞에 앉으면 오늘 작성했던 class가 아른거리고 과연 이게 최선이었을까 생각하게 되었다. ========================================================== 책을 읽으면서 대부분 공감하고 고개를 끄덕일 수 있었지만 좋은 코드를 쓰는 법을 아는 것과 좋은 코드를 쓰는 것에는 큰 차이가 있다. 좋은 코드를 쓰는 법을 알기만 해서는 그저 말로만 잘난 체 할 수 밖에 없을 것이다. 좋은 코드를 쓰는 사람은 코드 리뷰를 하며 시스템 변경에 유연한 구조인지 고민한다. 확실히 후자가 더 고된 작업이지만 견고한 프로덕트를 만드는, 실체가 있는 실력이 는다고 생각한다. ========================================================== Java기 반의 코드를 이해하기는 쉽지 않았지만 확실히, Java가 객체 지향적인 장치가 많다고 느꼈다. Python 웹 개발자라면 당장 객체지향 원칙이나 디자인 패턴을 익히기 보다는 웹 애플리케이션 프레임워크를 익히기를 추천한다. 그 중에서도, FastAPI를 추천하는데 Layer와 Depends를 사용한 설계 장치를 사용하며 실전 감각을 기르면서 객체지향적인 사고를 할 수 있다. 혼자 상향식으로 배우기 버겁다면 Framework의 규칙을 따르며 배워나가는 것이 효율적이라고 생각한다. 그리고 이렇게 해야 실전 감각을 느낄 수 있다. ========================================================== 클린 코드 북클럽 챌린지 덕분에 오늘도 나는 하나의 괴이한 모듈을 처리했다. util 패키지의 fileutil이라는 모듈인데 온갖 잡다한 파일 처리를 다 도맡아 하...
Read more »

Python의 빌트인 class들의 관계

이미지
파이썬의 iterable, iterator , generator, container의 관계를 설명할 때 많이 사용하는 그림이다. 나는 여기에 몇 가지를 좀 더 추가했다. generator는 iterator의 일종이나, 특별한 iterator라고 볼 수 있다. 게으른 factory와 같이 값을 미리 보유하고 있는 것이 아니라 필요에 따라 생성한다. python에서 제공하는 list, dict, ...등과 같은 객체들은, 선언과 동시에 안에 무엇을 담을지 결정하여 초기화시킬 수 있다. 그 코드에서 list, dict와 같은 객체들은 1,2,3,4와 같은 정수 배열을 담거나 key-value를 담은 container를 생성한다. python에서 제공하는 container 객체들 그리고 대부분의 container 객체들은 iterable, 순회할 수 있지만, 프로그래머 스스로 순회할 수 없는 container class를 구현할 수도 있다. int, float, double과 같은 자료형은 literal이며 container가 아니고, 순회할 수도 없다.  
Read more »