웹디자인 포트폴리오, 피그마만 써도 될까?

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

웹디자인 포트폴리오를 만들 때 가장 먼저 부딪힌 고민은 의외로 단순했습니다. 피그마 파일 하나만 잘 정리하면 클라이언트나 채용 담당자가 충분히 이해할까? 아니면 별도 웹페이지, PDF, 그래픽디자인 보드까지 만들어야 할까? 저도 최근 개인 작업과 외주 제안용 포트폴리오를 다시 만들면서 이 질문을 꽤 오래 붙잡고 있었습니다.

처음에는 피그마 링크 하나로 끝내려고 했습니다. 작업 화면, 컴포넌트, 와이어프레임, 최종 시안까지 한곳에 있으니 오히려 실무적으로 보일 거라 생각했거든요. 그런데 실제로 공유해 보니 반응이 갈렸습니다. 디자이너나 개발자는 편하게 봤지만, 디자인을 전문적으로 보지 않는 대표님이나 마케터는 어디부터 봐야 하는지 자주 물었습니다. 그래서 이번 글은 제가 직접 포트폴리오를 고치며 느낀 장단점과, 디자인넷 독자라면 바로 써먹을 수 있는 구성 방식을 중심으로 정리했습니다.

피그마 포트폴리오만 공유했을 때 실제 반응은 어땠나

디자이너에게는 빠르고, 비전문가에게는 조금 불친절했습니다

피그마는 웹디자인 작업 과정을 보여주기에 정말 편합니다. 프레임을 순서대로 배치하고, 프로토타입 링크를 걸고, 컴포넌트 구조까지 열어볼 수 있으니까요. 특히 UI 상태값, 버튼 hover, 모바일 반응형 흐름처럼 말로 설명하기 애매한 부분은 피그마 화면에서 바로 전달됩니다. 그래서 실무 디자이너끼리 검토할 때는 피그마 포트폴리오가 PDF보다 훨씬 빠르게 읽히는 장점이 있었습니다.

문제는 보는 사람이 항상 디자이너는 아니라는 점입니다. 외주 제안서를 받는 소상공인 대표님, 내부 프로젝트 담당자, 채용 담당자에게 피그마 링크만 보내면 화면이 너무 넓고 정보가 흩어져 보일 수 있습니다. 실제로 한 클라이언트는 “어떤 화면이 최종본인지 모르겠다”고 말했고, 다른 담당자는 “예쁜 건 알겠는데 매출이나 문의 전환에 어떻게 도움이 되는지 설명이 부족하다”고 했습니다. 이때 깨달은 건 포트폴리오는 작업물을 쌓아두는 창고가 아니라, 보는 사람의 시간을 아껴주는 편집된 경험이어야 한다는 점이었습니다.

디자인의 개념 자체를 넓게 보면 목적과 기능을 고려해 대상을 계획하는 행위에 가깝습니다. 용어 정의가 궁금하다면 디자인의 기본 의미를 참고해도 좋습니다. 포트폴리오 역시 단순한 결과물 모음이 아니라, 문제를 어떻게 보고 어떤 선택을 했는지 보여주는 디자인 결과물이라고 느꼈습니다.

• 좋았던 점: 작업 과정과 최종 UI를 한 번에 보여주기 쉽고, 수정 이력이나 컴포넌트 구조 설명이 자연스럽습니다.
• 아쉬웠던 점: 비전문가는 화면 순서를 직접 해석해야 해서 피로감을 느낄 수 있습니다.
• 의외의 반응: 인터랙션보다 “왜 이렇게 만들었는지”를 먼저 묻는 사람이 많았습니다.
• 개선 방향: 피그마 링크 앞에 한 장짜리 요약 페이지를 붙이면 이해 속도가 확실히 빨라졌습니다.

제가 써보니 피그마는 포트폴리오의 최종 목적지가 아니라, 설득을 뒷받침하는 작업실에 가까웠습니다. 첫 화면에서 맥락을 잡아주고, 자세한 구조는 피그마로 보여주는 방식이 가장 안정적이었습니다.

포트폴리오 첫 화면에는 작업물보다 판단 기준이 먼저 필요했습니다

처음 만든 포트폴리오 첫 화면에는 대표 시안 이미지를 크게 넣었습니다. 그런데 사용자 반응을 받아보니 “예쁘다”는 말은 들었지만, 다음 대화로 잘 이어지지 않았습니다. 반대로 첫 화면에 프로젝트 목적, 담당 범위, 사용한 디자인 키워드, 개선 포인트를 짧게 적었을 때는 질문의 질이 달라졌습니다. “이 부분도 우리 서비스에 적용할 수 있나요?”처럼 실제 상담으로 이어지는 질문이 많아졌습니다.

저는 이후 첫 화면을 세 구역으로 바꿨습니다. 첫째, 어떤 문제를 해결했는지. 둘째, 어떤 웹디자인 선택을 했는지. 셋째, 결과적으로 사용자가 무엇을 더 쉽게 하게 되었는지. 이 세 줄만 있어도 보는 사람이 화면을 훨씬 편하게 읽었습니다. 특히 쇼핑몰, 병원, 예약 서비스처럼 목적이 분명한 사이트는 예쁜 레이아웃보다 전환 흐름을 설명하는 문장이 더 강하게 작동했습니다.

1. 프로젝트 이름 아래에 업종과 목표를 한 줄로 씁니다. 예: “예약 이탈을 줄이기 위한 피부과 모바일 웹디자인”.
2. 내 역할을 구체적으로 씁니다. 예: “메인 화면 구조, 예약 CTA, 모바일 컴포넌트 설계 담당”.
3. 작업 기간보다 더 중요한 제약 조건을 씁니다. 예: “기존 로고 유지, 개발 기간 2주, 이미지 자산 부족”.
4. 최종 화면을 보여주기 전에 핵심 판단을 먼저 씁니다. 예: “첫 화면에서 가격보다 시술 선택을 먼저 보이게 조정”.

이렇게 구성하니 포트폴리오가 단순히 “잘 만든 화면”을 보여주는 데서 끝나지 않았습니다. 제가 문제를 읽고, 선택하고, 조정하는 사람이라는 인상을 줄 수 있었습니다. 디자인넷처럼 디자인 전반을 다루는 사이트에서 포트폴리오 이야기가 중요한 이유도 여기에 있습니다. 그래픽디자인, 웹디자인, 인테리어 모두 결국 보는 사람에게 판단의 길을 만들어주는 작업이기 때문입니다.

피그마, PDF, 웹페이지를 같이 써보니 역할이 달랐습니다

각 포맷의 장단점을 나누니 수정 시간이 줄었습니다

피그마 하나로 모든 걸 해결하려다 보니 어느 순간 파일이 너무 복잡해졌습니다. 최종 시안, 실패한 시안, 레퍼런스, 와이어프레임, 고객 피드백, 디자인 시스템까지 한 파일에 들어가니 저도 다시 찾기가 어려웠습니다. 그래서 포트폴리오를 세 가지 포맷으로 나눠봤습니다. 피그마는 작업 구조 확인용, PDF는 빠른 검토용, 웹페이지는 검색과 공유용으로 역할을 분리했습니다.

이 방식은 특히 외주 상담에서 효과가 좋았습니다. 처음 연락한 사람에게는 PDF나 웹페이지 링크를 먼저 보내고, 관심을 보이면 피그마 링크를 추가로 전달했습니다. 그러면 상대는 부담 없이 대표 사례를 보고, 필요한 경우에만 깊이 들어올 수 있습니다. 반대로 채용이나 협업 제안처럼 실무 능력을 더 자세히 봐야 하는 상황에서는 피그마 파일을 적극적으로 열어두는 편이 좋았습니다. 누가 보는지에 따라 포트폴리오 형식이 달라져야 한다는 사실을 몸으로 배운 셈입니다.

그래픽디자인 작업까지 함께 보여줘야 한다면 포맷 분리는 더 중요해집니다. 로고, 배너, 카드뉴스, 웹 UI를 한 화면에 무작정 붙이면 밀도가 높아 보이지만, 보는 사람은 핵심을 놓치기 쉽습니다. 그래픽디자인의 범위와 의미를 더 살펴보고 싶다면 그래픽 디자인 설명도 참고할 만합니다. 실제 포트폴리오에서는 이론보다 더 중요한 것이 “어떤 매체에서 어떻게 쓰였는지”를 보여주는 순서였습니다.

• 피그마: 컴포넌트 구조, 반응형 화면, 프로토타입 흐름을 보여줄 때 가장 좋았습니다.
• PDF: 미팅 전 빠르게 공유하거나 인쇄해서 설명할 때 안정적이었습니다.
• 웹페이지: 검색 노출, 모바일 확인, 링크 공유에 강했습니다.
• 이미지 보드: 그래픽디자인 결과물을 한눈에 보여줄 때 유용하지만 설명이 부족하면 장식처럼 보였습니다.

제가 정착한 포트폴리오 구성표

아래 방식은 제가 여러 번 수정한 뒤 가장 편하게 쓰고 있는 구조입니다. 처음에는 멋진 썸네일을 많이 넣으려 했지만, 실제 상담에서는 정보의 순서가 더 중요했습니다. 특히 웹디자인 포트폴리오는 화면이 길어지기 쉬우므로, 각 프로젝트마다 같은 구조를 반복하는 편이 좋았습니다. 보는 사람이 패턴을 이해하면 두 번째 사례부터 훨씬 빨리 읽습니다.

이 표를 기준으로 구성하니 작업물을 고르는 기준도 명확해졌습니다. 예전에는 마음에 드는 화면을 먼저 골랐지만, 지금은 “이 사례가 내 디자인 판단을 설명해 주는가?”를 먼저 봅니다. 포트폴리오가 예쁜 갤러리에서 실무 소개서로 바뀌는 지점이 바로 여기였습니다.

포트폴리오를 고칠 때는 화면을 더 넣기보다 덜어내는 시간이 더 오래 걸렸습니다. 하지만 덜어낸 뒤에야 장점이 선명해졌고, 보는 사람의 질문도 훨씬 구체적으로 바뀌었습니다.

가격이나 제작 시간도 현실적으로 봐야 합니다. 단순 PDF 포트폴리오는 반나절에서 하루면 기본 틀을 만들 수 있지만, 웹페이지형 포트폴리오는 도메인, 호스팅, 반응형 테스트까지 챙기면 시간이 더 듭니다. 프리랜서라면 무료 노션 페이지나 간단한 빌더로 시작해도 충분합니다. 다만 디자인 일을 전문적으로 보여주고 싶다면, 첫 화면과 모바일 가독성만큼은 직접 다듬는 것을 추천합니다. 웹디자인을 한다고 말하면서 자신의 포트폴리오 모바일 화면이 깨지면 신뢰가 바로 떨어졌습니다.

내 작업 성격에 따라 포트폴리오 선택도 달라졌습니다

웹디자인 중심이라면 흐름을, 그래픽디자인 중심이라면 맥락을 보여주세요

포트폴리오를 만들며 가장 많이 받은 질문은 “그럼 나는 어떤 형식으로 시작해야 하느냐”였습니다. 제 답은 작업 성격에 따라 다르다는 것입니다. 웹디자인을 주로 한다면 단순히 예쁜 화면보다 사용자가 어디를 누르고 어디에서 전환되는지 보여주는 흐름이 중요합니다. 버튼 하나, 메뉴 깊이, 카드 배열 같은 작은 선택이 실제 사용 경험을 바꾸기 때문입니다. 이때 피그마 프로토타입은 강력한 자료가 됩니다.

반대로 그래픽디자인 비중이 크다면 결과물의 적용 장면을 함께 보여주는 편이 좋았습니다. 로고만 덩그러니 놓는 것보다 명함, 패키지, SNS 썸네일, 웹 배너에 어떻게 확장되는지 보여주면 설득력이 커집니다. 인테리어 디자인까지 다루는 분이라면 평면도나 3D 이미지보다 사용 전후의 문제 해결이 먼저 읽히게 해야 합니다. 예를 들어 “좁은 카페를 넓어 보이게 했다”보다 “대기 동선과 픽업 동선을 분리해 혼잡을 줄였다”가 훨씬 실무적으로 들립니다.

디자인을 공부하거나 설명할 때는 분야별 언어가 다르게 느껴지지만, 실제 클라이언트는 결국 비슷한 질문을 합니다. “이 디자인이 우리에게 어떤 이득이 있나요?”라는 질문입니다. 관련 용어를 더 넓게 보고 싶다면 디자인 관련 지식백과 항목도 함께 살펴볼 수 있습니다. 다만 포트폴리오 본문에서는 전문 용어를 많이 쓰는 것보다, 실제 상황과 연결된 문장이 더 잘 먹혔습니다.

• 웹디자인 지원자: 메인 화면보다 사용자 흐름, 반응형 대응, 컴포넌트 규칙을 보여주는 것이 좋습니다.
• 그래픽디자인 프리랜서: 단일 이미지보다 브랜드 적용 사례와 매체별 변형을 보여주는 편이 유리합니다.
• 인테리어 디자이너: 완성 사진만큼 동선, 조명, 수납, 유지관리 포인트를 설명해야 합니다.
• 외주를 받고 싶은 디자이너: 견적 범위, 수정 횟수, 작업 절차를 포트폴리오 안에 자연스럽게 넣으면 문의 품질이 좋아집니다.

처음 만드는 사람과 다시 고치는 사람에게 다른 선택을 권합니다

처음 포트폴리오를 만드는 분이라면 피그마 하나로 시작해도 괜찮습니다. 다만 파일 안에 모든 것을 몰아넣기보다, 보는 순서를 정해 두세요. 첫 프레임에는 자기소개보다 작업 방향을 쓰고, 다음 프레임부터 프로젝트별 요약을 넣는 방식이 좋습니다. 완벽한 웹사이트를 만들겠다고 시간을 오래 쓰기보다, 대표 사례 3개를 선명하게 정리하는 편이 더 빨리 기회를 만듭니다.

이미 포트폴리오가 있는데 반응이 약한 분이라면 새 디자인을 추가하기 전에 기존 사례의 설명부터 고쳐보는 것을 권합니다. “브랜딩 작업”, “웹사이트 리뉴얼”, “상세페이지 디자인”처럼 넓은 제목만 있으면 보는 사람은 차이를 느끼기 어렵습니다. “예약 버튼 클릭률을 높이기 위해 첫 화면 구조를 바꾼 웹디자인”, “신제품 특성을 한눈에 보이게 만든 그래픽디자인 배너”처럼 목적이 보이는 문장으로 바꾸면 같은 작업도 다르게 읽힙니다.

1. 대표 작업 3개만 고르고, 나머지는 과감히 보조 사례로 내립니다.
2. 각 작업마다 문제, 선택, 결과를 3문장 안에 씁니다.
3. 피그마 링크는 전체 공개보다 읽기 전용 링크로 정리해 공유합니다.
4. 모바일에서 첫 화면과 버튼 텍스트가 잘리는지 꼭 확인합니다.
5. 외주용이라면 예상 작업 범위와 문의 전 확인할 내용을 짧게 넣습니다.

저라면 처음 시작하는 디자이너에게는 피그마 기반 포트폴리오를 먼저 권하겠습니다. 수정이 쉽고, 작업 과정을 쌓아가며 자신의 기준을 만들기 좋기 때문입니다. 대신 첫 프레임에는 반드시 보는 순서와 대표 사례 요약을 넣어야 합니다.

반대로 이미 클라이언트를 만나고 있거나 외주 문의를 늘리고 싶은 디자이너라면 웹페이지형 포트폴리오를 함께 운영하는 쪽이 더 낫습니다. 검색에 걸릴 수 있고, 모바일 공유가 편하며, 디자인넷 같은 전문 포털에서 다루는 웹디자인·그래픽디자인·인테리어 사례를 한 브랜드 안에서 정리하기 좋습니다. 피그마는 깊이 보여주는 자료로 남기고, 웹페이지는 처음 만나는 사람이 빠르게 신뢰를 느끼는 입구로 쓰는 방식이 지금까지 가장 만족스러웠습니다.