웹 디자인 포트폴리오를 온라인으로 만드는 방법

게시 됨: 2020-05-11

웹 디자이너로서, 당신은 당신의 경력에서 그토록 열심히 일한 프로젝트에 자부심을 느낍니다. 이것은 한 가지 의미일 수 있습니다. 최고의 작품을 수집하여 전시할 때입니다. 당신이 당신의 작품을 발표하는 방식은 당신의 전문성을 말해줍니다. 깔끔하고 조직적인 방식으로 디자인을 선보이는 것이 가장 좋습니다. 여기에서 웹 디자인 포트폴리오가 시작됩니다.

당신의 고객이나 고용주는 당신의 작품과 프로젝트에 대해 듣는 것보다 보고 싶어합니다. 좋은 포트폴리오는 그들에게 그런 기회를 주고 당신이 그들의 신뢰를 얻는 데 도움이 됩니다. 웹 디자인 포트폴리오를 정확히 만드는 방법에 관심이 있다면 계속 읽으십시오. 이 문서에서는 프로세스를 단계별로 안내합니다.

Renderforest의 웹 사이트 템플릿 중 하나를 사용하여 포트폴리오를 만들 것입니다. 이제 탐색 메뉴의 " 웹사이트 구축 " 으로 이동하여 생성을 시작하겠습니다 .

렌더포레스트 웹사이트 빌더

웹사이트 빌더 페이지로 이동하면 웹사이트 템플릿에 대한 여러 카테고리와 하위 카테고리를 찾을 수 있습니다. 필요에 맞는 것을 선택하십시오. 웹 디자인 포트폴리오의 경우 개인 카테고리에서 "포트폴리오"를 선택하거나 아트 카테고리에서 "디자인"을 선택할 수 있습니다.

웹사이트 템플릿 카테고리

또는 "모두"를 클릭하여 사용 가능한 모든 템플릿을 열고 검색 창을 사용하여 필요한 템플릿을 찾을 수 있습니다.

검색 창을 사용하여 템플릿 찾기

카테고리를 선택하면 선택할 수 있는 다양한 웹사이트 템플릿이 표시됩니다. 아래 그림은 포트폴리오 옵션을 보여줍니다.

포트폴리오 웹사이트 템플릿

하나를 선택한 후 템플릿을 전체 화면으로 미리 보려면 클릭하십시오. 우리는 "Web Designer CV"를 선택했습니다.

템플릿 미리보기

미리 보기 페이지에서 아래로 스크롤하여 템플릿을 보고 데스크톱, 태블릿 및 휴대폰 화면에서 어떻게 보이는지 확인할 수 있습니다.

데스크톱, 태블릿, 휴대폰에서 미리보기

더 많은 템플릿을 탐색하려면 왼쪽 모서리에 있는 "템플릿으로 돌아가기"를 클릭하십시오. 선택한 템플릿에 만족하면 오른쪽 상단 모서리에 있는 "적용"을 누르십시오.

템플릿 적용

"적용" 버튼을 누르면 템플릿을 편집하고 완전히 사용자 지정할 수 있는 웹사이트 메이커 편집기로 이동합니다. 어떻게 했는지 봅시다.

템플릿 사용자 정의 시작

템플릿의 모든 단일 요소는 사용자 정의할 수 있습니다. 이것이 작업에 매우 유연하게 만드는 이유입니다. 먼저 헤더 조정부터 시작하겠습니다.

헤더를 사용자 정의

왼쪽에는 로고를 부착할 수 있는 옵션이 있습니다. 오른쪽에서 배경색을 변경할 수 있습니다. 전체 헤더를 다른 것으로 바꾸려면 배경색 바로 옆에 있는 "바꾸기"를 클릭하십시오.

헤더를 교체

그것을 클릭하면 헤더 섹션에 대한 수많은 다른 옵션이 표시됩니다. 적합한 것을 찾으면 "바꾸기" 버튼을 누르십시오.

헤더 교체

헤더의 모양을 결정했으므로 탐색 메뉴 작성을 시작할 수 있습니다. 원하지 않는 메뉴 항목을 삭제하거나 "링크 추가"를 클릭하여 새 항목을 추가하십시오.

메뉴 항목 - 링크 추가

메뉴 항목에 링크를 첨부하려면 하이퍼링크 아이콘을 클릭하십시오.

앵커 링크 아이콘

메뉴 항목 이름을 편집하고 페이지의 특정 섹션에 대한 외부 링크 또는 점프 링크를 삽입할 수 있는 새 창이 열립니다.

링크 추가 창

마지막으로 "Component" 버튼이 보입니다. 웹사이트에 다른 텍스트 또는 시각적 구성 요소를 추가할 수 있습니다.

구성 요소 추가

CTA 및 가격 책정부터 FAQ 및 소셜 미디어 링크에 이르기까지 생각할 수 있는 모든 구성 요소를 찾을 수 있습니다.

구성 요소 창

헤더 섹션이 완료되면 더 아래로 이동하여 동일한 방식으로 다른 섹션을 계속 사용자 지정합니다. 페이지에 표시되는 모든 블록을 수정, 교체, 삭제 또는 추가할 수 있습니다.

템플릿의 텍스트를 편집하려면 해당 텍스트를 클릭하고 입력을 시작하기만 하면 됩니다.

텍스트 상자를 편집

아이콘을 변경하려면 편집 버튼을 클릭하면 새 창이 나타납니다.

아이콘 편집

여기에서 검색 창을 사용하여 필요한 것을 찾을 수 있습니다. 아이콘을 선택하고 "저장"을 누르면 교체된 아이콘이 표시됩니다.

아이콘 창

이 템플릿에는 작업 및 디자인 사진 전용 섹션이 별도로 있습니다. 표시할 이미지 수를 선택하고 이미지 아이콘을 클릭하여 이미지를 추가합니다.

이미지 업로드

파일을 업로드하거나, 이미지 URL을 삽입하거나, 미디어 라이브러리에서 사진을 선택하거나, 스톡 이미지를 검색할 수 있습니다.

이미지 업로드 옵션

페이지 맨 아래에 소셜 미디어 링크를 첨부할 수 있는 옵션이 있습니다. 아이콘을 선택한 다음 소셜 링크를 삽입하여 방문자와 계정을 공유하십시오.

소셜 미디어 링크 추가

계속 진행하다 보면 페이지 왼쪽에 사이드바 메뉴가 있는 것을 보셨을 것입니다. 사이드바는 디자인 포트폴리오를 위한 추가 편집 도구를 제공합니다. 도구와 기능을 간단히 살펴보겠습니다.

사이드바 메뉴

첫 번째 도구를 사용하면 텍스트 글꼴과 크기를 조정할 수 있습니다. 자신의 스타일을 보완하는 완벽한 글꼴을 찾을 때까지 글꼴을 실험해 보십시오.

텍스트 도구

바로 아래에는 페이지의 버튼과 요소의 모양을 제어하는 ​​"스타일" 도구가 있습니다. 세 가지 옵션이 있습니다: 둥글고, 모서리가 있고, 날카롭습니다.

스타일 도구

다음으로 "색상" 도구가 있습니다. 꽤 자명합니다. 색상을 선택할 수 있습니다. 디자인 팀에서 제안한 색상 팔레트를 시도하거나 브랜드 색상을 추가할 수 있습니다.

색상 도구

다음 도구는 "페이지"입니다. 새 페이지를 추가하려면 이 도구를 사용하세요. "새로 추가"를 클릭한 다음 페이지 이름을 입력하여 생성합니다. 그런 다음 계속 진행하여 사용자 지정할 수도 있습니다.

페이지 도구

"위젯" 도구를 사용하여 포트폴리오에 추가 도구와 기능을 추가할 수 있습니다. 현재로서는 사용할 수 있는 유일한 위젯은 라이브 채팅입니다. 여러 라이브 채팅 서비스 제공업체를 찾을 수 있습니다. 하나를 선택한 다음 제공된 링크를 따라 설정 방법을 알아보세요.

위젯 도구

마지막으로 "설정" 도구가 있습니다. 이를 통해 페이지의 보다 기술적인 설정을 조정할 수 있습니다. 설정에는 일반, 페이지 및 도메인의 세 가지 범주가 있습니다. 일반 설정은 쿠키 표시줄 표시, 파비콘 편집, 소셜 이미지 선택 등을 담당합니다.

일반 설정

"페이지" 설정은 페이지 제목, 메타 설명 및 키워드를 설정하는 데 도움이 됩니다. 마지막으로 "도메인"은 웹사이트 도메인 이름을 다룹니다. 사용자 지정 도메인 또는 무료 Renderforest 하위 도메인을 선택할 수 있습니다.

도메인 설정

최종 설정을 조정하고 나면 포트폴리오 생성이 거의 완료된 것입니다. 축하해요! 하지만 이 튜토리얼을 마치기 전에 상단 표시줄에 대해서도 간략하게 이야기해 보겠습니다.

여기에서 변경 사항을 실행 취소하고 다시 실행할 수 있는 두 개의 작은 화살표를 찾을 수 있습니다. 실수로 잘못된 이동을 했다면 걱정하지 마세요. 언제든지 피해를 되돌릴 수 있습니다.

변경 사항 실행 취소 및 다시 실행

다음으로, 프로젝트를 추가로 검토, 교정 및 편집할 수 있는 기고자와 포트폴리오에 대한 편집 링크를 공유할 수 있는 옵션이 있습니다. 편집 링크가 활성 상태로 유지되는 기간을 결정합니다.

프로젝트 공유

미리보기 버튼을 사용하면 게시하기 전에 페이지가 어떻게 보이는지 확인할 수 있습니다. 다시 말하지만 데스크탑, 태블릿 및 휴대폰에서 포트폴리오를 미리 볼 수 있습니다.

마지막으로 모든 것이 완벽하고 포트폴리오가 멋지게 보이는지 확인한 후에는 대망의 "게시" 버튼을 누를 수 있습니다! 프로젝트는 "내 웹사이트"에 자동으로 저장됩니다. 언제든지 액세스하고 편집할 수 있습니다.

귀하의 웹사이트를 게시

프로젝트를 성공적으로 만든 것 같습니다. 이제 뛰어난 웹 디자인 포트폴리오로 세계를 정복하십시오!

아래 버튼을 클릭하고 오늘 자신의 웹사이트를 구축하세요.

지금 만들기