🤳🏻Framer로 모바일 명함(feat.포트폴리오) 만들기

안녕하세요! 저는 (취준중인) 프로덕트 디자이너 김혜림입니다.

이번에 Framer를 사용해 개인 명함을 만들어봤어요. 요새 핫한 툴이지만 Framer 사례가 많이 없는 것 같아 작업 과정과 인사이트를 기록하고자 처음 글을 써봅니다😀

⬇️ 우선 만든 웹사이트 링크이자.. 부끄럽지만 저의 포트폴리오입니다 ㅎㅎ

*모바일으로 보는 걸 권장드려요!

💼 만든 이유

(1) 멀티 페르소나를 소개하기 위해

저는 영상영화와 UX/UI를 복수전공한 특이 이력이 있는데요, 그래서 작업물도 영상 작품과 UX/UI, 브랜딩 등 다양한 장르로 이뤄져 있었어요. 그래서 취업용 포트폴리오를 만들 때 하나의 PDF 파일로 정리하기 어려워 각 장르별로 만들었고, 매번 제출할 때마다 프로젝트를 arrange해 PDF로 출력하는 방식이 번거롭게 느껴져서 웹사이트를 만들어야겠다고 생각했어요.

(2) 모바일 친화적인 명함을 만들기 위해

포트폴리오라는 것은 결국 내 역량과 나라는 사람을 '전달'하는 역할을 하고 있어요. 그래서 취업같은 공적인 자리 뿐만 아니라 네트워킹 파티나 모임에서 너무 딥하지 않고 빠르게 내 정보를 전달할 수 있는 포트폴리오 명함이 있으면 좋겠다고 느꼈습니다.

🤹🏻‍♀️컨셉

나의 멀티 페르소나를 보여줄 수 있는 모바일 포트폴리오

📱사용 방법

(1) 배경화면을 보여주며 인사하기!

빠르게 전달해야하는 현장에서는 QR코드를 사용해 웹링크를 전달해요. 저는 QR링크로 배경화면을 만들어 실제로 하고 다녔어요 ㅎㅎ

(2) 다양한 내 프로필을 공유하기

링크를 열면 나오는 메인화면이에요. 상단 탭을 통해 여러 컨셉의 자기소개와 작업물을 소개해요. '이메일 보내기' 버튼을 누르면 메일 주소가 복사되는 기능은 'Copy Clipboard'를 사용해 만들었어요.

*아트디렉터 탭 내용은 만들고 있는 중..

(3)작품 리스트 보기

메인 페이지에 있는 '포트폴리오' 버튼을 눌러 간단한 소개와 작품을 둘러봐요.

(4) 작품 상세 내용 보기

설명/이미지/프로토타입 탭으로 나눴어요. 설명 탭에서 과정을 전달하면서, 빠르게 결과물로 접근할 수 있는 경로를 만들었어요.

특히 만들고 싶었던 부분이 이 프로토타입이었어요. UX/UI는 만든 화면도 많고 플로우나 인터렉션도 중요한 요소라서 한 화면에서 보도록 만들고 싶었어요. 그래서 Figma에서 Embed 링크를 복사해 넣어 프로토타입을 직접 작동할 수 있게 되었어요.

다만 웹에서는 이렇게 디바이스 프레임으로 볼 수 있는데, 모바일로는 프레임이 안나오더라구요.. 😅 Embed는 Border을 넣을 수 없어서 이 부분은 조금 아쉽네요 ㅜ (혹시 방법을 아신다면 살짝 알려주세요)

이렇게 만들어보니 Framer라는 노코드 툴의 장점을 느끼면서 재밌게 작업한 시간을 보낸 것 같아요. 바로 결과가 나오니까 더 재밌었던 것 같아요🙂 또 피그마와 UI가 비슷해서 피그마에 익숙하신 분들이라면 누구나 금방 만들 수 있지 않을까하는 생각도 해봤습니다!

장점

1. 관리에 용이하다

   Framer의 CMS 기능으로 포맷은 유지한 채 여러 프로젝트의 내용만 수정해 퍼블리싱 할 수 있어요.

   

2. 넣고 싶은 기능과 인터렉션을 넣을 수 있다.

   비슷한 멀티링크 서비스로 인플루언서나 유튜버들이 사용하는 littly와 linktree를 찾을 수 있었어요. littly는 프로젝트 이미지를 최대 10장까지 업로드할 수 있었지만 저는 더 이미지가 많고 여러 페이지가 필요했어요. 디자인도 어느 정도 제약이 있어서 빠르게 링크를 만들 땐 좋겠지만 다양한 기능이나 인터렉션은 넣을 수 없다는 단점이 있었어요.

   

아직은 초보자이지만 Framer 유저분들과 많이 소통하면서 재밌는 제품 많이 만들고 싶어요.

읽어주셔서 감사합니다! 😄