CSS - 기초

CSS(Cascading Style Sheets)

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 즉, CSS는 좋은 사용자 경험을 제공하기 위한 도구이다.

 

 

사용자 인터페이스(UI: user interface)

인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI(Command Line Interface)를 사용하였다. 하지만 이는 컴퓨터에 무지한 일반 사용자가 사용하기에는 어려움이 있다. 트위터로 메세지를 보내려면 메시지를 키보드 인터페이스로 입력하고, 마우스로 버튼 모양의 인터페이스를 눌러서 전송하면 된다. 이렇게 일반 사용자가 쉽게 사용할 수 있게 해주는 인터페이스를 사용자 인터페이스, UI라고 부른다.

 

 

 

 

웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당하기에, 직관적이고 쉬운 UI제작은 프론트엔드 개발자의 기본 소양이다. CSS를 이용하여 글자에 밑줄을 그어 하이퍼링크로 제작하는 것, 사각형 모양 도형 아래에 그림자 효과를 주어 버튼처럼 보이게 만드는 것, 콘텐츠가 더욱 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 프론트엔드 개발자가 해야 할 일이다.

 

좋은 사용자 경험(UX: user experience)는 직관적이고 쉬운 UI에서 나온다. 전 세계의 수억 명이 사용하고 있는 사이트인 Google, New York Times 등의 웹 페이지와 똑같이 만드는 것은 전문 디자이너만 할 수 있는 일이 아니다. 물론 훌륭한 디자이너들이 웹 페이지가 고유의 기능에 충실하게 하기 위해 엄청난 연구를 한 결과물이지만 코드로 구현하기 위한 기술은 그리 어려운 것이 아니므로 충분히 모방이 가능하다.

 

프론트엔드 개발자로써 웹 페이지 제작을 하기 위해서는 아래와 같은 역량이 필요하다.

• 컴포넌트 기능별로 묶어서 제작
• 화면의 구성이나 배치(레이아웃 디자인)
• 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관 없는 부분이다.

• 정렬이나 배색에 대한 감각
• UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험