완성도 높은 레이아웃 만들기

부트캠프에서 최근 2주 동안은 HTML, CSS를 배우면서 매주 과제로 주어지는 웹사이트를 점진적으로 만들고 있다. 오랜만에 HTML과 CSS만으로 웹사이트를 만들어보니 확실히 리액트처럼 컴포넌트 단위로 만들 때보다는 전체적인 레이아웃을 고려해서 태그와 스타일을 적용해 나가야 한다는 점에서 차이가 느껴진다.

 

이번 포스팅에서는 지금까지 화면을 구현해 나가면서 고려해서 적용한 점, 미리 생각하지 못해서 아쉬웠던 점, 더 좋았던 방법 등을 토대로 앞으로 비슷한 상황에서 어떻게 좋은 레이아웃을 그릴지에 대해 스스로 정리해 볼 겸 글을 작성하려고 한다. 

초기값 설정과 reset.css

보통 css 초기값을 설정할 때 하나의 파일 맨 상단에 넣어주는 경우가 많았는데 각 페이지별로 html파일도 각각 만들어가다 보니 초기값만 분리해야 하는 과정이 필요했다. Global 변수와 태그마다 css 초기값을 작성한 공통 reset.css파일을 만들어서 각 html파일에 적용해 주니 훨씬 간편하게 적용할 수 있었다.

 

reset.css 먼저 적용하기

반응형에 따른 grid / flex

처음 PC를 기준으로 만든 웹사이트는 대부분 flex를 사용하였다. 하지만 이번주 과제에서 PC사이즈 디자인을 => 태블릿 => 모바일 순으로 반응형을 적용하려고 하니 레이아웃이 flex만으로 해결되지 않는 부분이 많았다. 특히 모바일과 같이 작은 화면에서는 기존의 콘텐츠들의 배치가 유동적으로 변하기 때문에 구조를 다시 생각했어야 했는데 flex로는 도저히 해결이 안되서 grid로 변경할 수밖에 없었다.

 

왼쪽 Desktop 레이아웃을 flex에서 grid로 변경

 

이제 대부분 웹앱에서 모바일 디바이스를 지원하므로 mobile first로 페이지를 작업한다고 한다. 지금 같은 상황에서는 desktop first로 작업을 했지만 어떤 작업이 먼저 이루어지던 반응형 웹 디자인을 미리 확인하고 레이아웃을 고려하는 안목이 필요하다. 다음 주에 있을 다른 페이지 구현시에는 이 부분을 꼭 먼저 파악해 나가려 한다.

 

참고로 이번에 grid를 적용하면서 grid-template-columns만 지정해 준다면 굳이 grid-template-rows를 지정해서 가로 크기를 동일하게 가져가지 않아서 더 자연스러운 레이아웃이 완성된다는 사실을 깨달았다. 콘텐츠 개수가 지정한 컬럼개수를 초과하면 자연스럽게 row로 넘어가고, 콘텐츠 크기에 따라서 가로 크기가 정해지기 때문이다.

overflow

UI를 구현할 때 습관적으로 화면을 확대/축소시키면서 화면이 잘 그려졌나를 확인하는데 아래 사진처럼 오른쪽 여백이 자꾸 생기는 문제를 발견했다. 사진으로 보기에는 이미지가 튀어나온 것처럼 보이지만 전체적으로 상단부터 하단까지 오른쪽 여백이 생기는 현상을 발견했다. 

 

 

뷰포트를 다시 적용해 보고 여러 가지 시도를 해보았는데 최종 overflow-x 속성에 hidden값을 적용해서 해결했다. overflow를 보통 이미지를 넣을 때만 많이 사용했었는데 body 태그에는 처음 적용해 보았다. 이 부분도 다시 생각해 보면 overflow속성을 적용하기보다는 각 태그나 콘텐츠의 크기를 다시 고려해 보면 더 좋은 방법으로 해결할 수 있지 않을까 싶다. 

 

BEM 네이밍

예전에 클론코딩으로 포트폴리오 웹사이트를 만들 때 배웠던 BEM 표기법을 이번 웹사이트를 만들면서 class 네이밍을 지을 때 적용해 보았는데 결과적으로 좋은 방법이라고 피드백을 받았다. 

 

BEM?
Block, Element, Modifier의 약자

Block(블럭)__Element(요소)—Modifier(기능)
CSS 구조를 개선시키기 위한 방법론으로 문제의 요소에 대한 속성에 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시

 

구조적으로 접근한다는 점에서 class name 중복을 방지하고 직관적으로 이해할 수 있다는 장점이 있다. 다만, 블록레벨이 깊게 들어갈 경우 이름이 길어질 수 있으니 이때는 레이아웃이 효율적으로 구성되어 있는지를 판단할 필요가 있다. 또한 독립적인 요소로 판단되면 굳이 블록레벨을 여러 개 이어 줄 필요가 없고 분리해서 적용도 가능하다.

 

나중에 리액트로 과제를 한다면 Tailwind CSS, Emotion 등 라이브러리를 사용하기 때문에 지금처럼 클래스 이름을 고민하는 시간이 줄어들 것 같다. 하지만 지금처럼 이름을 고민하다 보면 스타일을 적용을 위한 효과적인 구조를 생각할 수 있어서 필요한 한 번쯤은 필요한 과정으로 생각된다.

 

 

그래서 완성도 높은 레이아웃을 그리는 방법은 무엇일까?

우선 사용자 입장에서 UI에서 오점을 발견하지 않아야 한다. 또 스타일을 적용할 때 구조상 효율적으로 접근할 수 있도록 코드를 작성해야 한다. 그러기 위해서는 여러 방법을 생각하고 적용해 보면서 훈련하는 시간이 필요한 것 같다.