Figma에서 스크롤 가능한 자산을 만드는 방법

2023/09/02

Figma에서 콘텐츠를 스크롤 가능하게 만들려면 측면 탭을 탐색해야 합니다. 안타깝게도 기본 사용자 인터페이스에는 자동으로 표시되지 않습니다. 스크롤 가능한 콘텐츠는 디자인 프레임 내에서 많은 정보를 표시하려는 경우 유용합니다. 몇 가지 예로는 랜딩 페이지, 앱 인터페이스 또는 팝업 창이 있습니다.

이 기사에서는 Figma 디자인을 스크롤 가능하게 만드는 방법을 설명합니다.

도형 내에 스크롤 가능한 텍스트 맞추기

간단한 모양 내에서 스크롤 가능한 텍스트를 만드는 것부터 시작해 보겠습니다. 이는 스크롤 가능한 텍스트의 가장 일반적인 예이며 나중에 색상, 글꼴, 윤곽선과 같은 다른 속성을 추가할 수 있습니다.

수행 방법은 다음과 같습니다.

기본 모양을 만듭니다. 이 예에서는 수직 직사각형을 만드는 것이 좋습니다. 왼쪽 사이드바에서 직사각형 도구를 선택하거나 “R” 명령을 사용하면 됩니다. 왼쪽을 누른 채 캔버스 점을 클릭하고 모양을 그립니다.
오른쪽 사이드바의 디자인 탭에서 ‘클립 콘텐츠’ 옵션 옆에 확인 표시를 합니다.
텍스트 도구를 선택하여 텍스트 상자를 만들고 스크롤 가능한 프레임 내에 배치합니다. 사용 중인 콘텐츠를 입력하거나 복사하여 붙여넣으세요.
프레임을 선택하고 인터페이스 오른쪽에 있는 프로토타입 탭으로 이동합니다. 그런 다음 ‘오버플로 스크롤’ 옵션과 원하는 스타일을 선택하세요. 여기서는 ‘수직 스크롤’을 선택하겠습니다.

프로토타입 탭에서 오버플로 스크롤 옵션을 클릭하면 여러 스타일이 있습니다. 예제로 수직 직사각형을 사용하고 있으므로 수직을 선택합니다. 이렇게 하면 텍스트를 위에서 아래로 읽을 수 있습니다. 다른 스타일 중 일부는 다음과 같습니다.

가로 스크롤 – 일부 예에서 사용자는 텍스트를 왼쪽에서 오른쪽으로 스크롤할 수 있습니다. 이 옵션은 조경 형식으로 디자인을 만드는 경우에 적합합니다.
스크롤 없음 – 콘텐츠를 제자리에 고정하려면 스크롤 없음 옵션을 선택하세요.
양방향 – 콘텐츠가 많은 디자인을 만들고 수직 및 수평으로 스크롤합니다.

독자가 콘텐츠와 상호 작용하는 동안 사용하는 노력(클릭)을 최소화하려면 디자인 내에서 스크롤 가능한 기능을 사용해야 합니다. 수많은 텍스트를 클릭하거나 탭하는 대신 마우스 휠을 스와이프하거나 사용할 수 있습니다.

스크롤 가능한 구성 요소를 디자인하는 방법

제품에 따라 콘텐츠 프레임과 콘텐츠 자체를 디자인해야 합니다. 이 프로세스에는 전체 디자인에 색상, 글꼴 및 기타 구성 요소를 추가하는 작업이 포함됩니다. 이러한 요소를 변경하는 것은 쉽지만 올바른 미적 요소를 선택하려면 신중한 고려가 필요합니다.

스크롤 가능한 디자인의 글꼴을 변경하는 방법

가장 먼저 해야 할 일은 스크롤 가능한 디자인의 글꼴을 변경하는 것입니다. Figma는 선택할 수 있는 다양한 스타일을 제공합니다. 가장 간단한 방법은 다음과 같습니다.

변경하려는 스크롤 가능한 프레임의 콘텐츠를 선택합니다.
왼쪽 상단에 있는 드롭다운 메뉴로 이동하여 선택하세요.
사용하려는 글꼴을 찾을 때까지 글꼴을 스크롤하십시오.

디자인하는 브랜드에 특정 서체가 있는 경우 브랜드 이미지와 일관되도록 동일한 서체를 선택할 가능성이 높습니다. 좀 더 여유가 있다면 올바른 예를 선택하기 전에 다양한 예를 실험해 보아야 합니다.

몇 가지 고려 사항은 다음과 같습니다.

디자인 의도 – 타이포그래피 선택은 디자인 의도와 일치해야 합니다. 많은 정보를 명확하게 전달하고 싶다면 덜 장식적이지만 우아한 글꼴을 목표로 하세요.
기타 구성 요소 – 글꼴은 디자인의 다른 구성 요소와 마찬가지로 시각적 요소입니다. 포함하는 프레임 및 기타 구성요소와 일치해야 합니다.
전체적인 미적 및 브랜딩 – 브랜드의 일반적인 느낌도 선택한 글꼴에 영향을 주어야 합니다. 예를 들어, 꽃 배달 서비스는 SAAS 방문 페이지와 동일한 글꼴을 제공하지 않습니다.

올바른 글꼴을 선택하려면 몇 가지 실험이 필요할 수 있지만 몇 가지 구체적인 글꼴 예가 가장 신뢰할 수 있는 옵션입니다.

Roboto – 안전하게 플레이하고 싶다면 Roboto를 사용하세요. 많은 응용 프로그램에서 다재다능하고 중립적인 글꼴로 간주됩니다. 이해하기 매우 쉽기 때문에 많은 사람들이 지침과 랜딩 페이지로 Roboto를 선택합니다.
포핀스(Poppins) – 친근하면서도 모던하고 깔끔한 느낌을 원한다면 포핀스를 선택하세요. 이 글꼴은 좀 더 둥글고 텍스트를 매력적이고 읽기 쉽게 만듭니다.
Raleway – 세련된 럭셔리 브랜드를 디자인할 때 Raleway를 고려해 보세요. 일반적으로 얇지만 무게 변화가 다양하고 전체적으로 우아한 모습을 자랑합니다.
Lato – 친근함, 믿음직함, 진지함이라는 단어가 이 글꼴을 설명하는 데 적합한 단어입니다. 디자이너는 가독성과 명확성이 가장 중요한 제목과 단락 텍스트에 Lato를 사용할 수 있습니다.

선택한 글꼴 크기와 텍스트 스타일도 고려해야 합니다. 일반적으로 헤드라인이나 강조 부분에는 굵은 글씨체를 사용하고 인용문에는 이탤릭체를 사용합니다.

프레임 모양의 색상 변경

글꼴을 변경하는 것 외에도 프레임 모양의 색상도 변경하고 싶을 것입니다. 다시 한 번 말씀드리지만, 정확한 색상은 디자인하려는 브랜드나 미학에 따라 달라집니다. 다행히 Figma의 인터페이스를 사용하면 색상을 쉽게 선택할 수 있습니다.

프레임 색상을 변경하는 방법은 다음과 같습니다.

편집하려는 프레임을 선택합니다.
레이어가 오른쪽 사이드바에 나타납니다. “채우기”섹션으로 이동하십시오.
채우기를 추가하려면 “+”를 선택하십시오.
색상 선택 창이 열립니다. 채우기 색상과 그라데이션을 선택합니다. 정확한 색상을 알고 있는 경우 16진수 코드를 입력할 수도 있습니다.

다른 디자인 요소와 마찬가지로 다양한 색상과 선택한 글꼴이 어떻게 보이는지 실험해야 할 수도 있습니다.

자주 묻는 질문

Figma에 스크롤 가능한 텍스트 명령이 있나요?

불행히도 Figma에는 텍스트를 스크롤 가능하게 만드는 명령이 없습니다. 그러나 위에서 언급한 방법을 사용하면 단 몇 번의 클릭만으로 프로세스를 완료할 수 있습니다.

원하는 오버플로 옵션을 어떻게 결정하나요?

이는 사용 중인 텍스트 유형, 전체 디자인 및 기능에 따라 다릅니다. 세로 스타일은 일반적으로 큰 텍스트를 훑어보는 데 적합합니다.

일반적으로 스크롤 가능한 텍스트 디자인이 필요한 장치 인터페이스는 무엇입니까?

좋은 예는 앱의 디자인 모형입니다. 사용자는 전화를 일반 프레임으로 만들 수 있고 스크롤 가능한 텍스트는 앱의 인터페이스가 될 수 있습니다.

스크롤 가능한 디자인을 만드는 데 Figma가 최선의 선택인가요?

Figma는 스크롤 가능한 디자인을 포함하여 다양한 양식을 만드는 데 가장 적합한 도구 중 하나입니다. 더 좋은 점은 Figma가 무료라는 것입니다. 그러나 특정 개인적 선호도가 있을 수 있습니다. 자신에게 가장 적합한 도구를 찾을 때까지 Adobe Illustrator와 같은 몇 가지 플랫폼을 사용해 보십시오.

디자인을 스크롤 가능하고 사용자 친화적으로 만드세요

Figma에서는 프레임 안에 텍스트를 만드는 것이 쉽습니다. 프레임을 선택한 다음 클립 콘텐츠 옵션으로 이동하면 됩니다. 완료되면 오버플로 스크롤 옵션을 선택할 수 있습니다. 마찬가지로 프레임 색상과 모양, 텍스트 글꼴과 같은 다른 중요한 디자인 요소도 무시해서는 안됩니다. 디자인을 스크롤 가능하게 만드는 것은 랜딩 페이지, 앱 인터페이스 및 팝업 창에 탁월한 선택입니다. 클릭하는 대신 텍스트를 더 쉽게 훑어볼 수 있어 궁극적으로 사용자 경험이 향상됩니다.

Figma에서 콘텐츠를 스크롤 가능하게 만드는 것이 쉽다고 생각하시나요? 올바른 글꼴을 선택하는 것은 어떻습니까? 아래 댓글 섹션을 통해 알려주세요.