이번엔 데브코스 강의 말고 프로젝트 TIL!!
✏️ 새롭게 배운 것
프로젝트
viewport 조심
viewport는 웹페이지가 사용자에게 보여지는 영역을 말한다. 데스크탑에서는 viewport가 브라우저 창의 viewport와 같아서 사용자가 브라우저 창의 크기를 조정하면 viewport의 크기도 변한다.
이번 프로젝트를 통해 처음으로 반응형 웹을 구현해보는 건데 평소에는 잘 쓰지 않던 viewport unit(vh와 vw)을 많이 사용하고 있다. vw를 사용함으로써 모바일 사용자도 고려해서 웹페이지를 개발할 수 있었다.
그러던 와중 문제가 발생했다. 바로 내가 개발 중인 메인 페이지의 배너 부분이 팀원 모두 같은 브라우저를 사용함에도 불구하고 누구는 멀쩡하게 보이고 누구는 배너와 밑의 내용 부분이 겹쳐져서 보이는 것이었다.
알고보니 원인은 내가 배너의 margin-bottom을 50vh로 설정해놔서였는데, 나는 내 노트북의 viewport height를 기준으로 설정한 것이었기 때문에 정상적으로 보였고, 내 노트북 화면보다 세로가 짧은 화면의 노트북을 사용 중인 팀원들은 100vh의 기준이 달라져서 margin-bottom이 내 노트북에서의 길이보다 짧아져서 겹쳐보이는 것이었다. 해당 길이를 적절한 px 값으로 수정하니깐 해결됐다!
다수의 font-family 불러오기
사실 급하게 마무리 지어야해서 구글링을 완벽하게 하진 못했다. 따라서 더 쉽고 효율적인 방법이 있을 수도 있다!
현재 컴포넌트 단위로 개발을 하고 있고, css를 따로 분리하지 않고 styled-components로 구현하고 있다. 유일한 css인 GlobalStyle에서 @import를 통해 구글 웹폰트를 불러오고, font-family를 선언했었기 때문에 styled-components 안에도 똑같이 해보려고 했지만 안됐다. 또, @font-face를 이용해서 url 부분에 구글 웹폰트 링크를 넣어봤지만 잘되지 않았다.
구글링 해 본 결과, 나랑 비슷한 상황에 놓인 분이 해결한 방법이 있었다. 먼저 fonts.js를 따로 생성해준다. 그리고 fonts.js 안에 globalstyle을 생성해서 평소처럼 @import로 불러오고 font-familly를 선언해준다. 마지막으로 폰트를 적용하고 싶은 컴포너트 파일에서 fonts.js를 import해서 사용했다.
위의 방법으로 메인 페이지의 슬로건만 'IBM Plex Mono'를 적용해서 주석처럼 구현하는 것에 성공했다!
🔥 더 공부해 볼 것
meta tag와 viewport
viewport가 생각보다 복잡했다. 일단 단순히 브라우저 창 크기가 아니며, 데스크탑과 모바일에서의 작동 방식(?)이 다르다는 것을 알게 됐다. viewport 자체에 대해서 더 공부해봐야겠다.
그리고 지금은 반응형을 거의 하드코딩으로 일일이 구현하고 있는 느낌인데, meta tag를 이용하면 모바일에서의 화면을 더 간편하게 구현할 수 있는 방법이 있는 것 같다. 이 부분도 더 알아봐야겠다.
마무리
반응형 웹,, 아무나 하는 게 아니었다. 뭔가 난이도가 어렵다기 보다는 생각할 게 매우 많다. 그리고 이번엔 디자인도 직접 하다보니 배로 어려운 것 같다,,, 디자이너가 존재하는 이유가 있는건데 내가 해야한다니~~! 그래도 점점 완성 되어가는 모습을 보니 매우 뿌듯하다. 데드라인이 얼마 안남았는데 빨리 해치우고 졸프 리팩토링도 시작해야한다 😭 9월부터는 데브코스 스터디도 참여하고 싶은데 할 게 산더미다!! 그래도 일주일동안 규칙적으로 생활하면서 꽤 부지런해졌다. 앞으로 시간을 더 효율적으로 쓰는 방법을 익혀서 하고 싶은 거 다 할 수 있게 해보자,,
