항상 개발 시 ui가 해상도에 따라 일그러지는게 신경쓰였다.
이를 어떻게 해결해야할까의 고민을 항상 해왔었고, 홈페이지 작업을 여러번 하고, 다른 사이트도 참고해보면서 이에 대한 해결책이 조금씩 나왔다.
🧐 분석
지라, 노션 등 여러 페이지를 참고해보면, 브라우저 배율을 축소했을 때는 ui 변화가 없이 선형적으로 컴포넌트들이 줄어들었다.
그러나 확대를 할때는, ui 배치가 달라지거나, 글씨 크기, 컴포넌트 크기 등이 급격히 변하는 느낌을 보여주었다.
이 모습을 보고 내린 결론은 아래와 같다.
- "하나의 특정 기준 해상도를 정하고, 그 해상도에서는 모두
px또는퍼센트단위로 지정한다."
- 기준 해상도 보다 작아질 경우, responsive하게
vw,vh등의 단위를 활용하거나, ui배치 등을 다르게 하여 해당 해상도에 대응한다.
내가 여기서 깨달은 가장 중요한 포인트는, 어느 순간부터는 vw,vh를 사용하지 않는 해상도가 있다는 점이다.
📱 About 기준 해상도
왜 어느 순간부터는 vw,vh 를 사용하지 않을까? 그 어느 순간은 도대체 "어느" 순간일까?
내 생각에는 그 "어느" 순간은 모바일이나 태블릿이 아닌, 컴퓨터, 즉 랩탑이나 데스크탑으로 보는 순간이다.
그 순간 부터 vw, vh를 보지 않는 이유는, 사용자가 배율을 자유롭게 확대, 축소함에 따라 ui도 자연스럽게 확대 축소되게 하기 위함이라고 생각한다.
vw,vh 단위를 사용하면, 기준이 모니터 그 자체이기 때문에, 확대와 축소를 해도 그 크기가 변하지 않는다.
그러나 브라우저에서 확대 축소를 하면 해상도가 변하는 것과 같아서, 같은 30px이어도 해상도가 높으면 작게보이고, 해상도가 크면 크게 볼 수 있는 것이다.
(물론 너무 확대를 많이하게 되면 모바일 또는 태블릿의 해상도처럼 되어 vw, vh단위로 짜여진 ui가 보인다. 이에 대한 대응책은 아직 생각 중..)
모바일과 태블릿에서는 확대 축소가 해상도와 전혀 상관이 없기 때문에, vw, vh로 대응해도 상관없다.
그리고 모바일과 태블릿은 그 해상도가 너무도 다양하기 때문에 vw, vh로 대응해야만 여러 기기에서도 유사한 화면을 확인할 수 있을 것이다.
✅ 기준 해상도를 정하는 방법
그럼 기준 해상도는 몇으로 설정해야할까?
명확한 답은 아직 찾지 못했지만, 일반적인 경우에는 1536*864 또는 1366*768이 되지 않을까 싶다.
이 사이트 에 들어가면 국가별, 대륙별 또는 전세계의 모니터 해상도 사용자 비율을 볼 수 있다.
우리나라는 1920*1080을 가장 많이 쓰지만, 그보다 낮은 해상도인 1536*864 또는 1366*768를 기준으로 작업하면 얻을 수 있는 장점은 아래와 같다고 생각한다.
1920*1080를 기준으로 작업하면 1536*864 또는 1366*768에서 ui가 일그러질 가능성이 있다.
그러나 1536*864 또는 1366*768에서 작업하게 되면, 이미 이 ui에서는 정상출력이 되므로, 1920*1080에서는 당연히 정상 출력될 것이다!
(앞서 말했다시피 기준 해상도에서는 vw,vh를 안쓰니까 기준해상도보다 높은 해상도로 보면 기준해상도로 작업한 ui가 그대~로 축소된 형태가 된다.)
그래서 1920*1080보다 작은 해상도를 기준으로 작업하는게 좋다고 생각한다!
🥰 느낀 점
반응형에 대한 실마리를 조금씩 풀어나가고 있다는 생각이 든다.
아직 컴퓨터 화면에서 확대를 너무 많이 했을 때는 어떻게 효율적으로 대처를 해야할지는 잘 모르겠지만,
이번 프로젝트를 반응형으로 적용해가면서 또다른 깨달음을 얻을 수 있지 않을까 생각한다.
제 생각에 오류가 있거나, 더 나은 방법을 아신다면 꼭! 댓글로 남겨주시기 바랍니다! 감사합니다
