'새로운 CSS 레이아웃' 을 읽고

새로운 CSS 레이아웃 : 네이버 도서

---

  CSS 에도 부트스트랩이나 파운데이션 같은 프레임워크가 있다. 계산도 대신 해주기 때문에 각 중단점에서 우리가 원하는 비율로 나누어진 칼럼을 쉽게 만들 수 있다. 하지만 모든 프레임워크에는 만든 사람의 의도와 요구 사항이 담겨져 있고, 그 의도와 요구사항은 나의 요구사항과 일치하지 않을 수도 있다는 것을 명심해야 한다. 우리가 CSS 에 대해 조금만 더 익숙해진다면 프레임워크에 의존하는 비율이 예전보다는 더 줄어들 수 있다. 

 이 책에서는 기존의 css 속성들 및 새로 추가 된 속성들에 대해 자세히 설명하고 있다. 그러면 새로운 기술들이 작동되지 않는 구식 브라우저를 위해서는 어떻게 해야할까? 이 문제에 대해 저자는 아래와 같은 제안을 한다.

1) 가설을 데이터로 확인하라. 브라우저를 정기적으로 업데이트 하는 사용자는 생각보다 많다. 작업 중인 사이트의 사용자 중에는 예상보다 훨씬 빨리 새로운 css 기능을 사용하는 사람도 있을 것이다. 새 프로젝트를 시작하는 사람이라면 보통 업계에 오랜 기간 동안 쌓인 브라우저 지원에 관한 가설들을 보면 될 것이고, 리뉴얼이라면 사이트의 통계를 살펴봐야 한다. 하지만 어떤 버전의 브라우저가 주로 사용되는지 보다는 그 브라우저가 어떤 기능을 현재 제공하고 있는지에 대해 주안점을 두어야 한다. 구식 브라우저 사용층이 많은 시장 분야도 있고, 새로운 브라우저를 선호하는 분야도 있다. 진행할 프로젝트가 어디에 적합한 지 조사한 후 타겟을 정하는 것이 올바른 방향일 것이다.

2) 모바일 지원은 따로 확인하라. 대체로 모바일 기기가 데스크탑보다 새로운 기능을 지원할 가능성이 높다. 비록 데스크탑용 css 에서는 오래된 방법을 사용하고 있다고 하더라도, 해당 애플리케이션의 모바일 버전에서는 새로운 기능을 써서 외적으로나 성능 면에서 더 뛰어난 애플리케이션을 만드는 경우도 있다.

3) 고객이나 상사를 설득하라. 실현이 어려운 요청 중에는 불가능한 상황인데도 불구하고 '똑같이 만들어주세요' 라는 요구사항이 있을 때도 있다. 이럴 때는 상대가 사이트 개발 전체를 아울러 볼 정도의 시야를 갖도록 도와야 한다. 고객 입장에서는 자연스럽게 외관에만 집중할 것이다. 하지만 웹사이트에는 수많은 구성 요소가 있고, 한 가지에만 집중하면 다른 데서 희생해야 할 부분이 생기기 마련이라는 것을 고객에게 잘 설명해야 한다. 그리고 대개 이러한 고객들의 '진짜' 걱정은 웹 접근성 때문일 것이다. 이 때는 새로운 레이아웃 제작 방식이 검색 엔진 친화적인 웹사이트를 만드는 데 도움이 된다는 사실을 알고 있으면 된다. 기능이 떨어지는 구식 브라우저때문에 고민하고 있는 고객에게 반응형 디자인을 사용하면 브라우저와 상관 없이 디자인의 일관성을 유지할 수 있다는 사실을 보여주자.

---

+추가 개념들

전처리기와 후처리기

전처리기 : css 가 아닌 언어로 css 를 작성하면 css 로 컴파일해주는 도구이다. 

• 장점 : 변수 사용이나 중첩, 상속, 함수 등의 강력한 문법을 제공하며, 재사용성이 있다.
• 단점 : 해당 문법을 별도로 배워야 한다.

후처리기 : css 파일이 작성된 후에 적용된다. Autoprefixer 가 후처리기의 좋은 예이다. Autoprefixer 를 css 파일에 적용하면 구식 브라우저에 필요한 제조사 접두어를 추가한다. 직접 작성한 css 파일이든 전처리기가 컴파일해서 얻은 파일이든 상관없이 동작한다.

• 장점 : 필요한 플러그인만 사용 가능하기 때문에 전체를 포함하지 않아도 되므로 속도가 빠르다. css 작성을 위한 별도의 문법을 따로 배울 필요가 없다.
• 단점 : 전처리기에 비해 강력한 문법을 제공하지는 않는다. 필요한 플러그인을 찾아서 직접 조립해야 하며, 이 플러그인들의 지원은 추후 중단될 수도 있다.

이러한 도구들은 정형화된 아키텍쳐와 마찬가지로 css 작업의 시간과 고통을 줄여줄 수 있는 도구들이다. 전처리기 같은 경우는 여러 사람이 각자 맡은 부분을 작업하고, 모든 파일을 취합해 하나로 컴파일하는 방식으로 많이 사용된다. 하지만 css 명세와 동떨어져버려 새로운 css 신기술을 간과할 수 있다.

컴포넌트 우선 디자인

아토믹 디자인 (Atomic Design) : 빈 페이지부터 시작해서 디자인을 완성해가는 대신 가장 작은 구성 요소부터 시작해 점차 바깥으로 확장하며 디자인한다. 이 방식은 프론트엔드 개발자가 한 명인 팀에게는 조금 과하다. 또한 디자이너의 작업과는 별개로 실제 작업자에게 전달해야 할 산출물이 발생할 수도 있다. 컴포넌트가 아니라 페이지 단위로 사고하던 초기의 웹 디자인과는 많이 동떨어진다.

멀티 컬럼 레이아웃 (Multi-column layout)

 콘텐츠를 신문처럼 여러 단으로 나누는 방식이다. 만약 콘텐츠를 세 컬럼으로 나누고 싶다면 column-count 속성에 원하는 만큼의 컬럼 숫자를 값으로 설정하면 된다.

.example {
  column-count: 3;
}

 이 속성을 포함한 멀티 컬럼 레이아웃의 다른 속성들은 아래와 같다.

• column-count : 컬럼의 개수를 직접적으로 지정할 수 있다. 컬럼의 너비는 컬럼 개수를 기반으로 (사용 가능한 공간에 따라)자동으로 결정된다.
• column-width : 각 컬럼의 너비를 지정함으로써 컬럼의 개수는 자동으로 결정되도록 한다.
• column-gap : 컬럼 간 띄워질 공간을 지정한다.
• column-rule : 컬럼 구분 막대의 Border Style(두께, 색상 등)을 지정한다.

논리적 속성과 물리적 속성

 그리드 또는 플렉스에서 왼쪽, 오른쪽, 위, 아래 라고 하지 않고 start, end 와 같은 표현을 쓰는 이유는 무엇일까? left, right, top, bottom 같은 속성은 절대적 위치를 나타내는 물리적 속성이다. 이 경우 절대적인 위치에 고정시켜 놓는 것이기 때문에 문서의 설정된 글쓰기 모드가 작성자가 의도한 방향과 반대라고 하더라도, 처음 고정한 위치에 계속 배치되어 있다. 이러한 문제를 해결하기 위해 start, end 같은 논리적 속성을 사용한다. 논리적 속성은 현재 사용하는 쓰기 방향이 무엇이든 상관이 없다.