노션으로 학교 업무하기_6 : : 대시보드 꾸미기(indify 날씨 위젯)

 

안녕하세요오🎀🎀🎀

 

오늘은 대시보드 두번째 편 위젯으로 꾸미기를 해보겠습니다.

 

대시보드가 2퍼센트 부족한 느낌이 들 때! 그럴 때를 위해 위젯이 있습니다.

 

저는 Indify 라는 사이트에서 위젯을 이용했는데요

 

이 위젯을 이용하려면 구글 아이디가 필요합니다!

 

구글 아이디를 미리 준비해주세요^^

 

 

1. indify 사이트에 접속해주세요

 

 

 

 

 

아래의 'Or, sign up with: Google' 을 클릭해서 구글 아이디로 접속해주세요

 

튜토리얼은 가볍게 읽어보셔도 되고, 그냥 엑스하셔도 됩니다

 

깔끔하게 엑스를 눌러주시면 다음과 같은 화면이 뜹니다!

 

 

이 공간에 내가 만든 위젯이 저장이 됩니다

 

스크롤을 내리면 아래에 다음과 같은 위젯들이 보입니다.

 

 

이 중에서 weather 를 클릭해볼게요

 

 

 

 

 

 

 

2. 날씨 위젯 삽입하기

 

 

create widget 을 클릭해주세요

 

귀여운 강아지가 위젯을 만들어줄거예요 ㅎㅎㅎㅎ

 

 

이 부분은 위젯의 색상 등을 설정하는 공간입니다.

 

Weather location : 지역 설정입니다. 기본은 샌프란시스코로 되어 있는데, 클릭해서 글씨를 지운뒤 Seoul 로 바꿔주세요

 

 

Preferred Units : 단위 설정입니다. 화씨로 되었있는데, 클릭해서 Metric(섭씨)로 바꾸어주세요!

 

Number of days : 며칠간의 날씨가 보일지를 설정하는 것입니다. 저는 3일로 바꿔볼게요.

 

Hide today's weather in forecast : 기본은 오늘 날씨부터 보이도록 설정되어있습니다. 이 버튼을 활성화하면

 

오늘 날씨는 보이지 않고 내일 날씨부터 3일 간의 날씨가 보여요

 

 

Animate icons : 구름이나 비가 움직이는 형태인지, 그냥 사진같은 형태인지를 선택합니다. 기본은 움직이는 거예요!

 

Greyscale icons : 이 버튼을 활성화하면 일러스트가 회색조로 바뀝니다.

 

Set background color : 배경 색을 지정할 수 있습니다.

 

 

 

 

여기서 회색 점선을 움직이면 위젯의 크기를 설정할 수 있습니다. 

 

가로로 되어있는데, 세로로 바꿀 수도 있어요!

 

 

 

여러분의 대시보드에 맞는 크기로 커스터마이즈 해보시기 바랍니다^^!!

 

다 설정하셨다면 오른쪽 아래의 다음 버튼을 봐주세요

 

이 위젯의 링크가 생성되어있습니다.

 

오른쪽 까만색 서류 버튼을 클릭하면 자동으로 링크가 복사됩니다. 

 

한번 클릭해주세요~~~!!

 

 

초록색 상자가 없어지기를 기다려주세요^^

 

 

없어졌다면 노션으로 가봅시다.

 

현재 노션 페이지가 이렇게 배치되어있습니다!

 

저는 맨 위에 긴 블럭에다가 위젯을 넣어볼게요!

 

여러분들은 넣고 싶은 공간에 자유롭게 위젯을 넣으시면 됩니다.

 

 

 

'/임베드' 라는 명령어를 적어주고 선택해주세요

 

다음과 같이 링크 임베드가 뜹니다.

 

URL을 붙여넣으세요 라는 곳에 주소를 붙여넣기 하고 (이미 복사되어있으므로 ctrl + V 하시면 됩니다)

 

링크 임베드 버튼을 클릭해주세요

 

 

아 이게 뭔가요 가로로 만들었는데 정사각형으로 임베드 되었군요 😧

 

하지만 괜찮습니다. 

 

양옆과 아래에 생긴 회색 선을 이리저리 움직여서 크기를 조절해주세요!

 

이렇게 예쁘게 입력이 되었습니다^^

 

이제 디테일을 위해 위젯 위 아래에 구분선을 넣어볼게요!!

 

아무곳에 있는 빈 블럭을 끌어와서 위젯 위와 아래에 하나씩 추가해주세요

 

다음과 같이 긴 줄이 생기는 곳에 블럭을 놓아주면 됩니다!

 

 

 

이런식으로 공간이 구성되어있습니다.

 

위젯 위 블럭을 클릭해서 '/구분선' 이라는 명령어를 넣어주세요

 

위젯 아래 블럭에도 똑같이 입력해주세요!

 

 

 

영역을 확인해보시고 필요 없는 빈 블럭은 삭제해주세요

 

짜잔~~~

 

아래와 같이 깔끔하게 위젯이 입력되었습니다~~

 

위젯의 위치를 옮기고 싶다면 역시나 점 여섯개를 클릭한 뒤에 원하는 위치에 옮겨주세요

 

 

혹시 구분 선이 너무 얇아서 보이지 않는다면

 

빈 블럭을 하나 만든 뒤에 배경색을 입혀주는 방법도 있습니다.

 

 

'/배경' 을 입력하면 배경색 메뉴가 나옵니다.

 

 

아래위로 배경색을 입혀주면 위와 같이 바뀝니다^^!!!

 

이렇게 날씨 위젯을 넣어보았습니다~!!

 

다음 포스팅에서는 카운트다운과 달력 위젯을 넣어보도록 하겠습니다^^!!