Module 6 - Google Fonts & scrollTop

1. Introduction

이번 공부에서는 대표적으로 두 개의 대해서 배워볼 것이다. 첫번째로 구글 폰트를 웹사이트로 어떠한 방식을 사용하여 불러올지 그리고 두번째로 .scrollTop()이라는 jQuery function을 활용하여 특정 로케이션을 향해 어떻게 스무스하게 페이지를 스크롤 할 수 있는지에 대해 알아 볼 것이다.

 

2. Google Fonts

역사적으로 지금까지 웹디자인은 오적 몇개의 (Standard fonts) 스탠다드 폰트만 가능하게끔 설정해왔다. 여기서 Standard font란 다른 유저들의 컴퓨터에게도 당연시하게 깔려있다고 인식되는 폰트이다. (예를 들면 Helvetica, Arial, Times New Roman etc)를 예로 들 수 있다. 이때 만약 어떤 웹 디자이너나 개발자가 마음대로 자기가 원하는 폰트를 쓰되 다른 사람의 컴퓨터에 깔려있지 않은 폰트를 쓴다면 그 컴퓨터에서 웹 페이지를 열시 기본적인 폰트로 등록되어있을 것이다. (이는 주로 Times New Roman 으로 설정된다. 솔직히 말하자면 Times New Roman은 Serif형식의 폰트로써 디지털상에서 촌스러워 많은 웹 디자이너들이나 개발자들이 기피하는 경향이 있는 폰트이다.) 그러므로 웹 개발자는 원하는 폰트를 쓰되 다른 유저들의 컴퓨터에도 그 폰트가 원활하게 디스플레이 될 수 있게끔 세팅하는 것이 중요한데 이는 CSS로 조절 가능하다. 

 

우선 특정 폰트를 고르는 방법은 폰트 관련 웹사이트에 들어가는 방법이 있는데 무엇을 들어가야 할지 모르겠다면 Google Fonts를 들어가 고르는 것을 추천한다. Google은 공식적인 사이트이자 저장소 (Repository)이기 때문이다. who doesnt like google, google's awesome lol

https://fonts.google.com/

Google Fonts

 

구글 폰트는 어마어마한 종류와 양의 활자체를 고를 수 있게 해주고 그 폰트들을 나만의 웹 페이지에 활용할 수 있게끔 코드를 제공한다. 그중에서 이 구글 폰트들을 가져올 방법들은 여러가지가 있는데 그 중에서 사용할 방법은 @import라는 방법이다. 이는 나의 CSS Stylesheet으로 구글 폰트를 불러오는 방법이자 font-family property로 selector에 포함된 부분을 불러온 구글 폰트로 바꿀 수 있게하는 방법이다.

 

@import

그렇다면 @import란 도대체 무엇이고 어떻게 사용해야 할까?

@import는 CSS에 있는 기능으로 특정 스타일을 다른 Stylesheet에서 불러올 수 있는 기능을 한다. 이때 @import를 사용하여 심플하게 구글 폰트 프로젝트로부터 원하는 폰트를 내 CSS파일에 불러올 수 있다. 이때 웹 개발자가 제일 중점적으로 알아야 할 사실은 @import는 CSS stylesheet에서 가장 먼저 위에 작성해야 한다는 것이다. 

 

Using Google Fonts

우선 위에 있는 링크로 들어가면 가장 먼저 눈에 보이는 것들은 여러가지 폰트의 종류와 그것들이 어떻게 생겼는지에 대해 나타날 것 이다. 그리고 Google Fonts 웹 페이지에 Categories라고 하는 버튼을 눌러 serif인지 sans-serif인지 display인지 handwriting인지 고를 수 있는 필터가 나타나 refine해줄 수 있다. 그 다음 원하는 폰트를 클릭하여 View Selected Family라는 아이콘을 클릭하여 Review 탭을 통해 마지막으로 이것이 원하는 스타일의 폰트가 맞는지 확인한 다음 @import 탭을 클릭하여 코드가 나타날 수 있게끔 세팅하면 된다. 

 

Google Fonts 웹페이지에 들어가면 나오는 것들

 

그 다음 @import 탭에서 나타나는 코드를 복사하여 CSS Stylesheet에 붙여넣기 하면 된다. 항상 @import 코드는 CSS에서 가장 제일 위에 작성하면 된다. 

 

이때 주의해야 할점은 코드상에서 아래와 같이 작성되는데 <style></style>라는 tag를 삭제해주어야 CSS상에서 인식이 가능하다. 이는 왜냐하면 <style></style>을 같이 작성하면 HTML형식의 코드형태가 되어 CSS상에서 인식하지 못하게 되기 때문이다. 

 

HTML 형식:

<style>
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Urbanist:wght@100&display=swap');
</style>

 

CSS 형식:

@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Urbanist:wght@100&display=swap');

 

그다음 마지막 단계로써 해야할 점은 CSS에서 그러면 @import로 불러온 코드를 어떻게 활용해야 할까에 대한 점이다. 이때 이미 @import 코드에서 CSS상에서 이 폰트를 내장시켜 유저가 직접 고른 폰트로 웹페이지를 작성을 할때 어느 컴퓨터에 열어도 적용이 되게끔 만들어 줄 수 있다는 점이다. 예를 들면 이렇게 활용 가능하다. 

 

@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Urbanist:wght@100&display=swap');

body {
    background-color: #222222;
    color: #ffffff;
    font-family: "Kite One", sans-serif;
}

header {
    background-color: #ffffff;
    color: #222222;
    font-family: "Pathway Gothic One", sans-serif;
    font-size: 36px;
}

 

이렇게 구글 폰트는 웹사이트를 만들때 presentation of web pages (웹페이지 방식)을 정말 발전 시킬 수 있다. 하지만 이번 주 강의에서도 교수가 언급했듯이 사공이 많으면 산으로 간다며 너무 많은 폰트의 종류들은 웹사이트의 정갈한 디자인을 방해할 수 있으므로 기본적으로 최대 3개 이하의 폰트 종류들을 사용하는 것이 권장된다.

 

3. Smooth Scrolling

잘만들어진 웹 페이지를 보게되면 스크롤할때 특정 부분들은 스크롤이 먹히지 않아 유저가 계속 볼 수 있게끔 하거나 유저들이 특정 부분을 클릭했을때 곧바로 똑같은 웹페이지에서의 원하는 부분을보게끔 할 수 있다.

 

우선 특정 부분에 스크롤이 먹히지 않게끔 세팅하고 싶다면 (예를 들면 Navigation box) 간단하게 position: fixed; 와 같은 세팅을 통해 위치를 고정 시켜줄 수 있다. 

 

그리고 만약 아래와 같이 코드를 작성한다면 유저가 버튼을 눌렀을때 똑같은 웹페이지에서 특정 부분을 보게끔한 효과를 줄 수 있게 된다.

<!-- Navigation -->
<a href="#home">home</a>
<a href="#audio">audio</a>
<a href="#video">video</a>
<a href="#contact">contact</a>

<!-- Headings -->
<h1 id="home">Home</h1>
<h1 id="audio">audio</h1>
<h1 id="video">video</h1>
<h1 id="contact">contact</h1>

 

윗 코드에서도 볼 수 있듯이 <a></a>로 웹페이지 안에다 링크를 걸때 href를 #home 또는 #video처럼 두면 다른 페이지로 넘어가는 링크를 구성하지 않는 대신 id에 담겨있는 요소들이 포함된 위치에 링크가 걸려 다른 웹 페이지로 넘어가지 않고 특정 페이지에 그대로 해당하는 글들이나 미디어 파일들을 삽입할 수 있게 한다. 이는 하나의 웹페이지로 구성된 사이트를 만들때 링크를 걸 순간이 있을때 매우 유용하게 활용될 수 있다. 그러나 이렇게만 코드를 작성하게 된다면 곧바로 그 부분으로 넘어가게 되어 유저들 입장에서 당황할 수 있다. 이를 방지하기 위해 jQuery를 사용하여 그 특정 요소가 웹페이지 안 현재 위치로부터 얼마나 멀리 떨어져 있는지 측정한다음 그 부분을 찾아 자연스럽게 자동으로 스크롤 하게끔 만들어 줄 수 있다.

 

jQuery로 작성해야 할 개발자들에게 있어 스무스한 스크롤링은 그들에게 조금의 것들을 요구하는데 이는 다음과 같다:

1. Retrieve the href from the link that is clicked. (클릭된 링크로부터 href에 등록된 부분을 찾아 검색하여라)
2. Find out how far down the page the element with the matching ID is. (ID에 등록된 요소가 페이지 상단에서부터 얼마나 떨어져 있는지 찾아라)
3. Scroll the page to that point. (그 부분까지 페이지를 스크롤 하여라)

이러한 명령들을 컴퓨터가 알아서 처리해주게끔 만들어 주기 위해 아래와 같은 jQuery 코드를 작성해야 한다.

 

$('nav ul li a').click(function(e) {
    e.preventDefault();
    target = $($(this).attr('href')).position().top;
    $('html,body').stop().animate({scrollTop: target}, {duration: 500});
});

 

음... 뭔지 모르겠으니 하나하나 알아보도록 하자.

 

$('nav ul li a').click(function(e) {

 

우선 첫번째 코드에서 $('nav ul li a')부분에서 알 수 있는 사실은 nav안에 들어있는 ul안에 들어있는 li안에 들어있는 a에 영향을 주어라로 해석할 수 있다. 그 부분을 selector로 지정하여 클릭하면 function (기능)이 작동하게끔 세팅해두었다.

 

그 다음 볼 수 있는 것도 function과 제법 비슷하게 보이는데 이는 다음과 같다.

 

	e.preventDefault();

 

이 function은 기존에 default로 갖춰져 있던 기능들을 방지하게끔 만드는 Function이다. 이는 마치 하이퍼링크를 클릭하였을때 이상한 방향으로 페이지를 움직이는 것이나 다른 페이지로 넘어가게끔 하는 그러한 기본적인 세팅들을 초기화 하여 후에 원하는 Function을 제대로 수행할 수 있게끔 만들어 준다.

 

    target = $($(this).attr('href')).position().top;

 

이 부분은 조금 복잡하여 더 나누어서 설명을 해보자면 

$(this).attr('href')

이 부분에서 볼 수 있는 .attr()은 jQuery가 selector에서 지정된 속성의 값을 검색할 수 있게 해준다. 애초에 클릭가능한 이벤트는 주로 <a></a> 태그로 감싸져있어 기본적으로 href 값들을 각기 가지고 있다. jQuery의 $(this)는 jQuery가 <a>에 있는 특정 Instance가 클릭됬다는 것을 알 수 있게끔 해준다. 따라서 이 코드는 우리가 클릭하는 <a>의 href값을 나타나게 해준다. 즉 애초에 우리가 <a>태그를 사용하여 링크를 만들어 줄 때 만약 우리가 특정 video 링크를 클릭했다면 href값은 #video로 설정해주게끔 해야 한다.

 

그렇다면 $().position().top;

이 부분은 무엇을 나타낼까? 만약 $(this).attr('href') 부분이 jQuery가 성공적으로 인식하여 '#video'로 지정되었다면 jQuery는 아래와 같이 코드를 받아들일 것이다.

$( ‘#video’ ).position().top;

즉 .position().top은 <h1 id="video">로 되어있는 위치를 찾게끔 만들어 얼마나 멀리 떨어져 있는지 측정한다. 이는 픽셀로 측정되며 컴퓨터 상에서 거리값을 쉽게 계산할 수 있다.

 

target은 variable (변수)로 여겨지며 특정 정보를 저장하는데 사용되는 방법이다. 이 부분에서는 $($(this).attr('href')).position().top;로 얻은 거리 즉 숫자 값을 target이라는 variable안에다 저장하며 나중에 코드를 작성할때 일일히 거리값을 계산하는 코드나 수를 작성하지 않고도 target이라는 variable값을 통해 통용할 수 있다.

 

    $('html,body').stop().animate({scrollTop: target}, {duration: 500});

 

마지막 줄인 이 부분은 궁극적으로 페이지를 자동 스크롤 해주는 기능을 나타낸다. 이때 $()안에 들어가는 selector로써 html과 body가 들어가는데 이는 몇몇 브라우저들은 html 아니면 body로 페이지를 부르기 때문이다. 그러므로 모든 브라우저에서 인식 가능케 하기 위해 두 개를 모두 selector로써 지정해보았다.

 

그리고 .stop()은 현재 진행되고 있는 모든 jQuery로 인한 애니메이션을 멈추는 function이다. 그말은 만약 페이지가 이미 특정 부분을 향해 스크롤을 하고 있고 우리가 그 사이 다른 링크를 클릭한다면 페이지는 곧바로 스크롤을 멈추고 클릭된 링크의 속한 부분을 향해 새로운 방향으로 스크롤 하게 될 것이다. 만약 이 function을 사용하지 않는다면 새로운 방향으로 가기 전에 기존의 스크롤을 완료할 것이다.

 

그다음 .animate은 기존에 고찰해 봤던 function답게 수적인 값들을 받아들이는 CSS property에 애니메이션 효과를 부여할 것이다. 이때 사용하는 CSS property는 scrollTop으로써 페이지 가장 윗 부분부터 원하는 부분까지의 거리를 세팅한다. 그다음 duration을 500으로 설정하여 지정된 duration 이내에 자동으로 위에서부터 스크롤하게 되는 페이지를 구축하여 만들어 볼 수 있게 된다.

 

마지막 자동 스크롤 부분에서 jQuery를 활용한 코드에 처음보는 여러 Function들이 많아 순간 겁냈지만 찬찬히 하나하나 알아본 끝에 어느정도 감을 잡을 수 있게 되었다. 결국 이 기능들을 통해 더욱 다이나믹하고 유저가 인터렉티브하게 즐길 수 있는 완성도 있는 웹사이트를 만들어 볼 수 있다는 점이 맘에 들었다.