🎉 드디어 magic leap사이트의 반응형 웹 마크업 클론 프로젝트가 끝났다!
아래에 느낀 점과 결과물을 기록한다.
❔ 하게 된 이유
노마드 코더에서 추천하는 몇몇 사이트를 클론하면서
내가 만든 마크업이 핸드폰이나 태블릿에서 속절없이 무너지는게 너무 불-편했다.
그래서 반응형 웹을 공부하고 잘 만든 반응형 웹 사이트 하나를 선정해서 마크업이 무너지지 않게 클론해보자는 목표를 세웠다.
💡 느낀 점
px이 무조건 나쁜건 아니다
responsive css unit 등으로 구글링하면 px은 절대 단위니까 border등 변하지 않았으면 하는 값에만 적용하라고 나온다. 많은 글에서 남용하면 안된다고 강조하길래 margin, padding, font-size 등에 가능한 상대 단위를 쓰려고 노력했는데 막상 끝나고 스크린 사이즈를 조절하며 테스트 하니 의도했던 간격이나 font-size를 유지하지 못하는 경우가 많았다.
상대 단위는 특정 요소가 컨테이닝 블록 전체를 차지했으면 좋겠다! 라거나
절반만 차지했으면 좋겠다!와 같은, 말 그대로 '상대적인 값'을 주고 싶을 때 쓰면 된다.
중심에 위치했으면 좋겠다!도 좋은 예시다.
margin, padding같은 경우는 대부분 절대적인 값을 유지하는게 좋았다.
%로 설정하니 pc에서 생각보다 간격이 너무 벌어져서 문제가 되었다.
미디어 쿼리만 잘 써주면 rem이나 px같은 절대 단위로 설정해도 좋을 것 같다.
font-size는 vw를 사용했는데
마찬가지로 pc에서 지나치게 커지는 문제가 생겨서
clamp를 활용해 min, max값을 주어 해결했다.
기본적으로 rem, em, 미디어 쿼리 조합을 가져가고
필요한 부분에만 clamp를 vw와 조합해서 반응형 폰트 체계를 만들면
귀찮게 브레이크 포인트마다 폰트 사이즈를 일일이 다 지정해줄 필요가 없어질테니
괜찮은 선택지로 생각된다.
다른 프로젝트에 적용해봐야겠다.
결론적으로, 특정 값을 설정할 때
똑같은 절대값이 유지되길 바라는지,
아니면 상대적인 위치나 크기가 유지되길 바라는지
꼭 자문하자.
개발자 도구의 device toolbar와 실제 기기는 다를 수 있다
desktop chrome의 개발자 도구에서 device toolbar로 마크업 클론을 했는데, github pages에 퍼블리싱을 하고 핸드폰으로 직접 확인해보니 몇 가지 문제가 있었다.
1. video autoplay가 안되는 현상
첫 화면의 video가 device toolbar에서는 자동재생이 잘 되었으나 모바일 기기에서는 되지 않는 문제점이 있었다.
이것저것 테스트해보니 video 요소에 playsinline 속성을 주지 않아서였다.
모바일에서는 기본적으로 video 요소를 전체 화면으로 플레이하도록 되어있는데, 이를 playsinline으로 설정해주지 않으면 autoplay가 동작하지 않는 것이 원인이었다.
참고: What does playsinline mean in web video?__css-tricks.com
2. rotateX로 transform 지정한 inline svg가 보이지 않는 현상
모든 svg를 inline 방식으로 처리했는데, 유독 footer 부분의 아래쪽 화살표 모양 svg가 모바일 기기의 크롬과 사파리에서 보이지 않는 현상이 있었다.
z-index나 fill 등 여러 테스트를 거쳐 rotateX(180deg)를 rotate(180deg)로 변경하니 잘 보였다.
rotateX() 함수는 브라우저 호환성 문제가 있다는 점을 알았으니, 지금처럼 2D로 회전해도 되는 경우는 rotate() 함수를 활용하자.
🚩 마무리
모듈화, BEM 등은 아무리 강조해도 지나치지 않을 정도로 당연하리만치 중요하지만
이번 글의 주제를 벗어나기에 이만 줄인다.
다음 프로젝트에서는 이번 경험을 토대로 더욱 깔끔하고 확장성있는 코드를 짤 수 있을 것이다.
