6월 21일7분 분량

온라인 포트폴리오 만들기 필수 제작 가이드

자신을 제대로 홍보하기 위한 온라인 포트폴리오는 모든 디자이너에게 빼놓을 수 없는 필수 요소입니다. 오늘은 자신만의 유니크한 스타일을 제대로 표현하는 포트폴리오를 제작할 수 있는 10단계를 배워보겠습니다.

오늘날 온라인상에서 보여지는 전문성은 디자이너와 크리에이터에게 절대적으로 중요해졌습니다. 전문적인 웹사이트 디자인이 포함된 온라인 포트폴리오는 명함, 이력서 및 프로젝트 쇼케이스와 같은 역할을 하고 있습니다. 이제는 디자이너 또는 크리에이터의 잠재고객과 의뢰인이 당연히 찾아보게 되는 곳이 되었습니다.

포트폴리오 웹사이트 제작은 멋진 이미지와 전문성을 전달하는 다른 작업과 비슷해 보일 수도 있지만, 이를 통해 자신의 스킬을 보여주고 자신만의 목소리를 전달하는 공간을 만들 수 있는 작업이기도 합니다. 이를 위한 적절한 도구를 사용한다면 기술적인 구애를 받지 않고도 예술적인 재능을 마음껏 펼치면서 강력한 온라인 입지를 구축할 수 있습니다.

이를 시작하려면 개인적으로도 만족할 수 있는 온라인 포트폴리오를 만드는 방법에 대한 가이드를 아래에서 참고하세요.

01. 영감 얻기

포트폴리오 만들기는 시각적인 측면에서 수많은 포트폴리오 예시를 참고하는 과정에서부터 시작됩니다. 자신의 분야가 어떤 분야이든 상관없이 다른 온라인 포트폴리오 웹사이트를 둘러보다 보면 많은 영감을 얻게 되고 대략적인 아이디어를 얻을 수 있습니다.

이러한 리소스를 살펴볼 때 포트폴리오가 전달하고자 하는 분위기와 만들고자 하는 경험에 대해 생각해 보세요. 창의력을 발휘하는 과정에 메모를 하거나 무드 보드를 만들어 함께 사용하세요. 색상 팔레트, 타이포그래피 및 사이트 구조와 같은 필수 세부 사항을 고려하고 현재 웹디자인 트렌드에 대해 파악하세요.

02. 온라인 포트폴리오 디자인 선택하기

방문자가 한 페이지에서 다음 페이지로 어떻게 이동하기를 원하시나요? 방문자가 맨 처음에 무엇을 봤으면 하시나요? 다음은 실제 사이트를 디자인할 때 다음 단계에서 스스로에게 물어볼 질문입니다.

이 단계에서 시작하는 쉬운 방법은 두 가지가 있습니다.

템플릿 선택하기: 거의 모든 포트폴리오 웹사이트 빌더는 선택할 수 있는 미리 만들어진 템플릿을 제공합니다. 예를 들어 Wix는 모든 유형의 산업에 걸쳐 수십 개의 포트폴리오 템플릿(그 외에도 전체 웹사이트 템플릿은 900개가 넘습니다)을 보유하고 있습니다.

AI를 이용해 디자인하기: Wix와 같은 AI 웹사이트 제작 도구를 사용하면 몇 분 안에 맞춤형 사이트를 만들 수 있습니다. Wix를 사용하면 AI와 원하는 포트폴리오 유형에 대해 간단히 대화한 다음 AI가 목표와 원하는 미학에 맞는 사이트를 디자인하는 것을 지켜보기만 하면 됩니다.

다양한 템플릿을 활용하여 나만의 유니크한 온라인 포트폴리오를 제작해 보세요!

무료로 시작하기

03. 최고의 프로젝트 선보이기

자신이 작업한 작품은 온라인 포트폴리오의 핵심이라 할 수 있기에 가장 근사한 형태로 보여줄 수 있어야 합니다. 홈페이지 또는 웹사이트 메뉴 기능을 통해 가시성과 접근성을 높이는 것이 좋습니다. 웹사이트에 전용 ‘프로젝트’ 페이지를 만들어 자신의 작품만을 한 곳에 모아 보여줄 수 있습니다.

자신의 작품 중 최고의 작품만을 공유하여 고객에게 자신의 창의성과 테크닉을 선보일 수 있습니다. 이를 통해 고객은 아티스트만이 갖고 있는 강점에 관심을 기울이게 되고 포트폴리오 전반에 걸쳐 일정한 수준의 퀄리티를 유지할 수 있습니다.

가장 자신 있는 작품을 선보이면서 웹사이트를 수시로 업데이트하여 언제나 가장 최근 작품을 공유할 수 있도록 합니다. 이를 통해 방문자는 아티스트가 활발한 작업 활동을 하며 꾸준히 경험을 쌓아나가고 있음을 확인할 수 있습니다. 온라인 포트폴리오를 처음 제작할 때 새로운 프로젝트를 쉽게 게시할 수 있도록 업데이트가 간편한 포트폴리오 구축 방법을 고려해 보는 것이 좋습니다.

방문자가 작업의 맥락을 이해할 수 있도록 각 프로젝트에 대한 설명을 추가하는 것이 좋습니다. 프로젝트에 대한 간결한 설명을 제공하고 프로젝트에서 자신이 맡은 역할과 함께 콜라보레이션을 진행한 파트너를 언급해 보세요. 이 부분이 종종 간과되기 때문에 알아두면 도움이 되는 포트폴리오 디자인 팁입니다.

04. 고퀄리티 이미지 사용하기

사진 포트폴리오에만 고품질 이미지가 필요한 것은 아닙니다. 자신의 작품이 실제로 보이는 것처럼 온라인상에서 동일한 인상을 남기려면 작업, 프로세스 및 제품을 촬영하는 데 시간과 노력을 투자해야 합니다. 전문적인 사진 촬영이 불가능한 경우 모형으로 작업하여 이미지에 생기를 불어넣을 수 있습니다. 작품 이미지를 선보일 때 Wix Pro 갤러리를 사용하면 맞춤형 레이아웃, 편집 및 효과를 통해 전문성을 더해줄 수 있습니다.

05. 적절한 콘텐츠 및 기능 포함하기

포트폴리오의 기본적인 구성과 작품 컬렉션이 어느 정도 정해졌다면 온라인 포트폴리오에 포함할 추가 콘텐츠와 이를 전략적으로 보여줄 수 있는 방법을 확인해야 합니다. 여기에는 텍스트, 이미지 및 기타 미디어가 포함됩니다. 그래픽 디자인 포트폴리오, 아트 포트폴리오, 모델 포트톨리오 등 다양한 유형의 포트폴리오를 만들 때 반드시 넣어야 할 웹페이지 및 섹션 이외에도 웹사이트에 적용하면 좋을 전문적인 디자인 기능은 다음과 같습니다.

홈페이지

포트폴리오에 들어가는 ‘홈’ 페이지는 눈길을 끄는 디자인으로 방문자의 관심을 끌 수 있어야 합니다. 시각적인 측면 외에도 홈페이지에 강한 인상을 남기는 도입부 구절을 사용하면 잠재 고객과 작업 의뢰인들의 호기심을 자극할 수 있습니다. 자신이 누구이고 무엇을 하는지 명확하면서도 간결하게 그리고 친근한 어조로 표현해 보세요. 여기에 약력 정보를 입력할 필요는 없지만('정보' 페이지에 들어감) 아티스트의 이름과 주요 전문 분야는 꼭 넣을 필요가 있습니다.

홈페이지는 방문자가 포트폴리오를 둘러보는 시작점이자 기본 페이지로 사용되기 때문에 찾는 것이 쉽고 웹사이트의 방문자가 원하는 페이지로 이동할 수 있도록 명확하게 안내해주는 항목 메뉴도 포함하고 있어야 합니다.

소개 페이지

소개 페이지는 아티스트의 배경과 간단한 약력을 소개하고 활동에 대한 필수 정보를 제공하면서 자신만의 정체성과 가치관을 요약해서 보여줄 수 있는 곳입니다. 자신의 성취 및 스킬과 같은 차별화된 요소를 모두 포함합니다. 또한, 현재 고용 상태를 명확히 하고 이력서를 포함하는 것이 좋습니다. 페이지에 직접 추가하거나 다운로드 가능한 PDF 형태로 추가할 수도 있습니다.

재치 있는 문구, 간결하고 스마트한 카피 문구, 일러스트레이션 또는 자신을 제대로 보여줄 수 있는 수단을 사용하여 자신만의 개성을 보여줄 수 있습니다. 미래 지향적인 그래픽과 대담한 마이크로카피로 자신감 있고 적극적인 바이오를 강조하는 DA Creative를 살펴보세요.

문의 정보

방문자에게 웹사이트에 대한 멋진 인상을 남겼다면 방문자가 문의를 남기는 데 있어 어려움이 없어야 합니다. 갑자기 하루아침에 받은 편지함에 의뢰 문의가 쏟아질 수는 없겠죠. 연락이 닿을 수 있도록 문의 양식, 이메일, 전화번호 및 SNS 링크와 같은 요소를 추가하는 것이 좋습니다.

메뉴에 문의하기 페이지를 만들거나 화면 측면에 문의 관련 요소를 고정하여 이를 표시하는 방법도 있습니다. 또한, 웹사이트 바닥글에 연락처 세부 정보를 반복하여 방문자가 문의 정보를 확실히 볼 수 있게 합니다.

고객 리스트, 후기 및 추천 글

함께 일한 경험이 있는 이름이 알려진 고객 리스트를 표시해 전문성을 강조할 수 있습니다. 자신의 프로젝트 작업이 타 매체에 소개된 적이 있거나 언론 보도에 언급된 적이 있다면 그런 내용을 게시해 놓는 것이 좋습니다.

서비스에 만족한 고객들에게 받은 후기 및 추천 글을 한두 개 정도 올려놓는 것도 좋은 방법입니다. 진정성이 느껴지고 과하지 않은 피드백의 경우 이러한 추천 글은 온라인 포트폴리오에 큰 신뢰감을 더해줍니다. 비용을 들이지 않으면서 특별한 홍보를 할 수 있는 방법이니 이 기회를 놓치지 마세요.

전문 기능 통합

전문적인 모습을 보여주고 매력적인 방문자 경험을 제공하고 싶다면 방문자의 시선을 사로잡을 수 있는 디자인 기능을 통합하는 것을 생각해 볼 수 있습니다. 온라인 포트폴리오 디자인을 한 단계 업그레이드할 수 있는 방법입니다. Hover (마우스오버) 효과 및 Parallax (시차를 이용한 효과) 스크롤에서 애니메이션 및 라이트박스에 이르기까지 이러한 효과로 웹사이트를 마무리함으로써 웹사이트에 생기를 불어넣을 수 있습니다. 또한, 방문자의 관심을 특정 장소로 끌거나 방문자와 상호 작용을 할 수 있는 기능적 도구 역할을 할 수 있습니다.

Tata Rekso는 이러한 요소들이 사용자 경험에 얼마나 큰 영향을 미칠 수 있는지 보여줍니다. 그녀의 특징적인 작품들 중 하나 위를 맴돌면, 텍스트의 색깔이 바뀌고 그 옆에 작품의 살짝 엿보기가 나타납니다.

또 다른 좋은 방법으로는 자신의 웹사이트를 더욱 역동적으로 만들고 자신의 특정 니즈에 맞도록 조정할 수 있는 Wix의 Velo를 사용하는 것입니다. 이 웹 개발 플랫폼을 사용하면 다양한 맞춤형 상호 작용을 할 수 있도록 웹 사이트에 코딩을 삽입할 수 있기 때문에 아주 복잡한 비주얼 효과도 포트폴리오에서 실현할 수 있습니다.

06. UX 포트폴리오 향상하기

이제 자신만의 콘텐츠가 준비되었다면 이를 모두 한곳에 모아 제작해야 할 차례입니다. 웹사이트에서 강력한 UX 또는 사용자 경험을 만들려면 여러 가지 요소를 고려해야 합니다.

먼저, 제작하기로 결정한 모든 웹 페이지를 나열해 봅니다. 그런 다음 각 페이지에 포함되어야 하는 요소를 판단합니다. 예를 들어, 작업물을 담은 프로젝트 페이지에는 추천 이미지, 헤더, 설명과 함께 추가 이미지 또는 미디어 기능 몇 가지를 더 포함될 수 있습니다. 각 페이지에 항목을 나열하면서 우선순위를 정하고 계층 구조를 짜서 웹 사이트에 적합한 레이아웃을 제작할 수 있습니다.

종이 위에 자신의 아이디어를 와이어프레임으로 스케치할 수도 있고, 또는 포트폴리오 웹사이트를 일단 만들고 점차적으로 요소를 배치할 수 있습니다.

온라인 포트폴리오를 어떤 페이지로 구성할 것인지 명확해졌다면 방문자의 웹페이지 탐색 형식을 결정해야 합니다. 방문자가 어떤 식으로 다른 페이지로 넘어갈 것인지, 전체 화면 목록으로 열리는 세줄 메뉴를 포함할 것인지, 또는 각 페이지 상단에 고정 메뉴를 포함할 것인지, 현재 머물고 있는 페이지를 어떻게 표시할 것인지 등을 결정해야 합니다. 이러한 가이드를 통해 웹사이트 탐색 팁을 얻어가면서 원활한 브라우징 경험을 위해 고려해야 할 모든 면을 생각해 볼 수 있습니다.

UX 디자이너인 다이애나 렌코(Diana Renko)의 포트폴리오는 훌륭한 UX 디자인이 기능적이면서도 창의적일 수 있음을 보여줍니다. 새롭게 디자인된 그녀의 햄버거 메뉴는 독특한 스핀을 자랑하면서도 쉽게 알아볼 수 있습니다. 이 창의적인 접근 방식은 친숙한 사용성과 개인 스타일을 조화시키는 렌코의 능력을 보여주며, 좋은 UX 디자인이 지루할 필요가 없다는 것을 증명합니다.

07. 웹사이트 SEO 작업하기

온라인 포트폴리오를 인터넷에서 찾을 수 없다면 무슨 의미가 있을까요? 고객이 여러분을 찾아서 쉽게 서비스를 예약할 수 있도록 웹사이트를 최적화하여 구글 검색 시 상위 노출이 될 수 있도록 해보세요.

검색엔진 최적화(SEO)는 웹사이트의 다양한 요소와 관련성을 가지기에 지속적으로 관리해줘야 하는 작업입니다. 다음은 이를 시작하는 데 도움이 될 수 있는 몇 가지 사항입니다.

유니크하고 신선하면서 가치 있는 콘텐츠를 작성합니다. 이를 위한 좋은 방법으로는 블로그 게시물을 작성하는 것입니다. 블로그 게시물은 다른 디자이너와 크리에이터에게 글을 통해 아이디어를 공유할 수 있는 기회를 제공해 줄 수 있습니다. 또한, 이를 통해 적극적으로 작업하고 있음을 구글 알고리즘 (및 사이트 방문자)에 어필할 수 있습니다.

자신의 웹사이트에 적합한 키워드를 찾기 위해 키워드 조사를 실시합니다. 키워드는 사람들이 크리에이터를 찾을 때 구글에서 가장 많이 검색되는 단어 및 문구를 말합니다. 키워드의 예시로는 ‘프리랜서 웹 디자이너’ 또는 ‘토론토 건축가’ 등이 될 수 있습니다. 키워드 조사를 마친 후에는 웹사이트 전반에 걸쳐 적절한 위치에 전략적으로 자신의 키워드를 사용하도록 합니다.

사용할 이미지의 대체 텍스트를 작성합니다. ‘Alt Text’라고도 불리는 대체 텍스트(Alternative Text)는 사이트 이미지와 사진에 대한 간략한 설명을 전달합니다(예: ‘브랜딩 프로젝트를 위한 엽서 및 명함’). SEO 친화적인 대체 텍스트를 작성하는 것도 웹사이트의 접근성을 개선하는 데 도움을 줄 수 있습니다. 온라인 포트폴리오에는 시각적인 요소를 많이 사용하게 되기 때문에 이를 통해 키워드를 대체 텍스트 안에 적용할 수 있습니다.

각 디자인 포트폴리오 페이지의 제목과 설명(메타데이터)을 작성합니다.

현재 거주지에 적합한 SEO를 사용하여 해당 지역의 사람들이 검색할 시 포트폴리오가 노출될 수 있게 해보세요. 한 지역에서 오랫동안 거주하고 있는 프리랜서 디자이너인 경우 그 현지 SEO를 사용하여 자신의 지역을 대상으로 검색하는 사람들이 포트폴리오를 찾을 수 있도록 할 수 있습니다. 구글의 ‘마이 비즈니스’에서 자신의 비즈니스를 먼저 등록하고 자신의 비즈니스와 관련된 디렉터리에 웹사이트를 포함시킨 후 웹사이트 페이지에 위치 정보를 추가해 보세요.

전문가 팁: Wix 웹사이트를 사용하고 있다면 Wix SEO를 활용해 보세요. 맞춤형 체크리스트와 유용한 팁으로 사이트의 SEO를 개선하는 데 도움을 주는 단계별 무료 플랜입니다.

08. 모바일 친화적으로 제작하기

스마트폰으로 웹사이트를 방문할 수 있다는 사실이 종종 간과됩니다. 실제로 모바일 기기를 통한 방문은 전 세계 웹 페이지 조회수의 60%를 차지합니다. 그렇기 때문에 최적의 웹사이트 디자인은 데스크톱에서 보이는 것처럼 모바일에서도 동일하게 보이는 것입니다.

온라인으로 포트폴리오 만들기를 할 때 디자이너들이 직면하는 어려움 중 하나는 제작한 포트폴리오를 모바일과 호환시키는 작업입니다. 모바일 웹사이트는 단순히 웹 디자인을 작게 만든 것보다 더 많은 노력이 필요하기 때문에 모바일용으로 디자인할 때 염두에 두어야 할 몇 가지 규칙이 있습니다.

화면의 크기가 작아지기 때문에 가장 중요한 요소만 보이도록 유지하면서 사이트의 모바일 버전에서는 불필요한 요소를 덜어내는 것이 좋습니다. 또한, 사용하는 글꼴과 색상에 각별한 신경을 쓰면서 가독성을 체크합니다. 텍스트를 최대한 줄이고 방문자가 쉽게 둘러볼 수 있도록 검색창을 추가하는 것을 고려해 볼 수 있습니다.

저널리스트인 로린 히긴스(Lauryn Higgins)의 포트폴리오를 살펴 모바일 디자인의 올바른 예를 확인해 보세요. 로린의 미니멀한 디자인은 모바일로 쉽게 변환할 수 있어 브랜드에 맞는 경우 미니멀한 디자인을 선택하는 것이 좋다는 것을 입증합니다.

Wix로 포트폴리오를 만드는 경우, 웹사이트에서 아티스트의 이미지에 맞는 적응형 갤러리와 함께 모바일 친화적인 버전을 자동으로 생성할 수 있습니다.

09. 유의미한 피드백 요청하기

프로젝트를 작업하다 보면 실제로 어떻게 보이는지에 대해 알기 전까지 원래 생각했던 방향과 다르게 진행될 수 있습니다. 그렇기 때문에 인사이트와 새로운 아이디어를 얻으려면 항상 제3자의 눈을 통해 웹사이트를 살펴보는 것이 가장 좋습니다. 믿을 수 있는 친구에게 포트폴리오의 콘텐츠와 비주얼에 대해 어떻게 생각하는지 물어보세요. 포트폴리오에 빠진 정보는 없는지, 웹사이트의 디자인적인 면에서 매력적인 부분과 그렇지 않은 점은 무엇인지, 웹사이트를 둘러보는 것이 쉬웠는지 등에 대한 피드백을 요청할 수 있습니다. 웹사이트를 수정하게 되더라도 이러한 피드백은 웹사이트의 디테일을 미세하게 조정하는 데 도움을 줄 수 있습니다.

10. 게시 및 홍보하기

온라인 포트폴리오를 게시한 후에는 핀터레스트(Pinterest) 또는 드리블(Dribbble) 등에 이르기까지 모든 SNS 채널에서 공유하는 것을 잊지 마세요. 이러한 SNS 마케팅 전략이 간단해 보일 수는 있지만 더 많은 잠재 고객에게 다가가고 SEO 랭킹을 높이고 유의미한 피드백을 얻는 데 도움을 줄 수 있습니다.

디자이너를 위한 또 다른 인스타그램 팁으로는 방문자가 SNS 프로필에 쉽게 도달할 수 있도록 사이트에 SNS 버튼을 추가하는 것입니다.

이렇게 대중에게 자신의 포트폴리오를 홍보했다면 이제 포트폴리오를 계속해서 성장시켜야 합니다. 언제나 수정할 부분은 있기 마련이고 이런 식으로 포트폴리오를 조금씩 개선해 나갈 수 있습니다. 웹사이트에 새로운 콘텐츠와 작업물을 지속적으로 업데이트하고 다양한 기능을 적용하고 사용자 경험을 개선하면서 최신 디자인 트렌드를 따르는 것을 고려해 보세요.

포트폴리오 만들기 팁

이제 포트폴리오를 만드는 방법을 알았으므로 실제로 확실하게 만들 수 있는 몇 가지 추가 팁을 알려드리겠습니다.

포트폴리오 전체에서 일관된 브랜딩을 사용하세요. 다시 말해서 포트폴리오 전체에서 동일한 글꼴, 색상 및 전반적인 스타일을 사용해야 합니다. 이렇게 하면 전문적인 화합된 외형을 만드는 데 도움이 됩니다. 추가로 잠재적인 고용주나 고객에게 기술과 능력을 보여줄 수 있으므로 포트폴리오에는 최고의 작업물만 포함해야 합니다.

포트폴리오를 최신 상태로 유지하세요. 새 작업물을 만들 때는 꼭 포트폴리오에 추가해야 합니다. 이렇게 해서 포트폴리오를 최신 상태이자 관련성 높게 유지할 수 있습니다. 이미지가 깨끗하고 선명하며 밝은지 확인하고 각 이미지에 명확하고 간결한 설명을 추가하세요.

미래에 하고 싶은 일에 집중하세요. 새로운 분야로 들어서거나 한 가지 유형의 프로젝트에 더 집중하려는 경우 관련 경험과 기술을 강조하세요. 앞으로 피하고 싶은 프로젝트에 대해 이야기하는 데 너무 많은 시간을 소비하지 마세요.

By 조윤정

SEO & 블로그 전문가