Figma로 포트폴리오 만들기
*2020년말에 Figma로 활용하여 포트폴리오를 제작한 경험에 대한 후기 입니다.
*당시의 Figma와 지금의 Figma의 기능적 차이가 있을 수 있습니다.(ex. Variant 기능이 없었음)
개요
한 회사에서 특정 프렌차이즈 프로젝트에 오랜 기간 참여해왔습니다.
많은 일을 해왔지만, 포트폴리오를 정리하다보면 하나의 프로젝트에서 나온 결과물들이라 이걸 어떻게 보여줘야 할지 늘 고민이었습니다.
그룹화
포트폴리오에 담을 작업물들이 대부분 하나의 프로젝트 속에서 파생된 것들 입니다.
이를 일렬로 나열시키는 슬라이드화 방식보다는 나은 방법을 찾고 싶었습니다.
작업물들을 책과 같은 일렬 구조로 설계하기 보다는 그룹핑하여 카테고리화 하는 것이 효율적이라 판단 했고,
아래와 같은 웹 같은 구조를 구상하게 되었습니다.
어떻게?
3개의 대그룹을 형성했고, 해당 그룹에 관련성 있는 작업물들을 각각 정리하기로 했습니다.
그 후의 과제는 "어떤 방식으로 보여줄 것인가?" 였습니다.
기존 PDF화를 고려한 포트폴리오 방식은 작업물들을 순차적으로 보게 하는 방식으로, 제가 가지는 고민을 해소시키지 못하는 방법이었습니다.
(물론, 회사의 채용방식에 방식에 따라 순차적인 구조인 PDF를 선호 할 수도 있습니다.)
저는 포트폴리오를 보는 사람이 카테고리화되어 그룹핑된 작업물들을 효율적으로 볼 수 있게 하는 방식을 고려하고 싶었습니다. 각 작업물들의 목록을 상시로 볼 수 있으며, [A-B-C-D-E] 방식의 정해진 이동이 아니라 [A-D-E-A-C-B]처럼 보는 사람이 스스로 동선을 정할 수 있으면 좋겠다는 생각을 하게 되었습니다.
Figma
제가 생각했던 포트폴리오는 위에 언급한 구조도 있지만, 제작했던 인터랙션 결과물들도 담고 싶었습니다.
웹사이트 같은 구조가 되어야 하는데, 사이트를 제작하기엔 시간과 기술이 부족한 상황이었습니다.
고민 하던 찰나에 떠오른 것이 Figma 였습니다.
<제가 원하는 방향을 실현 시킬 수 있었던 Figma>
- 클라우드 환경 : 주소 형성, 공유
- 프로토타입 기능 : 인터랙션 형성, 동선 구축 가능
- GIF 임포트 : 인터랙션 결과물도 첨부 가능
Make
Figma를 통해 간단한 구조를 가진 유사 웹사이트 같은 형식으로 제작을 했습니다.
포트폴리오를 구성하는 주요 인터랙션은 버튼과 스크롤 이었고, 각 컴포넌트의 인지를 위한 장치를 두었습니다. 버튼에는 Hover효과를, 스크롤바는 Figma로 구현이 힘들었기에 화면 우측에 스크롤을 할 수 있다는 가이드 요소를 넣었습니다.
버튼 Hover와 스크롤 표시
그 밖에도 의도했던 Flow를 위해 Tab 구조를 만들고, 이를 연결시켜주는 작업도 진행했습니다.
Hover 효과도 겸하고 있는 Tab 컴포넌트는 여러 페이지를 연결해주는 허브로써 역할도 겸하게 되었습니다.
결과물
간단한 동선으로 원하는 구조의 포트폴리오 화면을 설계 할 수 있었습니다.
도입부
메뉴 화면에서 원하는 프로젝트로 진입 할 수 있고, 모든 하위 페이지에서 다시 메뉴로 돌아올 수 있게 함
프로젝트 페이지에 배치된 상단 탭을 통해 내부 페이지를 이동하는 구조 호기심으로 시작하여, 툴의 다양한 활용도를 체감해본 계기가 된 것 같습니다.
작업 당시엔 Variants 등 유용한 몇몇 기능이 없었지만, 지금은 Figma에 많은 기능이 추가되어, 더 다양한 형태의 구조를 만들어 볼 수도 있을 것 같습니다.
그 밖에도 Framer를 활용하면, 더 재미난 걸 해볼 수 있을 것 같아 시도할 예정입니다.
