라이크버튼의 리사이징하는 마법
CSS를 통한 상대적인 통합
문제점의 확인
라이크버튼(LikeButton)의 첫 버전을 처음으로 출시했을 때 셀 수 없을정도로 여러 반응적인 문제점을 마주하게 되었었습니다. 버튼 자체가 <iframe/> 을 사용한 임베드다 보니 (특히 모바일상에서 더 이쁘게 만들기 위해서는) 높이와 너비이가 정해져 있었죠.
여러 수정 이후 저희는 더 이상 유지보수가 어려운 미디어 쿼리에 마주쳤었습니다. 그러는 와중 CSS 내에서 핵심적인 문제를 발견하게 되었습니다. 저희는 미디어 쿼리에 대부분 폭, 높이, 글꼴 크기와 플렉스 박스 설정 등을 무차별적으로 대입하여 조정한다는 것을 알게 되었습니다. 예제로:
위 CSS는 우리에게 실제로 필요한 것이 화면 너비에 따라 각각 크기를 조정하는 방법이라 이야기 하고 있습니다. 여기에서 저희는 넷플릭스로부터 영감을 얻어 솔수션을 제공하게 되었습니다. 넷플릭스는 창 화면 사이즈를 조정할 때 테스트와 같은 요소를 실제 화면 너비에 따라 각각 비례하도록 자동 조정하게 됩니다. 글꼴 등의 스타일을 검사하고 이에 따라 조정하도록 하게 됨으로 저희는 해답을 얻게 되었으며 이에 따라 라이크버튼 (LikeButton)을 다시 작성하게 되었습니다.
뷰포트 유닛
해답은 vw 유닛에 있었습니다. 이 유닉은 CSS3의 길이를 상대적으로 조정하도록 하게 하며 1vw는 뷰포트 너비의 1%라는 것이었습니다. 예제로, 뷰포트 너비가 800px이라면 1vw는 8px이 되겠죠.
버튼의 재구성
간단한 산수
화면 상의 사이즈를 간단하게 처리하게 하기 위하여 라이크버튼(LikeButton)의 최대 너비가 화면 폭 320px이 px/vw를 통하여 변환의 기준이 되는 것으로 가정시키고 작은 화면을 가진 디바이스 부터 처리하도록 하였습니다. 예를 들어, 글꼴 크기가 16px라면 5vw, 즉 e16 / 320 * 100vw이 되겠죠. 다행스럽게도 CSCC를 스타일 시트 언어로 사용하기 때문에 함수로 변환하여 어디에서나 사용할 수 있게 되었습니다.
사이즈 최대폭 조절
변환을 적용한 후에 라이크버튼(LikeButton)이 데스크탑 화면에서 너무 크다는 것을 인지하게 되었습니다. 이 문제를 해결하기 위해서 변환 함수가 특정 화면 너비에서 변경될 수 있도록 조건을 설정해야 한다는 것 입니다. 해결책은 다른 상대 단위인 rem을 사용하는 것 이였습니다.
rem— 글꼴 크기의 상대적인 루트 요소 — w3schools.com
의심의 여지가 없이 루트 요소는 <html/>이고, <html/>의 글꼴 크기를 320px로 한다고 가정을 해 봅시다. 하위 요소의 글꼴 크기를 16px로 설정해야 한다면 0.05rem (16 / 320 * 1rem)로 설정할 수 있게 되겠죠. 따라서 변환 수식을 $value / 320 * 1rem로변경하고 화면 너비가 320px이하, 예제로 280px일 때 폰트 사이즈는 14px(0.05 * 100vw = 0.05 * 280px)로 변경 됩니다. 크기가 80px인 아바타 이미지가 있는 경우는 수식을 통하여 화면의 너비가 320px보다 클 때0.25rem = 80px, 280px일 때는 이미지가 70px로 조절하게 됩니다.
정리
뷰포트 단위를 사용하게 되면 화면 크기에 맞춰 조정할 수 있게 되며 확장을 제한하기 위하여 rem을 사용할 수 있고 호환성도 매우 우수하게 작성이될 수 있습니다. 하지만 다음과 같은 상황에서는 사용할 수 없기 때문에 완벽하지는 않습니다:
rem에 의존하는 다른 요소들도 있지만 이러한 것은 여러 변환 함수를 사용하면서 해결이 가능하게 됩니다;- 응답 요소는 화면 너비와 관련이 없습니다;
- 응답 요소의 크기가 화면 너비의 30% 미만이라면 사용자가 읽을 수 있는 글꼴의 크기가 너무 작을 수 있습니다. 하지만 이러한 것은 미디어 쿼리를 추가함으로써 해결이 가능합니다.
마지막으로 여러 다른 웹 사이트를 둘러보고 많은 사람들로 부터 배우고 (그러는 와중 자신을 위한 배움도 얻을 수 있죠) 개선한다는 것은 정말 좋은 습관인 것 같습니다!
아래 SNS를 통하여 저희 라이크코인 뉴스를 확인할 수 있습니다.
홈페이지like.co미디엄medium.com/likecoin텔레그램t.me/likecoin_kr페이스북fb.com/LikeCoin.Foundation트위터twitter.com/likecoin_fdn유튜브youtube.com/c/LikeCoin깃헙github.com/likecoin
