[16JUL, 2021] TIL

오늘의 TIL은 간단한 개념 정리로 고고!

 

---

 

 

✔️ Sass / SCSS

Sass(Syntactically Awesome Style Sheets), SCSS (Sassy CSS) 모두 CSS Preprocessor(CSS 전(예비) 처리기)이다. SCSS는 Sass의 3버전에서 새롭게 등장했고, Sass와 여러 가지 문법 차이가 있지만 더 넓은 범용성과 호환성 등을 장점으로 SCSS사용을 권장하고 있다고 한다. 둘의 간단하고 알아보기 쉬운 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다.

/* Sass */
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")


/* SCSS */
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
  }
}

 

 

이렇게 CSS Preprossor를 사용하는 이유는 불필요한 Selector의 과용, 연산 기능의 한계 등 프로젝트가 커지면서 복잡해지는 CSS작업을 쉽게 해주기 때문에 사용한다. 또한 가독성과 재사용성을 높일 수 있기에 유지보수가 더 쉬워진다는 장점도 가지고 있다. (+전처리기로 작성하고 컴파일러를 통해 웹에서 동작 가능한 표준 CSS로 컴파일해서 동작한다.)

 

 

✔️ UI / UX

 

UI (User Interface) :

사용자가 웹, 시스템 등의 정보기기를 사용할 때 마주하는 디자인, 레이아웃, 기술적인 부분이다. 폰트, 색깔, 줄 간격 등 디자인적인 요소와 반응형이나 애니메이션 효과 등의 기술적인 부분을 모두 포함한다. 그래서 UI는 특별한 설명 없이도 누가 봐도 알기 쉽게 보편적이고 직관적인 디자인을 가져야 하며, 사용자가 사용할 때 큰 불편함이 없고, 만족도를 높여야 한다.

 

 

UX (User Experience) :

사용자가 웹, 시스템 등의 정보기기의 UI를 직/간접적으로 이용하며 경험한 모든 것을 말한다. 그래서 이러한 사용자들의 경험을 분석하여 통계를 낸 데이터를 기반으로  더 편하고 효율적인 방향으로 프로세스가 진행될 수 있도록 만드는 것이다. 

 

UI는 UX를 기반으로 시각적인 요소에 중점을 두고, UX는 UI를 사용하는 사용자들의 경험을 분석해 보완하는 것에 중점을 둔다.

 

 

참고: 

• sass / scss
• UI / UX