[팀 프로젝트] 프로젝트 기본 세팅 - SCSS

나는 사용하고자 하는 기술 스택을 정함에 있어 이유가 명확할수록 좋은 것이라 생각한다.

그 상황에 맞는 기술을 선택하는 것이 효율도 좋으며 효과도 좋기 때문이다.

그러함에 있어 CSS 사용 기술을 선택하는 것도 많은 고민이 있었다.

 

우선 우리 팀이 추구하는 개발 중 중요한 키워드는 '자유로운'이었다.

 

CSS 하면 아무거나 갖다 쓰면 될 것 같다는 생각이 있었는데 여러 자료들을 찾아보니 선택 반경도 굉장히 넓고 상황에 맞는 선택법 또한 다양했기에 여러 프레임워크나 전처리기에 대해 알아볼 필요가 있었다.

어떤 분이 상황별 선택에 대해 잘 써놓은 글이 있어서 공유하겠다.

https://ritza.co/articles/tailwind-css-vs-bootstrap-vs-material-ui-vs-styled-components-vs-bulma-vs-sass/

Tailwind CSS vs. Bootstrap vs. Material UI vs. Styled Components vs. Bulma vs. SASS - Ritza Articles

 

결론적으로 SCSS를 선택하였는데 이것만의 강점은 다음과 같다.

- 우선 퓨어 CSS와 문법만 다르기 때문에 프레임워크처럼 만들어진 요소들을 신경 쓰지 않아도 된다.

우리 팀의 자유로움에 굉장히 잘 맞는다

- 변수, 함수의 사용으로 재사용성에 용이하다.

CSS 코드를 작업하다 보면 중간 정렬같이 굉장히 자주 쓰이는 공통된 코드들이 꽤나 많다. 이런 것들을 함수화 시켜놓으면 코드의 양을 효율적으로 줄일 수 있다. 뿐만 아니라 변수사용을 통해 요소들을 일괄적으로, 효율적으로 관리하기가 쉽다.

- 상속 개념을 통해 퓨어 CSS처럼 선택자가 괴랄하게 길어지지 않으며 가독성에도 좋다.

상속되는 것들은 한 곳에 모여있기 때문에 clean 한 코드를 만들 수 있고, 같은 클래스더라도 상속을 체계적으로 지켜 간섭되는 것을 막을 수 있다.

 

물론 CSS로 컴파일되면서 파일이 거대화된다는 단점이 존재하긴 하나 이번처럼 크지 않은 프로젝트를 진행하기에는 크게 문제가 될 것이 없을 것이라 판단하였다.

 

그리고 SCSS는 전처리기이기 때문에 다른 것들과 혼합해서 사용이 가능하기도 하지만 익숙지 않은 것들을 한 번에 수용하는 것에 문제가 발생할 것을 염려하여 SCSS만을 다루기로 하였다.

 

여기까지 간단한 CSS 옵션 선택에 대한 이야기를 마치고

프로젝트 세팅에 있어 어떠한 점들을 초기 설정하였는지에 대해 이야기해 보려 한다.

 

CSS 초기 설정

브라우저는 기본적으로 설정되어있는 디자인 요소가 있다.

line-height, margin, 태그 별 font-size 등이 있다. 

기본 설정들도 물론 쓸만하지만 프로젝트에 따라서 이런 기본 설정은 필요 없는 경우가 많이 있기에 이 부분을 손볼 필요가 있다. 그것을 reset 시킨다고들 표현한다.

당장 구글에 reset.css를 치면 이미 누군가 만들어 놓은 코드들이 여러 개 있다.

대표적인 것들이 reset.css, nomalize.css이 그것이다.

 

이것을 가져다 사용해도 되지만 우리의 입맛에 맞게 설정을 하는 것도 당연히 가능하다.

위에서 설명한 reset.css를 활용하되 우리가 필요한 부분을 추가하여 설정을 완성하였다.

예를 들어 우리 프로젝트에서 사용하는 button의 기본 색상은 푸른색이다.

section태그에서 사용하는 padding 또한 팀원들과 진행한 디자인 회의에서 정해놓았기 때문에 그 수치로 조정할 것이다.

h1, h2, h3, h4의 font-size 또한 조정해야 하고 button과 input의 padding, border 등등의 것도 조정해야 한다.

 

이렇게 그 프로젝트가 어떻게 사용할 지에 대해 먼저 팀원들과 상의하고 기본 설정을 해놓으면 되겠다.

아래는 프로젝트 적용 reset.scss

section {
  padding: $padding02;
}

h1,
h2,
h3,
h4 {
  margin-bottom: 0.4em;
}

h1 {
  font-size: $font-size-h1;
  line-height: 1.2;
}
h2 {
  font-size: $font-size-h2;
  line-height: 1.3;
}
h3 {
  font-size: $font-size-h3;
  line-height: 1.4;
}
h4 {
  font-size: $font-size-md;
}

p,
label {
  margin: 0.5em 0;
  display: block;
}

label {
  @include fontSize;
}

span {
}

ul,
ol {
  margin: 0;
  padding: $padding-em02;
}

li {
  list-style: none;
  margin-bottom: 0.4em;
}

button,
input {
  border-radius: 5px; // 변수로 수정요망
  line-height: 1.2;
  font-size: 0.8rem;
  white-space: nowrap;
}

input {
  outline: none;
  padding: $padding-rem01;
  border: solid 2px $color-light-blue;
  margin-right: 1em;
}

input:focus {
  border: solid 2px $color-grey03;
}

button {
  color: $color-white;
  outline: none;
  border: solid 1px $color-button;
  background-color: $color-button;
  padding: $padding-rem01 $padding-rem02;
  margin: 0 1rem 0 0;
}

* + button {
  margin-left: 1rem;
}

button:active {
  background-color: $color-button-active;
}

a:link,
a:visited,
a:hover,
a:active {
  padding: $padding-em02;
  font-weight: 700;
  color: $color-black;
  text-decoration: none;
}

 

SCSS의 변수사용

SCSS의 장점 중 하나는 CSS내에서도 변수를 사용하여 파일을 import 만 해주면 어느 곳에서도 이 변수를 사용할 수 있다.

CSS에서도 root에 변수를 설정해 놓으면 var를 통해 가져다 사용하는 방법이 존재한다.

하지만 모든 변수에 var를 써야 하기 때문에 어느 정도 번거로움이 있다.

SCSS에서는 그 부분을 보완하여 $를 앞에 붙임으로써 변수로 선언할 수가 있다. 

 

CSS에서 변수를 사용하는 이유는 여러 요소를 효율적으로 관리할 수 있다는 것이다.

만약 내 홈페이지의 테마 색깔이 #000인데 이를 #fff로 일괄적으로 변경하기를 원한다고 가정하자

static 하게 모든 요소를 직접 입력하였다면, 그리고 그러한 요소가 1억 개라면 당연히 코드를 1억 번 바꿔야 한다.

1억 개의 요소에 하나의 변수를 사용하여 코드를 짰다면 그 변수의 값만 변경해 주면 되는 것이다.

 

그렇기 자주 사용하는 값들을 변수에 저장하여 관리하고 있다.

대표적으로 color, font-size, padding, margin이 그것들이다.

/*------------------------------------*\
    #COLORS
\*------------------------------------*/
// 가격: $color-dark-grey, $color-light-grey

// 테마, 기본 배경 색
$color-bg: #F4F9FF;

// 무채색
$color-white: #fff;
$color-grey01: #E9E9E9;
$color-grey02: #8D8D8D;
$color-grey03: #606060;
$color-black: #000;

// 유채색
$color-red: #FF5050;
$color-light-red: #FD7B7B;
$color-blue: #4356FF;
$color-light-blue: #97aaff;
$color-green: #38AE00;

// 버튼
$color-button: #4356FF;
$color-button-active: #C8CDFF;


// 카테고리 (필요시 추가)
$color-tag-black: #000;
$color-tag-red: #FF0000;
$color-tag-purple: #AD00FF;
$color-tag-orange: #FFB800;
$color-tag-light-green: #7AC26D;
$color-tag-etc: #B6B6B6;
// $color-tag-skyblue: #00E0FF;



/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/

/* 1rem === 16px 기준 */

$font-family: 'Roboto';

$font-size-sm: 0.7rem;
$font-size-sm2: 0.8rem;
$font-size-md: 1rem;
$font-size-lg: 1.1rem;

$font-size-h1: 1.875rem; // 30px
$font-size-h2: 1.375rem; // 22px
$font-size-h3: 1.065rem; // 17px;

/*------------------------------------*\
    #SIZES
\*------------------------------------*/
// border-radius
$border-radius01: 5px;
$border-radius02: 10px;
$border-radius03: 20px;

// padding
$padding01: 10px;
$padding02: 20px;
$padding-em01: 0.4em;
$padding-em02: 0.5em;
$padding-em03: 0.6em;
$padding-em04: 1em;
$padding-rem01: 0.5rem;
$padding-rem02: 1rem;

$padding-left01: 15px;

// margin
$margin-right01: 5px;

$margin-bottom01: 5px;
$margin-bottom02: 10px;
$margin-bottom03: 15px;
$margin-bottom04: 20px;

 

SCSS에서는 함수 사용이 가능하다!

함수라 하면 무언가 거창해 보이지만 단순히 반복되는 코드를 모아놓는 것도 함수로 관리할 수 있다.

프런트엔드를 하다 보면 정말 정말 많이 쓰는 대표적인 코드로 다음이 있다. 바로 중앙 정렬 코드이다.

display: flex;

justify-contents: center;

aligh-items: center;

 

mixin이라는 기능을 사용하면 위의 3줄을 한 줄로 줄일 수 있다.

사용법은 다음과 같다.

 

우선 함수의 이름을 설정한다. 나는 flexCenter라고 정했다.

그리고 @mixin을 붙여준다.

@mixin flexCenter() {
  display: flex;
  justify-contents: center;
  aligh-items: center;
}

이렇게 해주면 가져다 쓰는 곳에서 @include를 통해 해당 요소를 한줄로 소환할 수 있다.

.test-div{
  @include flexCenter();
}

/* 아래와 같은코드
.test-div{
  display: felx;
  justify-contents: center;
  align-items: center;
}*/

 

이름이 함수인 것처럼 안에 인자를 전달하여 그 인자 값을 활용하여 함수를 만들 수도 있다.

아래는 after요소에 밑줄을 생성하는 코드를 함수로 만들어 사용하였다.

@mixin bottomLine($clr: $color-grey01) {
  &::after{
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    background-color: $clr;
    width: 100%;
    height: 2px;
  }
}

 

프론트엔드 팀원과의 소통

각자 개발을 공부해온 환경이 다르다 보니 개발 습관, 익숙한 것들이 다 제각각이더라.

그렇기에 이러한 기본 설정을 탄탄하게 준비해 놓아야 할 필요가 있다.

그리고 이러한 준비에 있어서 정말 중요한 것이 소통이다.

여태 경험했던 것들 중 유용했던 것은 무엇이 있었고 어느 정도의 세세한 부분까지 맞춰봐야 할지를 계속적으로 소통해야 하고 당연히 이러한 것들은 프로젝트 완성도와 진행 속도에 굉장히 많은 영향을 미친다.

충분한 시간을 두고 설정을 탄탄히 해서 프로젝트 진행에 차질이 없도록 하는 것이 이런 기본 설정의 의의라고 생각한다.