2022년 9월 20일5분 분량

아이디어가 솟아나도록 도와줄 포트폴리오 웹사이트

매우 영향력 있는 산업 디자이너인 디터 람스의 10가지 원칙 중에는 “혁신적인 디자인이 좋은 디자인이다.”라는 원칙이 있는데요. 하지만 점점 혁신적인 웹사이트 디자인을 개척하는 것이 어려워지고 있습니다. 그만큼 경쟁력 있는 분야에서 어떻게 해야 내 포트폴리오 웹사이트를 돋보이게 만들 수 있을까요?

다른 사람들의 포트폴리오 웹사이트와의 차별점은 무엇이며, 차별점을 내 웹사이트에서 어떻게 표현할 것인지를 살펴보는 것 말고도 단순히 다른 사람들의 작품들을 보며 영감을 얻는 것만으로도 충분히 좋은 출발점입니다. 나만의 포트폴리오 웹사이트를 제작하기 전에 Wix를 사용하여 만든 훌륭한 온라인 포트폴리오 웹사이트 15선을 살펴보겠습니다.

01. 크리스티나 바네사

그래픽 디자이너이자 영상 커뮤니케이터인 크리스티나 바네사(Christina Vanessa)는 미(美)에 대한 명확한 안목을 가지고 있습니다. 크리스티나의 포트폴리오 웹사이트에 들어가면 보이는 첫 번째 메인 페이지에서는 크리스티나의 창의적인 직업과 특성이 표현되어 있는데요. 크리스티나의 작업물들을 보여주는 풀스크린의 반복 동영상 위로는 그녀의 이름과 원칙이 적혀 있습니다.

이렇게 소개 페이지에 이어서 ‘Explore’ 버튼을 눌러 들어가게 되는 페이지에서도 여러 가지 디자인 기능들이 포함되어 있어 인상적입니다. 작업물 자체에서부터 페이지 레이아웃을 구성하는 레이어 블럭에 이르기까지 웹사이트의 배색은 조화를 이루면서도 중립적인 분위기를 자아냅니다. 부드러운 색조의 크림, 베이지, 그레이 색상은 부드러운 애니메이션 기능을 통해 더 강조되어 부드러운 느낌을 더해줍니다.

02. 소피 브리테인

브랜딩과 UI/UX 디자인을 전문으로 하는 소피 브리테인(Sophie Brittain)의 UX 포트폴리오 웹사이트는 두 분야 모두에서 자신의 실력을 확실하게 보여주고 있습니다. 소피는 세 가지의 색상, 기하학 도형, 벡터 라인 아이콘, 그리고 넓은 여백을 잘 구성하여 자신의 웹사이트를 잘 정립된 시각 언어로 제작했습니다.

게다가 자신의 이름에 들어가는 알파벳 ‘O’ 대신에 웃는 얼굴을 넣은 섬세한 터치에서 재치가 돋보입니다. 또한 특히 사이트 하단에서 특히 돋보이는 코믹 마이크로카피와 일반적인 소셜바 아이콘을 새롭게 재해석한 것에 주목해보세요. 마지막으로 중요한 것은 소피가 홈페이지에 시선을 사로잡는 파비콘을 포함시킴으로써 조화로운 분위기를 구성했다는 점입니다.

03. 스티브 울프 디자인

Steve Wolf Designs의 포트폴리오 웹사이트에 있는 초고화질 비주얼 이미지들은 마치 제품이 눈 앞에 있는 것 같은 느낌을 선사합니다. 잘 정리된 그리드 레이아웃과 화면 간 비주얼은 작품 자체를 강조해줍니다.

각 이미지에 적용한 마우스오버 효과를 통해 프로젝트 이름을 표시하지만 텍스트는 최소한으로 사용했습니다. 비슷한 스타일의 포트폴리오를 제작하기 위해서는 해당 템플릿을 주목해보세요. 템플릿에 내 작업물을 추가하고 내가 원하는 대로 스타일과 디자인을 표현할 수 있습니다. 또한 내 디자인을 기반으로 웹사이트를 제작할 수 있는 수많은 포트폴리오 웹사이트 템플릿을 살펴볼 수도 있습니다.

04. 웬디 쥬

그래픽 디자이너인 웬디 쥬(Wendy Ju)의 포트폴리오 웹사이트에 들어가자마자 발견할 수 있는 애니메이션은 전반적인 웹사이트의 분위기를 조성하는 역할을 하고 있는데요. 영어와 만다린어로 ‘안녕하세요’ 라는 인사를 책이 펼쳐지는 듯한 형상을 그려내며 방문자를 그녀의 세계로 부드럽게 끌어들입니다. 이 섬세한 애니메이션은 웬디의 미니멀리즘 미학에 어울립니다.

웬디는 Velo by Wix를 활용하여 홈페이지 하단에 재치 있는 커서 인터랙션을 포함시켰습니다. 또한 이 인터랙션은 재미 요소가 될 뿐만 아니라 전체적으로 뉴트럴한 색상 팔레트에 포인트를 주는 역할을 합니다.

05. 데니스 크라웨크

다양한 디자인 분야를 아우르는 만능 디자이너인 데니스 크라웨크(Dennis Krawec)의 포트폴리오에서는 섬세한 면은 찾아보기가 힘든데요. 바로 그 점이 데니스의 웹사이트를 훌륭하게 만듭니다. 인터넷 초기의 80년대 미학에서부터 대중문화와 이국적인 디자인 요소들을 결합한 데니스의 웹사이트는 가장 눈길을 끄는 포트폴리오 웹사이트 중 하나라고 할 수 있습니다.

이미지, 텍스트, GIF 이미지들이 겹쳐져 있는 파격적인 레이아웃을 선보이며, 마치 기분 보드를 보고 있는 듯한 느낌을 줍니다. 데니스의 독특한 스타일은 전체적인 페이지에 걸쳐서 나타남으로써 통일성을 부여하며 진정으로 뚜렷하고 독보적인 개인 브랜드를 형성하고 있습니다.

06. 스튜디오 바가즈

그래픽 디자인 브랜드인 Stduio Bagaz’는 자신들의 포트폴리오 웹사이트를 세련된 디자인으로 제작하여 선보이고 있는데요. 웹사이트는 조직화된 구조 덕분에 심플하면서도 정교함이 돋보이는 디자인은 Studio Bagaz’의 웹사이트 내비게이션에서도 발견할 수 있습니다. 측면에 고정되어 있는 웹사이트 메뉴를 사용하거나 작품 이미지를 직접 클릭하여 페이지 간 이동이 가능합니다.

메뉴는 화면 위로 미끄러지듯이 열리는 라이트 박스 형식으로 되어있다는 점도 한 가지 특징입니다. 이 라이트 박스는 화면을 새로운 구성과 색상 조합으로 가득 채울 뿐만 아니라 사이트 방문자들로 하여금 기존에 보고 있던 페이지에서 이탈하지 않고 다른 페이지를 탐색할 수 있게 해 줍니다.

07. 시유안 예

그래픽 디자이너 시유안 예(Shiyuan Ye)의 포트폴리오 웹사이트를 둘러보면 재밌고 장난기 넘치는 분위기와 시크하면서도 프로페셔널한 분위기가 동시에 느껴지는 것을 발견할 수 있는데요. 시유안은 자신의 개성이 엿보이는 작업 과정을 명확하게 설명하는 대담한 문장으로 자기소개의 운을 띄웁니다. 이동과 상호작용의 원활하게 이루어지면서 확실한 웹디자인 트렌드가 적절하게 사용되고 있습니다.

파스텔 컬러의 애니메이션 블롭들이 페이지 주변을 떠다니며 독특한 홈페이지 디자인을 형성합니다. 시유안의 작품 갤러리와 어우러지는 애니메이션 블롭들의 움직임에서는 엉뚱한 느낌과 인상적인 애니메이션 기술을 동시에 엿볼 수 있습니다. 프로젝트 페이지도 마찬가지로 흥미로운 점을 발견할 수 있는데요. 각 페이지마다 다른 색상 배열을 사용했다는 점이 특이합니다.

08. 데이비드 밀란

디자이너이자 디렉터이며 손글씨 아티스트인 데이비드 밀란(David Milan)은 자신의 예술 센터 무대를 웹사이트로 승화시켰습니다. 헤더에는 가장 중요한 요소만 넣어 심플한 단색 팔레트를 채택하여 사이트 방문자들은 자연스레 이 다채로운 디자인에 주목하게 됩니다.

데이비드의 작품 갤러리는 화면 가로 너비 전체에 걸쳐져 있어 사이트 면적의 대부분을 차지하고 있습니다. 데이비드는 Wix 프로 갤러리를 활용하여 마치 SNS 피드처럼 사이트 방문자들이 아래로 스크롤하면서 작품을 감상할 수 있는 웹사이트 레이아웃을 구성했습니다. 이렇게 직관적인 구조를 통해 점점 더 많은 이미지를 업로드할 수 있어 작업물 내용이 확장될수록 업데이트하기 쉬운 디자인 포트폴리오를 만들 수 있습니다.

09. 라이언 하스킨스

브랜드 디자이너이자 크리에이티브 디렉터인 라이언 하스킨스(Ryan Haskins)의 포트폴리오 웹사이트는 표현력이 뛰어난 타이포그래피에서부터 놀라움을 감출 수 없는데요. 하나의 인터페이스에 3개 이상의 글꼴을 사용하는 것은 사실 디자인 원칙에 어긋나는데요. 하지만 라이언은 극단적인 글꼴 조합을 활용하여 오히려 극적인 효과를 이끌어 내고 있습니다.

이렇듯 모험적이고 규칙을 깨는 라이언의 디자인 접근 방식은 강력한 맹세를 하는 듯 보이는데요. 라이언은 ‘세계적으로 유명하다’ 및 ‘엄청 비싸다’ 라고 쓰인 텍스트 콘텐츠에서 그 대담함을 엿볼 수 있습니다. 더 아래로 내려보면 라이언의 그래픽 디자인 웹사이트만큼이나 독특하고 흥미로운 라이언의 작품들을 살펴볼 수 있습니다. 라이언은 자신의 웹사이트에 그래픽 디자인 경력을 전부 넣지는 않았지만 ‘바이오’ 섹션에 주목할 만한 클라이언트 목록과 많은 인정을 받았던 출판물 디자인 포트폴리오를 공유합니다.