프로젝트 SPAM #4 UI 설정(1)

재료를 준비했으니, 요리 하기전에 씻고 다듬을 시간이다. 재료를 어디에 둬야 찾기 쉽고, 빠르게 가져다 쓸 수 있을지에 대해 많은 고민을 했다. 나 혼자만 쓰는 게 아니라 팀원 모두가 써야 하는 것이기에 정해진 규칙대로 만드는 것이 핵심이었다. 아직도 진행중이지만 이게 은근히 규칙을 벗어나는 경우가 많이 생긴다. 여러 가지 디자인 패턴이 있지만, 그 중 우리 프로젝트와 맞는 부분을 얼마나 잘 접목해서 활용하는지가 중요한 듯 하다.

 

---

 

1. 노말라이즈

모든 브라우저는 각기 고유의 기본 css를 적용한다. 그렇기에 지겹도록 봐왔던 hello world를 스타일 없이 화면에 출력해도 좌측, 상단에 마진이 적용되어 있는채로 화면에 출력된다.(몰랐으면 지금 확인해보기) 다른 대표적인 예로 버튼, 인풋 창 등을 들 수 있다. 난 만든 적이 없는데 <button>만 만들어도 스타일이 입혀져 있는 완성채가 튀어나온다. 그래서 디자이너들은 첫 작업으로 브라우저의 css를 나름의 방법으로 초기화를 진행한다. 그 중 대표적으로 두 가지 방법 reset과 normalize가 있다.

• reset: 말 그대로 싹 다 삭제 시키는 방법이다. 그다지 추천하진 않는다. h1, h2 같은 모든 것들이 날라가버리는 말 그대로 백지상태가 되어버려서 처음부터 모든 걸 다시 만들어야 한다.
• normlize: 내가 원하는 부분만 초기화하고, 세팅하는 방법이다. necolas의 노말라이즈를 다운 받아 일부 수정해서 사용하고 있다. 아래는 코드의 일부

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

 

2. 폰트 및 텍스트 설정

폰트 종류와 텍스트 규칙은 목업 단계에서 정해진다. 폰트는 사이트의 색깔에 맞는 Pretendard로 정했다. 텍스트 스타일은 피그마로 프로토타입을 완성할 때, 플랫폼에 쓰일 텍스트의 크기를 일정 갯수로 분류해서 행간과 자간 등을 사이즈별로 정해놓았으며 그걸 그대로 설정해놓기만 하면 된다. Scss를 쓰고 있으므로 텍스트 스타일을 @mixin으로 만들었다.

/* _font.scss */

@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: local('Pretendard Variable'), url('@/assets/fonts/Pretendard.woff2') format('woff2-variations');
}

/* _text-style.scss */

@mixin text-style-12() {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.005em;
}

@mixin text-style-13() {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.01em;
}

@mixin text-style-14() {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@mixin text-style-16() {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@mixin text-style-24() {
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

@mixin text-style-46() {
  font-size: 46px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.32px;
}