노션으로 만드는 포트폴리오 - 4. 목록, 구분선, 차트삽입

지난 포스팅까지 작업한 것

깔끔하게 하려다 너무 설명이 부족한 것 같아 지난 포스팅에서 조금 더 살을 붙여놓았다.

시작할 땐 디자인분야 지원용과 개발분야 지원용을 따로 만들려고 했는데

노션은 그냥 합쳐놓는게 갤러리 부분이 풍성해질 것 같아서 이대로 하는걸로~

---

1 / 목록

소개글을 면접볼때 1분 자기소개하듯이 쓰려고 했었는데

이력서도 아닌 포트폴리오라서 간결하게 몇 줄만 목록 형태로 넣기로 바꿨다

 

노션에서 목록은 명령어로 '/글머리' 를 사용할 수도 있고

' - ', ' * ' , ' + ' 중 하나를 골라 쓴 후 Space 를 누르면 자동으로 생성된다

 

 

2 / 구분선

포스팅 할때도 그렇고, 긴 문서를 작성할 때 깔끔하게 정리하기엔 구분선이 가장 좋은 것 같다

티스토리를 처음 썼을 때도 구분선부터 찾았던 기억이 있다

 

노션에서 구분선 명령어는 '/구분선' 이다. 근데 이 것보다 자동완성 기능을 쓰는게 훨씬 편하다.

' - ' 하이픈 세번 쓰면 자동완성 된다

 

3 / 데이터베이스 - 표

스택을 차트로 표현하려는데 이 때 필요한 데이터베이스를 하나 만들고 가자

포트폴리오 페이지가 아닌 다른 새 페이지를 생성해서 하는게 좋다. 차트와 표가 한 페이지에 있으면 이상하니까

다른 페이지에 만들어 놓고 차트로 연결하면 된다

 

데이터베이스는 '/데이터' 명령어로 불러올 수 있다. 페이지 내에 넣어야 하니까 인라인 블록으로 선택했다

 

 

각 요소들을 클릭해 수정할 수 있고, 이 데이터베이스의 제목을 숨길 수도 있다

 

차트의 Y축에 들어갈 값들은 숫자로 해야한다. 상중하로 했다가 차트가 왜 안그려지나 헤맴..

 

 

4 / 차트삽입

스택을 표현할 때 인라인코드나 표 말고 좀 더 시각적으로 좋게 표현할만한게 없나 고민하고 있을 때

다른 자료를 찾다가 우연히 알게된 노션차트!

5개까지는 무료고 그 이후부터는 유료로 사용 가능하다고 한다

 

https://notioncharts.io/

Notion Charts - Customizable Charts from your Notion Tables

 

회원가입&로그인을 하면 노션과 연결하게 한다. 페이지 선택을 눌러서 연동을 원하는 페이지를 선택하면 된다.

처음 적용 시 페이지의 데이터를 찾을 수 없다고 뜨는데 당황하지말고

느긋하게 기다렸다가 Refresh 해주면 Create Chart 버튼이 생긴다

노션에서 데이터베이스를 작성한지 얼마 되지 않았다면 한참 기다려야 한다. 내가 그랬음..

그래도 Databases가 없다는 문구가 계속 뜬다면, 데이터를 생성했던 페이지를 연결한게 맞는지 확인해주면 된다

 

Create Chart를 눌러서 값을 모두 입력해주면 된다. 노션 테이블 선택부터 순차적으로 입력할 수 있도록 유도해주니까

잘 따라가기만 하면 어느새 차트가 완성되어 있다

 

 

 

 

차트타입은 9가지를 지원한다

 

노션차트의 상단 Copy Embed Url

차트를 완성했다면, 차트 위쪽의 'Copy Embed Url'을 클릭해서 복사한 뒤 노션에 붙여넣기 해서 임베드 해주기만 하면 된다

노션페이지에 붙여넣기 - > 임베드 생성

 

 

노션에 적용한 모습