디자인 포트폴리오를 노션으로 만들어도 괜찮을까

• 목록
• 답변
• 글쓰기
• 옵션
  • 수정
  • 삭제

처음엔 편해서 시작했지만, 생각보다 기준이 필요했습니다

제가 노션 포트폴리오를 만든 이유

디자인 포트폴리오를 새로 정리해야 하는데 웹사이트 제작까지 갈 에너지는 없고, PDF는 수정할 때마다 파일을 다시 보내야 했습니다. 그래서 저는 최근 프로젝트 9개를 노션에 옮겨 담아 웹디자인, 그래픽디자인, 브랜드 시안을 한 번에 보여주는 방식으로 테스트해 봤습니다.

처음 체감한 장점은 속도였습니다. 페이지를 만들고, 프로젝트별 하위 페이지를 붙이고, 링크만 공유하면 되니 하루 만에 기본 구조가 나왔습니다. 다만 막상 클라이언트에게 보여줄 수준으로 다듬으려니 “편한 문서”와 “설득력 있는 포트폴리오” 사이에는 꽤 큰 차이가 있었습니다.

디자인을 단순히 예쁜 결과물로만 보지 않고 문제 해결의 과정으로 설명하려면, 작업물 이미지보다 맥락을 보여주는 문장이 더 중요해집니다. 디자인의 넓은 의미가 궁금하다면 디자인 용어 정의를 먼저 훑어보면 포트폴리오 문장을 잡는 데도 도움이 됩니다.

• 좋았던 점: 수정이 빠르고, 링크 공유가 쉬우며, 프로젝트 순서를 언제든 바꿀 수 있습니다.
• 아쉬웠던 점: 기본 레이아웃이 비슷해 보여서 첫인상이 약해질 수 있습니다.
• 주의할 점: 너무 많은 내용을 넣으면 포트폴리오가 아니라 업무 기록장처럼 보입니다.

노션 포트폴리오는 “내가 무엇을 만들었는가”보다 “왜 그렇게 만들었는가”를 짧고 정확하게 보여줄 때 가장 강해집니다.

노션이 잘 맞는 디자인 작업 유형

실제로 써보니 노션은 시각적으로 화려한 랜딩 페이지보다, 여러 프로젝트의 흐름을 차분히 정리해야 하는 디자이너에게 더 잘 맞았습니다. 예를 들어 웹디자인 리뉴얼, 앱 UI 개선, 상세페이지 제작, 소셜 콘텐츠 운영처럼 전후 맥락이 있는 작업은 노션 페이지 안에서 설명하기 좋았습니다.

반대로 타이포그래피 감각, 실험적인 그래픽, 강한 비주얼 임팩트가 중요한 작업은 노션 기본 화면만으로는 힘이 덜 실렸습니다. 이런 경우에는 대표 이미지를 크게 보여주는 외부 포트폴리오 사이트나 PDF와 함께 쓰는 편이 더 안정적이었습니다.

1. 프로젝트 수가 5개 이상이면 노션의 데이터베이스 구조가 편합니다.
2. 협업 과정, 문제 정의, 수정 전후를 보여줘야 한다면 문서형 포맷이 유리합니다.
3. 작업물의 첫인상이 매우 중요한 그래픽디자인 포트폴리오라면 별도 비주얼 페이지를 함께 준비하는 것이 좋습니다.

실제로 만들어 보니 첫 화면에서 승부가 갈렸습니다

방문자가 보는 순서를 직접 설계해야 합니다

노션 포트폴리오를 처음 만들 때 제가 가장 크게 실수한 부분은 프로젝트를 시간순으로만 나열한 것입니다. 최근 작업부터 보여주면 된다고 생각했는데, 막상 다른 디자이너에게 피드백을 받아보니 첫 화면에서 제가 어떤 디자이너인지 바로 드러나지 않았습니다.

그래서 첫 화면을 다시 만들었습니다. 상단에는 한 줄 소개, 바로 아래에는 잘하는 분야 3개, 그다음에는 대표 프로젝트 3개만 배치했습니다. 디자인 포트폴리오는 모든 것을 보여주는 창고가 아니라, 상대가 나를 빠르게 판단하도록 돕는 안내판에 가깝다는 걸 그때 체감했습니다.

특히 웹디자인 업무를 의뢰받고 싶다면 “예쁜 화면을 만들 수 있습니다”보다 “전환율이 낮던 페이지의 구조를 어떻게 바꿨는지”를 먼저 보여주는 편이 설득력이 컸습니다. 방문자는 생각보다 오래 읽지 않기 때문에, 첫 화면에서 역할과 강점을 빠르게 이해시켜야 합니다.

• 상단 한 줄 소개: “웹서비스와 브랜드 콘텐츠를 함께 설계하는 디자이너”처럼 분야와 강점을 동시에 적습니다.
• 대표 작업 3개: 가장 최근 작업보다 가장 설득력 있는 작업을 먼저 둡니다.
• 연락 동선: 이메일, 문의 폼, SNS 링크를 첫 화면과 마지막 화면에 모두 배치합니다.
• 불필요한 장식 제거: 아이콘과 이모지를 과하게 넣으면 전문성이 흐려질 수 있습니다.

페이지 제목과 썸네일도 SEO처럼 봐야 합니다

노션은 검색엔진 최적화가 전문 웹사이트만큼 자유롭지는 않지만, 링크를 받은 사람이 페이지를 열기 전 보는 제목과 미리보기 문구는 꽤 중요했습니다. 저는 처음에 “Project 01”, “Brand Renewal”처럼 내부 파일명에 가까운 제목을 썼는데, 공유했을 때 내용이 전혀 짐작되지 않았습니다.

이후에는 “식품 브랜드 상세페이지 전환 구조 개선”, “로컬 카페 웹디자인 리뉴얼”, “교육 서비스 SNS 그래픽디자인 운영”처럼 바꿨습니다. 제목만 바꿨는데도 피드백을 주는 사람이 어떤 작업인지 훨씬 빨리 이해했습니다.

1. 분야 키워드를 제목 앞쪽에 둡니다. 예: 웹디자인, 그래픽디자인, 브랜드 디자인.
2. 문제 상황을 함께 적습니다. 예: 예약률 개선, 정보 구조 정리, 구매 흐름 단축.
3. 결과를 과장하지 않습니다. 수치가 없다면 “개선” “정리” “재구성”처럼 검증 가능한 표현을 씁니다.

이 방식은 블로그 SEO와도 비슷했습니다. 검색하는 사람은 추상적인 멋보다 구체적인 문제 해결을 찾습니다. 포트폴리오를 보는 클라이언트도 결국 “이 사람이 내 문제를 이해하고 해결할 수 있을까?”를 확인합니다.

그래픽디자인 작업은 이미지 배치보다 설명 밀도가 중요했습니다

이미지를 많이 넣는다고 더 좋아 보이지 않았습니다

그래픽디자인 작업을 노션에 넣으면서 가장 먼저 했던 일은 포스터, 배너, SNS 카드뉴스 이미지를 한꺼번에 업로드하는 것이었습니다. 그런데 막상 모바일로 확인하니 이미지가 세로로 길게 이어져서 중간부터 집중력이 떨어졌습니다. 작업물이 많을수록 더 멋져 보일 줄 알았는데, 실제로는 선택된 몇 장이 훨씬 강했습니다.

그래서 대표 이미지는 프로젝트당 3~5장으로 줄이고, 나머지는 접을 수 있는 토글 안에 넣었습니다. 상단에는 최종 결과물, 중간에는 문제 해결 과정, 하단에는 적용 예시를 배치했습니다. 그래픽디자인 포트폴리오는 이미지의 양보다 “왜 이 시각 언어를 선택했는가”를 설명하는 밀도가 중요했습니다.

그래픽디자인의 개념과 범위를 다시 잡고 싶다면 그래픽 디자인 기본 설명을 참고해 보셔도 좋습니다. 포스터 한 장도 정보 전달, 시각 질서, 매체 조건이 함께 작동한다는 점을 의식하면 설명 문장이 훨씬 선명해집니다.

• 대표 이미지: 가장 완성도 높은 최종 시안 1장을 맨 위에 둡니다.
• 과정 이미지: 무드보드, 와이어프레임, 시안 비교처럼 의사결정이 보이는 자료를 넣습니다.
• 적용 이미지: 모바일 화면, 인쇄물 목업, SNS 피드 등 실제 사용 장면을 보여줍니다.
• 보조 이미지: 비슷한 컷은 토글로 접어두어 페이지 길이를 조절합니다.

노션에서 보기 좋은 이미지 규격

제가 사용해 본 기준으로는 가로형 대표 이미지는 16:9, 상세 설명 이미지는 4:3, 모바일 시안은 2~3개를 나란히 묶어 한 장의 이미지로 만드는 방식이 보기 좋았습니다. 노션에 이미지를 그대로 여러 장 올리면 간격이 들쭉날쭉해 보일 때가 있어, 저는 피그마에서 한 번 캔버스를 정리한 뒤 내보냈습니다.

색상도 생각보다 중요했습니다. 노션의 배경은 기본적으로 밝고 단순하기 때문에, 너무 연한 회색 계열 작업물은 힘이 빠져 보였습니다. 이럴 때는 이미지 안에 얇은 테두리나 배경 면을 넣어 작업물의 경계를 살렸습니다.

1. 16:9 대표 컷으로 첫인상을 정리합니다.
2. 모바일 UI는 3개 이하로 묶어 한 화면에서 비교되게 만듭니다.
3. 흰 배경 작업물에는 연한 테두리나 그림자를 넣어 구분감을 줍니다.
4. 원본 파일명은 공유 전 정리합니다. 다운로드될 가능성을 생각하면 파일명도 브랜드 이미지입니다.

이미지가 많은 포트폴리오일수록 “덜 보여주는 편집”이 필요합니다. 좋은 작업을 고르는 능력도 디자인 역량으로 읽힙니다.

웹디자인 프로젝트는 과정 기록이 의외로 강력했습니다

완성 화면만 보여주면 비슷해 보였습니다

웹디자인 프로젝트를 노션에 정리하면서 가장 효과가 좋았던 구성은 전후 비교였습니다. 기존 페이지의 문제, 새 구조의 목표, 바뀐 화면, 적용 후 반응을 순서대로 보여주니 단순히 화면을 예쁘게 만든 작업보다 훨씬 설득력이 생겼습니다.

예를 들어 예약 문의가 적었던 서비스 페이지를 정리한 프로젝트에서는 첫 화면 문구, CTA 버튼 위치, 섹션 순서를 어떻게 바꿨는지 적었습니다. 수치가 있는 프로젝트는 전환율이나 클릭률을 넣었고, 수치가 없는 프로젝트는 사용자 흐름이 어떻게 짧아졌는지 설명했습니다.

웹디자인 포트폴리오에서 중요한 것은 “이 화면이 마음에 드나요?”가 아니라 “이 구조가 목적에 맞게 작동하나요?”였습니다. 노션은 긴 설명을 담기 쉬워서 이런 과정형 프로젝트와 궁합이 좋았습니다.

• 문제 정의: 기존 화면에서 사용자가 어디서 멈췄는지 적습니다.
• 설계 목표: 문의 증가, 정보 탐색 단축, 브랜드 신뢰 개선처럼 목적을 분명히 합니다.
• 디자인 변경: 색, 폰트, 레이아웃을 왜 바꿨는지 짧게 설명합니다.
• 검증 자료: 수치, 피드백, 운영자의 반응 등 가능한 근거를 덧붙입니다.

제가 쓴 프로젝트 페이지 템플릿

여러 번 고쳐본 뒤 가장 안정적이었던 템플릿은 7단계였습니다. 이 구조로 쓰면 프로젝트 설명이 길어져도 흐름이 무너지지 않았습니다. 특히 디자인 의뢰를 받는 분이라면 이 템플릿을 그대로 복사해도 꽤 쓸 만합니다.

다만 모든 프로젝트에 같은 항목을 억지로 채우지는 않았습니다. 작은 배너 디자인은 간단히, 리뉴얼 프로젝트는 길게 썼습니다. 포트폴리오를 읽는 사람에게 필요한 정보의 양이 프로젝트마다 다르기 때문입니다.

1. 프로젝트 한 줄 요약: 어떤 문제를 해결한 작업인지 적습니다.
2. 역할: 기획, UI, 그래픽, 퍼블리싱 협업 등 본인의 담당 범위를 밝힙니다.
3. 작업 기간: 기간이 짧았다면 빠른 실행력을, 길었다면 운영 경험을 보여줍니다.
4. 초기 문제: 기존 화면이나 콘텐츠의 병목을 설명합니다.
5. 디자인 방향: 레이아웃, 컬러, 타이포그래피 선택 이유를 적습니다.
6. 결과 화면: 대표 이미지를 중심으로 과하게 길지 않게 배치합니다.
7. 배운 점: 다음 프로젝트에 반영할 기준을 한 문장으로 남깁니다.

이 템플릿을 쓸 때 가장 중요한 항목은 역할입니다. 팀 프로젝트에서 모든 결과를 혼자 한 것처럼 쓰면 신뢰가 떨어집니다. 반대로 본인이 맡은 범위를 정확히 적으면 협업 역량까지 자연스럽게 드러납니다.

노션 포트폴리오의 단점도 분명히 있었습니다

디자인 자유도는 생각보다 좁습니다

노션은 빠르게 만들 수 있지만, 브랜드 감각을 세밀하게 보여주기에는 한계가 있습니다. 폰트 선택, 여백 조절, 반응형 디테일, 애니메이션, 섹션 전환 같은 요소를 원하는 만큼 통제하기 어렵습니다. 그래서 “내가 웹디자인을 잘한다”는 인상을 강하게 줘야 하는 경우에는 노션만으로는 부족하게 느껴질 수 있습니다.

저도 처음에는 노션 하나로 충분하다고 생각했지만, 고급 브랜드 프로젝트를 보여줄 때는 아쉬움이 남았습니다. 특히 컬러 시스템이나 타이포그래피 규칙을 섬세하게 보여주고 싶을 때 노션의 기본 블록 구조가 다소 평평하게 느껴졌습니다.

디자인의 역사적·문화적 맥락까지 넓게 보고 싶다면 또 다른 디자인 설명 자료도 참고할 만합니다. 포트폴리오도 결국 시대의 매체와 도구 안에서 설득 방식을 찾아가는 작업이니까요.

• 장점: 제작 속도가 빠르고 유지보수가 쉽습니다.
• 단점: 화면 연출, 인터랙션, 세밀한 레이아웃 제어가 어렵습니다.
• 대안: 노션은 상세 설명용으로 쓰고, 대표 작업은 별도 랜딩 페이지로 연결합니다.
• 현실적인 조합: PDF 1개, 노션 링크 1개, 개인 도메인 1개를 상황별로 나눠 씁니다.

공유와 권한 설정도 가볍게 보면 안 됩니다

노션 포트폴리오는 링크 하나로 공유할 수 있어 편하지만, 공개 범위 설정을 잘못하면 준비 중인 페이지까지 보일 수 있습니다. 저는 초안 페이지가 연결된 채로 공유될 뻔한 적이 있어, 이후에는 공개용 워크스페이스를 따로 만들었습니다.

또 클라이언트 작업을 넣을 때는 공개 가능 범위를 꼭 확인해야 합니다. 내부 지표, 미공개 시안, 계약상 외부 공개가 제한된 자료는 포트폴리오에서 빼거나 흐림 처리, 재구성 이미지로 대체하는 편이 안전했습니다.

1. 공개 전 미리보기를 시크릿 창에서 확인합니다.
2. 하위 페이지 권한이 함께 열려 있는지 점검합니다.
3. 클라이언트명 표기가 가능한지 계약 조건을 확인합니다.
4. 수치 자료는 공개 가능한 범위로 바꾸거나 비율 중심으로 표현합니다.
5. 연락처는 업무용 이메일로 분리해 관리합니다.

비용 면에서는 무료로 시작할 수 있다는 점이 가장 큰 매력입니다. 다만 커스텀 도메인, 외부 폼, 포트폴리오 템플릿, 이미지 호스팅, 별도 사이트 빌더를 함께 쓰면 비용이 생깁니다. 정확한 가격은 서비스 정책에 따라 바뀔 수 있으니, 공개 직전 공식 가격표를 다시 확인하는 습관이 좋습니다.

취업 준비생과 프리랜서에게 필요한 선택은 달랐습니다

취업 준비생이라면 구조와 성장 기록을 우선하세요

취업 준비생에게 노션 포트폴리오는 꽤 좋은 선택입니다. 완성된 프로젝트 수가 많지 않아도 문제 정의, 리서치, 시안 변화, 피드백 반영 과정을 보여줄 수 있기 때문입니다. 실제로 신입 디자이너 포트폴리오를 볼 때 결과물만 반짝이는 것보다 생각의 흐름이 보이는 페이지가 더 오래 기억됩니다.

다만 학생 과제나 개인 프로젝트를 넣을 때는 “열심히 했습니다”보다 “이 사용자를 위해 어떤 선택을 했습니다”에 가깝게 써야 합니다. 디자인넷 독자분들이라면 한 번쯤 본인의 프로젝트 설명에서 주어를 바꿔보셔도 좋습니다. “제가 만들었습니다”가 아니라 “사용자가 더 빨리 찾도록 바꿨습니다”라고 쓰면 관점이 달라집니다.

• 추천 구성: 자기소개 1블록, 대표 프로젝트 3개, 실험 작업 2개, 연락처.
• 강조 포인트: 리서치, 개선 과정, 피드백 반영, 툴 활용 능력.
• 피해야 할 것: 과제 이미지만 나열하거나, 역할을 모호하게 쓰는 방식.
• 보완 자료: 면접용 PDF를 별도로 만들어 오프라인 상황에 대비합니다.

프리랜서라면 신뢰와 문의 전환을 더 보세요

프리랜서에게 노션 포트폴리오는 작업 설명서이자 영업 페이지가 됩니다. 그래서 취업용 포트폴리오보다 문의 동선, 작업 범위, 예상 프로세스, 협업 방식이 더 중요했습니다. 의뢰자는 디자이너의 취향만 보는 것이 아니라 “이 사람과 일하면 편할까?”를 함께 판단합니다.

저는 프리랜서용 페이지에는 프로젝트 아래에 “이런 의뢰에 적합합니다”라는 문장을 넣었습니다. 예를 들어 “신규 브랜드의 첫 상세페이지가 필요한 경우”, “기존 웹사이트의 첫 화면 설득력이 약한 경우”, “SNS 콘텐츠 톤을 통일하고 싶은 경우”처럼 적었습니다. 이 문장 하나가 문의의 질을 꽤 바꿨습니다.

1. 취업 준비생: 노션을 메인 포트폴리오로 써도 괜찮습니다. 대신 프로젝트별 사고 과정과 역할을 선명하게 쓰고, 면접 제출용 PDF를 함께 준비하세요.
2. 프리랜서: 노션만으로 시작해도 되지만, 고가 프로젝트를 목표로 한다면 별도 웹사이트나 랜딩 페이지를 함께 두는 편이 좋습니다. 노션은 상세 사례집, 웹사이트는 첫인상과 문의 전환용으로 나누면 효율적입니다.

두 경우 모두 핵심은 같습니다. 노션이 부족해서 문제가 생기는 것이 아니라, 보는 사람이 원하는 정보를 어디서 찾아야 할지 모를 때 문제가 생깁니다. 디자인 포트폴리오를 노션으로 만들겠다면 예쁜 블록을 더 넣기보다, 첫 화면에서 “무슨 디자인을 잘하고, 어떤 문제를 해결해 왔는지”가 바로 읽히게 만드는 데 시간을 쓰는 편이 훨씬 실용적입니다.