노션으로 나만의 ‘홈페이지’ 만들기

IT 지식이 무엇보다 중요해진 요즘, 여러분은 어떻게 공부하고 있나요? 가장 먼저 눈길이 가는 건 다양한 IT 강의 영상일 겁니다. 강의를 제공하는 교육 기업들과 함께, 요즘IT에서 ‘IT 강의 시리즈’를 준비했습니다. 엄선한 교육 영상을 텍스트로 읽고 필요한 정보를 빠르게 가져가세요.

이번 강의는 ‘노션(Notion) 활용하기’입니다. 노션은 어느덧 단순한 메모용 소프트웨어를 넘어 기업의 주요 업무 공간으로 진화하고 있습니다. 노션을 쓰려면 알아야 할 기본 개념부터 목적에 따른 활용법까지, 이 기회에 기초를 확실히 다져 보세요. 전체 영상은 코드잇에서 확인할 수 있습니다.

이번에는 노션(Notion)을 더욱 높은 퀄리티로 활용할 수 있도록 지원하는 여러 가지 고급 기능에 대해 배워보겠습니다. 아래 이미지는 앞으로 살펴볼 기능을 활용해 만든 결과물입니다.

얼핏 보면 실제 홈페이지처럼 보이죠? 이 페이지는 일상 관리를 위한 개인용 홈페이지입니다.

가장 왼쪽 영역에는 시계 위젯(widget), 마음에 드는 문구, 월간 할 일 목록(To-do list)이 배치되어 있습니다. 가운데 영역에는 일정 관리를 위한 캘린더 뷰(Calendar View) 형식의 데이터베이스가 있습니다. 마지막 오른쪽 영역에는 유튜브(Youtube)와 스포티파이(Spotify)에서 가져온 음악 관련 블록들이 모여 있습니다.

지금부터 이 페이지를 구성하는 요소를 하나씩 살펴보면서, 각 기능을 어떻게 사용하는지 알아보겠습니다. 마지막에는 해당 페이지를 웹에 게시하는 방법까지 살펴볼게요.

임베드(Embed): 외부 소스 활용하기

우선 예시 페이지 중 시계 위젯(widget) 블록이나 유튜브 영상 블록, 스포티파이의 음악 카드 블록은 상대적으로 낯설게 느껴질 수 있는데요. 이 블록들은 노션 내부에서 직접 생성된 것이 아니라 외부에서 가져온 소스를 삽입한 것이기 때문입니다.

실제로 영상 블록의 재생 버튼을 클릭해 보면, 페이지 내에서 콘텐츠가 바로 재생되는 것을 확인할 수 있습니다.

이렇게 외부 콘텐츠나 서비스를 가져와 노션 페이지 내부에 삽입하여 직접 이용하도록 지원하는 기능을 임베드(Embed)라고 합니다.

노션은 대부분의 온라인 콘텐츠를 페이지에서 임베드할 수 있도록 지원하고 있습니다. 때문에 동영상이나 오디오 플레이어뿐만 아니라 X와 같은 SNS 콘텐츠, 지도 서비스, 심지어 슬랙(Slack) 같은 서비스의 메시지까지 모두 노션 페이지에 임베드하여 사용할 수 있어요.

아주 쉬운 임베드(Embed) 적용법

그렇다면 임베드는 어떻게 할 수 있을까요? 아주 간단합니다. 원하는 콘텐츠의 URL만 있으면 되죠.

미리 복사해 둔 다른 유튜브 플레이리스트의 URL을 페이지의 빈 공간에 붙여 넣어 보겠습니다. 붙여 넣기를 하면 팝업 창이 나타나고, 여기서 “Create embed”를 클릭하면 콘텐츠가 페이지에 임베드됩니다.

이렇게 삽입된 콘텐츠는 하나의 블록으로 볼 수 있습니다. 그래서 사이즈를 조정하고 싶다면 이미지 블록과 마찬가지로 가장자리 부분을 잡고 늘리거나 줄이면 되고, 위치를 변경하고 싶을 때는 블록 핸들로 사용하여 자유롭게 조정하면 됩니다.

링크를 붙여 넣는 방식 외에 페이지의 빈 공간에 “/embed”라고 입력해 링크를 넣을 임베드 블록을 직접 만들 수도 있습니다. 블록에 원하는 링크를 넣으면 콘텐츠가 임베드됩니다.

자주 쓰는 미디어와 앱의 임베드(Embed)

한편, 자주 사용하는 미디어나 애플리케이션의 경우에는 따로 마련된 임베드(Embed) 블록을 활용할 수도 있습니다. 예를 들어, 슬래시(/)를 입력한 뒤 "구글 지도(Google Maps)"를 검색하여 선택하면 고유한 임베드 블록을 만들 수 있습니다. 여기에 구글 지도의 장소 링크(URL)를 붙여 넣기만 하면 됩니다.

구글 지도에서 에펠탑을 검색한 다음, 이 장소에 해당하는 링크를 복사하여 블록에 삽입해 보겠습니다. 그러면 페이지에 지도가 임베드되는데요. 노션을 벗어나지 않고도 지도를 확대하거나 축소하는 등 바로 사용할 수 있습니다.

이처럼 페이지 내부에서 곧바로 외부 콘텐츠를 확인할 수 있다는 것이 임베드 기능의 가장 큰 장점입니다. 그래도 만약 원본으로 이동하고 싶어진다면, 블록 위쪽에 마우스를 올렸을 때 나타나는 화살표 모양 아이콘을 클릭하면 원본 링크로 이동할 수 있습니다.

외부 위젯 임베드(Embed)

그렇다면 시계 위젯은 어떻게 임베드해야 할까요? 방법은 지금까지 했던 것과 비슷합니다. 위젯 소스를 제공하는 사이트에 접속해 위젯을 만든 다음, 링크를 복사하여 페이지에 붙여 넣으면 임베드가 되는 원리입니다.

위젯을 만들 수 있는 몇 가지 사이트가 있지만, 우리는 WidgetBox라는 사이트를 이용해 위젯을 한번 만들어 보겠습니다. 사이트에서 제공하는 다양한 위젯 중에 원하는 것을 골라 편집할 수 있습니다. 저는 시계 위젯 중에서 아날로그 시계(Analog Clock)를 선택했습니다.

편집 창에서는 배경색, 테두리의 색과 굵기 등을 커스터마이징할 수도 있습니다. 이렇게 만든 위젯의 링크를 복사하고 다시 노션으로 돌아가 원하는 페이지에 붙여 넣으면, 곧바로 노션 페이지 안에 시계 위젯이 생깁니다.

페이지 링크(Link)와 멘션(Mention): 노션 내부 페이지 링크 활용하기

그럼 외부 링크가 아니라 노션 내부에 있는 다른 페이지의 링크를 복사해 페이지에 붙여 넣으면 어떻게 될까요?

노션 내부 다른 페이지의 링크를 복사한 페이지의 빈 공간에 붙여 넣어보면, 외부 링크를 붙였을 때와 메뉴가 조금 다른데요. 페이지 멘션과 페이지 링크라는 선택지가 나오게 됩니다.

링크(Link)와 멘션(Mention)

이 중 ‘페이지 링크’를 클릭하면 아래 이미지와 같은 블록이 생성됩니다. 이를 클릭하면 독서 기록장 페이지로 바로 이동합니다.

이번에는 ‘페이지 멘션’으로 만들어 보겠습니다. 앞서 만든 것과 똑같아 보이는 링크가 하나 더 만들어졌죠. 하지만 마우스를 올려보면 두 링크가 서로 다르다는 것을 알 수 있습니다.

자세히 살펴보면, 위쪽의 ‘페이지 링크’로 생성된 것은 다른 페이지로 이동하는 링크 전체가 하나의 독립된 블록 형태로 만들어져 있습니다. 반면 아래쪽의 ‘페이지 멘션’으로 만든 것은 블록 안에 들어 있는 인라인(inline) 형태로 만들어져 있는데요. 그래서 멘션으로 링크를 만들면, 블록 안의 빈 공간에 추가 텍스트를 입력할 수도 있습니다.

이런 페이지 멘션은 단축키로 쉽게 추가할 수도 있습니다. 페이지를 멘션하고 싶은 위치에서 '@' 기호를 입력하고, 멘션하고자 하는 페이지 이름을 검색해 선택하면 곧바로 페이지를 멘션할 수 있습니다.

3가지 고급 블록으로 홈페이지 꾸미기

버튼(Button) 블록으로 작업 자동화하기

이번에는 페이지의 Monthly To-do list 부분을 살펴보겠습니다. 다시 보니 To-do list 아래 처음 보는 버튼 모양의 블록이 있습니다. 이 버튼을 클릭하면 ‘할 일’이라는 To-do list 블록이 하나씩 추가됩니다.

이렇게 반복되는 작업을 자동화해 주는 블록을 노션에서는 버튼(Button) 블록이라고 부릅니다.

버튼(Button) 블록 생성하기

버튼 블록은 노션의 대표적인 고급 블록 중 하나입니다. 따라서 슬래시(/)를 입력하고 “advanced”를 입력하면 나타나는 블록 중에서 선택할 수도 있고, 바로 “/button”이라고 입력하여 사용할 수도 있습니다.

버튼 블록을 생성하면 설정 창이 나타납니다. ‘할 일 추가하기’라는 새로운 버튼을 추가해 보겠습니다. 우선 버튼을 클릭하면 수행할 액션(Action)을 설정해야 합니다. Add action을 클릭하면 여러 가지 메뉴가 표시됩니다.

우리는 이 버튼을 클릭했을 때 To-do list 블록이 하나씩 추가되도록 만들 예정이므로, 메뉴 중에서 insert blocks를 선택해 줍니다. 그러면 블록 내용을 입력할 수 있는 창이 나타납니다. 여기에 원하는 블록의 내용을 그대로 입력하면 됩니다.

설정을 마치고 ‘Done’을 클릭하면 앞서 봤던 것과 같은 버튼이 생성됩니다. 눌러 보면 잘 작동하는 것을 확인할 수 있습니다.

버튼(Button) 블록 기반 자동화

이러한 버튼 블록을 잘 활용하면 지금처럼 페이지에 다른 블록을 추가하는 간단한 작업뿐만 아니라, 데이터베이스에 새로운 페이지를 추가하거나 내용을 입력하는 등 좀 더 복잡한 작업도 미리 설정해 두고 버튼 클릭만으로 실행할 수 있습니다. 예를 들어 여기 있는 캘린더 데이터베이스에 운동을 한 날마다 클릭만 하면 자동으로 ‘운동’ 페이지를 추가해 주는 버튼을 만들어 보겠습니다.

우선 버튼 블록을 생성한 뒤, 이번에는 Add action에서 Add page to를 클릭하겠습니다.

그러면 설정 창이 나타납니다. 페이지를 추가할 데이터베이스를 선택하고, 페이지 제목은 ‘운동’, 분류는 ‘개인’, 날짜는 페이지 추가 날짜로 설정하기 위해 ‘Today’로 지정했습니다.

만들어진 버튼을 직접 클릭해 보겠습니다. 한 번 클릭할 때마다 오늘 날짜로 캘린더 데이터베이스에 새로운 ‘운동’ 페이지가 추가되는 것을 볼 수 있습니다. 매우 유용한 기능이죠?

목차(Table of contents) 블록 정리하기

다시 Monthly To-do list 부분으로 돌아가겠습니다. 버튼을 사용하여 할 일 목록(To-do list)들을 추가했는데요. 그렇다면 이 일들이 모두 마쳤을 때는 어떻게 관리하면 좋을까요? 체크한 다음 그냥 지워도 되겠지만, 모두 삭제하기는 아까워 아카이브(Archive) 페이지를 만들어 관리하기로 했습니다.

완료 항목을 아카이브 페이지 안에 넣어주고, 월별로 관리하는 방식입니다. 하지만, 이 페이지를 오랫동안 사용해 연도가 많아지고 내용이 많아진다면 어떨까요?

페이지가 아래로 점점 길어지기 때문에 한눈에 전체 내용을 파악하기 어렵고, 원하는 항목을 빠르게 찾기도 힘들어질 텐데요. 이런 경우 페이지 상단에 목차 같은 것이 있으면 훨씬 편리할 겁니다. 이것 역시 고급 블록을 사용하여 해결할 수 있습니다.

슬래시(/)를 입력한 후 ‘table’이라고 치면 목차(Table of contents)라는 고급 블록을 찾아볼 수 있는데요.

이 블록을 선택하면 페이지 내에 제목(Heading) 블록으로 만들어진 항목들이 자동으로 목차로 정리되어 나옵니다.

이렇게 만들어진 목차에는 위계가 있는데요. 같은 제목(Heading) 블록이라도 제목의 크기가 클수록 보다 상위 위계로 취급됩니다. 예를 들어, 예시에서 Heading 3으로 작성된 ‘분기(1분기, 2분기, …)’보다 Heading 2로 작성된 ‘연도(2024년, 2023년, …)’가 더 상위 위계로 나타나는 것을 확인할 수 있습니다.

목차에서 원하는 부분을 클릭하면 해당 항목이 위치한 영역으로 바로 이동할 수도 있습니다. 페이지 내용을 빠르게 파악하고 원하는 부분으로 이동하고 싶을 때 매우 유용한 기능입니다.

브레드크럼(Breadcrumb) 블록으로 이동 경로 살펴보기

이제 이 페이지도 어느 정도 정리된 것 같으니, 홈페이지로 돌아가려고 했습니다. 그런데 다시 돌아가려고 보니, 페이지의 맨 위쪽까지 커서를 이동해 상위 페이지를 클릭하는 과정이 조금 불편하게 느껴집니다. 이럴 때는 사이트 이동 경로를 페이지의 내용 부분에 추가하면 더욱 쉽고 편리하게 원하는 페이지로 이동할 수 있습니다.

슬래시(/)를 입력한 후 ‘Breadcrumb’라고 입력하여 브레드크럼(Breadcrumb) 블록을 선택해 봅시다.

블록을 생성하면 현재 페이지의 상위 페이지로 가는 이동 경로가 생성되며, 경로를 클릭하면 원하는 페이지로 곧바로 이동할 수 있습니다.

퍼블리싱(Publishing) 기능으로 홈페이지 게시하기

그런데 페이지를 완성하고 보니 혼자 보기엔 아깝다는 생각이 들었습니다. 물론 개인 일정만을 관리하기 위한 홈페이지라면 다른 사람에게 공유할 필요가 없겠지만, 유용한 정보를 모아둔 홈페이지라면 다른 사람도 함께 볼 수 있도록 공유해도 좋겠죠?

이럴 때 퍼블리싱(Publishing) 기능을 사용하면 웹에 페이지를 게시해 누구나 확인하게 만들 수 있습니다.

퍼블리싱(Publishing) 세부 기능 살펴보기

퍼블리싱을 하려면 우선 페이지 우측 상단에 있는 Share 버튼을 클릭해야 합니다. 버튼을 클릭하면 팝업 창이 나타나는데요. 여기서 ‘Share’는 특정 사용자에게만 페이지를 공유하는 기능이므로, 웹페이지로 게시하려면 ‘Share’ 대신에 ‘Publish’ 탭을 선택해야 합니다. 여기 Publish 버튼을 클릭하면 새로운 창이 열리고 페이지가 웹에 라이브(Live)됩니다.

그 이후 세부 설정을 하려면 Site customization 메뉴를 활용할 수 있습니다.

헤더 부분을 클릭하면 이 페이지의 템플릿 복제를 허용할 것인지 여부를 설정할 수 있습니다. 만약 페이지를 복사해 사용하는 것을 제한하고 싶다면, 이를 클릭해 복제 비허용으로 변경한 다음 상단의 Publish changes 버튼을 눌러주면 됩니다.

또 Publish 메뉴의 Search engine indexing을 클릭하면, 검색 결과 노출 설정도 관리할 수 있습니다. 만약 검색 엔진에 잘 노출되기를 원한다면 해당 옵션을 클릭하여 허용 설정을 해주면 되겠죠?

퍼블리싱 결과 확인하기

마지막으로 퍼블리싱이 잘 이루어졌는지 확인하는 방법도 보겠습니다. 상단에 나오는 링크는 게시된 웹페이지의 주소인데요. 여기서 View site 버튼을 클릭하거나 링크를 복사해 브라우저의 주소창에 붙여 넣으면 게시된 웹 페이지로 이동할 수 있습니다.

게시 화면은 기존 노션에서 보던 페이지와 비슷하지만 사이드바(Sidebar)나 이동 경로 등은 없이 페이지 내용만 표시됩니다. 클릭해 보면 페이지 편집이 불가능한 것을 확인할 수 있고, 앞서 '복제 비허용'으로 설정해 두었기 때문에 상단에 복제 버튼이 나타나지 않는 것도 확인할 수 있습니다.

마치며

지금까지 기본 블록, 데이터베이스, 고급 블록을 종합적으로 활용하여 홈페이지를 만들고 게시까지 해 보았습니다.

예시에서는 홈페이지 형태의 작업물을 만들고 퍼블리싱 해 보았지만, 이력서나 포트폴리오와 같은 페이지도 제작해 퍼블리싱 할 수 있습니다. 회사에 지원할 때 노션으로 만든 이력서나 포트폴리오 페이지를 퍼블리싱 기능을 이용해 웹에 게시하면, 지원할 때 이 웹 링크 하나만으로도 나에 대한 보다 자세한 정보를 상대방에게 편리하게 전달할 수 있습니다.

여러분도 이처럼 다양한 방식으로 목적에 맞게 노션을 적극 활용해 목표를 이룰 수 있기를 바라겠습니다.

국비지원 받고 노션 배우기 https://code.it/Q1iAO9k

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.