CSS는 스타일링을 위한 도구입니다

- Cascading Style Sheets의 약자로 웹 문서의 스타일을 지정하고 꾸미는 데에 사용되는 언어이다.

- 기존의 웹 페이지 제작 언어인 HTML과 별개로 CSS라는 언어를 도입했다.

- 현재 CSS는 HTML 언어와 함께 동작하며 HTML로 작성된 정보를 human-friendly하게 바꿔주는 역할을 한다.

앞서 설명한 것처럼 HTML, CSS, 그리고 JS는 웹 어플리케이션을 만드는 세가지의 주축입니다. 그 중에서도 CSS는 스타일링을 담당합니다. 같은 구조와 로직을 사용한 두 웹 어플리케이션이 있습니다. 첫 번째 웹 어플리케이션에는 CSS를 사용하지 않았고, 다른 웹 어플리케이션에는 CSS를 이용해 스타일링했습니다. 어느 웹 어플리케이션을 좋은 웹 어플리케이션이라고 말할 수 있을까요? 같은 값이면 다홍치마라고 같은 구조와 로직이라면 당연히 CSS가 적용된 웹 어플리케이션이 더 좋은 웹 어플리케이션입니다. 그러나 우리가 옷을 입을 때 항상 심미적인 이유로만 옷을 입지 않듯이, CSS도 화려함만을 위해 사용되지는 않습니다.

콘텐츠의 배치와 위치 (레이아웃 디자인)
텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)

위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX, User experience)을 제공할 수 있습니다. CSS는 기존 웹 페이지에 다른 CSS 파일을 적용해 활자 매체로 출판을 할 수도 있거나, 색약이나 장애인이 웹 페이지를 이용할 때 도움을 줄 수도 있습니다.

CSS에 대한 오해

CSS는 디자이너의 영역이다?

나는 서버 개발자가 될 테니까 또는 나는 디자인 감각이 없으니까 등의 생각은 기본소양을 학습하는 데에 방해가 될 수 있습니다. CSS를 작성해서 간단한 UI를 만드는 일은 개발자의 기본적인 소양입니다. 위에서 언급한 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 할 수 있어야만 합니다.

일반 사용자를 대상으로 하는 어플리케이션은, UI(User Interface)가 없으면 소용이 없습니다.

사용자 인터페이스(UI, User Interface)는 사람과 컴퓨터 프로그램이 소통할 수 있도록 만들어진 요소입니다. 스마트폰에서 전화버튼을 눌러 친구에게 전화를 거는 일은, 번호를 누를 수 있는 숫자 버튼과 통화버튼이 있기때문에 가능합니다. 다음과 같은 UI를 한번 살펴볼까요? 이 앱은 자동차의 주행기록을 기록합니다. 다소 복잡해보이는 UI를 가지고 있지만, 자동차의 주행기록을 필요로하는 사람에게는 최고의 솔루션입니다. 만약 이 앱에서 버튼을 전부 없다면 어떨까요? 어제와 오늘, 그리고 다른 날짜의 기록을 확인하거나 기록을 다운로드하는 데에 큰 어려움을 겪을 겁니다. 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용이 없습니다.