노션 홈페이지를 더 풍부하게 만드는 방법
노션과 우피를 극한으로 사용해 보자!
목차
1. 노션과 우피, 정말 잘 쓰고 계시나요?
2. 우피와 코드 블록으로 다채로운 버튼 구현하기
3. 탈리 JS library로 팝업 설문 만들기
4. 레퍼런스
노션과 우피,
정말 잘 쓰고 계시나요?
청년마케터의 제안을 받아 노션을 주제로 오프라인 강의를 진행해 왔다. 현재 온라인 기반의 교육 도메인에서 창업을 하고 있는데, 오프라인 강의 인사이트를 얻을 수 있다고 판단해 10주 차 강의를 진행하고 있다. 최근에 담당자님으로부터 오프라인 연합 강의를 제안받았다. 많은 사람들이 가볍게 접할 수 있고, 배우면 큰 도움이 되는 주제를 고민하다가 노션을 활용한 랜딩 페이지 제작을 주제로 잡았다.
이제 누구나 쉽게 노션과 우피를 활용해 웹사이트를 만들 수 있기에, 이 주제는 꽤나 진부하게 느껴질 수 있다. 다만, 노션으로 만든 웹사이트, 대다수는 우피의 기본적인 기능만을 사용하고 있다. 노션의 블록을 활용해 UI를 제작하고, 우피로 변환시킨 게 끝이다. 간단한 코딩 지식을 조금만 더 활용하면, 훨씬 더 다양한 기능을 웹사이트에 구현할 수 있는데 많은 분이 모르고 있다. 보다 심화된 웹사이트 제작 정보를 알려드리는 걸 목표로 강의를 기획하기로 했다.
우피와 코드 블록으로
다채로운 버튼 구현하기
1. 웹사이트 구조 이해하기
웹사이트는 HTML, CSS와 JS(JavaScript)의 조합이라고 볼 수 있으며, 각각이 하는 일은 서로 다르다. HTML은 웹사이트의 뼈대를 구축하고, CSS로 이 뼈대에 디자인을 입힌다. 그리고, JS는 웹사이트의 동작을 결정한다.
- HTML : 웹사이트 뼈대
- CSS : 뼈대에 입히는 스타일
- JS : 웹사이트 동작, 움직임
HTML - 뼈 / CSS - 옷 / JS - 움직임 (출처 : <바닐라 코딩>)웹사이트에서 버튼(Button)을 구현한다고 해보자. HTML로 버튼을 만들 수 있는데, 완성된 버튼은 왼쪽처럼 못 생겨 보인다. 이 버튼을 더 이쁘게 꾸며주기 위해선 텍스트 색깔, 버튼 색깔, 버튼 모서리 등을 설정해야 하며, 이때 CSS가 사용된다. CSS로 스타일링을 완료하면, 오른쪽처럼 이쁜 버튼이 탄생한다.
HTML, CSS를 활용해 이쁜 버튼을 만들 수 있지만, 버튼의 동작은 존재하지 않는다. 버튼을 클릭했을 때, 특정 동작이나 모션을 추가하고 싶다면, JS가 추가적으로 사용돼야 한다. 예를 들어 버튼을 클릭했을 때, 팝업이 나오게 만들고 싶다면 JS를 별도 설정해야 한다.
2. 우피에서 코드로 버튼 만들기
우피는 노션의 코드 블록을 웹사이트의 HTML, CSS, JS 코드로 변환시켜 주는 기능을 제공한다. 이 코드 블록을 적극적으로 활용한다면, 웹사이트에 더 많은 기능을 구현할 수 있다.
웹사이트는 크게 <head>와 <body> 태그로 구성되며, <body> 태그는 웹사이트 화면에 직접 출력이 되는 요소를 갖는다. <body> 태그 안에 요소를 추가하는 방법은 다음과 같다. 아래 방식대로 한다면, 우피가 자동적으로 코드 블록 안에 작성된 내용을 웹사이트의 <body> 태그 안에 반영해 준다.
1. 노션에 /code를 입력해 코드 블록을 생성
2. 코드 언어를 HTML로 설정
3. 캡션에 oopy를 입력
4. <body> 태그 안에 삽입할 요소를 입력
HTML은 여러 요소(elem)로 구성되며, 각 요소는 특정한 태그로 존재한다. 태그의 유형은 여러 가지이며, 각 태그마다 다른 목적으로 사용된다. 예를 들어 <a> 태그는 링크 연결을, <button> 태그는 버튼을 구현하기 위해 사용한다. 아래와 같이 <button> 태그를 코드 블록에 입력하면 "4월 모임 신청하기"라는 이름의 버튼이 생성된다.
3. 버튼에 디자인 입히기
멋없는 버튼을 이쁘게 만들기 위해서 CSS 코드가 필요하다. 위 코드 블록을 보면, id 변수가 있는 걸 볼 수 있다. id 값은 해당 버튼을 정의하는 고유 값으로, 이를 활용해 CSS 스타일링을 적용할 요소를 선택할 수 있다. 즉, 앞서 구현한 버튼은 "Pirmiary-button"라는 id 값을 부여함으로써, 다른 버튼과 명확히 구분 지은 것이다.
스타일링을 위해 마찬가지로 코드 블록을 새로 생성하고, 언어는 HTML로, 캡션에 oopy를 입력한다. 그리고 이번에 <style> 태그를 호출한다. style 태그는 CSS 코드를 특정 요소에 직접 적용하도록 만드는 태그다. style 태그 안에 CSS 선택자를 활용해 특정 요소를 호출하고, dictionary 형식으로 적용할 스타일 값을 입력하면 된다.
여기서 말한 'CSS 선택자'란 스타일링을 적용할 요소를 선택하는 방식이다. <style> 태그 바로 뒤로 #Pimary-button이라고 적혀 있는데, 이는 요소의 id 값을 활용해 스타일링을 적용할 요소를 선택한 것이다. 요소를 선택한 후, dictionary 형태로 적용할 속성 값을 입력하면 된다. 아래를 보면, 버튼의 width, height, background-color 등의 값을 입력한 걸 볼 수 있다.
4. 버튼 상태 별 스타일링하기
요소를 각 상태 별로 다르게 스타일링 할 수도 있다. 예를 들어, 해당 버튼에 마우스를 갖다 되는 순간, 다른 스타일을 적용하고 싶다면 CSS 선택자에 :hover를 추가하고, 속성 값을 입력하면 된다.
이렇게 코드 블록을 입력하고, 우피에 적용해 보면 아래와 같이 다채로운 버튼을 만들 수 있다.
탈리 JS library로 팝업 설문 만들기
1. 외부 라이브러리 호출하기
이번에는 버튼을 클릭했을 때, 설문 팝업이 나오도록 만들어 보자. 앞서 말했듯, 버튼을 클릭했을 때 동작을 제어하기 위해선 JS를 사용해야 한다. JS 코드는 자체적으로 구현할 수 있지만, 외부 라이브러리를 호출해서 사용할 수도 있다. Tally는 구글 폼과 비슷한 설문 폼 서비스로, 별도 JS Libary를 제공한다. 이를 활용해 버튼을 클릭하자마자, 설문 폼을 팝업처럼 띄울 수도 있다.
우선 탈리의 JS 라이브러리를 불러오는 코드를 웹사이트의 <head> 태그 안에 삽입해야 한다. 앞서 말했듯이, 웹사이트는 크게 <head>와 <body> 태그로 구성된다. <body> 태그와 다르게, <head> 태그는 화면에 직접 출력되지 않지만, 웹사이트의 중요한 정보를 저장한다. 앞서 구현한 버튼은 <body> 태그 안에 존재하는 반면, 탈리의 JS 라이브러리를 호출하는 태그는 <head> 태그 안에 추가해야 한다.
<head> 안에 코드를 추가하는 방식은 앞선 <body> 태그의 코드 추가 방식과 살짝 다르다. 우선, 페이지 최상단에 코드 블록을 넣어야 하고, 캡션을 쓰지 않는 대신에 <head> 태그를 추가적으로 입력해줘야 한다.
1. 페이지 제목 바로 밑에 코드 블록을 추가
2. 코드 유형은 HTML로 선택
3. <head> 태그를 입력
4. <head> 태그 안에 삽입할 요소를 입력
이제 <head> 태그 안에 탈리의 JS 라이브러리를 불러오는 코드를 입력하면 된다.
2. 버튼 동작 제어하기
팝업을 출력할 버튼 요소에 daya-tally-open과 data-tally-layout 변수 값을 입력하면 된다. 이제 해당 버튼을 클릭했을 때 탈리 JS 라이브러리에 의해서 해당 폼이 팝업 형식으로 나온다.
여기서 쓰인 data-tally-open은 보여줄 탈리 설문 폼의 ID 값이고, data-tally-layout은 보여주는 방식이다. 탈리에서 설문 폼을 생성했을 때, 공유 링크의 마지막 path 값이 ID 값을 뜻한다.
해당 속성 값 외에도 탈리의 JS 라이브러리를 뜯어보면, 더 많은 속성 값을 설정할 수 있다.
