며칠 놀다가 일주일 정도 작업한 내용입니다.
웹린이가 간단한 샘플 플젝을 만들면서 작은 화면에서 레이아웃이나 글씨크기가 이상하게 나오는 것을 보고 반응형 웹 도입의 필요성을 느꼈답니다.

반응형웹 글과 패턴 쪽 코드를 보면서 레이아웃은 이런식으로 구성해야 하구나를 깨닫던 중.
그럼 크기는 어떻게 해야하지??
라는 의문이 생겼습니다.

대충 감으로 폰 크기에서 16px, 데스크톱에서 20px처럼 정하기는 싫었거든요.
매우 다양한 기기들 속에서 유동적으로 보여지기를 원했지요.
그래서 검색 중

라는 글을 찾았죠.

원리는 글씨 최소/최대크기와 화면 최소/최대 크기를 바탕으로 계산하여
- 고정값 + 뷰포트 비율
를 산출하여 뷰포트 크기에 따라 자동으로 크기가 조정되는 것.

그런데 점점 더 미궁속으로 빠져듭니다.
글씨와 화면의 최소/최대 크기는 어떻게 정해야하지?? ㅠㅠㅠㅠㅠㅠㅠ
하루정도 고민 끝에 나온 키워드는 각도였습니다.




눈에서 크기가 보이는 각도에 따라 정의한다면

- 눈과 기기와의 거리
- 기기의 크기
- 해상도
를 모두 포함하여 필요한 크기를 계산할 수 있었죠.

저는 별과의 거리를 재는 연주시차에서 아이디어를 가져왔는데
알고보니 시력을 잴 때도 사용하고, 인포테인먼트 시스템을 개발할때 가이드라인 등 널리 사용되더라고요.


이제, 각도에 기반하여 각 디바이스에 맞는 크기 값을 얻을 수 있습니다.
[크기: 고해상도 > 폰 > 데스크탑 > 랩탑 > 태블릿 순]

- 글씨 최소/최대 => 폰 적합 크기/태블릿 적합 크기
- 화면 최소/최대 => 폰 가로/태블릿 가로
처럼 대입을 할 수 있게 된 것입니다.

(대략의 기준)



문제는.. 보다시피 요구조건이 많아 사용하기가 까다롭습니다.

그래서 보통 크기를 지정하는 것처럼 쓸 수있는 인터페이스를 만들었쥬.


단계가 많아 연산과정이 많지만, 다음과 같습니다.

1. 크기 입력

2. 가장 작게 보일 장치에서의 각도 계산 (또는 기준이 될 장치를 지정해볼 수 있겠죠?)

3. 각도를 기반으로 각 장치별 최적 크기 생성

4. 장치 사이의 유동성 제공


== 결과 =======================

코드(SCSS)




의 컴파일 결과(CSS)는


처럼 나옵니다.


사진

랩탑은 까먹고 안넣었는데

크기는 고해상도 > 폰 > 데스크탑 > 랩탑 > 태블릿 순이고 유동적으로 조정되요.





이론쪽 내용을 조금 더 자세히 알고 싶으면 블로그 글을 참고하면 됩니당.


흥미로웠나요?