[리뷰/책] 모던 웹사이트 디자인의 정석

한 줄 요약 : HTML, CSS에 관한 책을 한 권 공부한 뒤 활용방법을 찾을 때 도움이 되는 책

 

---

 

회사에서 엔지니어들이 사용하는 백오피스용 페이지를 HTML, JSP, JavaScript 로 만들어서 전달하곤 했다.

같은 회사의 엔지니어들만 사용하고 고객사 담당자는 접근할 일이 없다보니 요구한 기능만 잘 작동되면 문제가 없다.

 

하지만 고객사 상주 엔지니어, 외근 다니는 엔지니어와 이야기를 나눌 기회가 있었다.

평소에 피드백이 없었기에 문제가 없는줄 알았지만 크고 작은 불편함을 호소했다.

고객사에서는 모니터 크기가 작아서(낮은 해상도) 화면이 깨져서 보이거나, 슬라이드 바를 움직이는게 불편하다는 피드백을 받았다.

개발 할 때 사용중인 모니터는 DELL U2412 FHD 모니터여서 문제가 있을거라고 생각 못했다.

 

이 문제를 해결할 수 있는 방법이 '반응형 웹'이었다.

반응형 웹이란 다양한 스크린 크기에 맞추기 위해 유체(기름이 흐르는듯한) 그리드와 미디어 쿼리를 적용한 페이지를 뜻한다.

반응형 웹은 반응형 웹 디자인 패턴을 약식으로 부르는 용어다. '패턴'이라는 단어처럼 자주 사용하는 형태를 정리한 것이다.

 

Luke Wroblewski가 말한 Multi-Device Layout Patterns에 관한 내용은 다음 포스팅에 번역했다.

 

---

 

모던 웹사이트 디자인의 정석 책은 최소한의 패턴을 활용해서 두 개의 반응형 웹페이지를 만드는 구성이다.

 

책의 시작은 세 가지 패턴(다단 구조, 박스 요소 정렬/분할/배치, 반응형 웹 페이지의 구성)을 연습해본다.

그 후 블로그 스타일 페이지, 비즈니스 스타일 페이지를 한 땀 한 땀 만들어나간다.

 

장점은 반응형 웹 페이지를 만들기 위한 최소한의 내용을 설명하고 어떻게 활용하는지를 볼 수 있다는 점이다.

단점은 HTML, CSS에 대한 깊은 설명은 많지 않다는 점인데 이건 역자 서문에도 나와있는 내용이라 감안하고 봤다.

이 책의 대상 독자는 HTML5와 CSS3의 기본을 알고 있는 분입니다. 따라서 두 가지를 전혀 모른다면 읽어 나갈 수 없습니다. 너무 깊이 알 필요는 없답니다. HTML5와 CSS3에서 새로 추가된 기능 가운데 책에서 사용하는 내용(반응형 웹 디자인 등)은 추가적인 설명으로 다룹니다.

---

 

'반응형 웹'이라는 키워드를 접했을 때는 막연하게 느껴지던 내용이 예제 두 개를 따라해보고 나니 '할만한데?' 싶은 생각이 든다. 반응형 웹을 좀 더 공부해서 기능뿐만 아니라 사용성도 좋은 프로그램을 만들 수 있도록 의식하고 개발해야겠다. 엔지니어들의 피드백을 좀 더 자주 받을 수 있으면 의식적인 연습을 하는데 좋을듯한데... 지금의 조직 구조에서는 어려울 것 같다.

 

모던 웹사이트 디자인의 정석 국내도서 저자 : EBISUCOM / 윤인성역 출판 : 위키북스 2015.12.10 상세보기