CSS 레이아웃 현재
[ CSS 아키텍쳐 ]
1. OOCSS
OOCSS(Object-Oriented CSS)는 구조와 겉모습을 나누어 생각하는 객체 지향형 CSS
구조만을 정의한 class를 기초로 하고, 겉모습을 확장하는 class는 별도로 준비하는 다중 클래스적인 작성 방법입니다.
2. SMACSS
SMACSS(Scalable and Modular Architecture for CSS)의 약자로, 확장성을 고려한 것이라 할 수 있습니다.
SMACSS는 CSS를 다음의 레이어로 분할하여 정의합니다.
- Base (사이트 전체의 기본 스타일)
- Layout (페이지 안의 영역을 분할한 레이아웃)
- Module (재사용 가능한 UI를 부품화함)
- State (특정 상태에 따라 스타일을 덮어씀)
- Theme (색이나 그림 등 겉모습에 관련된 스타일을 재정의할 수 있음)
3. BEM
BEM은 Block Element Modifier의 약자입니다.
특정 UI(Block)를 구축할 때 그 자식 요소(Element)와 수식 요소(Modifier)라는 관점으로 class 구조를 만드는 방법입니다.
Element와 Modifier를 ’_‘나 ’-’ 등의 기호를 사용하여 어떤 block과 연결된 것인가를 class 이름으로 나타냅니다. 이러한 구조로 일정 규칙을 가지고 효율화를 꾀하는 특징은 아토믹 디자인에도 통하는 것이 있습니다.
[ 전처리기와 후처리기 ]
1. 전처리기
CSS가 아닌 언어로 CSS를 작성하면 이를 CSS로 컴파일해주는 도구입니다.
-
SaSS
-
LESS
2. 후처리기
CSS 파일이 작성된 후에 적용됩니다.
- Autoprefixer
[ 컴포넌트 우선 디자인 ]
- 아토믹 디자인 (atomic design)
패턴 랩(Pattern Lab), 프랙탈(Fractal) 같은 패턴 라이브러리 도구는 컴포넌트를 조합하여 페이지를 제작하는 방식으로 만들어진 작은 컴포넌트 수백 개를 사용하는 틀을 제공합니다.
관련 개념으로는 각 컴포넌트를 상세히 설명하는 스타일 가이드 나 디자인 시스템 이 있습니다.
[ 프레임워크 ]
1. 부트스트랩 (Bootstrap)
2. 파운데이션
프레임워크는 플로팅 기반의 레이아웃을 제작할 때 겪어야 할 수많은 복잡한 작업을 대신합니다. 계산도 대신하기 때문에 각 중단점에서 우리가 원하는 비율로 나누어진 칼럼을 쉽게 만들 수 있습니다. 프레임워크의 문서를 살펴보며 자신이 만들고 싶은 패턴을 찾은 후 복사해서 사용하면 그만입니다. 하지만 프레임워크 때문에 많은 프론트엔드 개발자들이 CSS를 거의 작성하지 않게 되면서 프레임워크 없이는 아무것도 할 수 없게 되었습니다. 이것만 기억합시다. 모든 프레임워크에는 만든 사람의 의도와 요구 사항이 담겨 있고 그러한 의도와 요구 사항이 자신의 요구 사항과 일치할 수도 그렇지 않을 수도 있다는 점을 말이죠.
[ 성능 ]
HTTP 아카이브는 2016년 12월에 웹 페이지의 평균 다운로드 크기가 2.4MB 이상이라고 발표했습니다.
[ 접근성 ]
[ 자동으로 업데이트 되는 브라우저 ]
우리는 성능이 좋고 접근성이 보장된 웹사이트를 완성해서 사업상의 목표를 달성하고 사용자를 기쁘게 하기 위해 애씁니다.
프레임워크, 전처리기, 후처리기 혹은 그 외 프론트엔드 개발 작업을 편하게 해주는 도구는 무엇을 사용하든 본질적으로는 문제될 것이 없습니다. 현실에서 우리는 현실적이지 않은 예산 한도 내에서 웹사이트를 빠르게 제작하고 배포해야 하며 IE8에서도 크롬에서 보는 것과 ‘똑같이’ 보이게 해달라고 고집하는 고객을 상대해야 합니다.
하지만 프론트엔드 개발을 모두 프레임워크에만 의존한다면 어느 날 텍스트 편집기를 열고 아무것도 없이 레이아웃을 처음부터 제작하려고 할 때 머릿속이 새하얘져서 아무 기억이 안 날 수도 있습니다. 뿐만 아니라 새로운 접근 방법이나 명세는 어떻게 배울까요? 프레임워크에 맞추어 창의력을 제한할 것인지요?
자신이 좋아하는 도구와 프레임워크 너머에 있는 가능성을 보기를 바랍니다.
참고
- 새로운 CSS 레이아웃
