카테고리 없음

프리랜서와 직장인을 위한 포트폴리오 Portfolio 페이지 제작법

윤성91 2026. 2. 10. 20:17

평생직장의 개념이 사라지고 이직이 자유로운 대이직의 시대, 그리고 회사 간판보다 개인의 능력이 중요해진 퍼스널 브랜딩의 시대가 도래했습니다. 이제는 디자이너나 개발자 같은 특정 직군뿐만 아니라 마케터, 기획자, 심지어 일반 사무직 직장인에게도 자신을 증명할 수 있는 포트폴리오는 선택이 아닌 필수가 되었습니다. 과거에는 한글이나 워드로 작성한 딱딱한 이력서와 자기소개서, 그리고 무거운 PDF 파일이 그 역할을 대신했습니다. 하지만 PDF 포트폴리오는 수정할 때마다 파일을 다시 변환해서 보내야 하는 번거로움이 있고, 모바일 환경에서 보기에 불편하며, 무엇보다 동영상이나 웹사이트 링크 같은 멀티미디어 자료를 직관적으로 보여주기에 한계가 명확합니다.

출처 : 노션

노션 Notion은 이러한 기존 이력서의 한계를 완벽하게 뛰어넘는 차세대 포트폴리오 제작 도구입니다. 코딩을 전혀 몰라도 누구나 쉽게 웹사이트 형태의 포트폴리오를 만들 수 있고, 수정 사항이 실시간으로 반영되어 링크만 공유하면 언제나 최신 상태의 이력을 보여줄 수 있습니다. 또한 텍스트뿐만 아니라 디자인 시안, 유튜브 영상, 코딩 소스 코드 등을 페이지 안에 그대로 심어둘 수 있어, 인사 담당자나 클라이언트에게 나라는 사람을 입체적으로 보여줄 수 있습니다. 이번 글에서는 노션으로 나만의 매력적인 포트폴리오를 기획하는 방법부터, 타임라인 뷰를 활용해 경력 기술서를 시각화하는 노하우, 피그마 Figma나 PDF 같은 외부 작업물을 임베드 하는 기술, 그리고 우피 Oopy라는 서비스를 이용해 노션 페이지를 진짜 홈페이지처럼 변신시키는 마법 같은 팁까지 상세하게 안내해 드리겠습니다.

 

우피 Oopy 활용 노션 페이지를 실제 홈페이지 도메인처럼 연결하는 방법 소개

노션으로 포트폴리오를 만들었을 때 가장 아쉬운 점은 바로 주소 URL입니다. 노션 페이지의 공유 링크는 notion.site/1a2b3c...와 같이 무작위의 긴 문자열로 되어 있어 외우기도 힘들고, 전문성이 떨어져 보입니다. 또한 링크를 클릭해서 들어갔을 때 상단에 보이는 노션 특유의 검색 바나 메뉴 버튼들은 이곳이 개인 홈페이지가 아니라 노션 문서라는 느낌을 강하게 줍니다.

 

이러한 문제를 해결해 주는 서비스가 바로 우피 Oopy입니다. 우피는 노션으로 만든 페이지를 깔끔한 웹사이트 형태로 포장해 주는 서비스입니다. 복잡한 코딩 없이 노션 페이지 주소만 입력하면 불과 1분 만에 나만의 홈페이지가 뚝딱 만들어집니다.

 

우피의 가장 큰 장점은 개인 도메인 연결입니다. soojin-portfolio.com처럼 나만의 고유한 도메인을 구매하여 노션 페이지와 연결할 수 있습니다. 명함에 넣거나 이메일 서명에 넣을 때 훨씬 신뢰감을 주고 전문적인 인상을 남길 수 있습니다. 도메인이 없다면 우피에서 제공하는 기본 도메인 oopy.io을 활용해 soojin.oopy.io 같은 깔끔한 주소를 무료로 사용할 수도 있습니다.

 

두 번째 장점은 검색 엔진 최적화 SEO 설정입니다. 노션 자체 기능으로는 구글이나 네이버 검색 결과에 내 포트폴리오가 노출되게 하는 데 한계가 있습니다. 하지만 우피를 사용하면 메타 태그 Meta Tag를 직접 설정할 수 있습니다. 검색 결과에 나타날 제목, 설명, 그리고 카카오톡으로 링크를 보냈을 때 뜨는 썸네일 이미지 OG Image를 내 마음대로 지정할 수 있습니다. 이는 내 포트폴리오가 더 많은 사람에게 도달하고 클릭을 유도하는 데 결정적인 역할을 합니다.

 

세 번째는 사용자 인터페이스 UI 개선입니다. 우피를 적용하면 노션 상단의 지저분한 메뉴 바가 사라지고 깔끔한 웹사이트 헤더가 생깁니다. 또한 폰트 Font를 변경할 수 있어 노션의 기본 고딕체 대신 리디바탕체나 프리텐다드 같은 세련된 폰트를 적용할 수 있습니다. 방문자 통계 기능도 제공하여 내 포트폴리오에 몇 명이 들어왔는지, 어떤 페이지를 가장 많이 봤는지 데이터로 확인할 수도 있습니다.

 

사용법은 매우 간단합니다. 우피 사이트에 접속해 회원가입을 하고, 내가 만든 노션 포트폴리오 페이지의 웹 게시 링크를 복사해 붙여넣기만 하면 됩니다. 그러면 우피가 자동으로 노션 페이지를 분석해 웹사이트로 변환해 줍니다. 이후 관리자 페이지에서 도메인 설정이나 디자인 변경을 진행하면 됩니다. 월 몇 천 원 수준의 비용이 들지만, 나를 브랜딩 하는 데 드는 비용치고는 매우 저렴하며 그 효과는 확실합니다.

 

경력 기술서 작성 타임라인을 활용해 나의 이력을 직관적으로 보여주기

포트폴리오의 핵심은 역시 경력 기술입니다. 많은 분이 기존 이력서처럼 텍스트로 2020.03 ~ 2022.02 OO 컴퍼니 근무라고 줄글로 나열하곤 합니다. 하지만 노션에서는 타임라인 Timeline 뷰를 활용해 경력의 흐름을 시각적으로 보여줄 수 있습니다.

 

먼저 경력 데이터베이스를 만들고 보기 형식을 타임라인으로 설정합니다. 속성에는 회사명 이름, 근무 기간 날짜, 직무 태그, 주요 성과 텍스트 등을 추가합니다. 그리고 각 회사의 근무 기간을 입력하면 타임라인상에 가로 막대그래프로 경력이 표시됩니다. 이렇게 하면 내가 어느 시기에 어떤 회사를 다녔고, 공백기는 언제였는지, 이직 텀은 어떠했는지가 한눈에 들어옵니다. 인사 담당자는 텍스트를 읽는 수고로움 없이 직관적으로 지원자의 커리어 패스를 파악할 수 있습니다.

 

각 경력 막대를 클릭하면 나타나는 상세 페이지에는 구체적인 성과를 기록합니다. 이때 유용한 것이 토글 Toggle 목록입니다. 내가 했던 모든 업무를 텍스트로 쭉 나열하면 스크롤이 길어져서 가독성이 떨어집니다. 대신 [성과] 전년 대비 매출 200% 달성과 같이 핵심 결과만 토글 제목으로 적고, 구체적인 과정이나 데이터는 토글 안에 숨겨둡니다. 관심 있는 사람만 토글을 열어 상세 내용을 볼 수 있게 하는 배려입니다.

 

또한 콜아웃 Callout 블록을 적극 활용하세요. 경력 기술서 상단에 콜아웃 박스를 만들고, 나를 한 문장으로 표현하는 슬로건이나 핵심 역량 3가지를 요약해 두면 강력한 첫인상을 남길 수 있습니다. 예를 들어 💡 데이터로 고객의 마음을 읽는 5년 차 퍼포먼스 마케터입니다라고 적고 배경색을 칠해두면 시선이 집중됩니다.

 

스킬셋 Skill Set을 보여줄 때는 데이터베이스의 갤러리 뷰를 활용하거나 다단 나누기를 이용합니다. 포토샵, 엑셀, 파이썬 같은 보유 기술을 텍스트로만 적지 말고, 각 툴의 로고 이미지를 구해서 작게 배치하거나, 숙련도를 나타내는 진행률 바 Progress Bar 수식을 활용해 시각화해 보세요. 엑셀: ⭐⭐⭐⭐⭐, 파이썬: ⭐⭐⭐ 같은 방식도 좋지만, 노션의 수식 기능을 이용해 막대그래프가 차 있는 모습으로 표현하면 훨씬 세련되어 보입니다.

 

외부 임베드 PDF 이력서나 디자인 작업물 Figma 등 삽입하기

노션 포트폴리오가 기존 PDF 포트폴리오를 압도하는 결정적인 이유는 바로 강력한 임베드 Embed 기능 때문입니다. 디자이너라면 피그마 Figma나 비핸스 Behance 링크를, 개발자라면 깃허브 GitHub나 코드펜 CodePen 링크를, 영상 편집자라면 유튜브나 비메오 링크를 페이지 안에 심어둘 수 있습니다.

 

예를 들어 디자이너가 피그마로 작업한 UI 디자인 시안을 보여주고 싶다고 가정해 봅시다. 캡처한 이미지를 올릴 수도 있겠지만, 피그마 공유 링크를 복사해 노션에 붙여넣고 임베드를 선택하면, 노션 페이지 안에서 피그마 뷰어가 실행됩니다. 채용 담당자는 노션을 벗어나지 않고도 디자인의 레이어를 확인하거나 프로토타입을 직접 클릭해 보며 인터랙션을 경험할 수 있습니다. 이는 단순히 결과물만 보여주는 것을 넘어, 작업의 구조와 디테일까지 보여주는 강력한 무기가 됩니다.

 

일반 사무직이나 기획자라면 PDF 임베드 기능을 활용해 보세요. 그동안 작성했던 기획서, 보고서, 제안서 중 대외비가 아닌 문서를 PDF로 변환하여 노션에 업로드하고 임베드 합니다. 그러면 문서를 다운로드하지 않고도 페이지 안에서 내용을 넘겨가며 볼 수 있습니다. 텍스트로 구구절절 설명하는 것보다 실제 작성한 기획서 한 장을 보여주는 것이 실무 능력을 증명하는 가장 확실한 방법입니다.

 

개발자라면 깃허브의 잔디 심기 커밋 기록 그래프나 특정 저장소 Repository를 임베드 하여 코드를 보여줄 수 있고, 마케터라면 구글 데이터 스튜디오나 태블로 Tableau로 만든 대시보드를 연동하여 데이터 분석 능력을 과시할 수 있습니다.

 

이때 주의할 점은 보안입니다. 회사 내부 자료나 민감한 정보가 포함된 작업물은 절대 원본 그대로 올리면 안 됩니다. 민감한 수치는 가리거나, 내용을 각색하여 재구성한 버전을 올려야 합니다. 그리고 각 작업물 밑에는 반드시 기여도 Contribution와 사용 툴 Tools, 그리고 역할 Role을 명시해야 합니다. 팀 프로젝트였다면 내가 어느 부분을 담당했는지 명확히 밝혀야 신뢰를 얻을 수 있습니다.

 

갤러리 뷰를 활용한 프로젝트 아카이빙

경력 기술서 하단에는 프로젝트 섹션을 따로 만들어 갤러리 뷰로 배치하는 것을 추천합니다. 앞선 글에서 배운 것처럼 프로젝트의 대표 이미지를 썸네일로 설정하고, 태그 속성을 이용해 프로젝트의 성격 웹 디자인, 앱 개발, 브랜딩 등이나 연도를 표시합니다.

갤러리 카드를 클릭해 상세 페이지로 들어갔을 때의 구조 템플릿도 미리 잡아두면 좋습니다.

  1. 프로젝트 개요: 기간, 팀원 수, 나의 역할
  2. 문제 정의: 프로젝트를 시작하게 된 배경과 해결하고자 했던 문제
  3. 해결 과정: 어떤 논리와 과정을 거쳐 문제를 해결했는지 상세 기술
  4. 결과 및 성과: 수치화된 정량적 성과나 정성적 피드백
  5. 회고 Lesson Learned: 아쉬웠던 점과 배운 점

이렇게 논리적인 구조로 프로젝트를 정리해 두면, 면접관이 질문했을 때 당황하지 않고 노션 페이지를 열어 보여주며 체계적으로 답변할 수 있습니다. 노션 포트폴리오는 면접 현장에서도 훌륭한 발표 자료가 됩니다. 태블릿 PC나 노트북을 가져가서 화면을 보여주며 설명하면 준비된 인재라는 인상을 줄 수 있습니다.

 

문의하기 Contact 섹션 만들기

마지막으로 잊지 말아야 할 것은 연락처입니다. 아무리 포트폴리오가 훌륭해도 연락할 방법이 없거나 찾기 힘들다면 기회를 놓칠 수 있습니다. 페이지 최하단이나 사이드바 영역에 연락하기 Contact 섹션을 만듭니다. 이메일 주소, 전화번호, 링크드인 LinkedIn 주소 등을 적어둡니다.

 

여기서 꿀팁은 메일 보내기 버튼을 만드는 것입니다. 텍스트에 하이퍼링크를 걸 때 mailto:본인이메일주소를 입력하면, 클릭했을 때 바로 메일 앱이 켜지며 받는 사람에 내 이메일이 입력됩니다. 전화번호 역시 tel:전화번호 형식으로 링크를 걸면 모바일에서 클릭 시 바로 통화로 연결됩니다. 작은 배려가 채용 담당자의 경험을 쾌적하게 만듭니다.

 

노션으로 만든 포트폴리오는 살아있는 생물과 같습니다. 한 번 만들고 끝나는 것이 아니라, 새로운 프로젝트를 할 때마다, 새로운 기술을 배울 때마다 실시간으로 업데이트할 수 있습니다. 면접을 보고 나서 부족했던 부분을 바로 수정할 수도 있습니다. 이것이 정적인 PDF 이력서가 따라올 수 없는 노션만의 압도적인 강점입니다. 여러분의 치열했던 시간과 노력을 노션이라는 그릇에 담아보세요. 그 어떤 화려한 스펙보다 진정성 있게 여러분의 가치를 증명해 줄 것입니다.

 

이제 나를 브랜딩하고 외부에 알리는 방법까지 마스터했습니다. 하지만 직장 생활은 혼자 하는 것이 아닙니다. 회사 내에서의 업무 효율, 특히 회의와 고객 관리는 성공적인 커리어의 또 다른 축입니다. 매번 반복되는 회의록 작성에 지치고, 여기저기 흩어진 고객 명함 관리에 애를 먹고 계시나요. 다음 글 12. 회의록 관리와 CRM 업무 효율을 2배 높이는 협업 스킬에서는 버튼 하나로 회의록 양식을 찍어내는 템플릿 활용법부터, @멘션 기능을 이용해 동료에게 업무를 할당하는 협업의 기술, 그리고 노션을 간이 CRM 고객 관계 관리 시스템으로 활용해 영업왕이 되는 비결까지, 프로 일잘러들의 비밀 무기를 공개하겠습니다.

다음 글에서 뵙겠습니다.