창업 활동을 하면서 우리 팀 개발자는 총 4명이었다. 프론트엔드 두명, 백엔드 두명이서 웹사이트를 2달 간 개발하였다.
웹사이트를 만들어야 하는 기간이 매우 부족했고 그래서 우리는 Next.js 프레임워크와 Tailwind css를 사용해서 개발하기로 하였다. Next.js의 가장 큰 장점은 풀스택 프레임워크라는 것이다. 그러다 보니 우리는 프론트엔드와 백엔드로 나누긴 하였지만 백엔드도 css 디자인을 하고 프론트엔드도 api를 짜는 일이 종종 잦았다. 그렇게 개발을 하면서 가장 힘들었던 점을 조금 서술하려고 한다.
P1. 백엔드 파트에서 가장 고충이었던 것은 컨테이너 구조를 짜는 것이었다.
예를 들어 이런 페이지가 있다고 할 때 총 몇개의 div 컨테이너로 나눌 수 있겠는가?
사람마다 다르겠지만 나는 우선 크게 3가지의 부분으로 나누었다. header, body, footer이다.
그리고 각 컨테이너 안에는 또 수많은 컨테이너가 들어가게 된다.
간단한 header를 예시로 보면
이렇게 2개의 컨테이너로 분리할 수 있다.
Q1. 이런걸 어떻게 한번에 파악하고 공부할 수 있나?
사람마다 컨테이너 구조를 짜는 것은 다양하기 때문에 많이 해봐야 한다고 생각한다. 이렇게도 해보고 저렇게도 해보는 것이 어떻게 컨테이너를 나누어야 디자인을 더 깔끔하게 짤 수 있는지 파악하는데 도움을 받을 수 있을 것이라 생각한다.
P2. css를 작성할 때도 많은 단위와 기능이 있는데 어느 것을 써야 할까?
이 부분은 프론트엔드를 완전히 처음 접하는 분들이 겪는 문제일 것이다. css 단위에는 rem, em, px 등 다양한 단위가 있고 position, flex 등 요소 위치를 설정할 수 있는(어떻게 보면 비슷비슷한) 기능이 다양하게 존재한다.
css를 많이 다루어본 것은 아니지만 이것 하나는 확실히 말할 수 있다.
절대 고정단위를 사용하지마라.
웹페이지 크기와 비율은 언제든지 바뀔 수 있는 부분이고 따라서 크기는 항상 유동적으로 변해야 한다. px값을 줘서 고정단위를 사용해버리는 순간 우리는 웹사이트의 크기가 바뀔때마다 디자인이 전부 깨지는 현상을 볼 수 있을 것이다.
다음 파트에서는 API에 관한 글을 좀 다루어 볼 것이다.