[CSS] CSS란?

 CSS(Cascading Style Sheets)는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다. HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 틀을 잡는 것이라면 CSS는 색상이나 크기, 이미지 크기나 배치 등 웹 문서의 디자인 요소를 담당한다. CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어로 자바스크립트와 연계해 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용된다.

 

 HTML로 만들어진 문서에 CSS를 접목시키면 가독성이 좋아보이는 효과를 볼 수 있고 사용자가 문서를 잘 이해할 수 있도록 도와준다. CSS는 작성이 쉽다는 장점이 있지만, 요소가 많아지고 이에 따라 코드가 늘어나기 시작하면 유지보수에 어려움이 많아진다. 코드가 무수히 많아질 때 주석 처리가 되어 있지 않으면 팀 프로젝트에 어려움을 줄 수도 있다. 하지만 CSS의 선택자 개념을 잘 이용하면 이를 보완할 수 있다. 또한, 이를 보완하기 위해 만들어진 기술로 LESS, Sass, Stylus등이 있다.

 

 

 

사용자 인터페이스 (User Interface, UI)

 사용자 인터페이스란 사람들이 컴퓨터와 상호 작용하는 시스템이다. 개발자는 이 CSS를 통해 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스부터 만들게 된다. 사용자 인터페이스는 하드웨어와 소프트웨어 요소를 포함하고 크게 다음과 같은 수단을 사용한다.

• 입력 : 사용자가 시스템을 조작할 수 있게 한다.
• 출력 : 시스템이 사용자가 이용한 것에 대한 결과를 표시한다.
• 삭제 : 시스템이 사용자가 잘못한 것을 삭제한다.

 

 과거 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해 CLI(Command Line Interface)를 사용했다. 마치 영화에서 보던 해커들의 모습처럼, 키보드로 작성한 비밀 암호같은 코드를 적어서 엔터를 눌러야만 의도한 바를 작동시킬 수 있었다. 하지만 요즘은 잘 만들어진 인터페이스 덕분에 컴퓨터의 복잡한 내부 작동원리를 이해하거나 CLI 명령어를 입력하지 못해도 일반 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령할 수 있게 되었다.

 

 웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당하기 때문에 애플리케이션과 소통에 필요한 UI 제작은 프론트엔드 개발자의 기본 소양이라 할 수 있다. 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용이 없기 때문이다.

 

 

사용자 경험 (User Experience, UX)

 UI는 정보기기나 소프트웨어의 화면 등 사람과 접하는 면을 말한다면 UX는 경험이다. 즉, 소프트웨어를 사용하는 사용자의 '느낌, 태도, 행동'을 말한다. UX는 제품이나 서비스, 시스템을 사용하면서 체험하는 전반적인 사용자 경험을 개선하기 위한 설계 영역이다.

 

 좋은 사용자 경험은 직관적이고 쉬운 UI에서 나온다. 복잡한 내용을 단순하게 구분 짓고 사용자가 필요한 부분에 집중할 수 있도록 UX를 고려해서 디자인을 해야 한다는 것이다. UX를 신중하게 고려하여 구성된 UI는 사용자의 입장에서 좀 더 편리하고 직관적으로 어플리케이션을 사용할 수 있도록 도울 수 있다.

 

 따라서 웹페이지를 위한 UI/UX를 고려하여 웹 서비스를 만든다는 말은 다른 말로 사용자의 입장에서 편리하게 해당 서비스를 이용하고 조작할 수 있도록 하는 시각적인 도구를 만들고, 사용자의 입장에서 편의를 생각한다는 것이다.