https://github.com/black7375/Fluid-Size


데모


문서

각종 원리를 어어어엄청 친절하게 소개되어 있음.

기본적인 것들은 아래에서 설명해줌.



계기


간단한 샘플 플젝을 만들면서 작은 화면에서 레이아웃이나 글씨크기가 이상하게 나오는 것을 보고 반응형 웹 도입의 필요성을 느꼈음.

그래서 반응형웹 글과 패턴을 도입하려던 중,.크기는 어떻게 정해야하나 의문이 생겼지.


여기저기 찾아봤는데 명확한 답이 안나오더라고.

대충만 생각해도 PPI, 기기와의 거리 등에 따라 달라져야 하거든.

그런데 내가 디자이너가 아닌 개발자라 감이 없잖아?


안드로이드 sp, dp나 ios pt만한 단위가 웹에 있지도 않고.

그래서 고민하던 중, 고딩때 연주시차에서 각도가 떠올랐음.




각도를 바탕으로 검색해보니 시력검사의 원리 중 하나란 걸 알 수 있었고,

이론으로는 충분한 검증이 이루어졌다고 생각했음.


원리 - 일관된 보기

각도를 사용하면



  • 눈과 기기와의 거리
  • 기기의 크기
  • 해상도

를 모두 고려해서 다양한 일관적인 크기로 느끼게 만들 수 있음.


이를 위해 다음 공식을 지지고 볶으면 되는데, 길어서 생략.


원리 - 유동성

이제, 각 기기에 맞는 크기를 생산할 수 있게 되었음.

근데 문제는 정적인 크기라 중간에 있는 기기들에는 대응을 못해준다는 커다란 단점이 있어.


실시간 리사이징을 해야한다는 이야긴데...

사용자에게 보여지는 영역과 비례인 뷰포트 계열의 단위를 사용하면 해결됨.


그러나 그냥 vw로 변환하기에는 커다란 단점이 있음.

변화폭이 너어어어ㅓㅓㅓㅓㅓ무 큼.


그러면 고정값 + 작은vw값을 사용하면 해결되겠지.

이때 미리 연구해둔 선구자들이 등장함.


시작/끝 크기, 시작/끝 폭을 범위로 지정하면 제한된 크기가 보장되는 거지.

흔히 CSS-Lock이라 부르더라고.


이 기술이 적용된 페이지를 보면,

부드럽고 제한된 폭의 변화가 일어나서 중간크기의 장치들에게 대안이 되줄만 함.



예를들어

  • 글씨 시작/끝 => 폰 적합 크기/태블릿 적합 크기
  • 화면 시작/끝 => 폰 가로/태블릿 가로

처럼 대입을 하면

기준보다 커다란 폰부터, 기준보다 작은 태블릿까지 어느정도 맞는 크기를 제공할 수 있다는 것.


편리하게

문제는 계산과정이 복잡하고, 각각 표준이 될 장치들의 값들을 다 지정해줘야 한다는 점.

라이브러리기 때문에 모조리 해결방법을 제공!!


- 계산방법.

기준이 될 장치를 기준으로 적합 크기를 생성함.

  1. 크기 입력
  2. 가장 작게 보일 장치에서의 각도 계산 (또는 기준이 될 장치를 지정해볼 수 있겠죠?)
  3. 각도를 기반으로 각 장치별 적합 크기 생성
  4. 장치 사이의 유동성 제공


- 장치 기본값.

대략 다음처럼 정해놨습니다.

장치쪽을 잘 모르기 때문에 아직은 임의로 정해진 값임.

그래도 그럭저럭 쓸만은 한 듯?


사용법

엄청 간-단.


@include API이름(크기);

라고만 쓰면 됨.


걍 font-size, line-height, margin같은 CSS 표준 API를 쓰면 되지.

옵션을 덧 붙힐수도 있고.


참고로 옵션 시스템이 엄청 잘 되어있음.

변수로 지정하는 글로벌, 믹스인의 인수로 지정하는 스코프드 형태로 설정가능한데

글로벌 옵션은 기본값, 스코프트 옵션은 현재값의 옵션을 설정할 수 있다고 생각하면 된다.


이상,

Proof of Concept용에 가깝긴 하다만, 이야기 끝.

실제 플젝에 직접 적용하는게 아니라 각 기기에 맞는 크기값을 추출하는 용도로 써도 쓸만할거임.


웹과 폰트쪽에 관심이 있는 사람이라면

읽어봐도 재미 있을거임



만약 버그나 오류, 더 참고할 자료같은게 있다면 깃허브 이슈 열어주세요.

기기 해상도나 브레이크 포인트 값 잘아는 사람 추천해주면 고마울 듯.