본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

포트폴리오를 더 매력적으로 보여주기

최신 프로젝트 목록을 단순히 나열하는 대신, 잘 구성된 인덱스 페이지를 만들면 사이트 전체가 돋보일 수 있어요. 단순한 목록형 나열이 아니라 사용자와 상호작용할 수 있는 경험으로 이를 만들어 두면, 방문자에게 오래 기억되는 인상을 줄 수 있습니다. 이 글에서는 여러 가지 Framer 컴포넌트를 활용한 방법을 소개하며, 이를 직접 리믹스해 적용할 수도 있습니다.

커지는 이미지에 대한 호버 인터랙션

첫 번째 예시에서는 호버 시 이미지가 나타나는 효과를 사용했습니다. 기본 상태에서 이미지의 불투명도는 0%로 설정되어 있으며, 이미지는 작게 중앙에 배치됩니다. 호버 상태가 되면 이미지를 보이게 하고 크게 키운 뒤 모서리 쪽으로 이동시켜서 역동적인 느낌을 줍니다. 텍스트에는 Difference 블렌딩 모드를 적용해 텍스트 요소에 반투명한 효과를 더했습니다. 각 항목마다 효과가 다르게 적용되어, 각각의 항목에 효과들을 따로 제작했습니다.

큰 사이즈의 이미지 채우기

두번째 예시에서는 목록 항목 위에 마우스를 올리면 이미지가 화면 전체를 채우는 효과가 나타납니다. 기본 상태에서 큰 이미지는 숨겨두고, 호버 시 표시되도록 설정합니다. 또 컴포넌트 왼쪽에서 화살표가 나타나도록 설정했는데, Overflow를 Hidden으로 두어 기본 상태에서는 보이지 않게 했습니다. 컴포넌트는 Stack으로 구성되어 정리되지만, 이미지는 Absolute 위치를 사용해 독립적으로 크기와 위치를 조정했습니다. Properties 패널에서 제목, 이미지, 연도를 추가하여 이 컴포넌트의 버전을 쉽게 커스터마이징 할 수 있습니다.

강조되는 배경이 있는 카드

세번째 예시에서 마우스를 올리면 카드 뒤에 강조되는 배경(Accent)이 나타납니다. 이미지를 살짝 회전시키고, 텍스트와 수직 정렬되도록 아래에서 위로 이동시켜 미세한 움직임을 줍니다. Properties 패널에서 정렬 방향(왼쪽/오른쪽), 제목, 이미지, 강조 배경을 자유롭게 커스터마이징할 수 있습니다.

슬라이딩 되는 비디오 썸네일

네번째 예시에서는 마우스를 올리면 작은 비디오 썸네일이 왼쪽에서 슬라이드되어 나타납니다. 기본 상태에서 비디오 썸네일의 불투명도를 0%로 하고 크기를 줄여둔 뒤, 호버 상태에서는 보이도록 하고 크기를 키워 전체 콘텐츠가 오른쪽으로 이동하는 듯한 효과를 줍니다. Properties 패널에서 비디오 파일, 제목, 연도를 원하는 대로 커스터마이징 할 수 있습니다.

배경 비디오

다섯번째 예시는 여러 항목으로 구성된 긴 리스트를 제작했습니다. 항목에 마우스를 올리면 해당 항목 배경에 비디오가 표시됩니다. 기본 상태에서 상태 표시 여부를 “NO”로 하고, 호버 시에만 “YES”가 되도록 설정합니다. Stack으로 구성된 덕에 모든 컴포넌트가 깔끔하게 정리되어 있습니다. 또한 비디오에는 Absolute 위치를 적용해 크기와 정렬을 자유롭게 조정할 수 있습니다. Properties패널에서 비디오, 제목, 연도, 태그 표시 여부를 쉽게 커스터마이징 할 수 있습니다.

블러처리 된 배경 이미지가 있는 텍스트 마스크

마지막 예시는 블러 처리된 이미지와 텍스트 마스크를 활용한 예시 입니다. 호버 시 블러된 이미지를 화면 전체에 표시하고, 텍스트가 그 이미지를 마스크로 활용해 독특한 효과를 제공합니다. 다만 블러 이미지의 크기는 성능에 영향을 줄 수 있으니 적절히 조정해서 사용해야 합니다. Framer Supply의 Text Mask 컴포넌트를 사용하면 쉽게 마스크를 적용할 수 있으며, 텍스트 마스크 내에서 사용하는 이미지의 Y 오프셋을 조정해 원하는 모양을 만들 수 있습니다.

오래 기억되는 포트폴리오 만들기

단순한 목록을 넘어, 인터랙티브한 포트폴리오 인덱스는 방문자가 사이트에 더 깊은 인상을 느끼게 합니다. 이 글에서 소개한 기법들을 적용하면, 여러분의 작업물을 한층 독창적이고 시각적으로 매력적인 방식으로 보여줄 수 있습니다. 여러분이라면 어떤 방식의 인덱스 효과를 포트폴리오 페이지에 먼저 적용해보고 싶으신가요? 프로젝트를 리믹스하여 여러분 만의 특별한 포트폴리오 페이지를 만들어보세요

Remix →

본 글은 Framer 공식 블로그의 ‘Engaging portfolio index pages to showcase your work’를 번역·각색한 콘텐츠입니다.