Introduction
Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다. HTML이 웹 페이지의 구졸르 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다.
CSS 소개
CSS는 스타일링을 위한 도구이다.
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가 없으면 소용이 없다.
이번에는 UX를 고려해 보겠다. 많은 기능을 다룰수록 UI를 위해 더욱 많은 버튼이 생긴다. 아래 그림은 UX를 고려하지 않고, 기능에만 충실하게 구현한 주행 기록 앱이다.
UX가 고려되지 않은 주행 기록 애플리케이션
복잡한 내용을 단순하게 구분 짓고, 페이지를 나누어 사용자가 한 페이지에서 볼 수 있는 내용을 제한했다. 화면 크기는 같지만, 사용자가 하나의 내용에 집중할 수 있도록 UX를 고려하여 재디자인했다.
UX를 고려하여 재디자인한 주행 기록 애플리케이션 *참고: 모바일 앱에도 CSS, 또는 이와 유사한 스타일링 기술을 사용한다.
UX를 고려하여 디자인하려면, 디자인을 배워야 하는 것 아닌가요?
놀랍게도, 두 번째 화면에서 나타나는 이미지 중에는 포토샵 같은 전문적인 이미지 툴을 사용한 부분이 없다.
- 검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있다. (검색어:
free app icon) - 네모 혹은 모서리가 둥근 네모, 동그라미와 같은 도형은 CSS로 쉽게 만들 수 있다.
전 세계의 수억 명이 사용하고 있는 사이트에 접속한다.
위의 페이지와 똑같이 만드는 것은 전문 디자이너만 할 수 있는 일이 아니다. 물론 위에서 소개한 웹 페이지는 훌륭한 디자이너들이, 웹 페이지가 고유의 기능에 충실하도록 하기 위해 엄청난 연구를 한 결과물이다. 그러나 코드로 구현하기 위한 기술은 어려운 것이 아니다. 다시 말해, 충분히 모방할 수 있다.
프론트엔드 개발자가 되려면…
사용자가 웹 서비스를 이용할 때, 크롬과 같은 브라우저에 보이는 부분을 프론트엔드(앞 단, Front-end)라고 한다. 그리고 프론트엔드를 개발하는, 프론트엔드 개발자는 레이아웃 디자인과 타이포그래피 정도는 다룰 수 있어야 한다.
- 화면의 구성이나 배치 (레이아웃 디자인)
- 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
그리고 아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분이다.
- 정렬이나 배색에 대한 감각
- UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
이런 부분은 프론트엔드 개발자로서 가져야 한다. 그리고 보노보노 ppt 디자인이 좋지 않은 디자인이라는 것을 느낄 수 있다면 이미 충분하다. 
ppt 보노보노에 관한 고찰
CSS는 어렵다?
디자인 아트, CSS IS AWESOME
이상하게도 CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나이다. 특정한 HTML 요소에, 적용할 스타일 속성과 값을 정의하면 필요한 부분이 거의 완성된다. 그러나 프로젝트의 규모가 조금만 더 커져도 CSS를 의미 있게 구성하는 일이 어렵고 복잡하다. 한 페이지에서 특정 HTML 요소를 CSS로 스타일링하기 위해서 CSS 파일 중 한 부분을 변경했더니, 다른 페이지의 HTML 요소가 변경되는 의도치 않은 상황이 연출되곤 한다.
이처럼 CSS가 가진 고유의 복잡함을 다루기 위해, 많은 종류의 다양한 모범 사례(Best practice)가 만들어졌다. 그러나 어떤 모범 사례가 가장 좋은 사례인 지에 대해 합의된 내용이 없다. 실제로 많은 모범 사례가 서로 완전히 상충하기도 한다. 그래서 CSS를 배우는 일이 어렵게 다가올 수 있다.
