20220928 TIL 차근차근 하나씩

오늘은 반응형 웹사이트를 본격적으로 퍼블리싱했다.
https://heyjyu.github.io/makao-letter/

마카오 레터

결과물은 위 링크에서 확인할 수 있다!

반응형은 처음이라.. 막막했다.
https://heyjyu.github.io/mega-talk/

메가톡

물론 어제 맛보기로 아주 간단한 반응형 웹사이트를 퍼블리싱 해봤지만, 본격적으로 모바일, 태블릿, 데스크탑에 대해 반응형 웹사이트를 퍼블리싱 해본 것은 처음이었다.

막막했던 이유는 모든 디바이스에 대한 것을 한 번에 생각했기 때문이었다.
너무 막막해서 미디어 쿼리에 대해 이것 저것 찾아보다가
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Responsive Web Design Media Queries

이 웹사이트에서 always design for mobile first 문구를 보고,
일단 마크업을 하고, 모바일용 디자인부터 차근차근 적용하면 되겠다는 생각이 들었다.
그래서 일단 마크업을 하고, 다른 디바이스는 아예 고려를 안하고 모바일용 디자인을 입혔다.

그러고 나서 그다음 디바이스에 대한 디자인을 입히는 것을 반복했다.
다 짜고 보니 당연히 처음에 반복을 고려하지 않았기 때문에 중복된 코드들이 보였고, 중복을 제거하였다.
하나하나씩 차근차근 하다보니 인지 부하를 크게 주지 않으면서도 어쩌다보니 완성을 하였다!

항상 하나씩 하나씩 인지 부하가 크지 않게 작업하는 습관을 들이자.
너무 막막하다면 범위를 넓게 잡고 있다는 뜻이다.
차근차근 하나씩 하면 된다.