Frontend Mentor Challenge - Sunnyside agency page 1. 디자인 확인 및 계획해보기

코드스테이츠에서 배울 무렵, 가르치는 분이 그러셨다.

프로그래머는 계획하는 시간이 절반, 의사코드 작성하는 시간이 30%에 나머지 코딩하는 시간이 20%다

요즘에는 TDD기법을 사용하기 때문에, 사실상 테스팅 구상 + 의사코드 작성이 코딩하는 시간보다 많아질 것 같다. 그래서 작업하기 전 이를 플래닝하는 시간을 가지기로 하였다. 디자인을 다시 확인해보니, 정말로 어려울 거 같다...
하지만 지금 남는게 시간이니, 어떻게 하다보면 할 수 있지 않을까??

먼저, 만들어야 할 페이지부터 확인해보기로 했다.

1. 페이지에서 디자인 확인

디자인은 다음과 같다.

pc 버전 디자인

모바일 버전 디자인

어떻게 만들어야하나?

나누어 보면,

1. 반응형 웹페이지이다.
2. 컴포넌트 구조는
   header,
   grid 6x6(pc 일때) 구조 박스가 3개(이중 첫번째 것은 mobile 일때와 pc일때의 순서가 반대다. css의 order나, js단에서 순서를 바꾸어주거나)
   고객 소개,
   grid 2x2 그림 4장,
   그리고 mobile, pc 둘 다 동일한 footer이다.
3. 순서대로 하나씩 만들면서 감을 찾아야 할 것 같다.
4. 폰트를 확인해 보니 웹폰트 Barlow Fraunces가 필요하다.

이정도가 생각난다. 위의 순서대로 컴포넌트화 한 후 작업해보면 될 듯하다.

위에서 코딩하는 시간은 실제로 한 20퍼센트라고 말했는데, 이런 프로젝트는 아마 코딩하는 시간이 전체의 80퍼센트를 넘지 않을까 한다. 자잘한 것들을 많이 신경써야 하기도 하고, 해당 과제를 받은 사이트에서 유료 결제를 해야 figma 파일을 보내주기 때문에, 눈대중으로 작업해야 하니까... 사실 눈대중으로 작업하는 것은 좀 잘하긴 한다.(회사에 디자이너가 없었으니까)

다음 글부터는 CSS에 대한 자신감을 되찾기 위해서 사용하는 모든 CSS에 주석을 다 붙이면서 진행할 예정이다.