노션 포트폴리오 요즘 세대 트렌드에 맞춰 만들기 및 꾸미기 꿀팁 공유

노션 포트폴리오, 어떻게 만들고 꾸며야 할지 고민만 하고 시작 안하셨나요?
노션 포트폴리오 꾸미기에도 최신 디자인 트렌드와 새로운 기능들이 적용되고 있습니다.
나만의 개성을 살리면서도 트렌디하게 꾸미는 꿀팁, 지금부터 확인해보세요.

완성본 미리보기

첫 시작

새로운 페이지를 생성 후 제목을 입력합니다. '화이트크로우의 포트폴리오', '최선의 결과를 만드는 시니어 개발자' 등등 자기소개를 함축적으로 나타낼 수 있는 문장을 적는게 좋습니다.

커버 추가를 통해 커버 이미지를 추가합니다. 챗GPT를 이용해서 이미지를 만들면 개성적인 커버 이미지가 되겠죠?

타이틀 이미지 삽입하고 마지막으로 전체 너비를 활성화 해 줍니다. 자 다음은 프로필 사진을 만들어 봅시다.

프로필 사진

증명사진 자체가 연예인 급이다! 그럼 그냥 증명사진 올리시면 됩니다~
전 그게 쉽지 않기 때문에... 노션 페이스(Notion Faces)로 나만의 아바타 만들기를 해보도록 하겠습니다.

피부톤, 눈, 눈썹 등을 선택하고 저장 >

완성된 프로필 이미지를 다운로드 합니다. 전 배경이 없는 '얼굴만'에 투명한 배경으로 선택했습니다. 이제 프로필 사진을 노션에 삽입해야 겠죠? 

자기소개

노션 페이스에서 만든 이미지를 파란색 가로선이 보일때 드래그 앤 드랍을 사용해서 이미지를 삽입합니다.

그리고 자기소개 내용 밑에 키워드를 입력해 줍니다. 키워드는 해시태그 형태로 입력합니다.

해시태그 형태의 키워드 부분을 선택한 후 코드로 표시('</>')를 클릭 또는 단축키 'Cmd(Mac)/Ctrl(Win) + E'

* 여기서 잠깐 *
만들기도 귀찮다 그냥 템플릿을 가져다 쓰고 싶다면 아래 템플릿 복제하기를 눌러주세요.
며칠간만 복제 허용 하도록 하겠습니다.

템플릿 복제하기

학력 및 자격증

자 다음은 학력 및 자격증 영역을 만들어 보겠습니다. 프로필 이미지 아래쪽 빈 영역을 클릭하여, 구분선을 하나 만들겠습니다. 단축키 '---'

구분선 밑에 두 블럭을 생성합니다. 하나는 콜아웃 블럭 단축키 '/콜아웃' 내용은 학력

그리고 바로 밑에 텍스트 블럭 단축키 '/텍스트' 내용은 '2025. 02. 서울대학교 컴퓨터공학과 졸업'

콜아웃 블럭에 학력 이모지는 학력에 어울리는 석사모로 변경할게요!

이모지를 클릭하면 검색이 됩니다.

학력 사항을 중학교, 고등학교를 더 추가하고 날짜 부분 있죠? '2024. 02' 이분을 선택한 후 코드로 표시로 변환해 줍니다. 코드로 표시('</>')를 클릭 또는 단축키 'Cmd(Mac)/Ctrl(Win) + E'

코드로 표시 영역은 위에 빨강을 썼으니 전 파랑으로 좀 바꾸겠습니다.

동일한 방법으로 전 자격증까지 추가해서 자~ 이렇게 학력까지 완성!

능력 역량 표시

자 능력 역량 표시로 가볼까요? 먼저 위에서 했었죠? 학력 및 자격증 밑에 구분선 추가 단축키 '---'

전 시니어 개발자라 개발 스킬을 위주로 표시하도록 했습니다.

먼저 콜아웃 블럭 생성 단축키 '/콜아웃'

전 이모지를 개발 스킬 이모지를 사용했습니다. 

이 이모지들이 잘 표현된 사이트가 있더라구요. 이모지를 찾아서 콜아웃 이미지를 변경시킬 수 있게 오른쪽 클릭 후 이미지 저장 후 사용하시면 됩니다.

자 콜아웃 이모지를 바꾼 후 역량 표시를 합니다. 전 사각블럭 이모지를 사용하여 7단계로 아래와 같이 표현 했습니다. 역량 표시 이모지는 붙여 넣기 해서 쓰시면 됩니다~ 숫자로 표시해도 되고 형식은 원하시는 대로!

■■■■□□□    4/7

전 이렇게!

아래 역량을 더 만드신 후 2열 구조든 3열 구조든 파란색 세로선이 보일때 드래그 앤 드랍으로 열을 맞춰 줍니다. 전 스킬 표시가 많아야 해서 3열로 하겠습니다.

이렇게 완성 !

위에서 말씀 드린 이모지 이미지 저장 사이트 공유 드리겠습니다. 편하더라구요~ (저런 사이트를 만들었어야 하는데...)

(하단 링크 👇 공유드립니다.)

이모지 붙여넣기 사이트 이동

주요프로젝트

자 이제 마지막 주요프로젝트 입니다. 이 부분에서 노션의 핵심 데이터베이스를 사용합니다.