홈페이지 제작

Web & Content Agency

포트폴리오 웹사이트 디자인 구성 7가지 원칙

Table of Contents

최근 개인 단위 포트폴리오 웹사이트 디자인을 구성하고자 하는 분들이 크게 늘었습니다. 이와 함께 정부 지원 사업 등에서도 개인의 성과를 확인하기 위해 포트폴리오를 요청하는 경우들이 있습니다.

좋은 포트폴리오 디자인을 구성하여 단순히 제출용이 아니라 검색엔진을 타고 들어오는 예비 잠재고객들을 고려할 필요가 있다고 생각합니다.

종종 최신 기술, 디자인을 접목한 테마로 내가 직접 만든 게 아니라 타인이 만든 디자인을 덧입혀 나의 포트폴리오만 업로드 하는 경우도 있습니다.

이런 웹사이트들은 포트폴리오 웹사이트이긴 하지만, 검색엔진 순위에서는 좋은 평판을 받지는 못합니다.

그러므로 기본 가이드라인을 이해하고, 직접 디자인을 개발해보는 게 가장 좋은 방법입니다. 이에 대한 가이드라인을 제안하자면 다음과 같습니다.

1. 고리타분한 기술은 이제 그만 안녕

HTML, CSS, Javascript 그리고 이외 프레임워크들은 무서운 속도로 발전하고 있습니다.

기존에는 python이나 C, C++, C# 등을 정석으로 웹사이트 서버를 구성하던 시절도 있었는데, 요즘은 Javascript 기반으로 서버 백엔드를 모두 구축하는 시대입니다.

디자인도 마찬가지로 다양한 시각적 효과, 동적 효과 콘텐츠도 빠르게 발전하고 있습니다. 그러므로 이러한 기술적 발전 동태에 관심을 기울여야 합니다.

2. AJAX 적극 활용해보기

AJAX는 Asynchronous JavaScript and XML의 약자입니다. 자바스크립트와 XML을 이용한 비동기적 정보 교환 기법이라고 이해하시면 좋을 듯 합니다.

AJAX는 방문자들에게 로딩 시간을 줄여줍니다. 검색엔진 입장에서는 정보를 얻지 못하고 이탈하는 문제가 없는 사이트로 인식하게 하는 요인이기도 합니다.

더불어 에러 소스 코드들도 개발자 도구로 확인하는 것은 물론, Fetch as Google Tool을 적극 활용해 구글이 사이트 내 배치된 텍스트들을 잘 이해할 수 있도록 도와주는 게 좋습니다.

또, Push State 메소드를 이용한다면 AJAX로 구성된 다른 버전들도 구글이 이해할 수 있도록 도와주도록 합니다.

3. 포트폴리오 웹사이트라면 광고는 적당히

포트폴리오 웹사이트 목적이 아니라 사이트 운영으로 수익을 내고자 하시는 분들도 계십니다.

사이트 운영 시, 사용자들에게 먼저 광고부터 들이밀거나 팝업, 콘텐츠 리딩에 방해가 되는 이미지들이 많다면, 당연히 독자들이 이탈하겠죠.

구글 역시 이를 잘 이해하고 있으므로, 사용자 경험을 해치는 사이트는 검색 순위에서 우선 배제합니다.

그러므로 팝업이나 다른 광고들로 콘텐츠 소비를 방해하지 말아주세요.

4. 무거운 이미지 크기는 최대한 가볍게

포토샵을 이용하여 웹용 레거시를 출력하는 방법도 있지만, 최근 WebP 등 이미지 최적화 방법이 새로운 대안으로 떠오르고 있습니다.

한편, 시각디자인이나 기타 디자인 분야라면 이미지 크기가 크고, 무거울 수밖에 없습니다.

그러므로 WebP를 잘 이해한다면 이 방법을, 그게 어렵다면 포토샵에서 내보내기 기능을 이용해 웹용 레거시를 생성하세요.

5. 네비게이션은 심플하게

웹사이트 내에 방문하였을 때, 사용자들이 가장 먼저 보고 싶어 하는 내용들은 각자 다릅니다.

물론, 포트폴리오 홈페이지 이므로 포트폴리오부터 보고 싶어 할 수도 있지만, 다른 정보를 원할 수도 있습니다.

예를 들면 나의 약력을 보고 싶다거나, 컨택트 하는 방법을 보고 싶다거나.

각 구성 요소들로 연결되는 링크 주스들은 최대한 간단하게, 잘 보이는 곳에 배치하도록 합니다.

또, 너무 특별하게 하기보다 익숙한 기호들을 이용하고, 위치 역시 사용자들이 자주 접해봤을 곳에 배치한다면, 사용자 경험 개선 효과도 누릴 수 있습니다.

6. 포트폴리오 홈페이지 ! 반응형 디자인은 필수

우리나라에서 98.5%는 스마트폰을 이용하고 있다고 합니다.

또, 정보를 탐색할 때 PC보다 스마트폰이 압도적인 점유율을 가지고 있습니다.

그러므로 스마트폰과 PC, 태블릿 어디에서 봐도 아름다운 포트폴리오 홈페이지가 표현될 수 있도록 RWD를 적용해야 합니다.

반응형 디자인은 모바일 디자인과 다르게 PC에서 조금씩 변형하는 형태이므로 크게 어렵지 않습니다.

@media 태그를 이용해서 시도해보세요.

7. SEO 지식을 익히자!

꾸준히 포트폴리오를 쌓은 포트폴리오 홈페이지는 결국 나를 찾아줄 고객을 기다리는 공간입니다.

만약 SEO 기본 요소들(예를 들면 schema, tag 누락 등)이 제외된다면 나를 알릴 방법이 없습니다.

포트폴리오들을 업로드 하는 플랫폼(핀터레스트 등)이 아니라면 말이에요.

그러므로 유기적인 트래픽 향상을 위해 텍스트, 콘텐츠, 디스크립트, 머리말, 키워드 등을 최적화 하는 게 좋습니다.

특히 저희와 같은 웹 에이전시 등에서는 SEO를 누구보다 잘 알아야 하므로 항상 연구하는 입장입니다.

결국 포트폴리오 홈페이지 운영 경험이 웹디자인 전문회사를 만들어 나가거나, 개인 경쟁력이므로 익혀둬서 나쁠 건 없다고 생각합니다.

콘텐츠 더보기

PAGEWRITER

Start Project

필요하신 서비스가 있으신가요?
아직 윤곽이 잡히지 않은 아이디어도 괜찮습니다. 아이디어에 숨을 불어 넣어드립니다.