웹 레이아웃 기술 발전사

레이아웃이 없던 초창기

웹이 창궐한 초창기, 레이아웃을 위한 디자인 방법은 별도로 없었고 제한적인 텍스트 디자인만 가능했습니다.

테이블 레이아웃

테두리(border)를 투명하게 설정한 테이블을 사용해 멀티 컬럼 디자인이 시작되면서 웹 레이아웃이 발전하게 되는 시기입니다. 하지만 테이블을 사용하는 본래 목적을 망각하고 행/열 구조 안에 이미지를 채워 넣는 방법으로, 오늘 날 더 이상 사용 되지 않습니다.

프레임 레이아웃

테이블 레이아웃에 프레임 기술이 합쳐진 방법으로 여러 장의 HTML 문서를 결합해 하나의 문서를 만들어 사용했습니다. 이 방법이 한 때 사용된 이유는 페이지의 공통 부분을 분리, 효율적으로 관리하는 데 있었습니다. 하지만 Ajax 비동기 통신 기술의 발전으로 오늘 날 더 이상 사용 되지 않습니다.

CSS 레이아웃

웹 표준 시대가 태동 하면서 더 이상 구조 언어인 HTML에서 레이아웃을 하지 않고, 표현 언어인 CSS가 제공하는 본연의 레이아웃 기술인 float, position 을 사용해 웹 레이아웃을 만들어 내기 시작했습니다. 오래된 레이아웃 기술 임에도 여전히 많이 사용 되고 있는 방법이지만, 모바일 시대에 접어들면서 멀티 스크린에 대응하는 디자인을 만들어 내기에는 적합하지 않습니다.

Flexbox 레이아웃

다양한 모바일 환경에 대응하기 위해 등장한 레이아웃 기술로 유연한 박스(Flexible Box)를 사용할 수 있는 방법을 제공합니다. X축 또는 Y축 방향으로 요소를 배치, 정렬 할 수 있으며 각 요소의 순서를 변경할 수 있어 기존의 레이아웃 기술 대비 자유도가 높아졌습니다. 그리드 프레임 워크 Bootstrap에서 사용하는 기반 기술입니다.

Grid 레이아웃

그리드 시스템을 언어 차원에서 지원하면서 더 이상 기존의 그리드 프레임 워크를 사용할 필요가 없어졌습니다. 행/열 격자 구조에 요소를 자유롭게 배치할 수 있을 뿐더러 반응형 웹 레이아웃 대응도 가능해 더욱 각광 받는 레이아웃 기술입니다.