『새로운 CSS 레이아웃』을 읽고. 제대로 된 레이아웃을 위해 명심할 것들!

『새로운 CSS 레이아웃』 - 레이철 앤드루

1주 1개발 서적 읽기 프로젝트. 이번 주는 『새로운 CSS 레이아웃』 - 레이철 앤드루를 읽었다. 읽으면서 공감하면서 읽었던 부분도 많았고, 모던 CSS로 레이아웃을 제대로 짜고 싶다면 이 책을 제대로 읽어야 한다는 생각이 들었다. 읽으면서 내가 기억하고 싶은 부분들을 표시해뒀고, 이번 포스팅에 기록해본다.

---

논리적 속성과 물리적 속성

- 배치와 관련해 절대 위치를 정할 때처럼 그리드 또는 플렉스 컨테이너의 왼쪽, 오른쪽, 위, 아래라고 하지 않고 왜 '시작(start)'이나 '끝(end)'이라는 표현을 쓰는지 그 이유가 궁금할 수 있다. 이는 절대 위치에서 사용하는 left, right, top, bottom 속성은 물리적 속성이기 때문이다. 즉, 어떤 요소가 화면에서 물리적으로 어디에 위치하는지 나타내기 때문이다.

- 이 경우는 문서에 설정된 글쓰기 모드(right to left, left to right)에 따라 문제가 발생하기 때문에 새로운 레이아웃 제작 방식(flex, grid)에서는 컨테이너의 시작 부분을 나타내는 논리적 속성을 사용한다. 논리적 속성은 지금 사용하는 글쓰기의 방향이 무엇이든 상관없다.

- 예를 들어 레이아웃이 기존의 margin-left, margin-right 등으로 여백들을 설정된 경우엔 글쓰기 모드에 따라 설정을 수정해줘야 한다. 하지만 새로운 CSS 레이아웃은 논리적 속성을 채택하고 있기 때문에 그런 별도의 작업은 필요 없어지는 것이다.

- 참고로 현재 CSS에서 모든 논리적 속성을 물리적 속성에 대입할 수 있는 명세가 개발 중이다. 앞으로는 이 명세에 있는 기술을 적용해 다양한 글쓰기 모드에 맞추어 디자인하는 일이 더 쉬워질 것이다. 그러나 아직은 한 가지 디자인으로 여러 글쓰기 모드에 대응할 때 물리적 속성이 사용된 부분과 그 이유를 잘 이해하고 주의를 기울여야 한다. 즉, 플렉스 박스와 그리드 레이아웃을 사용해 작업할수록 이 명세의 힘을 제대로 쓰기 위해서는 배치에 관해 잘 이해하는 것이 무엇보다 중요하다.

마크업 '구조 단순화'의 위험성

- 새로운 레이아웃 제작 방식의 강력한 몇 가지 기능 중에는 요소를 문서상의 순서와 다른 순서로 배열하는 기능이 있다. 물론 이러한 기능은 유용하다. 그러나 화면을 보고 마우스나 트랙패드로 문서를 탐색하는 사용자를 고려하는 데서 그치지 않고 말 그대로 모든 사용자를 고려하는 노력이 필요하다. 플렉스 박스나 그리드를 사용해 개발할 때 고민할 부분은 또 있다. 플렉스 아이템이나 그리드 아이템으로 만들 요소를 더 쉽게 작성하기 위해 마크업 구조를 더 단순하게 만들고 싶은 유혹을 떨쳐내는 것이다.

- 현재 플렉스 또는 그리드 컨테이너의 인접한 자식 요소는 플렉스 아이템이나 그리드 아이템으로만 만들 수 있다. 예를 들어 그리드를 사용해 어떤 콘텐츠를 표현하고 이 콘텐츠 안에 ul 요소를 사용한 목록이 있다고 가정해보자. 이 목록의 항목은 그리드 아이템으로 변환되지 않을 것이다. 물론 ul 자체는 그리드 컨테이너가 될 수 있다. 하지만 이 그리드는 바깥에 있는 그리드와는 상관없다. 그리드 내부에 표현된 새로운 그리드이기 때문이다.

- 이때 이러한 생각이 들 수 있다. '목록을 표현하긴 했지만 반드시 ul이나 ol 같은 목록 요소를 사용해야 할 필요가 있을까? 여러개의 div 요소로 표현하면 모두 인접한 자식이 되어 그리드에 잘 표현되지 않을까?' 하는 그런 생각들. 그러나 조심해야 한다. 그대로 실행했다가는 결국 문제가 될테니까 말이다.

- 설령 나중에 품을 더 들여야 하더라도 요소의 시각적인 표현은 좋은 코드에 필요한 결정을 내린 이후에 고민하는 것이 좋다.

고객이나 상사를 설득하는 법

- 구식 브라우저에서도 웹사이트가 완전히 똑같아 보이기를 기대한다. 이 경우에는 '똑같이 보여야 한다'는 부분에만 집중할 것이 아니라 상대가 사이트 개발 전체를 아울러 볼 정도의 시야를 갖도록 도와야 한다. '외관'은 웹사이트의 일부에 지나지 않는다. 다만 고객 입장에서는 자연스레 외관에 집중하게 된다. 웹사이트에는 수많은 구성 요소가 있으며 한 가지에만 집중하면 다른 부분을 놓칠 수 있다는 사실을 고객에게 이해시키면 고객이 큰 그림을 이해하는 데 도움이 될 것이다.

- 원활하게 고객을 설득하기 위해서는 주장을 뒷받침할 데이터와 통계를 준비해야 한다. 통계를 통해 고객의 결정에 따라 '완전히 똑같은' 경험을 하지 못할 사용자가 어느 정도 규모인지 비교해 설명할 수도 있다. 그러면 고객은 '똑같이 보이는' 것이 전부가 아니라는 사실을 이해하고 웹사이트의 사업적 목적을 달성하도록 여러분과 협력할 수도 있을 것이다.

- 또한 고객이 '똑같이 보여야 한다'는 점에 집착하는 이유가 무엇인지 생각해볼 필요도 있다. 이때 고객이 진짜로 걱정하는 것은 무엇인가?의 질문을 통해 케이스를 나눌 수 있다.

Case 1) 검색 엔진
- 어떤 고객은 검색 엔진 때문에 걱정한다. 검색 엔진이 사이트에 잘 접근할 수 있는가? 이에 대해 최신 검색 엔진은 성능과 모바일 친화성(mobile-friendliness)을 중요하게 여긴다는 사실을 알려주자. 새로운 레이아웃 제작 방식이 검색 엔진 친화적인 웹사이트를 만드는 데 도움이 될 수 있다.

Case 2) 브랜드 정체성
- 기능이 떨어지는 브라우저에 맞춰진 버전의 웹사이트에서 자기 브랜드의 정체성이 사라져버리지 않을까 걱정하는 고객도 있다. 이럴 때는 구식 브라우저에서도 고객의 브랜드와 시각적 스타일이 일관성 있게 유지된다는 것을 확실히 보여주자. 반응형 디자인을 사용해 화면 크기와 상관없이 디자인에 일관성이 유지된다는 것을 보여주면 좋다. 모바일용 사이트 디자인과 데스크톱용 사이트 디자인 사이에는 차이가 있을 수 있다. 각 화면 용 맞춤형 디자인이어서 그렇다. 그때도 동일한 브랜드 정체성과 시각적 스타일이 충분히 전달된다는 점을 고객이 직접 확인하게 하는 것이 좋다. 물론 구식 브라우저에서는 약간의 제약이 있을 것이다. 하지만 제약이 있다 하더라도 얼마든지 좋은 경험을 선사할 수 있다.

Case 3) 예산
- 또 다른 고객은 예상을 걱정한다. 이때는 새로운 제작 방식이 개발 속도에서는 더 빠르며 추후 문제를 일으킬 소지도 적다는 점을 강조하면 좋다. 또는 IE9와 최신 브라우저에서 완전히 똑같이 보이는 웹사이트를 만드는 데는 더 많은 비용이 들기 때문에 그 비용으로 광고를 하거나 고객을 끌어들일 새로운 기능을 추가하는 데 쓰는 편이 낫다고 설득할 수도 있다.

Case 4) 유저의 컴플레인
- 사이트에 문제가 있다는 사용자의 불평을 들은 적 있는 고객은 웹사이트가 똑같이 보여야 한다고도 집착한다. 이러한 경우 구식 브라우저에 더 단순한 레이아웃을 적용하면 오히려 문제가 적을 것이라 설명하자. 구식 브라우저를 사용하는 방문객은 자신이 사용한 기기에 맞춰서 더 빠르게 작동하는 성능 좋은 웹사이트를 경험하게 될 것이다. 구식 기술을 쓸 때 최신 기술로 제공할 수 있는 경험을 억지로 주려고 하면 오히려 이 때문에 새로운 문제가 발생할 수도 있다.