김버그 UI개발 부트캠프) 2. Asset 준비

yoon·2021년 4월 6일

📝강의 정리 _ 김버그 UI 개발 부트캠프

목록 보기

2/5

1. HTML Document 셋업 & Webfont 적용

HTML Document 셋업

사용하는 대표적인 언어가 한국어이기 떄문에 ko 사용.
// ko-KR : 한국에서 만들어진 서비스라는 뜻.

 <html lang="ko">
   ...
 </html>

반응형을 위한 meta 태그

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>

title 은 구체적이게!
특히 스토어 상품 페이지 같은 경우 이런식으로 디테일하게 작성한다.

참고 - & gt; 의 경우 ">" 를 가리킨다.
https://dev.w3.org/html5/html-author/charref

<head>
  ...
    <title>전기히터 &gt; 캠핑/가정용 400W 미니멀 전기히터 VO-HT015 (안전장치기능탑재) | 내일의 집 </title>
</head>

Webfont 적용

구글 폰트에서 원하는 폰트, weight 가져옴. //아는 사항이라 생략

적용 후 확인 - 개발자 도구로 computed에서 Rendered Fonts 적용 사항 확인. → 최종적으로 적용된 사항 확인 가능

2. 이미지 Export 1: Raster Images

raster image vs vector image

-raster는 픽셀기반 이미지로 계단현상때문에 깨질수 있다, vector는 선분과 면으로 이뤄져있어 깨짐현상no

jpg와 png의 차이점

raster이미지 확장자로는 jpg, png가 있다.

jpg는 투명, 반투명 배경을 지원하지 못하지만 png는 투명, 반투명 배경 지원이 가능하다.
⭐이미지 압축방식

jpg는 압축을 잘한다. → 용량이 낮아짐 / 용량이 낮아져 웹사이트 퍼포먼스가 더 좋아지는 장점은 있으나 픽셀 표현이 낮아져 이미지 퀄리티가 png에 비해 낮아진다.
png는 이미지 퀄리티는 높지만 용량이 높은 단점이 있다.
퍼모먼스를 우선시 하냐, 이미지 퀄리티를 우선시하냐에 따라 선택.

WebP 확장자

구글에서 만든 새로운 확장자로 png보다 용량을 작고 jpg보다 이미지 손상이 적은 파일 포맷이다.
하지만 아직 널리 사용되지 않았고 구형 브라우저에서 지원하고 있지 않음.

3. 이미지 Export 2: Vector Images

vector img의 특성을 살리기 위해서는 SVG로 export해야만 한다.

SVG

scalable vector graphics 의 약자
// vector graphics : 수학적인 방정식을 통해서 컴퓨터가 그래픽을 연산으로 표현해주는 그래픽 방식.

장점 : 사이즈를 어떤 크기로 조절해도 깨지는 현상이 없다. //폰트도 vector
용량이 다른 이미지 파일들에 비해서 상대적으로 가벼울 확률이 높다.
→ 같은 이미지일 경우 png는 사이즈가 클수록 용량이 커지는데 반해 svg는 사이즈가 크든 작든 용량이 같다.
vector이미지가 bitmap이미지에 비해 용량절약이 용이하다.
하지만 만약 작은 사이즈의 이미지를 사용할 경우 bitmap이 더 가벼울 수 있다.

결론

웬만한 아이콘들은 SVG로 export해야하지만
만약 ie 6, 7, 8 를 대응해야한다면 SVG는 사용 불가능하다. png를 사용해야한다.
로고와 같은 중요한 이미지의 경우 SVG를 사용해야한다.

4. 이미지 Export 3

Figma에서 image export 방법

이런 같은 동류의 이미지들은 드래그로 다같이 선택 후 Ctrl + R
이름 지정 후 번호를 순서대로 지정 가능함.

5. SVG가 갑인 진짜 이유

html에서 이미지 표현 방법

img 태그로 표현

<img src="#" alt="아이콘" />

svg 의 경우 태그 자체를 html에 사용 가능

<div style="color: red;">
  <svg width="130" height="38" viewBox="0 0 130 38" fill="currentColor" aria-label="아이콘">
  	...
  </svg>
</div>

img alt 속성 = svg aria-label 속성
svg fill 속성을 통해 색상을 줄수 있다.
⭐ fill에 currentColor 지정시 부모태그에 지정된 색상을 따라 똑같이 상속된다.
위의 예제를 보면 부모 div 태그의 color가 red 이기 때문에 svg의 fill 값 또한 red가 된다.

더나아가 아래와 같이 hover 활용가능

<div>
  <svg width="130" height="38" viewBox="0 0 130 38" fill="currentColor" aria-label="아이콘">
  	...
  </svg>
</div>

<style>

.div {
  color: blue;
  transition: color 300ms ease-in;
}

.div:hover {
  color: aqua;
}

</style>

하지만 SVG 코드를 html에 넣기에는 너무 길기 때문에 비추한다.
icon font 를 추천한다.

6. icon font 생성 & 적용

icon font 생성

icon font 생성 사이트
https://icomoon.io/app/#/select

변환하고자 하는 SVG파일을 import icons로 업로드 후 generate font 누르기.
html에서 사용 고려하여 대문자에서 소문자로 고쳐주기.
//BookmarkFilled도 bookmark-filled로 변경
다운로드 버튼 옆 설정 버튼 눌러 아래와 같이 설정 후 다운로드.
다운로드 받은 파일의 fonts들을 프로젝트의 asset > fonts 파일로 옮겨 주고
다운 받은 파일에 있는 style.css의 내용을 복사 > 작업 중인 프로젝트에서 "_fonts.scss" 파일을 생성 후 붙여 넣기 해준다.

scss-lint 때문에 생기는 경고줄은 아래 사항을 파일 첫줄에 적용.
//scss-lint:disable all
font-face에서 font 경로 지정시 주의점!

scss파일을 css로 변형하기때문에
문서위치의 기준점은 css파일이 되어야한다 !
→ css 파일에 맞게 경로 변경해주기 !!
_fonts.scss가 style.css로 변경되려면 main.scss가 _fonts.scss를 인식해야한다.
왜냐면 package.json을 보면 main.scss를 style.css로 변경한다 했기 때문에 main.scss가 _fonts.scss를 인식해야함.
따라서 main.scss의 맨 윗줄에 _font.scss를 import 시켜줘야 한다.

@import './base/fonts';

HTML에 아이콘 적용 방법

i 태그 사용후 class로 원하는 아이콘의 class 적용.
aria-lable 속성으로 어떤 이미지인지 설정 가능.
font이기 때문에 css로 color를 주어 색상변경 가능.
font이기 때문에 사이즈 또한 font-size로 변경 가능.

<i class="ic-menu" aria-lable="메뉴"></i>

7. Favicon 설정

파비콘 변형 사이트 - https://realfavicongenerator.net/

파비콘 파일 로드 후 Favicon package 다운로드.
다운받은 파일들은 프로젝트 루트에 넣어주기.
아래 html코드는 index.html의 'title'태그 밑에 넣어주기.

8. Reset.css vs Normalize.css

Reset.css

모든 요소들을 전부 다 초기화시킨다.

장점 : 편하다..
단점 : 사용하지 않는 태그들까지 선택하기 때문에 불필요한 선언들이 많다.
2007년에 만들어서 구익스 버전에 맞춘 것이기 때문에 조금.. 과한 면이 있다.

Normalize.css

Normalize.css - https://necolas.github.io/normalize.css/

브라우저 별로 적용된 기본 스타일이 다르기 때문에 생기는 이슈들이 있다.
nomalize.css는 마치 하나의 브라우저인 것처럼 모든 브라우저가 동일한 기본 스타일을 적용할수 있게 해준다.

장점 : 불필요한 선언들이 없어 깔끔하고 유한 코드 구현.
단점 : 하향평준화가 될 수 있는 이슈들이 있다..

9. Reset 추천

nomalize.scss파일을 만들어 nomalize.css 코드를 넣어준다.
그외의 reset 스타일을 지정해주는 방식을 추천한다.

//_reset.scss
<style>

* {
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
}

html {
    font-family: 'Noto Sans KR', sans-serif;  
}

body {
    font-family: 'Noto Sans KR', sans-serif;  
}

h1 {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    background-color: transparent;
    border: 0;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

a,
button {
    cursor: pointer;
}

ul, 
ol {
    padding-left: 0;
    list-style: none;
}

</style>

⭐ SCSS Tip

**//Before**
<style>

button,
input,
select,
textarea {
  background-color: transparent;
  border: 0; 
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: none; 
}

</style>

위와같이 반복되는 선택자의 경우 &을 사용해 중복되는 선언을 줄여줄수 있다.

**//After**
<style>

button,
input,
select,
textarea {
    background-color: transparent;
    border: 0;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

</style>